Обучение я начал с выбора траектории обучения, в этом не помог канал Pomazkov JS, который представил road-map изучения разработки сайта.
Естественно обучение я начал с изучения html. До этого я уже сталкивался с ним, но сейчас я решил изучить его полностью. В изучении базы html мне помог сайт HTMLАcademy с их курсом по обучению html и css. Начал я с основ html, структура кода, теги html, добавление тегов и семантическая верстка. Закончив с html на HTMLAcademy я начал самостоятельное изучение различных видов тэгов и семантической верстки. Ссылки на все изученные материалы будут представлены в конце статьи. Далее будет представлена основная информация по html, собранная воедино.
Основы html
Начнем с основного, со структуры кода html. Начнем с синтаксиса. В html есть так называемые "теги". Любой тег обертывается в такие стрелки - <>. Существуют парные теги и одиночные.
<!--Пример одиночного тега-->
<link rel="stylesheet" href="style.css">
<!--Пример парного тега-->
<div></div>
Как вы могли заметить, парный тег заканчивается тегом, с косой чертой перед названием, это второй, закрывающий тег.
Кстати, комментарии в html обозначаются, так: <!--Комментарий-->
Теперь, перейдем к изучению структуры документа.
Все начинается с декларации типа документа:
<!DOCTYPE html>
Он помогает браузеру понять, какая версия html используется, чтобы он правильно отобразил страницу.
Далее идет основной тег html, содержащий в себе все остальные, например <head> или <body>:
<html>
<!--Любой тег-->
</html>
Обычно именно в него записывают атрибут lang.
<html lang="ru"></html>
Значение атрибута lang равное ru, это значит, что язык сайта русский, аналогично если язык сайта будет английским, то значение будет равно en.
Внутри тега <html> находятся два других - <head> и <body>.
В теге <head> хранится важная служебная информация, а в <body> отображаемая часть сайта.
Соберем сейчас все кусочки в одно целое и получим "позвоночник" сайта:
<!DOCTYPE html>
<html lang="ru">
<head>
<!--Служебная информация-->
</head>
<body>
<!--Содержимое сайта-->
</body>
</html>
Вот и готов "позвоночник" страницы, теперь разберем что должно находиться в тегах служебной информации и содержимого сайта.
В служебной информации указывается кодировка сайта, подключаемые стили, информация для SEO (описание и ключевые слова в выдаче поисковика).
Также в этом теге можно указать название вкладки в браузере, делается это с помощью тега <title>.
<title>Вкладка</title>
Кодировка указывается с помощью тега <meta> и атрибута charset, находящегося внутри него.
<meta charset="utf-8">
Значение utf-8 говорит браузеру, что необходимо использовать кодировку utf-8, для стабильной работы сайта.
Стили подключаются с помощью тега <link>
<link rel="stylesheet" href="style.css">
Атрибут href указывается для определения ссылки откуда будет браться информация, а в данном примере файл со стилями style.css. Атрибут rel указывает на тип ссылки, а именно stylesheet (стили).
Про данные для SEO поговорим в другой статье.
Теперь перейдем к содержимому сайту, в этой статье будут описаны самые основные теги внутри body:
- header;
- main;
- footer.
Начнем с header - это шапка сайта, самая верхняя часть страницы.
Записывается этот тег так:
<header>
Содержимое шапки
</header>
Дальше идет main - основная часть сайта, там, где размещается контент.
Записывается он так:
<main>
контент
</main>
И в конце идет подвал сайта или "футер". Обычно там записывается контактная информация, а также имя разработчика сайта. Форма записи:
<footer>
Подвал сайта
</footer>
Итак, теперь соберем все изученные сегодня части и соберем воедино. Получается вот такой код, который является "скелетом" сайта.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Первый сайт</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>Шапка</header>
<main>Контент</main>
<footer>Подвал</footer>
</body>
</html>
Теперь можете создать файл index.html, вставить этот код и открыть файл в браузере и вы увидите свою первую верстку, поздравляю!
В следующей статье я расскажу как я изучал различные другие теги и подробнее вам расскажу про них. На этом все, до встречи!