Урок с практикой по HTML (Онлайн курсы)
Выбрать другой урок из курса
Теория урока

Что такое 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></html>. Этот тег является контейнером веб страницы, то есть до него и после него ничего не должно быть.

В парном теге <head></head> пишется обязательный тег <title></title>. В теге тайтл пишется заголовок страницы, который отображается в выдаче поисковика и во вкладке браузера. В контейнере <head></head> обычно находятся различные мета-теги и подключаются стили и скрипты, больше он не для чего не нужен.

Весь текст, графика и прочий код должен находиться внутри тегов <body></body>. В данном примере HTML документа создан заголовок первого уровня и абзац. Обратите внимание, что они находятся внутри тега <head>. В данном уроке не буду разбирать еще подробнее код, так как его предназначение ответить на вопрос: «Что такое HTML?».

<
×
>
Курс «Знакомство с HTML»
Урок 0.1. Вводный урок по курсу HTML и CSS
Урок 1.2. Первое знакомство с HTML
Урок 2.1. Теги в HTML. Одинарные и парные теги
Урок 2.2. Что такое теги и для чего они нужны?
Урок 2.3. Одинарные теги
Урок 2.4. Парные теги
Урок 3.1. Структура HTML документа
Урок 3.2. Что означают теги HTML, HEAD, BODY?
Урок 3.3. Первая строка всех сайтов - DOCTYPE
Урок 3.4. Исходный код веб-страницы
Урок 3.5. Заголовок в HTML - тег TITLE
Урок 3.6. Кодировка HTML страницы
Урок 3.7. Описание стилей в HTML документе
Урок 3.8. Подключение внешних файлов в HTML - стили CSS
Урок 3.9. Практика: что не хватает в структуре
Урок 3.10. Практика: опять чего-то не хватает в структуре
Урок 4.1. Использование HTML метатегов (Мета теги)
Урок 4.2. Практика: повторим метатеги
Урок 4.3. Практика: метатеги Facebook
Другие курсы
Курс 2. Разметка текста
Курс 3. Ссылки
Курс 4. Изображения
Курс 5. Таблицы
Курс 6. Формы
Курс 7. HTML5
Курс 8. Остальное
Курс 9. Знакомство с CSS
Курс 10. Селекторы в CSS
Курс 11. Структура и каскад
Курс 12. Единицы измерения
Курс 13. Шрифт
Курс 14. Свойства текста
Курс 15. Форматирование
Курс 16. Отступы, рамки, поля
Курс 17. Цвета и фон
Курс 18. Позиционирование
Курс 19. Верстка таблиц
Курс 20. Списки
Курс 21. Анимация
Внимание! Впервые на этом сайте?

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

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

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

Закрыть окно