Четверг. Вечер. Ты. Комп и HTML...что может быть романтичнее?!🤩🙈
Жми ❤ и погнали😉
Начнем мы со скучной теории🙈
Ты, наверное, спрашивал, что же означают все эти странные теги <html>, <body>, <head>...зачем они вообще нужны?🤔
Да! Сегодня мы поговорим о структуре html документа🤩😁
Каждый html документ должен начинаться так: <!DOCTYPE html> Выучи это найизусть❗
Это нужно для того, чтобы твой браузер, понял, что он имеет дело с html документом (document type definition-описание типа документа) и стал его правильно отображать на монитор.
Чтобы обозначить начало и конец html документа используется тег <html>. Логично правда?!😁
Внутри этого тега все подразделяется на два блока:
1. Настройки нашего html документа. Они не отображаются на мониторе и нужны для того, чтобы рассказать браузеру как правильно нужно обращаться с нашим документом. Чтобы обозначить этот блок мы используем тег <head>.
2. Во втором блоке стоит то, что мы увидим на мониторе. Туда мы будем закидывать все те теги, которые уже знаем😉. Этот блок мы обозначим тегом <body>.
Итак, вот так выглядит структура html документа:
<!DOCTYPE html>
<html>
<head>
Сюда пишем теги с настройками
</head>
<body>
Тут то, что мы увидим на мониторе
</body>
</html>
Все просто🤗 Но нужно зазубрить это😬
А теперь практическое задание!🤩
Надеюсь, ты ещё не забыл, что такое <div>🙈
1. Создай свой контейнер <div>.
2. Положи в этот контейнер один любой заголовок и один абзац с текстом.
3. Измени цвет текста через контейнер:
<div style="color: red">
4. Сделай так, чтобы текст и заголовок начинались не с лева, а с права:
<div style="text-align: right">
Теперь ты видишь, что стайлить элементы легче, если они собраны в один контейнер?!😉
Всем успехов!😁
