Основы языка гипертекстовой разметки html конспект

Обновлено: 07.07.2024

Стремись не к тому, чтобы добиться успеха, а к тому, чтобы твоя жизнь имела смысл.

Альберт Эйнштейн

Вопросы к экзамену

Для всех групп технического профиля

Учу детей тому, как надо учиться

Часто сталкиваюсь с тем, что дети не верят в то, что могут учиться и научиться, считают, что учиться очень трудно.

Лекция 11 Язык гипертекстовой разметки HTML. Основные понятия.

I. Основные сведения об HTML.

За последние годы разработки для Интернета эволюционировали от статических страниц до динамических информационных систем. Некоторое время назад создание современных Web-страниц не требовало практически ничего, кроме совершенного владения языком разметки гипертекста (Hypertext Markup Language, HTML).

HTML представляет собой простой язык обработки текстов; на этом языке при помощи набора тегов (tags) создается документ, который можно просматривать специальной программой просмотра Web (browser).

HTML — не язык программирования в том смысле, как C++ или Visual Basic; он больше напоминает средства форматирования документов с использованием управляющих последовательностей. Кодирование на HTML часто сравнивают с созданием документа в формате Microsoft Word путем набивки кодов форматирования прямо в Notepad. Очевидно, что функциональность этого крайне мала.

Информация в документах Web может быть найдена по ключевым словам. Это означает, что каждый обозреватель Web содержит определенные ссылки, через которые образуются гиперсвязи, позволяющие миллионам пользователей Internet вести поиск информации по всему миру.

Гипертекстовые документы создаются на базе языка HTML (Hyper Text Markup Language). Этот язык весьма прост, управляющие коды его, которые, собственно, и компилируются обозревателем для отображения на экране, состоят из текста ASCII. Ссылки, списки, заголовки, картинки и формы называются элементами языка HTML.

В настоящее время существует масса редакторов Web-страниц, которые не требуют от вас знаний основ HTML. Но для того чтобы уметь профессионально подготавливать гипертекстовые документы, вы должны знать их внутреннее строение, то есть код документа HTML.

HTML позволяет вам формировать различную гипертекстовую информацию на основе структурированных документов.

II. Описание HTML

HTML-документ - это обычный текстовой файл. Используя любой Web-обозреватель, вы можете просмотреть результат вашей работы, просто загрузив в него созданный на основе синтаксиса HTML текстовой файл.

Гипертекстовый язык предоставляет только информацию для чтения. Это означает, что редактировать Web-страницы может лишь тот, кто их создал, а не простой пользователь Сети.

Самый главный элемент гипертекстового языка - это ссылки. В мировой паутине вы просто нажимаете на ссылку и мгновенно оказываетесь в другой точке земного шара на выбранной вами страничке.

Тэг - оформленная единица HTML-кода.

Тег HTML состоит из следующих друг за другом в определенном порядке элементов:

левой угловой скобки (такой же, как символа "больше чем").

Большинство тегов имеют открывающий элемент <> и закрывающий . Между ними и находятся коды, которые распознает Web-обозреватель

В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом. Некоторые теги, например , являются элементами HTML сами по себе, и для них соответствующий конечный тег неверен.

Для каждого тега определяется множество возможных атрибутов. Большинство тегов допускает один или несколько атрибутов, однако атрибутов может и совсем не быть. Спецификация атрибута состоит из расположенных в следующем порядке:

имени атрибута, например WIDTH
знак равенства (=)
значения атрибута, которое задается строкой символов, например, "80".

Всегда полезно заключить значение атрибута в кавычки, используя либо одинарные ('80'), либо двойные кавычки ("80"). Строка в кавычках не должна содержать такие же кавычки внутри себя. Так, если дата заключена в двойные кавычки, используйте одинарные кавычки для последующего заключения в кавычки, и наоборот. Вы можете также опустить кавычки для значений атрибутов, которые состоят только из следующих символов:

символов английского алфавита (A - Z, a - z)
цифр (0 - 9)
промежутков времени
дефисов (-)

, например HREF /../" target="_blank">http://infofiz.ru/". Существуют некоторые браузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

В пределах значения атрибута теги HTML не воспринимаются. А escape последовательности распознаются и интерпретируются, как символы.

Значения атрибутов должны быть отделены пробелами или незаполненными строками.

Что касается имен тегов, атрибутов и большинства значений атрибутов, то HTML нечувствителен к регистру. Вы можете, например, написать TITLE, или Title, или title, или даже tItLE, если Вам нравится. Но существуют и чувствительные к регистру конструкции языка, а именно:

escape последовательности (более официально называемые символьными объектами), которые начинаются знаком & (например, <)
URL, так как он может содержать наименования файлов, которые являются чувствительными к регистру во многих операционных системах (например, в Unix).

Когда документ выводится на экран, пробелы и пустые линии не сохраняются, за исключением текста, заключенного в теги PRE (предварительно отформатированный текст). То есть любая последовательность пробелов, символов табуляции и пустых линий эквивалентна единственному пробелу в файле HTML. С другой стороны, пробел в файле HTML может быть представлен с использованием любого количества пробелов или новыми (пустыми) строками.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки":

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML , которая обычно выглядит так:

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 3.2, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей.

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера . Необходимо отметить, что любой HTML-документ открывается тэгом и им же закрывается.

Затем, между тэгами и следует разместить заголовок документа (между тегами и ), и тело документа (между тегами и ).

Между тегами HEAD всегда должна находиться информация о кодировке страницы, например , и теги определяющие название страницы .

Только теперь между тегами содержимого документа можно располагать свою информацию, рисунки, видеофайлы, аудиофайлы.

Пример самого короткого HTML-документа:

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.

Заголовок содержит "техническую" информацию о документе, хотя чаще всего используется только для обозначения его названия.

Тело документа - святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тэгами и

Если Вы являетесь автором материалов или обладателем авторских прав, и Вы возражаете против его использования на моем интернет-ресурсе - пожалуйста, свяжитесь со мной. Информация будет удалена в максимально короткие сроки.

Спасибо тем авторам и правообладателям, которые согласны на размещение своих материалов на моем сайте! Вы вносите неоценимый вклад в обучение, воспитание и развитие подрастающего поколения.

Свою историю HTML начинает с 1986 года, когда Международной организацией по стандартизации (ISO) был принят стандарт озаглавленный "Standard Generalized Markup Language" - SGML. Этот стандарт был посвящен описанию обобщенного мета языка, который позволял строить системы логической структурной разметки любых разновидностей текстов. Он соответствовал международному стандарту ISO 8879.

Создатели SGML стремились к тому, чтобы размеченный текст могла без труда интерпретировать любая программа, работающая на разных компьютерных платформах и устройствах вывода.

SGML является не готовой системой разметки текста, а определяет лишь синтаксис записи элементов разметки – тегов и их атрибутов, а также правила определения новых тегов и указания структурных отношений между ними.

Идеология SGML повлияла на многие компьютерные разработки, однако сам по себе язык не получил обширного распространения.

В 1991 году, британским ученым Тимом Бернерсом Ли, сотрудником Европейского института физики частиц (CERN) в Женеве, была разработана система передачи гипертекстовой информации через интернет. А за основу нового языка был взят SGML. Язык разметки гипертекста был назван - HTML (Hyper Text Markup Language) и он является до сих пор самым известным из приложений SGML. HTML в первую очередь был разработан для обмена научной и технической документации для использования людьми, не являющимися специалистами в области верстки. Путем определения небольшого набора структурных и семантических элементов, получались достаточно простые и в тоже время красиво оформленные документы. HTML успешно справился с проблемами SGML.

Как и положено изначально язык HTML разделял все особенности идеологии SGML. Но в 1993 году появляется версия языка HTML 1.2, которая имела сорок с небольшим тегов, три из которых не рекомендованы к использованию, так как указывали на физические параметры предоставления документа, что противоречило идеологии SGML. Вся разметка была логической и только в описательной части стандарта можно было увидеть что-то типа ”в графических браузерах действие этого тега может передаваться жирным начертанием”.

Программа Mosaic была единственной в то время браузером поддерживающим графические возможности. Она была разработана в Национальном центре суперкомпьютерных приложений США (National Center for Supercomputer Applications - NCSA), там же, кстати, была разработана WWW (World Wide Web). По этой причине никаких противоречий между официальными стандартами и их реализацией в браузерах тогда не существовало.

В апреле 1994 года был образован Консорциум W3C (World Wide Web Consortium). Так как официальной спецификации HTML 1.0 не существовало, W3C начал заниматься подготовкой спецификации HTML следующей версии. Но чтобы стандартная версия отличалась от всех предыдущих, ей сразу присвоили номер 2.0. Разработка спецификации HTML 2.0 шла не спеша и лишь в сентябре 1995 года она была утверждена. Из больших дополнений был добавлен лишь механизм форм для отсылки информации с компьютера пользователя на сервер.

Тем временем Консорциум W3 в параллель со спецификацией 2.0 занимался обсуждением HTML 3.0. Она была предложена в марте 1995 года. Третья версия предлагала много новых возможностей: поддержка таблиц, обтекание изображения текстом, отображение сложных математических формул, примечания. Поддержка этого стандарта браузерами того времени была не удовлетворена.

Авторы HTML 3 добавили поддержку нового средства - иерархические стилевые спецификации (Cascading Style Sheets, CSS). Это нововведение нужно было для того, чтобы разрешить назревшее к тому времени противоречие между идеологией структурной разметки и потребностями пользователей, которым в первую очередь нужно было гибкость и обширные возможности визуального представления. CSS имеет свой синтаксис и является формально независимой от HTML.

Следующей версией HTML стала 3.2 и в ней были опущены многие нововведения из версии 3.0.

18 декабря 1997 года бала принята четвертая версия HTML. Она содержала как и третья много элементов, специфичных для отдельных браузеров. Хотя в HTML 4.0 произошла чистка элементов из предыдущих версий спецификаций. Многие элементы были помечены как устаревшие и не рекомендуемые к использованию. Вместо них рекомендовалось использовать таблицы стилей CSS.

HTML 4.01 утвердили 24 декабря 1999. Изменения принятые в нем были более значительные, чем, кажется на первый взгляд.

Сейчас W3C занимается разработкой пятой версии языка HTML. Ее черновой вариант стал доступен 20 ноября 2007 года.

В параллель ведется также разработка XHTML (Extensible Hypertext Markup Language) - расширяемый язык разметки гипертекста. В нем предъявляются более строгие требования к синтаксису, чем в HTML. XHTML 1.0 был утвержден 26 января 2000 года в качестве рекомендации W3C. Вариант XHTML 1.1 одобрен в качестве рекомендации консорциума 31 мая 2001 года.

Цель: дать понятие о HTML, научить создавать HTML – документ; развивать память, логическое мышление, речь; воспитывать интерес к предмету.

Тема: Основы языка гипертекстовой разметки документов HTML.

Оборудование: ПЭВМ.

Организационное начало.

Работа с дежурными.

II. Работа по осмыслению и усвоению нового материала.

Объявление темы и цели урока.

- Тема урока " Основы языка гипертекстовой разметки документов HTML". Сегодня мы узнаем, что же такое HTML и для чего он нужен, научимся создавать HTML – документы.

2. Объяснение нового материала.

а) Что такое HTML?

Всемирная паутина состоит из множества связанных между собой электронных документов, представляющих информационные данные, описанные с помощью специальных технологических правил. Эти правила составляют на языке гипертекстовой разметки HTML (Hyper Text Markup Language).

Многие называют HTML языком программирования, это не совсем верно, HTML является языком разметки электронных документов.

Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называют браузерами. Основная функция браузера заключается в интерпретации кода HTML и выходе визуального результата на экран монитора пользователя. Существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются 3 программы: Internet Explorer, Netscape Navigator и Opera.

Оборудование: мультимедийная установка, программа презентаций Microsoft Office PowerPoint 2003, браузер Internet Explorer 6.0 или более новый, раздаточный материал.

Предварительный просмотр:

Самоанализ урока информатики в 10 А классе средней школы №4

города Асино Томской области

Учитель Кривенцов Л.А.

Специфика данного урока в том, что на нем невозможно выполнить всё, а лишь предложенный минимум, поэтому для учащихся, которые справились быстрее остальных в рамках данной темы был большой выбор того, что еще можно было сделать (кроме форматирования текста).

Задачи, которые я поставил перед собой перед проведением урока:

Сформулировать основные принципы создания WEB-страниц;
Познакомить учеников с основными командами оформления текста;
Продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц;
Сформировать навыки и умения создания простейших WEB-страниц;

Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль;

Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Для достижения поставленных целей я выбрал традиционный урок формирования и закрепления умений и навыков.

Рассмотрев подробно этапы пройденного урока, я выделил следующее:

Дидактической задачей первого организационного этапа являлась подготовка учащихся к работе на уроке, постановка задачи. Систематичность организационного воздействия - взаимное приветствие, фиксация отсутствующих, организация внимания и положительная установка на урок позволили организационный момент сделать кратким.

Для более лучшего запоминания самых важных тегов и атрибутов, учащимся был дан кроссворд, который они заполняли на протяжении всего урока. Этот вид работы, ассоциированный у каждого человека со свободным временем (временем отдыха), позволял учащимся не входить в режим напряжения, тем более время на его разгадку ограничивалось лишь уроком. Важный момент здесь заключался и в самостоятельной оценке своей работы.

При изучении данной темы учащимся был просто необходим раздаточный материал (таблица с основными тегами и атрибутами), благодаря которому время, отведённое на урок, потрачено максимально рационально.

Считаю, что в результате проведения урока удалось закрепить у учащихся знания и умения, которые необходимы для создания простейшей web-странички. Кроме этого, удалось сформировать навыки самостоятельного принятия решения, т.к. обучающиеся весьма быстро определились с темами своих будущих проектов.

Основы HTML в информатике нужно знать всем веб-мастерам, даже тем, кто использует для создания документов визуальные редакторы или конструкторы сайтов. Проверка орфографии в Word не отменяет необходимость знания русского языка. Так и наличие визуальных инструментов для программирования не отменяет необходимости знать их родной язык разметки html. Без начальной базы знаний невозможно написать документ так, как пользователь считает нужным.

Откуда появился HTML

На основе языка разметки документов SGML в начале 90-х г. Тимом Бернерсом-Ли был создан язык разметки гипертекста HTML. Однако он так и остался бы теорией, но М. Андриссен и группа студентов Иллинойского университета разработали первый браузер — Mosaic и запустили его бесплатное распространение. Во Всемирной паутине браузер демонстрировал гипертекстовые странички. С этого момента началось развитие веб-страниц и веб-серверов.

Благодаря своим достоинствам язык html стал использоваться повсеместно, что требовало создание стандартов для его использования, иначе в дальнейшем возникло бы разночтение. Консорциум W3C создал и принял первую спецификацию hypertext markup language. Со временем в язык вносились изменения и возникали следующие спецификации. Сейчас во всём мире принято использовать HTML5.

Что такое веб-документ

Язык html — специально стандартизированный, служащий для разметки документов в интернете.

В обычном понимании это просто текстовый файл. Он содержит в себе набор команд стандартной гипертекстовой разметки, назначение которых — указать браузерам, как правильно отображать содержимое. Примечательно, что для использования документа в интернете, текста собственно может и не быть, а вот структура должна присутствовать обязательно.

Гипертекстовые файлы имеют 2 расширения — .htm или. html, работать с ними можно в обычном блокноте Windows. Но гораздо удобнее использовать специально предназначенные инструменты. Веб-редакторы, которыми можно оформить содержание страницы, бывают:

Визуальные (принцип WYSIWYG) — WebProject, WYSIWYG Web Builder и т. п.
Не визуальные (только чистый код) — Notepad, Free HTML Editor и пр.
Комбинированные — Adobe Dreamweaver, FrontPage, Word и др.

В каких редакторах лучше работать, зависит от личных предпочтений и навыков владения инструментами веб-дизайнера.

Базовые элементы и команды языка html называются тегами (tag). Они являются регистронезависимыми и всегда находится в угловых скобках.

Структура тега выглядит так: . Параметры также называют атрибутами. Пример: .

Теги делятся на 2 большие группы:

Одиночные (например, ,
).
Контейнерные или парные.(

Формирование структуры

Любая страница, которую пользователи видят в браузере, имеет чёткую структуру — синтез html-элементов и текста.

Заголовок и тело страницы записываются в парный тег , который сообщает браузеру, какое расширение ему нужно обработать. Согласно стандартам W3C, первым должен стоять тег . Он описывает тип документа — DTD и даёт браузеру команду как следует обрабатывать текущую страницу, так как не только есть разные версии HTML, но есть и другие технологии, например, XHTML, XML.

Полностью веб-документ будет иметь следующую структуру:

Читайте также: