Базовый HTML

Аббревиатура расшифровывается как HyperText Markup Language (хайпер текст маркап ленгвич), в переводе на русский — «Язык гипертекстовой разметки».
HTML используется для создания разметки веб-страницы, ее структуры, которая состоит из текста, заголовков, ссылок, кнопок, изображений и множества других элементов.
Размещения текста, заголовков, изображений, ссылок выполняется с помощью элементов, которые называются тегами.
В разных браузерах действие тегов может отображаться по разному. Чтобы было одинаково необходимо записать дополнительные указания используя css.
Что такое тег?
Определённые слова или даже буквы, заключенные в угловые скобки называются тегами. Например <img> тег, с помощью которого можно вставить изображение или видео на веб-страницу.
Теги бывают парные и одиночные теги
Большинство тегов парные, например тег для создания текста в виде параграфа <p> ......</p>
<p> параграф с текстом </p>
содержит открывающий тег <p>
и закрывающий тег </p>
Отличаются тем, что у закрывающего есть слеш /
Есть одиночные теги, например <input/> , который применяют для создания поля ввода текста например в форме обратной связи. Окно для ввода ИМЕНИ, ТЕЛЕФОНА и др.

Браузер считывает теги слева на право и сверху вниз, создавая поток.
Вложенность тегов.
В html теги могут быть вложены друг в друга.
Например парный тег <div>.....</div> образует блок. Внутри него может находится любое количество других тегов

<div>
<p>Я параграф с текстом</p>
<input/>
</div>

Нужно помнить, что при вложении тегов они должны быть правильно закрыты в порядке обратном их порядку открытия

<div>
<p>.........</p>
……..
</div>

Не правильное закрытие тегов приведет к неправильному отображению содержания страницы

В теме разберем:
 Что такое IDE
 Основные элементы интерфейса
 Сниппеты Emmet
 Hello World
Что такое IDE?
IDE расшифровывается как integrated development environment, переводится как интегрированная среда разработки. Если простыми словами, то это текстовый редактор на стероидах, в котором пишут код. Именно в этого рода приложениях разработчики проводят большую часть времени во время работы.
IDE бывают бесплатные и платные.
Visual Studio Code - бесплатный редактор (скачать с сайта https://code.visualstudio.com/ )
Webstorm - платный
Создадим HTML документ и назовем его index (что значит главный и будет открываться первым при запуске.)
Если в VS Code написать ! а потом нажать Tab то автоматически отобразится структура шаблона простейшего html документа. Это возможно благодаря сниппетам.
Сниппеты кода — это заранее подготовленные фрагменты кода, которые можно повторно использовать в различных проектах для ускорения работы и минимизации ошибок. Они позволяют быстро внедрять готовые решения,
В контексте HTML-кода сниппеты могут представлять собой шаблоны разметки, фрагменты кода для добавления скриптов, таблиц, форм и других элементов на веб-страницы. Например, с их помощью можно быстро добавить на сайт скрипт отслеживания (Google Analytics, Facebook Pixel) или создать более сложные макеты для баннеров. 

В теме разберем: 

• Блочные и строчные элементы
•  Назначение тегов. Теги <div> и <span>

Большинство HTML-тегов можно разделить на две категории:

•  блочные и
•  строчные.

Блочные теги– это теги, создающие блоки, которые занимают всю доступную им ширину. К ним относится часто используемый тег <div></div>
Строчные теги– это теги, создающие элементы внутри блоков, и занимают они ширину равную их внутреннему содержимому. Например тег <span></span>

В теме разберем:
 Заголовки: теги от <h1> до <h6>
 Параграфы: тег <p>
 Списки: теги <ol>, <ul>, <li>
Изучаем первые теги специального назначения, формирующие основной текстосодержащий контент.

В теме разберем: Видоизменение текста
 Познакомимся с такими тегами, как <b> и <strong>, <i> и <em>, <s>, <u>, <sub>, <sup>, <small>, <mark>, <br> и <hr>, <code> и <pre>.
Все теги форматирования текста являются строчными элементами и их можно использовать совместно друг с другом практически в любых комбинациях.
То есть можно одновременно сделать текст, например, жирным, курсивом и зачеркнутым, для этого лишь нужно обернуть нужный текст в определенный набор тегов.

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

В теме разберем:
 Ссылка, тег <a>
 Якорная ссылка
 Ссылка на файл, email, телефон
 Открытие в новой вкладке
 Кнопка, тег <button>
 Дилемма: ссылка или кнопка
Для навигации по страницам сайта и за его пределами в интернете используются ссылки.
Ссылка может вести на любую страницу на текущем сайте или на любом другом в интернете, может указывать на конкретный элемент текущей страницы, а также на файл, электронную почту или телефон.

Подробнее о ссылках и кнопках в видео.

В теме разберем:
 Тег <img>
 Атрибут alt, width и height, loading
 Относительные и абсолютные пути

В теме разберем:
 Тег <blockquote>, <cite>, <q>
 Атрибут cite
Запомни!
Цитата без указания источника — плохая цитата в плане информативности и семантики.

• Есть два способа, чтобы указать источник цитаты:через отдельный тег <cite>
• через одноименный атрибут

В видео разберем использование различных тегов цитат и их особенности.

В теме разберем:
 Теги <video>, <source>, <audio> и <iframe>
 Атрибуты autoplay и muted, loop, poster, playsinline и другие
Что есть медиаконтент?
Под медиаконтентом в контексте HTML подразумеваются
изображения, видео, аудио и фреймы.
С изображением и его тегом img мы уже знакомы, давайте разберем теги под остальные виды медиаконтента - видео, аудио и фреймы.

Tilda Publishing
В теме разберем: Блочные и строчные элементы
 Назначение тегов
 Теги <div> и <span>
Большинство HTML-тегов можно разделить на две категории:
 блочные и
 строчные.
Блочные теги– это теги, создающие блоки, которые занимают всю доступную им ширину.
Строчные теги– это теги, создающие элементы внутри блоков, и занимают они ширину равную их внутреннему содержимому.
Блочные и строчные элементы
В теме разберем:
 Заголовки: теги от <h1> до <h6>
 Параграфы: тег <p>
 Списки: теги <ol>, <ul>, <li>
Изучаем первые теги специального назначения, формирующие основной текстосодержащий контент.
В теме разберем: Видоизменение текста
 Познакомимся с такими тегами, как <b> и <strong>, <i> и <em>, <s>, <u>, <sub>, <sup>, <small>, <mark>, <br> и <hr>, <code> и <pre>.
Все теги форматирования текста являются строчными элементами и их можно использовать совместно друг с другом практически в любых комбинациях.
То есть можно одновременно сделать текст, например, жирным, курсивом и зачеркнутым, для этого лишь нужно обернуть нужный текст в определенный набор тегов.

Все упомянутые теги актуальны для постоянного использования, поэтому стоит их закрепить в памяти.
В теме разберем:
 Ссылка, тег <a>
 Якорная ссылка
 Ссылка на файл, email, телефон
 Открытие в новой вкладке
 Кнопка, тег <button>
 Дилемма: ссылка или кнопка
Для навигации по страницам сайта и за его пределами в интернете используются ссылки.
Ссылка может вести на любую страницу на текущем сайте или на любом другом в интернете, может указывать на конкретный элемент текущей страницы, а также на файл, электронную почту или телефон.

Подробнее о ссылках и кнопках в видео.
В теме разберем:
 Тег <img>
 Атрибут alt, width и height, loading
 Относительные и абсолютные пути
В теме разберем:
 Тег <blockquote>, <cite>, <q>
 Атрибут cite
Запомни!
Цитата без указания источника — плохая цитата в плане информативности и семантики.

• Есть два способа, чтобы указать источник цитаты:через отдельный тег <cite>
• через одноименный атрибут

В видео разберем использование различных тегов цитат и их особенности.
В теме разберем:
 Теги <video>, <source>, <audio> и <iframe>
 Атрибуты autoplay и muted, loop, poster, playsinline и другие
Что есть медиаконтент?
Под медиаконтентом в контексте HTML подразумеваются
изображения, видео, аудио и фреймы.
С изображением и его тегом img мы уже знакомы, давайте разберем теги под остальные виды медиаконтента - видео, аудио и фреймы.

В теме разберем:
 Теги: <table>, <tr>, <td>, <th>, <caption>, <thread>, <tbody>, <tfoot>
 Вспомогательные структурные теги
 Объединение ячеек через атрибуты colspan и rowspan
Табличная верстка
Таблицы в HTML – это не просто набор тегов для вывода табличных данных. Это целая эпоха так называемой «табличной верстки», когда сайт буквально верстали как таблицу.

Способ верстки «на таблицах» уже давно не актуален, ведь силами CSS сейчас всё это делается гораздо удобнее.
Однако для табличных данных теги таблиц можно и нужно использовать.

Подробнее о них поговорим в видео.

В теме разберем:
 Что такое формы и поля ввода
 Теги: <form>, <fieldset>, <legend>, <label>, <input>
 Тег <input> с <label>, атрибуты for и id
 Атрибуты: name, value, type text
Что такое формы и поля ввода?
Это главные интерактивные элементы любого веб-сайта.

Пользователи постоянно вводят какие-то данные о себе в поля, заполняя анкеты обратной связи; жмут на квадраты-чекбоксы, отмечая галочкой свое согласие с различными условиями.
Для каждого из сценариев в HTML есть соответствующий тег и набор атрибутов.

Разберем их примеры в видео.

В теме разберем:
 Вариации элемента поля ввода <input> для емейла, url-адреса, номера телефона,  поискового запроса, числа, пароля, даты в различных форматах, выбора цвета, файла;
 Поле ввода <input> для реализации чекбокса и радиокнопки.

В теме разберем:
 Тег <textarea>
 Теги <select>, <option>
 Тег <optgroup>

В теме разберем:
 Семантика в HTML
 Новые теги из HTML5: <header>, <footer>, <main>, <section>, <article>, <aside>, <nav>
Что означает семантика в HTML?
Семантика во фронтенд-разработке и в верстке в частности – это показательная характеристика качества веб-приложения.
Если разметка сайта «семантичная», то это дает ощутимую пользу владельцу сайта. В общем и целом, семантика – это использование HTML-тегов по их назначению.

В теме разберем:
 Что такое растровая и векторная графика
 SVG, формат и тег
 В каких случаях применяет svg, jpg и png
 Использование SVG в веб-разработке
 Выгрузка SVG изображения из Figma
 Как изучать SVG и нужно ли
Растровая и векторная графика
Векторная графика — это изображения, созданные на основе множества точек, объединенных математическими формулами. Под растровой графикой, в основном, подразумеваются форматы jpg, png, gif.
Векторную графику можно противопоставить растровой.

Отличия и преимущества вариантов более подробно рассмотрим в видео.

В теме разберем:
 Что такое глобальные атрибуты
 Набор глобальных атрибутов: class, id, title, hidden, tabindex, lang, contenteditable, spellcheck, style, data-*
 Комментарии в коде и зачем они нужны
Глобальные атрибуты
Под глобальными атрибутами в HTML имеются в виду атрибуты, которые можно применить практически к любому тегу.

Чаще остальных используется глобальный атрибут class.
Наглядно этот и другие глобальные атрибуты разберем в видео ниже.

В теме разберем:
 Вопрос актуальности HTML-сущностей
 Сервис caniuse
 Сервис caninclude
 Валидатор разметки W3C
Вопрос актуальности HTML-сущностей
По мере развития языка HTML появлялись и до сих появляются новые теги и атрибуты, однако некоторые из них не проходят проверку временем и по каким-то причинам перестают считаться актуальными и рекомендованными к использованию. Либо же некоторые браузеры в принципе никогда не поддерживали определенный специфичный тег или атрибут.

Необходимо следить за тем, какие сущности тегов и атрибутов вы используете в своей разметке, а способы проверки актуальности разберем более детально в видео.

Поздравляем!
В этом уроке мы поговорили о вопросе актуальности тегов и рассмотрели несколько важных сервисов — caniuse, caninclude и валидатор разметки w3c.

На этом обучение базовому HTML подошло к концу.

Полученной в рамках этого курса информации объективно будет достаточно для того, чтобы смело двигаться дальше и изучать CSS