Внимание! На этой странице вы найдете материал урока из архивного курса по HTML. Курс был написан в 2015, обновлен в 2024 году и по-прежнему актуален для начинающих веб-разработчиков.
Теоретический материал сохранен в исходном виде, а практические задания с автоматической проверкой вынесены в отдельные роадмапы.
Полный список уроков доступен по тегу Архивный курс по HTML и на странице первого урока.
<!DOCTYPE>: сообщает браузеру тип документа. Строка<!DOCTYPE html>сообщает об использовании пятой версии HTML (HTML5). Подробнее<html>: контейнер, в котором помещен код всей веб-страницы. За его пределами находится только тег<!DOCTYPE>. Подробнее<head>: контейнер для заголовка страницы и технической информации. Подробнее<title>: определяет заголовок веб-страницы. Подробнее<body>: контейнер для контента (содержимого) веб-страницы. Вся выводимая в веб-документе информация должна находиться внутри этого контейнера. Подробнее<h1>: определяет заголовок первого уровня. В HTML доступно шесть уровней заголовков. Подробнее<p>: определяет абзац на веб-странице. Подробнее
В предыдущем уроке кратко ознакомились со структурой курса по HTML и CSS. В этом уроке начнем погружаться в HTML-теги.
Знакомство с HTML
Что такое HTML – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне.
Язык HTML был разработан британцем Тимом Бернерсом-Ли, в ЦЕРНе. В первую очередь язык HTML предназначался для обмена научными документами.
Верстка веб-документов происходит при помощи специальных дескрипторов, которые чаще всего называют тегами (это слово, думаю, многим знакомо).
Если проще ответить на вопрос: «Что такое HTML документ?» - это простой текст, содержащий много тегов, образующих веб-страницу.
Было множество версий HTML, но я не буду в них вдаваться. На данный момент самая последняя версия (24 декабря 2018 года) – HTML5.3.
Первая бета версия HTML5 появилась осенью 2007 года. Для упрощения и удобства было введено понятие «гипертекст». Гиперссылка (или просто ссылка), является частью гипертекста, и она ссылается на другой HTML документ.
HTML был построен так, чтобы страницы отображались на всех устройствах одинаково. Позже добавили графическое оформление с помощью каскадных таблиц стилей (CSS).
Структура HTML документа
Думаю, вы поняли, что такое язык HTML. Как говорилось выше – этот язык полностью состоит из дескрипторов (тегов).
У любой веб-страницы есть начало и конец, они обозначаются парным тегом <html></html>.
Рассмотрим простой HTML-документ:
<!DOCTYPE html>
<html>
<head>
<title>Заголовок сайта</title>
</head>
<body>
<h1>Заголовок первого уровня</h1>
<p>Абзац</p>
</body>
</html>Как видите, HTML документ начинается со строки <!DOCTYPE html> - каждая веб страница должна начинаться именно с него.
Раньше было огромное количество вариантов тега <!DOCTYPE>, но в соответствии с новой версией HTML, нужен только этот <!DOCTYPE>, который в примере.
Что такое <!DOCTYPE>? Это тег, который сообщает браузеру версию HTML. Этот тег должен быть написан на первой строчке HTML документа. В нашем примере указана пятая версия HTML (т.е. HTML5). Более подробная информация указана на сайте Консорциума Всемирной Паутины.
Далее идет парный тег <html></html>. Этот тег является контейнером веб страницы, то есть после него ничего не должно быть, а перед ним только тег <!DOCTYPE>.
В парном теге <head></head> пишется обязательный тег <title></title>. В теге title указывается заголовок страницы, который отображается в выдаче поисковика и на вкладке браузера.
В контейнере <head></head> обычно находятся различные мета-теги и подключаются стили и скрипты. Контейнер <head></head> нужен для перечисления технической информации, которая визуально не выводится на веб-страницу.
Весь текст, графика и прочий код должны находиться внутри тегов <body></body>. В данном примере HTML документа создан заголовок первого уровня и абзац. Обратите внимание, что они находятся внутри тега <body>.
Более подробно разберём представленный выше код в следующих уроках.
Английские слова по теме
Рано или поздно вы столкнетесь с англоязычными справочниками и руководствами. Вся свежая информация по фронтенду и различным веб-технологиям (впрочем, по всему) пишется на английском языке, а потом переводится на другие языки. Интернациональные слова здесь не стал приводить.
Markup – разметка; display – отображать; development, design – разработка; layout, page-proofs – верстка; search results – поисковая выдача; heading – заголовок.
В этом уроке мы начали погружение в язык HTML. В следующем уроке мы продолжим.
Переходите к следующему уроку курса, а так же не забудьте посмотреть новый материал на Codebra по тегу HTML.
