Бесплатный курс от Хекслет "Основы современной верстки"
Введение в HTML
Что такое HTML
HTML (HyperText Markup Language) — язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее.
Элемент - это общее понятие = тег с его атрибутом и контентом внутри.
Тег - просто конструкция.
Атрибут - это специальная конструкция позволяющая указать дополнительную информацию о теге или его характеристиках и настройках.
ДЗ №1: https://codepen.io/hexlet/pen/PopaGBJ
Решение: https://codepen.io/DmitryBVita/pen/QWVLmPj
ДЗ №2: https://codepen.io/hexlet/pen/OJpdqKz
Решение: https://codepen.io/DmitryBVita/pen/KKxPrMj
ДЗ №3: https://codepen.io/hexlet/pen/jOBjgyw
Решение: https://codepen.io/DmitryBVita/pen/wvEwOEb
Базовая структура HTML документа
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body></body>
</html>Этот набор кажется не очень большим, но браузеру он сообщает множество полезной информации.
DOCTYPE
Первая конструкция в любом HTML-документе — элемент <!DOCTYPE>, Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:
<!DOCTYPE html>Парный тег html
Тег <html></html> является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.
Важной частью тега html является наличие атрибута lang. В нем указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS.
В качестве значения атрибут lang принимает знакомые всем сокращения языков. Для русского — lang="ru", для английского — lang="en", для немецкого — lang="de".
Парный тег head
Тег <head></head> служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.
Любые данные, которые указаны внутри тега <head>, не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.
Метаинформация
Метатег <meta>. Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег <meta> с атрибутом charset. Он позволяет установить кодировку документа.
Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8. Именно ее рекомендуется устанавливать в качестве значения атрибута charset. Теперь браузер будет отображать все символы именно в этой кодировке.
<meta charset="UTF-8">Заголовок страницы
На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера.
Для указания заголовка страницы используется специальный парный тег <title></title>, внутри которого указывается нужная информация.
<title>Моя первая страница</title>Тело документа
После тега <head> в документе указывается парный тег <body></body>, который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
<header>
<img src="/logo.png" alt="Логотип">
<!-- Логотип сайта -->
<nav id="menu">
<!-- Меню -->
<ul>
<li><a href="/">Главная</a></li>
<li><a href="/about">О нас</a></li>
<li><a href="/contacts">Контакты</a></li>
</ul>
</nav>
</header>
</body>
</html>Статьи:
Селектор (от англ. select — выбирать) — это шаблон, который позволяет обратиться к элементу или группе элементов веб-страницы, чтобы применить к ним стили CSS. Его указывают перед блоком со свойствами.
Есть около 20 способов выбрать нужный элемент. Рассмотрим основные:
- Универсальный селектор
- Селектор по тегу (элементу)
- Селектор по идентификатору (id)
- Селектор по классу (class)
- CSS-селекторы по атрибуту
- Псевдоклассы и псевдоэлементы
- и др.
Комментариев нет:
Отправить комментарий