Проектирование и веб-разработка

Тема: Введение в язык разметки HTML

Приступим к изучению языка разметки HTML. Основные идеи этого урока:
- расшифровка аббревиатуры HTML и возможности использования языка разметки HTML;
- отличия между понятием HTML-«тег» и HTML-«элемент»;
- атрибуты HTML-элементов;
- основная структура HTML-документа;
- создание веб-документа с помощью редактора кода;
- интерпретирование веб-документа - веб-браузером.

Аббревиатура – HTML является производным от HyperText Markup Language – на

русском - «Язык Разметки ГиперТекста» и является стандартным языком разметки,
используемым для определения документов, предназначенных для отображения в
веб-браузере. Почему «язык разметки»? Потому что в его основе лежат
специальные «ярлыки» или «теги», которые можно использовать для разметки
определенного содержимого. HTML - это не язык программирования!

HTML официально появился в 1993 году. Первоначально он использовался для

создания простых текстовых файлов, которые, после интерпретировании
браузером, генерировали веб-страницы. Сегодняшние веб-страницы сильно
изменились по сравнению с веб-страницами прошлого века. Сегодня язык разметки
HTML часто используется и для определения веб-интерфейсов сложных веб-
приложений.
Проектирование и веб-разработка

Ниже представлен сайт компании Apple (https://www.apple.com/), каким он был в

1994... и какой он стал сегодня, в 2021. Заметил разницу? :)

HTML используется для определения структуры веб-страницы. Далее можно

добавить стили, чтобы изменить внешний вид страницы.
Со временем появилось несколько версий языка HTML. Сегодня мы достигли 5-ой
версии.
Таким образом, основным компонентом языка HTML является тег. HTML-тег может
быть «открывающимся» или «закрывающимся». Теги заключаются в специальные
символы «<» (знак меньше) и «>» (знак больше). Например: <p>, </p>, <br />, <a>,
</a> - это HTML-теги. Обрати внимание, что закрывающий тег отличается от
открывающего, только наличием символа косой черты - «/» или на английском
«slash».
Однако, если перейти к HTML-элементу, то он содержит открывающийся тег, его
содержимое и закрывающий тег. Синтаксис HTML-элемента:

<открывающийся_тег> Контент </закрывающийся_тег >

Все, что находится между открывающим и закрывающим тегами, зависит от этого
элемента и называется содержимым HTML-элемента.
В HTML есть элементы, у которых есть содержимое, и есть элементы, у которых нет
содержимого.
Примеры HTML-элементов: <p> Здесь написан текст </p> - этот элемент имеет
содержимое и у него есть закрывающий тег.
Проектирование и веб-разработка

Другой пример... <img src="photo.jpg" alt="Красивое фото" /> - это все еще
HTML-элемент, но у него нет содержимого и закрывающего тега.
Поскольку были версии HTML, а именно XHTML, в которых все HTML-элементы
должны были иметь закрывающий тег, рекомендуется для HTML-элементов без
содержимого указывать его «закрытие» непосредственно в открывающем теге. То
есть мы будем соблюдать следующий синтаксис <tag… /> ... и вот несколько
примеров элементов без контента: <br />, <hr /> и могут быть и другие.

Атрибуты элементов

HTML-элементы могут иметь атрибуты. Атрибут определяет какое-то

дополнительное свойство для HTML-элемента. Атрибут состоит из пары атрибут =
значение (атрибут равно значение) и всегда указывается в начальном теге
элемента. Начальный тег HTML-элемента может содержать любое количество
атрибутов, разделенных пробелом. Элемент HTML может иметь или не иметь
атрибутов.
Пример HTML-элемента с атрибутами:

<img src="photo.jpg" alt="Красивое фото" />,

где src - это атрибут, а photo.jpg – это его значение.
Обратите внимание, что значение атрибута заключено в кавычки. При указании
значений атрибутов HTML-элементов рекомендуется постоянное использование
кавычек. Можно использовать двойные или одинарные кавычки, но в случае
значений атрибутов, лучше использовать двойные кавычки.
В HTML5 многие атрибуты элементов больше не поддерживаются и рекомендуется
заменить их свойствами стиля. Но все эти детали мы разберём на других уроках...
Интересно еще что в HTML есть несколько специальных атрибутов, называемые
«глобальными атрибутами». Глобальные атрибуты - это те атрибуты, которые
можно указать в любом HTML-элементе. Вот некоторые примеры глобальных
атрибутов: class, id, style, title...

Основная структура веб-документа

Далее рассмотрим, что такое «веб-документ» и какова его основная «структура».

Проектирование и веб-разработка

Веб-документ или HTML-документ - это текстовый файл, у которого есть имя и

расширение, разделенные символом «точка». Примером названии HTML-
документа может быть index.html. Расширение файлов, содержащих коды HTML,
обычно .html. HTML-документ описывает веб-страницу и содержит HTML-элементы,
а также простой текст.
Веб-браузер не отображает HTML-элементы, но использует теги из веб-документа
для их интерпретации и создания содержимого веб-страницы. Далее веб-страница
отображается в понятной для человека форме, в окно браузера.
Самый простой веб-документ состоит как минимум из 3-х элементов: элемент HTML
– который является контейнером для всех остальных HTML-элементов. Он включает
элементы HEAD и BODY.
HEAD предназначен для определения заголовка веб-страницы. Содержимое этого
элемента не отображается в окно браузера. Его цель - хранить информацию,
необходимую веб-браузеру или разным службам из Интернета.
BODY предназначен для хранения элементов которые определяют содержимое
страницы, того содержимого, которое будет отображаться в окне веб-браузера и
которое будет видеть пользователь.
Пусть будет следующая последовательность HTML-кода, которую можно
рассматривать как простой веб-документ:

Заголовок документа

Контент/ тело документа

В последних версиях HTML, в базовой структуре документа HTML перед тегом

<HTML> был добавлен оператор/ декларация <!DOCTYPE html>. Эта декларация
требуется для правильного отображения веб-страницы в веб-браузерах. Она
указывает версию HTML, в которой была определена веб-страница.
Проектирование и веб-разработка

Запомните - <!DOCTYPE html> не является HTML-элементом! Этот оператор, как и все

HTML-теги, не чувствителен к регистру, то есть может быть написан как прописными,
так и строчными буквами!
...и вот результат интерпретирования браузером, написанного выше HTML-кода:

Но где и как создаются эти веб-документы? Для создания HTML-документов

используются редакторы кода, такие как VisualStudioCode, например.
Чтобы создать веб-документ, выполним следующие действия:
1. Открывается редактор кода.
2. HTML-документ создается путем записи в нем HTML-кода.
3. Веб-документ сохраняется с указанием его имени и расширения. Также
указывается место для сохранения файла - диск, папка и т. д. Я назову
созданный файл index.html, и сохраню его в папке, на диске С (Це).
4. Файл закрывается или может быть оставлен открытым в редакторе, для
последующих изменений.
5. Теперь открывается файл index.html в браузере, щелкнув на имя файла,
правой кнопкой мыши. В появившемся контекстном меню выберем опцию
«Открыть с помощью» (на английском Open with), а затем выберем в
следующем появившемся меню требуемый нам веб-браузер. Я выбрал
GoogleChrome. Теперь в окне веб-браузера можно увидеть результат
интерпретации HTML-кода, записанного в сохраненном файле.
Проектирование и веб-разработка

6. После внесения любых других изменений в веб-документ, необходимо

сохранить эти изменения, а затем обновить содержимое страницы в веб-
браузере.
О правильности создания веб документа
Иногда, в процессе разработки веб-контента, можете увидеть такую формулировку:
«W3C» рекомендует использовать... W3C - расшифровывается как World Wide Web
Consortium и представляет собой международное сообщество, которое
разрабатывает рекомендации и стандарты для разработчиков веб-продуктов по
правильному использованию веб-технологий, при создании веб-продуктов. W3C
также регулирует процесс разработки веб-сайтов, включая использование HTML,
для правильного создания веб-страниц.
Вы должны также знать, что в Интернете есть онлайн-валидаторы HTML-кодов - вы
можете использовать их, чтобы проверить, насколько правильно вы написали HTML-
код. Например, один из таких валидаторов который вы можете использовать это
https://validator.w3.org/ .
Подведем итоги тому, что мы узнали на этом уроке:

● HTML - это язык, основанный на тегах, используемых для определения веб-

содержимого;
Проектирование и веб-разработка

● HTML-элемент состоит из открывающего тега, содержимого и закрывающего

тега;
● Веб-документ - это файл с расширением .html, который состоит из специальных
HTML-элементов, которые определяют заголовок и содержимое веб-страницы.
Страницы создаются веб-браузером на основе созданного веб-документа;
● Рекомендуется всегда проверять правильность написания кода в .html файле.
Для этого можно использовать онлайн-валидатор кода.