[МУЗЫКА] [МУЗЫКА] Все рассмотренные выше элементы при загрузке страницы выводятся в окно браузера. Помимо элементов, отображаемых в окне браузера, веб-страницы содержат служебные элементы, не выводимые на экран и предназначенные не для пользователя, а для программ-интерпретаторов. В первую очередь это тег html, говорящий интерпретатору о том, что перед ним документ, написанный на языке HTML. Это тег-контейнер — он охватывает документ целиком. В нём располагаются две основные части документа, два основных тега: тег заголовка документа head и тег тела документа body. Тег заголовка документа ограничивает с начала и с конца секцию с описанием содержимого документа — это тег-контейнер. Секция заголовка включает в себя служебную информацию или метаинформацию, то есть информацию об информации, размещённой в документе и выводимой в окно браузера в виде страницы для пользователя. Информация секции заголовка не выводится в окно браузера. Тег тела документа ограничивает с начала и с конца секцию содержимого или контента документа — это тег-контейнер, он содержит в себе информацию для пользователя, то есть информацию, выводимую в окно браузера. В этой секции, ещё раз повторю, содержатся, в частности, те элементы страницы, которые мы рассмотрели ранее, а именно заголовок страницы, параграф, перевод строки, теги логического форматирования текста. Пожалуйста, перенесите в ваш документ базовую структуру страницы таким образом, чтобы набранная ранее информация оказалась внутри тега body, то есть была ограничена с двух сторон — с начала и с конца — открывающим и закрывающим тегами секции тела документа. Пожалуйста, обратите внимание на экран: в разметке документа появились уточнения. Первое уточнение относится к определению типа документа. В теге html разработчики указывают браузеру то, на какой версии языка написан документ. В случае использования языка HTML5, как сейчас, в теге html следует указать ключевое слово !doctype. Считается, что текущая версия языка HTML является финальной, лучше уже не сделать, и если при использовании предыдущих версий нужно было указывать ту или иную версию языка, на которой написан документ, то при использовании финальной версии так прямо и говорят: написано на языке HTML. Следующий тег указывает интерпретатору на то, что документ написан с использованием кодировки UTF-8. После него тег — тег названия документа. Вот как раз содержимое этого тега пользователь видит на экране. Под тегом названия документа вы видите комментарий — это текст, заключённый в тег, состоящий из знака восклицания и тире. Он предназначен для разработчиков, не интерпретируется браузером и не выводится на экран. Комментарии разработчики могут оставлять как в секции заголовка, так и в секции тела документа. Пожалуйста, добавьте на страницу версию языка HTML, указав указание кодировки и название документа, сохраните документ и откройте его в браузере. Вы видите, где отобразилось название? Название отобразилось вверху вкладки браузера, внутри которой открыта страница. Название не только отображается во вкладке браузера, но и обрабатывается интерпретаторами. Поисковая система при соответствующем запросе первой информации для пользователя выводит название страницы. При добавлении в коллекцию избранных документов страница по умолчанию именуется в соответствии со значением тега title, поэтому, создавая страницы одного сайта, следует задавать им различные названия, тогда они будут сохраняться все, а не переписываться одна поверх другой. Мы уже говорили с вами о теге заголовка первого уровня h1. Всего в HTML предусмотрено шесть уровней структурирования страницы по вложенности информационных фрагментов один в другой — соответственно, предусмотрено шесть уровней заголовков. Заголовок первого уровня описывает всю информацию, размещённую на странице. Заголовки второго уровня описывают разделы страницы, заголовки третьего уровня — подразделы страницы и так далее. С точки зрения поисковой оптимизации сайт, страницы которого имеют тег заголовка первого уровня, находится выше по рейтингу, чем сайт со страницами без него. Сайт с тегом заголовка первого уровня и тегом названия страницы title, близким ему по значению, но не равнозначным, находится выше в рейтинге, чем сайт с этими тегами различных значений. При использовании иерархии заголовков от первого до шестого уровней страница сайта в общем случае, если не включает в себя секции подстраницы, должна содержать только один заголовок первого уровня. Это важно в силу того, что интерпретатору нужно однозначно определять основную тематику страницы. Сейчас на экране вы видите фрагмент секции тела документа с размещёнными в нём заголовком первого уровня и конкретизирующим его заголовком второго уровня. Пожалуйста, создайте на вашей странице заголовки нескольких уровней и посмотрите, как они отображаются в окне браузера. Заголовки более низкого уровня иерархии форматируются меньшим кеглем шрифта. Обратите, пожалуйста, внимание на то, что теги заголовков — это теги-контейнеры. Их обязательно нужно открывать в начале заголовка и закрывать в конце заголовка. В противном случае, если не закрыть тег заголовка, заголовком, помимо нужных слов, окажется и всё последующее содержимое страницы. И мы уже говорили с вами о том, что заголовок — это блочный тег, который размещается на странице по вертикали, под предыдущим элементом. Следующий элемент страницы, который мы рассмотрим сегодня — это список. Сейчас на экране вы видите маркированный список, то есть позиции этого списка отмечены маркером, в данном случае — точками. Список обозначается тегом ul, позиции или строки текста — тегом li. И тот, и другой теги — это теги-контейнеры, и тот, и другой теги — это блочные теги. То есть и список в целом, и каждая его строка имеют и начало, и конец, и список по отношению к другим элементам страницы располагается по вертикали, под другим и над другим элементом. Строки списка располагаются внутри списка друг под другом. Создав список на вашей странице и посмотрев его в окне браузера, вы увидите, что список, помимо маркеров, форматируется отступом от края страницы, а также от других элементов. Нумерованный список имеет структуру, сходную со структурой маркированного списка. Он состоит из таких же строк и обозначается тегом ol. Я ещё раз обращаю ваше внимание на то, что тег нумерованного списка окружает, заключает в себя строки, и каждая строка имеет начало и конец. Помимо маркированного и нумерованного списков, в разметке html предусмотрен список определений. Он обозначается тегом dl и заключает в себя по две строки на каждую позицию: некоторое понятие, заключённое в тег dt, а также определение этого понятия, заключённое в тег dd. Пожалуйста, создайте у себя на странице список определений и, сохранив документ, посмотрите, каким образом он выглядит в окне браузера. Теги html образуют структуру страницы и имеют стандартное форматирование. Для того чтобы изменить внешний вид элементов, в веб-вёрстке используют язык CSS — c его помощью задают стилевые описания тегов. Теги описывают как в теле документа, так и в заголовке документа, так и в отдельном файле — таким образом применяют три способа определения стилей. Сегодня мы с вами рассмотрим первый способ определения стилей — определение стилей в теле документа. Здесь для описания тегов используется атрибут style. В атрибуте style указывают свойства, которые требуется отформатировать, и значения этих свойств. Стилевое описание заключается в кавычки, свойства перечисляются через точку с запятой, значение свойств указывается через двоеточие. В теге style может быть описано неограниченное количество свойств элемента. Сейчас на экране вы видите форматирование колористических свойств нескольких элементов страницы. Заголовку задан красный цвет шрифта, параграфу задан синий цвет фона, списку задан зелёный цвет шрифта. Второй строке списка задан красный цвет шрифта и синий цвета фона элемента. Всего использованы два CSS-свойства: color и background-color. На экране вы видите, как такое форматирование выглядит в окне браузера. В данном стилевом описании цветового решения элементов я использовала три базовых цвета колористической модели RGB (red, green, blue), которая используется для кодирования цвета экранной графики. Посредством этой модели описываются все цвета, используемые для создания экранного изображения. В каждый пиксель экрана одновременно бьют три световых луча: красный, синий и зелёный. Каждый из них может бить с различной интенсивностью. В зависимости от сочетания интенсивности лучей в пикселе отображается тот или иной цвет. Диапазон интенсивности цвета включает в себя 256 единиц от нуля до 255. Если в точку с максимальной интенсивностью бьёт красный луч, а зелёный и синий не бьют вообще, то на экране виден красный цвет. Если с максимальной интенсивностью бьёт зелёный, а красный и синий не бьют, то зелёный и виден. Если с максимальной интенсивностью бьют красный и синий лучи, а зелёный не бьёт, то отображается маджента и так далее. Если все лучи бьют максимально интенсивно, то отображается белый цвет, если не бьют вообще, то — чёрный. В записи цвета интенсивность лучей указывается через запятую, а в последовательности — красный, зелёный, синий. Часто используемым цветам в CSS присвоены имена. Например, красному цвету присвоено имя red — вы это видите на экране в первой строке таблицы. Характер цвета можно указать в шестнадцатеричной записи — такая запись используется достаточно часто. Тогда в значении свойства color после знака диеза указывают шестнадцатеричный код цвета. Шестнадцатеричная запись показана во второй строке таблицы. В третьей, четвёртой и пятой строках красный цвет описан в моделях RGB: сначала — в единицах интенсивности, ниже — в единицах интенсивности с указанием прозрачности, ниже — в процентном соотношении цветов. В шестой и седьмой строках для описания цвета используются параметры яркости цвета и прозрачности. В стилевых описаниях проименовано большое количество цветов. Полный список цветов вы можете посмотреть на ресурсе w3schools.com — ссылка на соответствующую страницу указана на экране. Также на экране вы видите примеры именованных цветов: бежевый цвет, цвет лосося, цвет морской волны, тёмно-синий цвет, цвет золотарника, ярко-синий цвет и томатный цвет. Помимо имён вы видите шестнадцатеричную запись каждого цвета, а также непосредственно сам цвет — таким, каким он отображается на дисплее. Используя рассмотренные сегодня элементы веб-страницы, а также средства форматирования элементов, вам следует создать страницу с описанием идеи вашего будущего сайта-проекта. Это будет главная страница вашего сайта-эскиза Index.html.
