Приветствую всех! В этой статье вы узнаете про основные теги, необходимые для создания своего сайта с нуля, а также сможете создать свою первую простейшую WEB-страницу. Поехали!
Основные понятия.
И так, начнём вообще с того, что такое HTML.
HTML – это не язык программирования, это язык гипертекстовой разметки, с помощью которого создается структура любого сайта. На данный момент пятая версия HTML, то есть HTML5.
Язык HTML состоит из так называемых тегов. Тегами называются специальные слова, которые заключены в угловые скобочки <>. Каждое из таких слов имеет предназначение, например, создают заголовок, параграф, добавляют картинку.
Теги бывают открывающими и закрывающими. Открывающий выглядит, например, так: <тег>, а перед закрывающим нужно поставить слеш: </тег>. Также эти теги могут называть парными и непарными. Парный состоит из открывающего и закрывающего тегов, а непарный только из открывающего. В целом это пишется в такой последовательности:
<тег></тег> – парные теги
<тег> – непарный тег
Кроме этого, все теги делятся на две группы – блочные и строчные. Блочный тег занимает всю ширину окна браузера или родительского блока, а строчный – только ширину контента.
Мы изучили основную информацию, которая пригодится нам для дальнейшего изучения HTML. Теперь перейдём к самим тегам.
Базовая HTML-структура.
Написание сайта начинается с нескольких обязательных тегов, которые образуют базовую структуру. Взгляните на это изображение:
На скриншоте видны парные (<style></style> и т.п.) и непарные (<meta>) теги. Сейчас разберём каждый элемент по порядку.
- <!DOCTYPE html> – это выражение будет как бы „говорить“ браузеру, что веб-страница написана на HTML5;
- <html></html> является контейнером для всего содержимого сайта. Он помещается в начало и самый конец документа;
- <head></head> предназначен для размещении в нём метатегов, которые помогают браузеру в обработке данных, а также скрипты, ссылки, стили и другое;
- <meta charset="UTF-8"> – кодировка документа. Этот тег нужен для того, чтобы при написании сайта на русском языке у вас были именно русские буквы, а не разные иероглифы;
- <title></title> задаёт заголовок документа. Браузер показывает тег <title> как название вкладки. В заголовке должны быть ключевые слова, которые помогут найти поисковой системе ваш сайт;
- В <style></style> задаются CSS-стили, которые изменяют какие-либо элементы на сайте. Это могут быть параметры шрифта, фон, какие-либо элементы дизайна и многое другое. Но об этом мы узнаем в других статьях;
- Видимая часть сайта прописывается в теге <body></body>. Здесь уже создаются заголовки, подзаголовки, текст, ссылки, картинки и многое другое.
Перечисленные теги образуют начальную структуру сайта. Любой сайт начинается с этих строк, а затем каждый разработчик добавляет то, что ему хочется.
Теги для создания контента.
Теперь можно разобрать некоторые теги для создания видимой части сайта. Как уже говорилось выше, всё это будет прописываться внутри <body></body>.
На любом сайте есть какая-либо текстовая информация. И одна из таких информаций – это заголовки и подзаголовки. Чтобы их создать используются парные блочные теги <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5> и <h6></h6>.
Отличие этих тегов:
- <h1></h1> – главный заголовок сайта;
- <h2></h2> – подзаголовок сайта;
- <h3></h3>-<h6></h6> – подзаголовки 3, 4, 5 и 6 уровней соответственно.
Так как <h1> является главным заголовком, то его следует использовать не более одного раза, а остальных подзаголовков может быть сколько угодно. Чаще всего достаточно тегов <h1>, <h2> и <h3>.
Также после заголовков идёт какой-либо соответствующий текст или описание. Помещайте основной текст web-страницы в блочный парный тег <p></p>, который создает новый абзац/параграф.
С помощью парного строчного тега <a></a> создаются ссылки и якоря. Ссылка создается при помощи атрибута href, в значение которого указывается адрес какого-либо сайта или документа в Интернете. Якорь – это своеобразная закладка в любой части страницы, на которую можно быстро перейти, нажав по ссылке (так работает меню на сайтах). Весь текст или картинка, заключенные между этим тегом, будут являться ссылкой.
В коде видно некий непарный тег <br>. Он предназначен для переноса текста в любом месте, либо строчных тегов на новую строку, сколько раз вы напишите <br>, на столько строк и перенесётся текст.
Конечно же, на сайтах есть и изображения. Для их добавления существует строчный непарный тег <img>. У него есть два обязательных атрибута: src – путь к изображению (ссылка или путь к фото на вашем устройстве); alt – текст, который появится, если картинка по каким-то причинам не загрузится (значение можно оставить пустым). Общая запись будет выглядеть примерно так:
<img src="путь к картинке" alt="замещающий текст">
И три последних тега в рамках этой статьи нужны для создания маркированного и нумерованного списков.
Вот они:
- <li></li> – элемент списка (каждая часть текста, помещенная в этот тег, будет отдельным элементом). Он помещается в два других тега – <ul> или <ol>, в зависимости от того, какой список вам нужен;
- <ul></ul> – маркированный список;
- <ol></ol> – нумерованный список.
Это еще не все, мы можем изменить маркер или цифру на что-нибудь другое с помощью HTML-атрибута type:
Также для тега <ol></ol> есть дополнительный атрибут start, позволяющий начать нумерацию с другой цифры или буквы. В качестве значения не зависимо от типа нумерации указывается цифра. Кстати, <ul> и <ol> можно вложить друг в друга, тогда получится вложенный список.
Ваша первая WEB-страничка.
А теперь, исходя из полученной информации, можно создать простейший сайт.
Разберём всё это поэтапно:
- сначала создаётся текстовый документ на вашем компьютере, а затем меняется его расширение на .html (обычно главную страницу сайта называют index.html). Полученный файл можно открыть либо с помощью блокнота, либо с помощью текстового редактора (я использую Sublime Text 3);
- как и было сказано ранее, пишем начальную HTML-структуру. Название страницы в <title></title> вы можете придумать любое другое;
- переходим к написанию видимой части сайта. Создадим главный заголовок <h1></h1>. Пусть заголовок будет таким: „Это моя первая WEB-страничка“;
- после заголовка идёт параграф с текстом (этот текст ничего не означает, существуют генераторы подобного текста, например, https://fish-text.ru, но вы можете написать и свой текст);
- далее были созданы два подзаголовка <h2></h2> с параграфами <p></p>;
- для разнообразия ещё было добавлено изображение;
- третья подглава состоит из маркированного списка <ul></ul>, а в качестве маркера было решено сделать квадратик, для этого и добавлено type="square";
- страница заканчивается 3 ссылками. Для этого перенесём текст на несколько строк и создадим три ссылки <a></a>, где href пишем любую ссылку.
Надеюсь, я всё описал понятно и вам понравилась эта статья 😄
Если есть вопросы, задавайте их в комментариях, постараюсь ответить 💬
Файлы из статьи: https://disk.yandex.ru/d/Y78PSsH5ND5xMw 📎
Читайте также:
