HTML-документ — это обычный текстовый документ. Он может быть создан как в обычном текстовом редакторе типа Блокнота и имеет расширение ”.html”. А браузер — это просто средство просмотра таких документов.
На самом деле многие браузеры любой текстовый документ воспримут как веб-страницу. Если прямо сейчас сохранить на рабочем столе файл с текстом “Сайт” и мышкой перетащить этот файл в окно ГуглХрома, то у вас откроется ваш “Сайт”. Серьезно. Попробуйте сами ;)
Давайте не будем издеваться над браузером и заставлять додумывать за нас что и зачем мы делаем, и поправим документ, назвав его index и добавим расширение html. Название общепринятое для веб страниц (обычно так называют главную страницу сайта, которая открывается по умолчанию), а с расширением все понятно - теперь файл можно открыть двойным клиром в браузере который у вас выбран по умолчанию.
Но настоящий HTML-документ состоит из специальных элементов. Эти элементы по сути тоже текст. Код, текст, какая разница? Каждый элемент обозначается так называемыми тегами. Теги всегда пишутся в треугольных скобках, и это практически все, что нам пока надо про них знать.
Первый и самый распространенный тег - тег параграфа <p> (от слова paragraph). Если написать такой тег один раз то мы сами быстро запутаемся где параграф начинается, а где заканчивается. Чтобы не путаться теги пишутся два раза - в начале элемента и в конце. В конце тег делают закрывающим, добавляя косую черту, и получается вот так:
<p>Сайт</p>
Между прочим у нас уже на полном серьезе получился сайт :)
Но хочется сделать что-то более визуально похожее на сайт, так что давайте выучим ещё один тег: заголовок <h1> (от слова heading и уточнение что первого уровня). Ну и сразу добавим еще строку:
<h1>Сайт</h1>
<p>Главная страница</p>
Уровней заголовков по умолчанию, кстати, всего 6, и у браузеров для них есть “стандартные” размеры шрифтов, которые они используют, если им не сказано делать иначе. А пока у нас ничего не сказано, так что браузер использует то, что может. Но в следующих уроках мы узнаем как быть, если вам нужно больше типов заголовков.
Пришло время узнать про вложенность тегов. Вложенный - это когда первый тег еще не закрыт, а уже открыт следующий. Ну и сразу выучим еще один тег - жирный текст <b> (от слова bold). Добавим еще немного текста, чтобы было с чем экспериментировать.
<h1>Сайт</h1>
<p><b>Главная страница</b> - место где будет самая важная информация</p>
Есть теги, которые обязательно должны быть на странице, их всего несколько.
Взглянем на базовую структуру любого HTML-документа:
Сейчас уже понятное что тут у нас куча тегов, но в некоторых из них странное содержимое со знаков равенства и в кавычках. ПОДРОБНОСТИ
DOCTYPE
Первая конструкция в любом HTML-документе — элемент DOCTYPE. Он не относится к тегам и никаким образом не может отображаться на странице. Его задача — указать браузеру, какой стандарт HTML используется в этом документе. Сейчас это везде стандарт HTML5. Записывается он следующим образом:
<!DOCTYPE html>
С приходом стандарта HTML5 элемент DOCTYPE немного упростился. Если вы встретитесь с сайтами, созданными пять-десять лет назад, то сможете увидеть совершенно другие записи. Они были больше и напрямую влияли на то, как браузер обработает информацию. Неправильное указание элемента DOCTYPE могло привести к некорректному отображению. Сейчас такой проблемы нет, поэтому вы можете без всяких опасений использовать конструкцию, которая указана в данном уроке. Использование старых значений DOCTYPE необходимо только при разработке с поддержкой очень старых браузеров.
Парный тег html
Тег <html></html> является основой основ. Именно внутри него располагается вся информация. Благодаря этому тегу браузер понимает, где начинается контент, который необходимо обработать как HTML.
Важной частью тега html является наличие атрибута lang. В нём указывается язык, на котором отображается веб-страница. С помощью этого атрибута браузеры могут корректно считать множество специфичных символов, которые присутствуют в разных языках. Помимо этого, атрибут lang начинает использоваться и в CSS, с которым вы познакомитесь в следующих уроках. В новых стандартах CSS появляются свойства, которые опираются на данный атрибут. Например, позволяют корректно переводить слова в тексте.
В качестве значения атрибут lang принимает знакомые всем сокращения языков. Для русского — ru, для английского — en, для немецкого — de.
Парный тег head
Тег служит для хранения служебной информации. Здесь возможны самые разные сочетания тегов, которые подсказывают браузеру название страницы, описание, ключевые слова и так далее. Такая информация называется метаинформацией. В современном вебе она отвечает не только за служебную информацию для браузера, но и активно используется при продвижении сайта. Поисковые системы считывают всю эту информацию и на основе множества алгоритмов определяют место сайта при разных поисковых запросах.
Любые данные, которые указаны внутри тега head, не видны при отображении страницы в браузере. Это значит, что нет необходимости располагать там информацию, которая предназначена для отображения.
Хоть различной информации внутри head может быть множество, в этом уроке разберём несколько основных тегов, которые пригодятся при создании любой веб-страницы:
Метаинформация
Необязательным элементом раздела <head> является элемент <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора HTML-документа и прочие свойства метаданных.
Метатег <meta>. Он принимает множество разных атрибутов, с которыми вы познакомитесь при создании своих сайтов. В настоящее время важным является метатег <meta> с атрибутом charset. Он позволяет установить кодировку документа.
Кодировка — таблица символов. В ней каждый символ имеет уникальный код, благодаря чему программы, в том числе и браузеры, могут одинаково отображать один и тот же текст. У разных пользователей может стоять различная кодировка по умолчанию. Это приводит к тому, что у некоторых пользователей текст может отображаться в виде «кракозябр», хотя у вас он будет отображаться правильно. Универсальной кодировкой, которая содержит большинство необходимых символов из разных языков, является кодировка UTF-8. Именно её рекомендуется устанавливать в качестве значения атрибута charset. Теперь браузер будет отображать все символы именно в этой кодировке.
<meta charset="UTF-8">
Элемент <head> может содержать несколько элементов <meta>, потому что в зависимости от используемых атрибутов они несут различную информацию.
<meta name="description" content="Описание содержимого страницы"><meta name="keywords" content="Ключевые слова через запятую">
Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:
<meta name="description" lang="ru" content="Описание содержимого страницы"><meta name="description" lang="en" content="Description"><meta name="keywords" lang="ru" content="Ключевые слова через запятую"><meta name="keywords" lang="en" content="Keywords">
Заголовок страницы
На любом веб-сайте вы можете заметить заголовок, который отображается на вкладке вашего браузера. Например, на странице курса «Основы современной вёрстки» вкладка в браузере Google Chrome выглядит следующим образом:
Для указания заголовка страницы используется специальный парный тег <title></title>, внутри которого указывается нужная информация.
<title>Моя первая страница</title>
Тело документа
После тега head в документе указывается парный тег <body></body>, который является «телом» всей страницы. Именно здесь размещается вся информация, которая будет выведена на странице.
Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.
Предок — элемент, который заключает в себе другие элементы.
Потомок — элемент, расположенный внутри одного или более типов элементов.
Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их.
Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня.
Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня.
Задание для отработки:
Создайте базовую структуру документа и попробуйте разные варианты текста внутри тега <title>. Можете попробовать добавить туда даже эмодзи и посмотреть, как браузер выведет такой заголовок
Задание для работы в группе:
нет
====== задачи для эксперта ======
Где искать теги, нужны ссылки на спеки/доки на русском и английском
