Описание языка HTML. Краткая характеристика языка HTML Язык html и его использование

Базовые конструкции языка HTML.

HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Веб-страницы.

Т. е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т. е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением. htm или. html.

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

Для более быстрого знакомства с HTML-кодом можно просматривать понравившуюся вам страницу в режиме "В виде HTML". Для этого в браузере надо выбрать пункт меню "Вид" - "В виде HTML".

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

Как создаются Web-страницы

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

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

Язык гипер-текстовой разметки HTML очень прост в освоении. Его изучение можно сравнить с изучением какого либо лингвистического языка. Если, например в основной единицей является, слово, то в HTML этой минимальной единицей является тег. По существу это есть команды языка разметки веб-страниц html. Любая web-страница, любой сайт состоит из текста, графики и т. д. И все эти радости контролируют маленткие и незаметные тэги. Теги - это то, благодаря чему текст и картинки вместо бессмысленного месива представляют из себя жестко структурированную конструкцию. Именно благодаря тегам текст на сайте радует посетителя разнообразием размеров и цветов, именно теги позволяют чудесным рисункам стоять на предназначенном для них месте при любом разрешении экрана и размере окна браузера. Возможности тегов безграничны, их количество огромно

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

Любой HTML документ, который передается браузеру, должен состоять из некоторых обязательных частей:

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

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

Структура HTML документа

- Начало документа

ЗАГОЛОВОК ДОКУМЕНТА

ТЕЛО ДОКУМЕНТА

- Конец документа

Элементы HTML

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

Foreword

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

Атрибуты

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

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

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

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

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

Таким образом, WIDTH=80 и ALIGN=CENTER - разрешенное сокращение для WIDTH="80" и ALIGN="CENTER". Ссылка на URL, например, HREF=foo. htm, допустима, однако, когда URL используется с атрибутами, он должен быть закавычен, например HREF="http://www. hut. fi/". Существуют некоторые броузеры, которые допускают отсутствие кавычек или наличие элементов с открывающими кавычками без закрывающих. Однако, такую практику лучше не применять.

Создание абзаца, символов пробела, заголовка

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

После открытия страницы в окне Веб-браузера все абзацы ее текста, помеченные тэгом (тегом)

Разделяются пустыми строками, что улучшает ее компоновку и внешний вид.

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

Пример:

абзац выровнен влево... абзац выровнен вправо... абзац выровнен по центру... абзац выровнен по ширине...

Отображение в браузере: абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен влево абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен вправо абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по центру абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине абзац выровнен по ширине

Веб-браузеры автоматически переносят текст внутри абзацев на новую строку. Если стоит задача размещения какого-либо сочетания слов в одной строке, то для этой цели используется тэг (тег) .

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

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

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

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

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

Создание html-документа

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

Как правило, "Блокнот" используют только в тех случаях, когда под рукой нет других инструментов. Сначала создается текстовый документ, а потом сохраняется в формате html. Все страницы сайта должны быть с расширением html.

Язык html является иерархичным. То есть существует специальная структура html-документа. Что это такое? Рассмотрим ниже для наглядности.

Структура html-документа. Пример

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

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

Структура html-документа - основные теги:

Из этих трех тегов состоит каркас всего сайта. Обратите внимание на рисунок. Все эти теги имеют закрывающийся тег со знаком “/”. Если вы пишете от руки, привыкайте ставить сразу оба тега - открывающий и закрывающий.

Выше было сказано, что страницы сайтов имеют расширение.html. То есть если вы создадите текстовый документ, но при этом напишете правильный код, браузер всё равно отобразит вам просто текст. Никакого преобразования кода не будет.

Раздел head

На рисунке под пунктом 3 указан раздел head. В этом разделе указывается служебная информация. Например, можно указать кодировку (пункт 4) и заголовок страницы (пункт 5).

Заголовок должен быть всегда. Без него ни один поисковик не сможет определить название контента (текста) на веб-странице. А это плохо для продвижения сайта. Более того, в браузере наверху не будет указан заголовок страницы. Это неудобство для пользователя.

Структура html-документа такова, что указывается только в разделе head. Если тег указать в разделе body или после него, то обработчик на него не обратит внимания.

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

Подключение стилей

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

Подключается файл следующим образом.

В атрибуте href указывается путь до файла. Если в пути будет ошибка, то стили не загрузятся. Также обязателен атрибут type, который указывает, что это файл css.

Другим вариантом является определение стилей прямо в разделе head.

Но этот вариант также не очень рекомендуется. Эти методы сильно отличаются тем, что файл css может быть одним для всего сайта, и все изменения в нем будут мгновенно применяться ко всем страницам. А если вы используете метод, который указан на рисунке выше, то вам придется вносить изменения во все существующие страницы сайта.

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

Подключение скриптов

Скрипты подключаются следующим образом.

Здесь обязательны два атрибута: type и src. В первом указываем, что это файл Javascript, а второй - где расположен файл. Если вы допустите опечатку, то ничего работать не будет.

Раздел body

Структура html-документа такова, что размещать содержание, которое будет видно пользователю, нужно только в разделе body. Название тега говорит само за себя.

Здесь указывается весь основной код страницы, который может включать неограниченное число элементов. Но чем длиннее код, тем дольше он будет обрабатываться.

Рассмотрим самые основные теги, которые можно использовать в области body. Основных не так много. Все остальные вы будете узнавать по мере роста ваших знаний и практики.

Основные теги

Структура html-документа требует обязательного порядка написания элементов. Теги всегда должны по краям обрамляться скобками . Без этого браузер не поймет, что это тег. После открывающейся скобки всегда следует имя элемента (тега). Если вы допустите пробел между < и именем, то браузер посчитает это текстом.

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

Порядок атрибутов не имеет значения. Но их написание (оформление) очень важно. Всегда сначала идет имя атрибута, потом знак равенства, затем в кавычках пишется значение атрибута. Значение может быть разным - цифровое или текстовое.

Атрибут src во всех тегах указывает путь файла, который нужно подгружать. Атрибут alt во всех элементах указывает короткое описание. В данном случае загружается фотография bird.jpg с описанием - фотография птицы.

Кроме этого, в можно было указать размеры, только ширину или высоту, заголовок, выравнивание, класс стиля или рамку.

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

	Назначение
	Изображения
	Перенос текста на новую строку
…	Жирный текст
	Перечеркнутый текст
	Подчеркнутый текст

Как всё это можно представить в голове

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

Термин HTML (HyperText Markup Language) означает "язык маркировки гипертекстов". Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.0 и 3.2. Текущую спецификацию HTML всегда можно найти на сервере W3C .

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров. Когда документ создан с использованием HTML, WEB-браузер может интерпретировать HTML для выделения различных элементов документа и первичной их обработки. Использование HTML позволяет форматировать документы для их представления с использованием шрифтов, линий и других графических элементов на любой системе, их просматривающей.

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

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

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

HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров. Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора. Например, HTML редакторы, такие, как "Netscape Navigator Gold" компании Netscape позволяют создавать документы графически с использованием технологии WYSIWYG(What You See Is What You Get). С другой стороны, большинство традиционных средств для создания документов имеют конвертеры, позволяющие преобразовывать документы к формату HTML.

Все тэги HTML начинаются с "" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа: Заголовок документа

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

Заголовок документа

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

Некоторые тэги, такие, как

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

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом . Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

...тело документа...

Заголовочная часть документа

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

Список сотрудников Заголовок документа

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

Комментарии

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

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

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

Тело документа

Тело документа должно находиться между тэгами и . Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Тэг абзаца

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

Если вы не разделите абзацы тэгом

Ваш документ будет выглядеть как один большой абзац.

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

Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки. Ссылки могут указывать на другой документ, специальное место данного документа или выполнять другие функции, например запрашивать файл по FTP-протоколу для отображения его браузером. URL может указывать на специальное место по абсолютному пути доступа, или указывать на документ в текущем пути доступа, что часто используется при организации больших структурированных WEB-сайтов. Возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.

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

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

Это наиболее используемая техника при проектировании документов, называемая иногда "inline image".

Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-браузером, создается специальные экранные элементы GUI, такие, как поля ввода, checkboxes, radiobuttons, выпадающие меню, скроллируемые списки, кнопки и т.д. Когда пользователь заполняет форму и нажимает кнопку "Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании документа), информация, введенная пользователем в форму, посылается HTTP-серверу для обработки и передаче другим программам, работающим под сервером, в соответствии с CGI (Common Gateway Interface) интерфейсом.

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

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

Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определенном принтере и на бумаге заданного формата. Когда документ размещен в Интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.

Особенность описания документа средствами языка HTML связана с принципиальной невозможностью достижения абсолютной точности воспроизведения исходного документа. Предполагается, что документ будет широко доступен в Интернете, и поэтому неизвестно, как будет организовано его воспроизведение. Документ может быть представлен на графическом экране, выведен в чисто текстовом виде или просто «прочитан» программой синтеза речи. Разметка HTML во всех этих случаях должна быть принята во внимание. Поэтому ! язык HTML предназначен не для форматирования документа, а для его функциональной разметки . Под разметкой понимается использование специальных кодов, легко отделяемых от смыслового содержания документа и используемых для реализации гипертекста. Применение этих кодов подчиняется строгим правилам, определяемым спецификацией языка HTML.Например, документы обычно начинаются с заголовков. Свойство части документа «быть заголовком» - это не особенность форматирования документа, а характеристика его содержания. Конкретное средство отображения документа (браузер) выбирает свой способ пред­ставления части документа, описанной как заголовок.

Теги HTML

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

Тег - это набор символов. Все теги начинаются с символа «меньше» (). Пару этих символов иногда называют угловыми скобками. После открывающей угловой скобки идет ключевое слово, определяющее тег.

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

Тэги можно разделить на две большие группы.

Тэги одной группы, называемые контейнерами , воздействуют на часть документа, заключенную между ними. Они имеют два компонента: открывающий (начальный) и закрывающий (конечный). Закрывающий тэг имеет то же название, что и открывающий, но перед его названием ставится косая черта (символ / (слэш)). Между открывающим и закрывающим тэгами могут располагаться текст или другие тэги.

Автономные (одиночные) тэги не имеют конечного компонента. Они вызывают однократное действие или при их интерпретации в отображаемый документ вставляется тот или иной объект. Например, тэг вызывает вставку рисунка из файла pict.gif.

Как правило, один тег HTML воздействует только на часть доку­мента, например на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создает эффект, а закрывающий - прекращает его действие. Закрывающие теги начи­наются с символа косой черты (/).

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

Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком.

При отображении документа в браузере сами теги не отображаются, но влияют на способ отображения документа.

Теги связываются с определенным фрагментом документа и указывают способ внешнего представления содержания этих фрагментов и их интерпретации Web-клиентом.

С функциональной точки зрения теги HTML можно распределить по следующим категориям:

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

Теги, использующиеся для логической структуризации текста документа, например, для выделения заголовков, разбиения на абзацы, выделения цитат, создания списков, таблиц и т.п.;

Теги форматирования текста, описывающие параметры шрифтов, цвета и т.п.;

Теги организации гиперссылок;

Теги, устанавливающие связи HTML-файла с внешними объектами, например, графическими, звуковыми файлами и т.п.;

Теги создания форм, обеспечивающие возможность пользователю вводить информацию и передавать ее Web-серверу;

Базовый вариант языка HTML обладает рядом недостатков:

Отсутствие средств, позволяющих динамически управлять внешним видом документа;

Отсутствие средств, позволяющих легко менять внешнее оформление Web-документов без переделки самого документа, например, таблиц стилей;

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

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

Атрибуты тегов

Эффект применения тега может видоизменяться путем добавления атрибутов. В парных тегах атрибуты добавляются только к открывающему тегу.

! Атрибуты представляют собой дополнительные ключевые слова, отделяемые от ключевого слова, определяющего тег, и от других атрибутов пробелами и размещаемые до завершающего тег символа «>». Способ применения некоторых атрибутов требует указания значения атрибута. Значение атрибута отделяется от ключевого слова атрибута символом «=» (знак равенства) и заключается в кавычки.

Атрибуты элемента определяют его свойства.

Примеры тэгов с атрибутами:

– задает светло-синий фон для документа,

текст – парный тэг, дает указание Браузеру вывести заключенный в "контейнер" текст символами, увеличенными относительно базового размера (SIZE="+2") и красного цвета (COLOR="RED").

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

Определение HTML как языка разметки основывается на том, что при удалении из документа всех тегов получается текстовый документ, совершенно эквивалент­ный по содержанию исходному гипертекстовому документу. Таким образом, при отображении документа HTML сами теги не отображаются, но влияют на способ отображения остальной части документа.

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

HTML-документ - это обычный текстовый документ, может быть создан как в обычном текстовом редакторе (Блокнот) , так и в специализированном, с подсветкой кода (Notepad++, Visual Studio Code и т.п.) . HTML-документ имеет расширение.html .

HTML-документ состоит из дерева HTML-элементов и текста. Каждый элемент обозначается в исходном документе начальным (открывающим) и конечным (закрывающим) тегом (за редким исключением).

Начальный тег показывает, где начинается элемент, конечный - где заканчивается. Закрывающий тег образуется путем добавления слэша / перед именем тега: … . Между начальным и закрывающим тегами находится содержимое тега - контент.

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

Теги могут вкладываться друг в друга, например,

Текст

. При вложении следует соблюдать порядок их закрытия (принцип «матрёшки») , например, следующая запись будет неверной:

Текст

.

HTML-элементы могут иметь атрибуты (глобальные, применяемые для всех HTML-элементов, и собственные). Атрибуты прописываются в открывающем теге элемента и содержат имя и значение, указываемые в формате имя атрибута="значение" . Атрибуты позволяют изменять свойства и поведение элемента, для которого они заданы.

Каждому элементу можно присвоить несколько значений class и только одно значение id . Множественные значения class записываются через пробел, . Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

Браузер просматривает (интерпретирует) HTML-документ, выстраивая его структуру (DOM) и отображая ее в соответствии с инструкциями, включенными в этот файл (таблицы стилей, скрипты). Если разметка правильная, то в окне браузера будет отображена HTML-страница, содержащая HTML-элементы - заголовки, таблицы, изображения и т.д.

Процесс интерпретации (парсинг) начинается прежде, чем веб-страница полностью загружена в браузер. Браузеры обрабатывают HTML-документы последовательно, с самого начала, при этом обрабатывая CSS и соотнося таблицы стилей с элементами страницы.

HTML-документ состоит из двух разделов - заголовка — между тегами … и содержательной части — между тегами … .

Структура веб-страницы 1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD) . DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

...

Элементы, находящиеся внутри тега , образуют дерево документа, так называемую объектную модель документа, DOM (document object model) . При этом элемент является корневым элементом.

Рис. 1. Простейшая структура веб-страницы

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

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

, , и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, является потомком , а элемент

Является потомком одновременно для и .

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 и . Тег

Является родительским только для .

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы , ,

И являются дочерними по отношению к .

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 и — элементы одного уровня, так же как и элементы , и

Являются между собой сестринскими.

1.1. Элемент 1.2. Элемент

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

1.2.1. Элемент

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

1.2.2. Элемент

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

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

С помощью тега можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url: