Посмотреть все уроки курса
Выбрать другой урок из курса
Поиск по сайту
Теория урока

2. Что такое HTML?

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

Что такое HTML – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне. Язык HTML был разработан британцем Тимом Бернерсом-Ли, в ЦЕРНе. В первую очередь язык HTML предназначался для обмена научными документами. Верстка документов происходит при помощи специальных дескрипторов (но чаще всего их называют тегами, это слово, думаю, многим знакомо). Если ответить проще на вопрос: «Что такое HTML документ?» - это простой текст, содержащий много тегов, который образует веб-страницу.

Было множество версий HTML, но я не хочу в них вдаваться. На данный момент самая последняя версия – HTML5. Первая бета версия 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> обычно находятся различные мета-теги и подключаются стили и скрипты, больше он не для чего не нужен.

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

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

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

Markup – разметка; display – отображать; development, design – разработка; layout, page-proofs – верстка; search results – поисковая выдача; heading – заголовок.

Похожие уроки и записи блога

Первое знакомство с PythonЗнакомство с Python
Модули в PythonЗнакомство с Python
Теги в HTML. Одинарные и парные тегиЗнакомство с HTML
Типы данных в PythonЗнакомство с Python
Погружение в PythonЗнакомство с Python
Свойство background для работы с фономЦвета и фон
Первое знакомство с PHPБлог
Основы объектно-ориентированного программирования (ООП) в PythonЗнакомство с Python
Написание модулей в PythonЗнакомство с Python
<
×
>
Раздел «Знакомство с HTML»
1. УРОК: Вводный урок по курсу HTML и CSS
УРОК 2. Что такое HTML?
Вы здесь
3. УРОК: Первое знакомство с HTML
4. УРОК: Теги в HTML. Одинарные и парные теги
5. УРОК: Что такое теги и для чего они нужны?
6. УРОК: Одинарные теги
7. УРОК: Парные теги
8. ТЕСТ: Вводный тест по курсу HTML и CSS
9. ТЕСТ: Тест по одинарным и парным тегам
10. ПРАКТИКА: Структура HTML документа
11. УРОК: Что означают теги HTML, HEAD, BODY?
12. УРОК: Первая строка всех сайтов - DOCTYPE
13. УРОК: Исходный код веб-страницы
14. УРОК: Заголовок в HTML - тег TITLE
15. ТЕСТ: Тест по структуре HTML документа
16. УРОК: Кодировка HTML страницы и атрибуты
17. УРОК: Описание стилей в HTML документе
18. УРОК: Подключение внешних файлов в HTML - стили CSS
19. ПРАКТИКА: Что не хватает в структуре?
20. ПРАКТИКА: Опять чего-то не хватает в структуре
21. ТЕСТ: Тест по подключению файлов к веб-странице и кодировке
22. УРОК: Использование HTML метатегов (Мета теги)
23. ПРАКТИКА: Повторим метатеги
24. ПРАКТИКА: Метатеги Facebook
Другие разделы
Раздел 2. Разметка текста
Раздел 3. Ссылки
Раздел 4. Изображения
Раздел 5. Таблицы
Раздел 6. Формы
Раздел 7. HTML5
Раздел 8. Остальное
Раздел 9. Знакомство с CSS
Раздел 10. Селекторы в CSS
Раздел 11. Структура и каскад
Раздел 12. Единицы измерения
Раздел 13. Шрифт
Раздел 14. Свойства текста
Раздел 15. Форматирование
Раздел 16. Отступы, рамки, поля
Раздел 17. Цвета и фон
Раздел 18. Позиционирование
Раздел 19. Верстка таблиц
Раздел 20. Списки
Раздел 21. Анимация
Раздел 22. Практика с htmlbook.ru
Раздел 23. Элементы сайта
Раздел 24. Знакомство с Flexbox
Впервые на сайте Codebra?

Извините за это всплывающее окно, меня они тоже раздражают.

Образовательный ресурс codebra.ru полностью посвящен программированию. Все курсы и уроки находятся на главной странице. Ради интереса можете посмотреть на содержимое курсов по Python, HTML и CSS, JavaScript, C++ и другие, размещенные на главной странице.

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

Удачи в обучении!

Закрыть окно