В этой статье вы познакомитесь с базовыми понятиями и приемами создания HTML-страницы.
Все сайты создаются на специальном языке разметки - HTML.
Структура HTML состоит из тегов , они могут быть одиночными (<br>) и парными (<div></div>).
Программа для редактирования HTML
Редактировать содержимое HTML документа можно с помощью блокнота, но для удобства используют специальные программы, которые помогают править код. В этом уроке мы будет использовать Visual Studio Code, который вы можете скачать по ссылке: https://code.visualstudio.com/
Как создать свою первую HTML страницу?
Первым делом в рабочей папке создадим текстовый файл index с расширением html (убедитесь что у вас включено отображение расширений в Windows https://cutt.ly/zjv4mOk)
Теперь откроем его в редакторе:
Любой документ начинается со специального тега - <!DOCTYPE html> , который показывает что дальше идёт HTML-код.
Вся разметка находится внутри тега <html></html> , который содержит еще два тега <head></head> и <body></body> .
Тег <head>
Тег <head> предназначен для хранения элементов, цель которых — помочь браузеру в работе с данными (заголовок документа, кодировка и т. д.). Содержимое этого тега не отображается на странице.
Давайте установим заголовок документа и кодировку (чаще всего используется кодировка UTF-8):
Теперь, когда мы откроем документ двойным нажатием по index.html, увидим текст из <title> в строке браузера:
Тег <body>
Для того чтобы наша разметка была видна на странице, мы будем писать код внутри тега <body> .
Давайте для примера создадим простенькую статью из Википедии и разберем несколько основных тегов.
На практике, все сайты "верстаются" (процесс написания HTML кода называется вёрсткой) из специально подготовленных макетов.
Тег <h1>
Для заголовков существуют несколько тегов, которые различаются размером шрифта (<h1><h2><h3><h4><h5><h6>).
Тег <h1> является главным заголовком, который должен находиться на странице в единственном экземпляре.
Тег <hr>
От английского horizontal line - является разделительной горизонтальной линией.
Тег <p>
Весь текст мы будем писать внутри тега <p> для того чтобы разделять его на абзацы:
Но, как мы видим по макету из Википедии, некоторые куски текста имеют необычный стиль шрифта, давайте исправим это с помощью тегов <b> и <i> .
Теги<b> и <i>
Тег <b> устанавливает жирное начертание текста
<i> устанавливает курсивное начертание
Самое время проверить результат:
Создание списка
Существует несколько видов списков, все мы разбирать не будем, но вы можете ознакомиться с ними по ссылке https://html5book.ru/html-lists/.
В нашем случае, используется нумерованный список <ol>.
Внутрь тега <ol> помещаются теги <li> в которые пишется нужный нам текст:
Получившийся результат:
Мы разобрали все нужные теги для завершения макета, попробуйте закончить сами .
Ниже приведен результат:
Заключение
В этой статье мы изучили основы вёрстки HTML на примере странички из Википедии, разобрали несколько основных тегов.
Подписывайтесь на наш телеграмм канал, там вы сможете узнать много нового.
t.me/about_system