Для нас фронтендеров это язык разметки гипертекста, для ламеров же это язык програмированния. Тоесть простыми словами html это - как и куда засунуть этот элемент.
Этап 1. Введение в HTML или же что нужно знать
Всё начинается с создания файла в формате .html (name.html). Далее открываете любой текстовой редактор, но советую скачать новичкам NotePad++.но лучше всего для этого подходит Visual Studio Code.
Этап 2. Изучение структуры древа HTML
Для начала в созданный файлик пишем <!DOCTYPE html>, что же это означает?
Это дает браузеру или редактору понять что мы пишем код на HTML.
После начинаем создавать само древо, выглядить оно будет вот так.
<html>
<head>
</head>
<body>
</body>
</html>
Теперь разберём что это за слова и зачем они нужны.
Эти слова называются ТЭГАМИ они являются мозгом всей системы, их есть 2 вида, одиночные и не одиночные.Различия между ними в том что одни нужно закрывать:
<head>
</head>
А другие нет:
<link href="*******" rel="*****">
Допустим с этим вы разобрались, приступаем к тому для чего нужны тэги head, body.
HEAD
<head> это невидимая часть кода. Например название сайта в поисковой системе и в окне браузера:
в <head> мы пишем настройки для страницы. И так первый наш тег - <title>. Он задаёт имя сайту, для окна браузера и в поисковой системе.
<title>Мой сайт - главная</title>
BODY
<body> это видемая часть кода(Проще говоря то, что увидит пользователь сайта), там можно прописать текст, картинки, заголовки, цитаты и многое другое.
ЭТАП 3. META ТЭГИ
Следующий тег - <meta>. Он задаёт описание, ключевые слова, кодировку и многое другое.
САМЫЕ ВАЖНЫЕ МЕТА ТЭГИ.
<meta name="description" content="Описание"> Это описание страницы для поисковых систем.
<meta name="Keywords" content="Ключевые слова"> Это ключевые слова страницы. Раньше по ним поисковые системы искали сайты. Как сейчас никто не знает.
<meta name="charset" content="кодировка(UTF-8 по стандарту)"> Кодировка страницы.
ЭТАП 4. ТЭГИ <link>, <a>
ТЭГ <a>
Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.
АТРИБУТЫ ТЭГА <a>
accesskey - Активация ссылки с помощью комбинации клавиш.
coords - Устанавливает координаты активной области.
download - Предлагает скачать указанный по ссылке файл.
href - Задает адрес документа, на который следует перейти.
hreflang - Идентифицирует язык текста по ссылке.
name - Устанавливает имя якоря внутри документа.
rel - Отношения между ссылаемым и текущим документами.
rev - Отношения между текущим и ссылаемым документами.
shape - Задает форму активной области ссылки для изображений.
tabindex - Определяет последовательность перехода между ссылками при нажатии на кнопку
target - Имя окна или фрейма, куда браузер будет загружать документ.
title - Добавляет всплывающую подсказку к тексту ссылки.
type - Указывает MIME-тип документа, на который ведёт ссылка.
ТЭГ <LINK>
Тэг <link> устанавливает связь с внешним документом вроде файла со стилями или со шрифтами. В отличие от тега <a>, тег <link> размещается всегда внутри контейнера <head> и не создает ссылку.
АТРИБУТЫ ТЭГА <LINK>
charset - Кодировка связываемого документа.
href - Путь к связываемому файлу.
media - Определяет устройство, для которого следует применять стилевое оформление.
rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
sizes - Указывает размер иконок для визуального отображения.
type - MIME типданных подключаемого файла
СЛЕДУЮЩИЙ УРОК
СКИНУТЬ АВТОРУ НА ДОШИК (УСКОРИТ НАПИСАНИЕ СТАТЕЙ)