В сегодняшнем уроке, посвященном технологической организации сайта, мы рассмотрим тег таблицы и составляющие его теги. Рассмотрим форматирование таблицы и способы определения стилей. Рассмотрим тег изображения, а также относительную адресацию, используемую для внедрения связанных файлов, в частности файлов изображений, на страницу. Пожалуйста, создайте новую страницу в редакторе кода. Задайте в ней базовую структуру страницы, укажите кодировку или воспользуйтесь автоматически созданной разметкой, если вы работаете в редакторе Visual Studio Code. В теге названия страницы разместите текст "Материал проекта". Это название будет отображаться во вкладке окна браузера, когда вы откроете страницу. Теперь сохраните страницу в папке вашего сайта под именем elements.html, используя в именовании файла латиницу и предварительно убедившись в том, что в редакторе текста задана кодировка UTF-8. Теперь разместим в секции тела документа (в секции body) тег таблицы table. Это блочный парный тег, подробно вы можете изучить его, перейдя в соответствующий раздел ресурса w3schools.com, ссылка указана на странице. Мы разберем те моменты, которые нам потребуются для ответа на задания текущего модуля. Тег таблицы включает в себя теги строки tr, они располагаются внутри таблицы друг под другом по вертикали и включают в себя теги ячеек th и td, которые располагаются друг за другом по горизонтали (th — это тег ячейки, в которой размещается заголовок графы таблицы, td — это тег стандартной ячейки). Для того чтобы графы таблицы были стройными, количество ячеек в каждой строке должно быть равным. Ширина ячейки формируется по количеству размещенного в ней текста. Ячейки, составляющие одну графу, наследуют ширину верхней ячейки. В том случае, если в графе есть ячейка с более протяженным содержанием, то ширина графы задается ею. В коде, приведенном на странице, текст и, соответственно, ширина заглавных ячеек больше текста последующих ячеек, поэтому ширина граф задается ими. Пожалуйста, разместите внутри тега таблицы теги строк, а внутри тегов строк — теги ячеек. Разместите текст внутри ячеек. Обратите внимание на то, что все теги, составляющие структуру страницы, являются парными. И ячейка, и строка, и таблица имеют начало и конец. Не забывайте закрывать эти теги во избежание некорректного разбиения информации по строкам и графам таблицы. Сохраните ваш документ и посмотрите в браузере. По умолчанию контур таблицы не отображается на экране. Если вы хотите отобразить контур, то необходимо задать стилевое описание элементов. Необходимо задать значение вида границ самой таблицы и ее ячеек. Для того чтобы не описывать стиль каждой ячейки таблицы через атрибут style, мы, как показано на экране, определяем стиль ячеек, а также других элементов таблицы в теге style в секции заголовка документа. Внутри тега style указывается элемент, который следует форматировать, в фигурных скобках задается его описание так же, как и в значении атрибута style, через точку с запятой. Вид границ ячеек и таблицы, а также других элементов HTML задает параметр border, который описывается тремя свойствами: толщиной, характером и цветом линии контура. Все три свойства необходимо указывать явно: отсутствие значения хотя бы одного из свойств не позволит отобразить линию на экране. Свойство border-collapse склеивает удвоенные границы, образованные соседними ячейками. Сохраните ваш документ без указания этого свойства и с ним и посмотрите, чем отличается отображение таблицы в окне браузера. Помимо границ элементу таблицы сейчас задана ширина в абсолютных единицах (в пикселях). Значение ширины в 960 пикселей соразмерно ширине экрана планшета или настольного монитора с низким разрешением. Обратите, пожалуйста, внимание на то, что ячейки и графы при указании ширины таблицы автоматически уравнялись по ширине между собой. Если требуется задать конкретную ширину графы таблицы, то в стиле принадлежащей графе ячейки в верхней строке таблицы указывается значение ширины. В данном случае значение задано посредством атрибута style внутри тега ячейки и составляет 400 пикселей. Для объединения ячеек используют атрибут colspan для объединения ячеек в строке и атрибут rowspan для определения ячеек в графе таблицы. В значении атрибутов указывается то, ширине или высоте скольких ячеек в соседней строке или графе будет соответствовать ширина такой ячейки. Форматируя таблицу, мы с вами применили два разных способа определения стилей. Один способ заключается в определении стилей посредством атрибута тега style. Область действия стилевых описаний — в данном случае это только текущий тег. По предыдущему уроку вы помните, что в атрибуте можно записать любое количество свойств, перечислив их через точку с запятой, а значение свойств указав через двоеточие. Сейчас на экране вы видите запись стиля таблицы, в которой заданы свойства цвета шрифта, ширины и контура таблицы, а также то, как отображается эта таблица в окне браузера. Второй способ определения стилей — описание свойств составляющих страницу элементов в секции заголовка документов в теге style. Атрибут тега style type указывает то, на каком языке пишутся стилевые описания. Область действия стилевых описаний в данном случае — текущая страница. Все имеющиеся на странице элементы будут отформатированы так, как описан соответствующий тег в заголовке документа. Если разные элементы характеризуются одинаковыми свойствами, то можно задать для них одно стилевое описание, перечислив элементы через запятую, как это сделано сейчас для ячеек заголовка и рядовых ячеек таблицы. Стилевое описание элементов указывается в фигурных скобках, свойства перечисляются через точку с запятой. Третий способ определения стилей — описание свойств элементов в отдельном файле с расширением.css. Синтаксис стилевых описаний в этом случае совпадает с синтаксисом стилевых описаний внутри тега style. В начале документа CSS указывается кодировка файла (UTF-8), за указанием кодировки следует стилевое описание элементов страниц, к которым подключена такая таблица стилей. На экране вы видите описание тегов таблицы и ячеек. Стили выносят в отдельный файл, когда одинаковым образом следует описать набор страниц. Это такой экономичный способ задания описания, когда мы создаем одну таблицу и соотносим ее со множеством файлов страниц. Чтобы соотнести таблицу с HTML-страницей, нам нужно ее подключить. Иными словами, обратиться из файла страницы к файлу стилевых описаний. Традиционно файлы стилевых описаний размещаются в папке под названием css. Эта папка располагается в корне сайта на одном уровне со страницами сайта. При разработке сайта для обращения к документам, расположенным внутри него, используют относительную адресацию, то есть путь к подключаемому документу прописывают относительно страницы, из которой происходит обращение. В таком случае папка сайта является замкнутой системой, и ее можно перенести с одного носителя информации на другой. Ссылка на документ в относительной адресации представляет собой название документа, если обращение происходит на одном уровне иерархии сайта, и название папки и через прямой слэш название документа, если запрашиваемый документ лежит на другом уровне иерархии, как в случае с обращением к стилевому описанию. Файл стилевого описания вложен в папку css, поэтому при обращении к нему из файла страницы, лежащего в корне сайта, указывается сначала папка css, а потом требуемый файл. Файл стилевых описаний подключается в секции заголовка. Для подключения используется тег link. В нем посредством атрибутов указывается то, что подключаемая страница является стилевым описанием и написана на языке CSS. В атрибуте href указывается место нахождения или адрес файла. Если требуется обращение из файла, самого вложенного в папку, то в адресации переход на уровень вверх по структуре файлов указывается посредством двух точек и прямого слэша.