2. Что такое HTML?
Знакомство с HTML
Что такое HTML – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне. Язык HTML был разработан британцем Тимом Бернерсом-Ли, в ЦЕРНе. В первую очередь язык HTML предназначался для обмена научными документами. Верстка документов происходит при помощи специальных дескрипторов (но чаще всего их называют тегами, это слово, думаю, многим знакомо). Если ответить проще на вопрос: «Что такое HTML документ?» - это простой текст, содержащий много тегов, который образует веб-страницу.
Было множество версий HTML, но я не хочу в них вдаваться. На данный момент самая последняя версия – HTML5. Первая бета версия 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>
обычно находятся различные мета-теги и подключаются стили и скрипты, больше он не для чего не нужен.
Весь текст, графика и прочий код должен находиться внутри тегов <body></body>
. В данном примере HTML документа создан заголовок первого уровня и абзац. Обратите внимание, что они находятся внутри тега <body>
. Более подробно разберем выше представленный код в следующих параграфах.
Английские слова по теме
Рано или поздно вы столкнетесь с англоязычными справочниками и руководствами. Вся свежая информация по фронтенду и различным веб технологиям (впрочем, по всему) пишется на английском языке, а потом переводится. Интернациональные слова здесь не стал приводить.
Markup – разметка; display – отображать; development, design – разработка; layout, page-proofs – верстка; search results – поисковая выдача; heading – заголовок.
Похожие уроки и записи блога
- Замените фразу
Привет, мир
между тегами<h1> ... </h1>
на фразуКто я?
(знак вопроса не потеряйте) - Потом замените слово
путник
между тегами<p> ... </p>
на фразуЯ программист
– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте.
– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить на любом популярном форуме в интернете.
Это займет не больше минуты.