HTML. Урок 3. Привет, Голос! 🔥

Основные теги языка разметки HTML, с помощью которых можно даже посты в Голосе писать и украшать, мы уже рассмотрели.

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

Для вашего удобства рекомендую установить программу brackets. В ней очень удобно работать с кодом.

Если вы откроете любую страничку в интернете и нажмете "View page source" ("Показать код документа"), вы увидите типичные для любого сайта элементы.

˂!DOCTYPE HTML˃ ˂html˃ ˂head˃ ˂meta charset="utf-8"˃ ˂title>Пример веб-страницы˂/title˃ ˂/head˃ ˂body˃ ˂h1˃Заголовок˂/h1˃ ˂!-- Комментарий --˃ ˂p>Первый абзац.˂/p˃ ˂p>Второй абзац.˂/p˃ ˂/body˃ ˂/html˃

Создаём простую веб-страничку

Вы уже установили brackets? Тогда запускайте приложение и создавайте новый файл. Сразу сохраните его и назовите, например index.html. Расширение файла .html позволит программе понять, что файл будет содержать html-код.

Конечно, устанавливать приложения совсем не обязательно. Вы можете просто создать новый файл, назвать его какзахотите.html и редактировать в любом текстовом редакторе.

1. `˂!DOCTYPE html˃`

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

Я буду показывать примеры и рассказывать о HTML5.

Для того, чтобы дать браузеру понять, что мы используем HTML5, необходимо в первой строке вашего файла с кодом.

2. `˂html˃`

Между открывающий и закрывающим тегами ˂html˃ будет распологаться всё содержимое вашей странички. Они необязательны, но негласные правила хорошего стиля диктуют непременное их использование.

3. `˂head˃`

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

4. `˂meta charset="utf-8"˃`

С помощью атрибута charset тега meta мы можем задать кодировку документа. Если этого не сделать или сделать неправильно, то отображаться в браузере может "абракадабра".

5.`˂title˃`

Между открывающим и закрывающим тегами title находится название вашего сайта, то, что будет отображаться в названии вкладки браузера.

6.`˂body˃`

А "тело" вашей страницы - это то, что должно быть отображено в окне браузера. Основное содержимое вашей страницы.
Напишите в "теле" вашей странички:
˂p>Привет, мир!.˂/p˃
И нажмите на кнопку "Live Preview".