HTML - расшифровывается как «язык гипертекстовой разметки» (англ. HyperText Markup Language), который является наиболее широко используемым языком для написания веб-страниц.
- Гипертекст относится к способу связывания веб-страниц (HTML-документов). Таким образом, ссылка, доступная на веб-странице, называется гипертекстом.
- Как следует из названия, HTML - это язык разметки, что означает, что Вы используете HTML, чтобы просто «разметить» текстовый документ с тегами, которые сообщают веб-браузеру, как структурировать его для отображения.
Первоначально HTML был разработан с целью определения структуры документов, таких как заголовки, списки, абзацы и так далее, чтобы облегчить обмен научной информацией между исследователями.
Теперь HTML широко используется для форматирования веб-страниц с помощью различных тегов, доступных на языке HTML.
HTML-документВ следующем примере показан HTML-документ в простейшей форме:
Заголовок документа Заголовок
Здесь содержание документа...
Давайте сохраним код в HTML-файле document.html с помощью вашего любимого текстового редактора. И откройте файл с помощью веб-браузера, такого как Internet Explorer, Google Chrome или Firefox и др. Он должен показать следующий результат:
Теги для создания HTML-документаКак уже говорилось ранее, HTML является языком разметки и использует различные теги для форматирования содержимого. Эти теги заключены в угловые скобки . Большинство тегов имеют соответствующие закрывающие теги, за исключением нескольких тегов. Например, тег имеет закрывающий тег и тег имеет тег закрытия и другие.
В приведенном выше примере используются следующие теги для создания HTML-документа:
| Тег | Описание |
| Этот тег определяет тип документа и версию HTML. | |
| Этот тег охватывает полный HTML-документ и в основном состоит из заголовка документа, который представлен тегами ... и телом документа, которое представлено тегами ... . | |
| Этот тег представляет заголовок документа, который может содержать другие html-теги, такие как , и т.д. | |
| Тег используется внутри тега , чтобы указать название документа. | |
| Этот тег представляет тело документа, в котором хранятся другие html-теги, такие как , , И другие. |
|
| Этот тег представляет заголовок. | |
| Этот тег представляет абзац. |
Знание этих тегов вполне хватит чтобы создать html-документ (html-страницу).
Чтобы изучить HTML, Вам нужно знать различные теги и понимать, как они ведут себя при форматировании текстового документа. Учить HTML легко, так как пользователям нужно только выучить использование разных тегов, чтобы отформатировать текст или изображения, тем самым сделать красивую веб-страницу.
Структура HTML-документаСтруктура типичного HTML-документа будет иметь следующий вид:
Тег декларации документа Теги, связанные с заголовком документа Теги, связанные с телом документа
Мы изучим все теги заголовка и тела в последующих уроках, теперь давайте посмотрим, что такое тег декларации документа.
ДекларацияТег декларация используется веб-браузером для понимания версии HTML, используемой в документе. Текущая версия HTML - 5, и она использует следующее объявление:
Существует много других типов объявлений, которые могут использоваться в документе HTML в зависимости от того, какая версия HTML используется. Мы увидим более подробную информацию об этом при обсуждении тега вместе с другими тегами HTML.
Я постараюсь вести рассылку по принципу «от простого к сложному». Вести я ее буду именно в таком формате для того, чтобы человек, который захотел бы изучить основы сайтостроения, смог сразу же, после выпуска рассылки, на практике выполнять изложенный материал.
Но сразу же хочу оговориться, что, в частности, язык HTML – это очень обширный язык, который непрерывно развивается. И поэтому, для того, чтобы овладеть этим языком на высоком уровне, Вы должны тщательно изучить основы (т.е. выпуски моей рассылки). И параллельно с этим практиковаться .
Изучая основы языка HTML, мы будем обращаться к CSS стилям. А значит, мы будем изучать и CSS. Но это чуть позже. Также мы будем обращаться за помощью к javascript.
Сегодняшний вступительный урок, мы начнем с изучения структуры HTML документа и основных тегов HTML.
Поехали…
Каждый HTML документ начинается со строчки:
XHTML
|
В общем случае эта строчка говорит браузеру, который открывает нашу страницу, на какие стандарты ему опираться.
Тег весьма разнообразен, и от его модификации зависит то, как будет отображаться содержимое на Вашей странице.
Однако, если умело расположить все элементы и блоки на странице и применить стиль, то все будет одинаково хорошо работать во всех браузерах с нужным .
Но, пока мы не знаем, ни что такое блоки, ни что такое стили и как эту «абрукадабру» применять, считаю нужным вернуться к подробному рассмотрению , когда мы уже будем что-то уметь и сможем реально оценить его работу.
А пока движемся ниже по странице.
Кстати, а почему я начал рассматривать HTML документ с верхней части страницы?
Потому что браузер загружает страницу и «считывает код» сверху вниз, слева направо. (Впрочем, как мы и читаем книги).
Наверное, не совсем понятно слово тег?
Вообще говоря, тег – это инструкция, которая говорит браузеру, что в данном месте документа нужно сделать.
С помощью тегов мы создаем наши страницы. Все теги заключены в так называемые «уголки» ( ). И закрывающий (с косой чертой). Например, жирный текст . Указывает, что текст между открывающим и закрывающим тэгом strong будет выделен жирным.
Что такое тег, надеюсь, понятно.
Предлагаю набрать что-нибудь своими руками.
Итак, приступим.
Запусти блокнот или wordpad в OC WINOWS. Наберем следующие строчки:
XHTML
Заголовок окна браузера
Заголовок окна браузера
|
Сохраним файл под каким-либо именем, например start.html. Теперь разберемся что написали.
Между тегами и располагается информация, не отображаемая на странице.
Например, тег , кстати, он закрывающего тега не требует, может указывать кодировку (charset=windows-1251) или сведения об авторе (name="author" content="Ф.И.О.") , или слова для поисковой машины, тег заставит браузер автоматически через 30 секунд перейти на сайт mysite.ru (пример).
Тег определяет текст в заголовке окна браузера. (Тег закрывающийся).
Также в теге могут располагаться скрипты javascript или vbscript, заключенные в теги …. .
И стили, заключенные в теги …. .
На этом с тегом пожалуй мы закончим.
Это, собственно, тело документа, здесь размещается все то, что мы видим на странице. У тега есть набор параметров, которые мы рассмотрим, но использовать их не рекомендуется.
bgcolor — устанавливает цвет фона документа. ( )
background — указывает на url-адрес изображения — фона документа.
text — устанавливает цвет текста документа.
link — устанавливает цвет гиперссылок.
vlink= — устанавливает цвет гиперссылок на которых вы уже побывали, используя значение.
alink= — устанавливает цвет гиперссылок при нажатии.
bgproperties=fixed
— фоновое изображение прокручиваться не будет. Т.е. текст будет двигаться при нажатии PageDown, а фон — нет.
Данный параметр поддерживается только Internet Explorer.
Эти параметры можно объединять, например, на этой страничке используется:
XHTML
|
Давайте и наберем эту строку в нашем предыдущем примере.
XHTML
"http://www.w3.org/TR/html4 /strict.dtd">
Все о кормлеиии хомяков
О, эти маленькие, симпатичные животные - хомячки. ,
Естественно, памятуя о том, что идентификация содержимого Web-страниц поисковыми машинами осуществляется при помощи ключевых слов, указываемых разработчиком, может возникнуть соблазн в их состав ввести слова, не отражающие суть документа, но часто запрашиваемые посетителями поисковых машин. Должен заметить, что этот фокус может не получиться. Дело в том, что поисковые машины чаде всего сканируют еще и текст самой Web-страницы, и если какое-либо ключевое слово не встречается в нем, то оно просто не учитывается.
Следует также обратить внимание на то, что при указании ключевых слов, мы добавили в тег дополнительный параметр lang. Мы уже говорили, что этот параметр предназначен для указания языка, на котором написан тот или иной текст. В нашем примере мы указали, что перечисленные ключевые слова написаны на русском языке, т. е.: мы можем задать наборы ключевых слов на нескольких языках, использовав для этого несколько тегов .
Также метаданные позволяют передавать так называемые заголовки HTTP. Здесь необходимо сделать маленькое техническое отступление. Все HTML-документы передаются при помощи специализированных программ, называемых Web-серверами, при помощи определенного набора правил. Этот набор правил приема и передачи информации в компьютерной индустрии называется протоколом. А набор правил для передачи Web-страниц и данных от удаленных пользователей называется протоколом HTTP (HyperText Transfer Protocol), Этот протокол обладает набором директив и переменных, которые часто называют заголовками HTTP-протокола.
Перед нами не стоит задача изучить всё переменные протокола HTTP, нам достаточно будет узнать о наиболее часто применяемых его заголовках. Прежде всего, стоит упомянуть о переменной Expires, которая позволяет устанавливать так называемый срок годности Web-страницы. Дело в том, что браузеры и некоторые другие коммуникационные программы сохраняют посещенные пользователем Web-страницы в кэше, а затем, когда пользователь запрашивает их снова, подсовывают ему эти копии, экономя, таким образом, время получения. Но Web-страницы все-таки достаточно часто обновляют. Поэтому, пользователь может получить устаревшую копию.
Конечно, существуют способы настройки правил работы с кэшем, но далеко не все их используют. Поэтому лучше подстраховаться, и указать "срок годности" Web-страницы. Если он прошел, то браузер вместо использования копии из кэша все-таки запросит документ из Сети.
Тег , приспособленный для указания срока годности Web-страницы, выглядит приблизительно следующим образом:
Из примера видно, что для указания наименования стандартной неременной HTTP-протокола используется параметр http-equiv , а для установки значения этой переменной - уже знакомый нам параметр content. Также легко заметить, что установка срока последнего использования документа производится при помощи переменной Expires, а значение ее должно быть указано в определенном текстовом формате со временем, указанным по гринвичскому меридиану.
Впрочем, может случиться и такое, что информация на страничке обновляется настолько быстро, что ее необходимо несколько раз перезагружать в процессе одного сеанса работы. Такие страницы с информацией, обновляемой в реальном времени, - достаточно частое явление, например, в чатах или при отображении изменений котировок ценных бумаг во время операционного дня на фондовой бирже. В этом случае необходимо использовать переменную с наименованием Refresh. Значение этой переменной указывается в секундах. Тогда рассматриваемый нами тег приобретет следующий вид:
Страница с подобной конструкцией в блоке заголовка будет автоматически перезагружаться каждые десять секунд.
На этом заканчивается рассмотрение структуры заголовка HTML-документа. Мы переходим к изучению структуры основного раздела Web-страницы. Как мы помним, вся отображаемая в окне просмотра браузера информация размещается между тегами и . О том, какие возможности по указанию правил отображения содержимого Web-страницы нам предоставляет язык HTML, мы узнаем в следующих разделах этой главы. Здесь мы рассматриваем лишь общую структуру HTML-документа.
HTML предоставляет нам возможность для каждого применяемого тега задать уникальный идентификатор. Скажем, если наш текст разбит на абзацы, то для каждого абзаца мы можем задать свое специфичное наименование, а затем, при помощи некоторых дополнительных средств языка HTML, управлять отображением этих абзацев. Мы можем делать некоторые из них невидимыми, менять цвет шрифта, т. е. изменять правила их отображения. Причем, это относится не только к абзацам, а ко всем частям содержимого Web-страницы которые заключены в те или иные теги.
Для идентификации какого-либо тега применяется параметр id. Вернемся к примеру с абзацами текста. Забегая немного вперед, можно сказать, что абзацы указываются при помощи пары тегов и . Таким образом, создание абзацев, которые мы сможем потом отличать, производится при помощи приблизительно следующей конструкции:
Первый абзац
Bторой абзац
Значения всех параметров id в HTML-документе обязаны быть уникальными. Если встречается пара одинаковых значений, то эти идентификаторы просто игнорируются. Естественно, применение параметра id не является обязательным. Имеет смысл использовать его только в тех случаях, когда конструкция с идентифицируемым тегом будет подвергнута стилевой обработке (о которой мы поговорим во второй главе), или этот тег будет являться закладкой в документе, на которую будет указывать какая-либо гиперссылка, либо идентифицируемая конструкция будет обрабатываться динамически, при помощи инструкций DHTML, о которых мы узнаем в третьей главе. Также идентификаторы применяются в тех случаях, когда HTML-документ обрабатывается специализированными приложениями, но это уже для совсем серьезных программистов. Нам это пока не так уж и нужно.
Если параметр id применяется для уникальной идентификации, то при помощи параметра class мы можем относить тег к той или иной группе. Этот параметр используется только для стилевого оформления. Мы просто некоторые элементы Web-страницы разбиваем на классы, а затем достаточно в одном месте изменить описание правил отображения класса, и это изменение автоматически распространится на все теги, которые вошли в данный класс.
Также нам доступны методы объединения соседних элементов Web-страницы в единые блоки. Все элементы оформления HTML-документов разделяются на два типа. Inline-элементы, которые чаще всего являются просто элементами текста, и блочные элементы. Inline-элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на Web-странице и обязаны начинаться всегда с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и inline-элементы. По вполне понятным причинам inline-элементы не могут включать в себя блочные элементы.
Объединение элементов Web-страницы в блоки позволяет применять к ним единое оформление, осуществлять некое подобие верстки. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента Web-страницы по отдельности.
Для объединения элементов блочного типа используется тег с его закрывающим близнецом . А для inline-элементов используется пара тегов и . С учетом вышесказанного, ясно, что блок с тегом не может располагаться внутри блока с тегом , так как блочные элементы не могут входить в состав inline-элементов.
Также следует отметить, что браузеры обрамляют div-блоки разрывами строки. Проще всего это показать на примере:
Листинг 1.2
Отображение div-блоков
Доброго времени cyток, всем посетившим мой
скромный сайт.
Результат отображения подобного HTML-файла браузером Internet Explorer показан на рис. 1.2. Теги и могут также иметь дополнительные параметры. Помимо уже знакомых нам идентифицирующих параметров id и class, могут использоваться параметры style и align . Параметр style применяется для установки стиля отображения содержимого блока, а параметр align позволяет устанавливать выравнивание данного блока относительно других элементов содержимого Web-страницы. Более детально применение этих параметров мы рассмотрим в следующих разделах этой главы.
Рис. 1.2. Окно браузера с результатом отображения файла, приведенного в листинге 1.2
Также к вопросам структуры HTML-документа можно отнести использование различных заголовков в тексте. Для заголовков в HTML отведены собственные теги. Всего в HTML-документах применяется шесть уровней текстовых заголовков. Самый старший уровень - первый. И для каждого заголовка существует свой тег и свои правила отображения.
Теги для обозначения заголовков чрезвычайно просты. Для заголовка первого уровня применяется тег с его закрывающей парой , заголовок второго уровня реализуется при помощи пары - , и так далее, вплоть до заголовка шестого уровня с тегом . Ниже, в листинге 1.3 приведен пример использования заголовков в HTML-документе.
Листинг 1.3
Отображение заголовков
Заголовок первого уровня
Заголовок второго уровня
Заголовок третьего уровня
Заголовок четвертого уровня
Заголовок пятого уровня
Заголовок шестого уровня
0бычный текст
А как это выглядит, хорошо видно на рис. 1.3.
Рис. 1.3. Окно браузера с результатом отображения файла, приведенного в Листинге 1.3
Теги заголовков обладают тем же набором параметров, что и недавно рассмотренные теги и , т. е. идентификационные id и class , параметр общего оформления style и параметр выравнивания align .
На этом и заканчивается рассмотрение структуры типичного HTML-документа. Как видно, никаких особых сложностей в этом нет. Все стройно и логично.
HTML - это язык тэгов.
Тэг (дескриптор ) - специальный код, вставляемый в текст для форматирования элементов HTML-документа. Это основной элемент кодирования, принятый в стандарте HTML. Тэг заключаются в угловые скобки . Например тэгом абзаца является
А тэгом горизонтальной линии - .
Существует два типа тэгов: контейнеры и одиночные тэги.
Контейнер. Это дескрипторная пара, состоящая из начального (или открывающего) и конечного (или закрывающего) тэгов. Начальный тэг имеет вид , где TAG - это имя реального HTML - тэга. Конечный тэг имеет вид . Контейнеры предназначены для хранения некоторой информации, например текста или других HTML - тэгов. Поэтому между начальным и конечным тэгами заключено содержимое контейнера. Например, элемент, представляющий собой отформатированный текст, заключается между тэгами И .
Пустой дескриптор. Отличается от контейнера тем, что не содержит никакой информации. У него есть только начальный тэг. Пустой дескриптор обычно выполняет самостоятельную задачу, не связанную с конкретным текстом. Например, тэг создаёт горизонтальную линию.
Элемент HTML - документа - это начальный и конечный тэги контейнера вместе с заключённым между ними содержимым. Элементом может быть изображение, фрагмент текста, форма, таблица, список, ссылка, текстовое поле, кнопка и даже заголовок документа или его основная часть (тело).
Замечание : Язык HTML не чувствителен к регистру. Тэги могут набираться как прописными, так и строчными буквами, т.е. команда эквивалентна команде или . Не все тэги поддерживаются всеми браузерами. Если браузер не поддерживает тэг, он его просто игнорирует.
Самым главным из тэгов HTML является одноименный тэг . Он должен всегда открывать документ, также как тэг должен обязательно стоять в последней его строке. Эти тэги означают, что находящиеся между ними строки представляют собой единый HTML документ. Это важно, так как сам по себе документ является обычным текстовым файлом ASCII. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать формат документа и правильно его интерпретировать.
Заголовок документа не является обязательным элементом, однако хорошо составленный заголовок может быть весьма полезен. Задачей заголовка документа является предоставление информации для программы, интерпретирующей документ. Элементы, находящиеся внутри раздела HEAD (кроме названия документа, записываемого в разделе TITLE ), не видны на экране. Элементы, содержащиеся внутри раздела HEAD документа, нужны для того, чтобы:
Дать документу название
Определить отношения между несколькими документами
Дать указание браузеру создать форму для поиска
Определить метод посылки специальных сообщений определенному браузеру или другой программе просмотра
Раздел HEAD открывается тэгом . Обычно этот тэг следует сразу же за тэгом . Закрывающий тэг показывает конец этого раздела. Между упомянутыми тэгами располагаются остальные тэги раздела заголовка документа.
РазделTITLE является единственным обязательным элементом заголовка документа и служит для того, чтобы дать документу название. Оно обычно показывается в заголовке окна браузера. Содержимое раздела TITLE нельзя путать с названием файла документа. Оно представляет собой текстовую строку, совершенно не зависящую от имени и местоположения файла. Имя же файла жестко определяется операционной системой того компьютера, на котором храниться.
Название документа записывается между тэгами и и представляет собой текстовую строку. Не следует заключать его в кавычки, если вы хотите, чтобы на экране их тоже не было. В большинстве случаев раздел TITLE занимает не более одной строки.
В принципе название может иметь любую длину и содержать любые символы, кроме некоторых зарезервированных. На практике лучше ограничиться одной строкой, имея в виду, что название появляется в заголовке окна браузера. Также следует помнить о том, что останется от названия документа при сворачивании окна браузера. Поэтому надо стараться поместить наиболее важные слова в начало названия.
Хотя в WWW и наметилась тенденция к увеличению “активного” содержания, большинству читателей все же интересна текстовая часть страниц. Поэтому независимо от того пишется ли новый текст или конвертируется старый, процесс работы над телом документа отнимает немалое количество времени.
Прежде чем приступить к наполнению документа содержанием, есть смысл изготовить его “каркас”. HTML - документ должен содержать некоторые обязательные элементы, без которых он не будет правильно интерпретирован. Пример простейшего шаблона приведен в листинге.
This is an
example document
Enter body text here
Шаблон открывается тэгом
, который, как мы уже знаем, необходим для каждого HTML - документа. Следующим идет тэг ,начинающий заголовок документа. Заголовок содержит элемент TITLE , вводящий название документа, в нашем случае “This is an example document”. Заголовок закрывается тэгом . Далее идет тэг , после которого помещается текст (тело) документа. Тэг означает конец тела, а тэг - конец всего документа. BODY может содержать большое количество атрибутов. Все они важны, так как определяют общий облик документа. Эти атрибуты приведены в таблице.Назначение |
|
| ALINK | определяет цвет ссылки, активной в текущий момент |
| BACKGROUND | указывает на URL - адрес изображения, которое используется в качестве фонового |
| BGCOLOR | определяет цвет фона документа |
| BGPROPERTIES | если установлено значение FIXED , фоновое изображение не прокручивается |
| LEFTMARGIN | Устанавливает границу левого поля в пикселах |
| LINK | Определяет цвет еще не просмотренной ссылки |
| TEXT | Определяет цвет текста |
| TOPMARGIN | Устанавливает границу верхнего поля в пикселах |
| VLINK | Определяет цвет уже просмотренной ссылки |
Рассмотрим эти атрибуты подробнее.
Определение цвета составных частей документа - первый шаг к его созданию. Если это не сделано, используются цвета по умолчанию. Они определяются установками программы просмотра.
Не существует каких-либо правил хорошо сбалансированной палитры. Нужно лишь помнить о том, чтобы читатели смогли прочитать текст, не испытывая неудобств, стараться поддерживать высокую контрастность текста и фона и избегать соседства областей с близкими цветами.
HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, синем и зеленом. Для каждого цвета задается шестнадцатеричное значение в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Для простоты в HTML 3.2 определены 16 стандартных цветов, которые вместе с их шестнадцатеричными кодами приведены в нижеследующей таблице.| Цвет | Код |
| Black (черный) | #000000 |
| Магооп (темно-бордовый) | #800000 |
| Green (зеленый) | #008000 |
| Olive {оливковый) | #808000 |
| Navy (темно-синий) | #000080 |
| Purple (фиолетовый) | #800080 |
| Teal (чирок) | #008080 |
| Gray (серый) | #808080 |
| Silver (серебряный) | #С0С0С0 |
| Red (красный) | #FF0000 |
| Lime (известь) | #00FF00 |
| Yellow (желтый) | #FFFF00 |
| Blue (синий) | #0000FF |
| Fuchsia (фуксия) | #FF00FF |
| Aqua (аква] | #00FFFF |
| White (белый) | #FFFFFF |
Атрибут VLINK служит для показа уже просмотренных ссылок. Как правило, их окрашивают более темным оттенком того же цвета, что и не
просмотренные ссылки . ALINK определяет цвет ссылки, активной в текущий момент. Эти сравнительно новый атрибут, обычно применяющийся для просмотра многокадровых документов.Одним ид популярных способов украсить HTML - страницу является размещение на ней фоновой графики, видимой под основным текстом (атрибут
BACKGROUND ). Такой прием помогает подчеркнуть целостность документа либо. наоборот, разделить его на логические части.Большинство фоновых изображений малы по размеру, но их копии, как обои, заполняют все окно программы просмотра. Особенно популярны различные текстурные (узорчатые) изображения: кирпичи, мрамор, всевозможные виды тканей. В основном они служат для простого заполнения пустот в документе. Более продуманные страницы имеют фон, соответствующий содержанию.
Атрибуты
LEFTMARGIN и TOPMARGIN служат для установки расстояния между левым и верхним краями текста и соответствующими краями окна браузера. Местоположение других краев текста не регулируется. Это сделано для того, чтобы обеспечить возможность просмотра страницы любым браузером. Невозможно заранее знать, какой размер окна у программы читателя документа. LEFTMARGIN устанавливает расстояние между левым краем окна браузера, которое измеряется в пикселах. Чаще всего этот атрибут применяется, когда автор хочет иметь слева поле, свободное от текста, и отличающееся узором или цветом от остальной части фонового изображения. TOPMARGIN служит для установки расстояния между верхним краем текста и верхним краем окна браузера. Он обычно используется, если верхняя часть фонового изображения имеет большое значение и его желательно оставить открытым. HTML - документы можно включать комментарии, которые не будут видны читателю. Они должны начинаться тэгом . Все, что заключено внутри этих тэгов, при просмотре страницы остается невидимым. ADDRESS является одним из важнейших элементов HTML. Он служит для идентификации автора документа и (по желанию) для указания адреса автора. Сюда же обычно помещаются сведения об авторских правах. Этот элемент располагается либо в начале, либо в самом конце документа. ADDRESS состоит из текста, помещенного между тэгами и . Текст, заключенный между этими тэгами обычно показывается в окне браузера курсивом.Сегодня нам предстоит узнать структуру построения документа HTML, хотя мы с ней уже встречались в статье "
". Вспомним теги прописанные в ней:
, , , .
Все эти теги парные, закрывающиеся контейнера, которые создают конструкцию HTML документа. Именно они составляют основу html кода. Ещё их называют «Обязательные теги
», но не потому что, если их не вписать, получится ошибка в коде. Нет. Ничего не случится. Код документа будет работать. Но, обязательные теги нужны для того, чтобы видеть саму структуру html страницы, чтобы понимать, что где находится и что куда вставлять.
Для наглядности рассмотрим приведенный ниже рисунок, Screen 1. С правой
Screen 1.
стороны изображен человечек с надписями названий тег. Такое отображение предлагается, для более простого понимания схемы строения кода html. С левой стороны показан этот же прожект, но более схематично.
Обратим внимание на тег
- расположен по краям рисунка, выделен красным цветом. HTML-тег является началом и концом HTML-документа. Он открывает его (верхняя часть) и закрывает (нижняя часть). В документе данный тег не обязателен, но хороший стиль диктует непременное их использование. Тег должен всегда стоять в документе первым и последним. Смотрим на картинке, человечек полностью помещен в этот тег. Весь код html-странички пишется внутри тега-:
Весь код html-странички
Тег
- не обязательный закрывающийся, это значит, что вторую его часть (закрывающую) можно не прописывать, ошибкой это не будет. Однако это будет не корректный код. Переводится с англ. как «голова»
и на сленге веб-программистов называется «голова»
. Размещается внутри верхней части тега-. Внутри контейнера тега размещаются мета теги, которые предназначены для хранения информации браузера и поисковых систем, а также управленческих функций. Поэтому и «голова».
Внутри «головы», обязательно между тегами
расположен мета-тег
, который определяет заголовок документа и отображается в заголовке и вкладке браузера. Смотрим Screen 2,
Screen 2.
где показан на примере браузера Mozilla Firefox. Обязательный закрывающийся тег, не имеет атрибутов. Синтаксис расположения тега виден на Screen 3. Как правильно оптимизировать , можно узнать перейдя по ссылке.
