Теория урока

2. Что такое язык HTML

@codebra_official
Подписывайся на наш Telegram-канал!
Новости, полезный материал,
программирование и ИБ

Изучаемые 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-документ:

Пример (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. В следующем уроке мы продолжим.

2. Что такое язык HTML

Знакомство с HTML

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

Английские слова по теме

Похожие уроки Codebra