Аналогия с документом MS Word

HTML

Введение в HTML

HTML – это язык гипертекстовой разметки. Под гипертекстом подразумеваются текстовые документы, аудио- и видеофайлы и изображения, связанные между собой ссылками в единую систему. Стоит отметить, что HTML не является языком программирования. С помощью HTML можно лишь делать разметку различных элементов (текст, изображения, аудио, видео), а именно их расположение и стиль отображения.

Существуют множество версий этого языка, но на данный момент говорят лишь о двух, это HTML 4.01 и HTML5. В HTML5 были добавлены новые возможности и исключены некоторые элементы языка, используемые в HTML 4.01. Мы будем изучать версию HTML5.

Аналогия с документом MS Word

Думаю, многие из вас создавали текстовые документы в MS Word. Если сравнивать страницы на чистом HTML с этими документами, то они во многом похожи. Средствами HTML так же, как и в MS Word, создаются заголовки, абзацы, полужирные и курсивные начертания текста, верхние и нижние индексы (используются в основном в математике), ссылки, вставляются изображения, таблицы, нумерованные и маркированные списки и т.д.

Сейчас я вам продемонстрирую простой пример, сделанный в LibreOffice Writer (аналог MS Word для GNU Linux) и такой же пример написанный на языке HTML.

!!!!!!!!!!!!! Вставить скрины!!!!

Как вы видите, представления этих документов во многом похоже. Есть небольшие отличия, но используя стилевые свойства можно добиться полного сходства. Но более подробно рассматривать язык CSS, который как раз отвечает за стилевое оформление страницы, мы будем во второй главе.

Чистый HTML не на много превосходит MS Word по возможностям оформления гипертекста. Обычно для создания привычных нам всем веб-страниц используют связку HTML, CSS и JavaScript. Первый, как отмечалось ранее, отвечает лишь за разметку документа. Второй отвечает за стилевое оформление (расположение элементов, цвет, шрифт, размеры элементов и текста и т.д.). Третий необходим для придания интерактивности странице. С помощью JavaScript можно задавать действия кнопкам, делать всплывающие окна или меню, динамически подгружаемые страницы и т.д.

Вложенность тегов

Очень важно соблюдать правильную вложенность тегов. Теги можно представить в виде коробок, в которые мы складываем какие-то предметы. Также в коробки мы можем складывать другие коробки, а те, в свою очередь, могут содержать другие коробки с предметами.

Рассмотрим примеры правильной вложенности тегов:

1. <p>...<em>...</em>...<p>

2. <p>...<em>...</em><span>...</span><a>...</a>...</p>

3. <div>...<p>...<span>...</span>...</p>...</div>

В первой строке в тег <p> вложен тег <em>.

Во второй строке в теге <p> содержатся сразу 3 тега: <em>, <span> и<a>. Обратите внимание на то, что эти теги стоят рядом и не пересекаются между собой.

В третьей строке в тег <div> вложен тег <p>, a в теге <p> лежит тег <span>.

Теперь как вкладывать теги нельзя:

1. <p>...<em>...</p>...</em>

2. <div>...<span>...</div>

В первой строке теги пересекаются. В тег <p> был вложен тег <em>, который не был закрыт. В место него закрывается тег </p>, а закрывающий тег </em> располагается после, когда в нём уже смысла нет.

Во второй строке в тег <div> был вложен тег <span>, который является двойным. Тег <span> не был закрыт.

Семантика

Цель языка HTML заключается в обеспечении смысла и структуры контента. Этот язык не предназначен для создания инструкции о том, как должен выглядеть контент документа (его представления), однако в нём пока присутствует такая возможность.

Очень важно подобрать для каждого элемента такой тег, который наиболее точно его бы описывал, не заботясь о том, как это будет выглядеть, т.к. оформление можно легко изменить с помощью стилей. Семантическая разметка наделяет контент смыслом, что облегчает поисковикам анализировать ваши страницы. Правильная HTML верстка поможет вам привлечь пользователей, через поисковые системы.

Возьмем для примера заголовочные теги <h1>, <h2>, <h3>..., которые мы рассматривали ранее. Поисковики смотрят на структуру заголовков, и создают смысловую иерархию контента, благодаря которой поисковик решает какие страницы выводить в первую очередь, а какие в последнюю. Тег <h1> они интерпретируют как что-то важное, например как название статьи, а <h2> как что-то менее важное, например как заголовки и т.д.

Также есть теги, которые отделяют основной контент от чего-то совершенно не важного, например от навигации по сайту, рекламы, дополнительной информации никак не относящееся к основному контенту и связанная, скорее, с дизайном сайта. Это теги <main>(выделяет основной контент), <header> (шапка сайта), <footer> (подвал), <nav> (навигация) и т.д. С точки зрения внешнего представления они ничем между собой не отличаются и их можно было бы заменить тегом <div> который не имеет никакого семантического значения. Отличаются они лишь семантическим значением, которое помогает поисковикам отделить нужное и важное для поиска от неважного.

Блочные и строчные элементы

Теперь, когда мы подготовили весь необходимый инструментарий для анализа, приступим к изучению блочных и встроенных элементов.

Если вы посмотрите в свойства CSS всех элементов, у некоторых вы можете увидеть свойство "display: block;", которое как раз и говорит браузеру, что элемент является блочным. Все блочные элементы начинаются с новой строки. Именно поэтому теги <h1> и <h2> находятся на разных строках (хотя могли бы уместиться на одной). Наведя на любой блочный элемент можно увидеть, что они занимают 100% доступной им ширины. Это их свойство по умолчанию, которое можно изменить. Однако даже сделав ширину тегов <h1> и <h2> такой, чтобы они могли уместиться на одной строке (например по 50%), они бы всё равно были в разных строках, т.к., повторюсь, все блочные элементы начинаются с новой строки.

Теперь посмотрим на теги <em>, <b> и <a>. У них в свойствах прописано "display: inline;". Как вы видите, они не начинаются с новой строки. Некоторые из них в данном примере находятся в составе строк. А их ширина ровно такая, чтобы весь контент уместился, но не больше. Эти элементы называются встроенными. Встроенные элементы обычно используются в составе блочных.

Также есть другие типы отображения элементов, такие как table, table-cell, inline-block и т.д. Но о них мы поговорим в главе посвящённой CSS. Единственное, что вам сейчас нужно знать, это то, что все элементы визуально представляют из себя блоки (не путайте с блочными элементами), и в зависимости от того, блочный это элемент или встроенный, зависит поведение элемента на странице.

Основные теги

В данном разделе мы кратко опишем и рассмотрим основные теги, которые используются при верстке страниц. На некоторых тегах мы остановимся чуть подробнее. Теги, которые ничем особенным не отличаются от других тегов, будут даны с небольшим семантическим описанием и подробно описываться не будут, т.к. в этом нет смысла. Это не значит, что вам придётся узнавать о них подробнее в других источниках, т.к. возможно они вам никогда не пригодятся. Совершенно необязательно запоминать все эти теги. Их можно будет легко найти в справочных материалах в интернете (полезные источники будут даны в конце книги). Хороший программист не тот, кто знает все элементы языка наизусть, а тот, который понимает концепцию языка и может быстро найти необходимую информацию и правильно её применить. Запомнить всё невозможно. А если и возможно, то не рационально.

Разметка текста. Переносы

	Перевод строки
<br>	Используется для перевода текста на следующую строку. Поскольку язык HTML игнорирует перевод строки в своём коде и заменяет их на пробел, то для явного указания перевода строки используется этот тег. Не злоупотребляйте его использованием и вставляйте его только при крайней необходимости. Обычно, если нужно перенести текст на следующую строку, его заключают в блочный тег (например абзац, заголовок и т.д.), либо пользуются средствами CSS. Является встроенным элементом ("display: inline;"). Одинарный тег.
	Перенос слова
<wbr>	Используется для чёткого указания позиции в слове, в котором допустим перенос на следующую строку. Обычно этот тег добавляют в очень длинные слова, которые могут не уместиться на одной строке. Если же слово уместилось, то оно отображается как обычно. Если же нет, то часть слова переносится согласно указанным разрешенным позициям. При переносе слова браузеры не добавляют символ дефиса, поэтому если вам необходим символ переноса, то рекомендую не пользоваться данным тегом и заменить его спецсимволом &shy;. Его поведение аналогично тегу <wbr>. <p> Ма&shy;ма мы&shy;ла ра&shy;му </p>

 

Cсылки

В разделе 1.3 мы уже рассматривали пример ссылки. Ссылка добавляется двойным тегом <a>. Содержимое этого тега — текст ссылки, а в атрибуте href хранится адрес, на который ссылается ссылка. Пример использования:

1. <p>Текст... <ahref="http://google.com/">Ссылка</a>... текст.</p>

По умолчанию ссылка в браузере отображается синим цветом с нижним подчёркиванием текста ссылки. При переходе по ссылке, она меняет цвет на фиолетовый (посещённая ссылка). Тип отображения inline (встроенный элемент). По умолчанию ссылка открывается в текущей вкладке браузера. Это поведение можно изменить, но я крайне не рекомендую этим пользоваться. Изменять поведение перехода по ссылке стоит только в особенных случаях, когда это действительно необходимо. Нужно уважать пользователя и предоставлять ему выбор, открыть ссылку в текущей вкладке, в новой вкладке или в новом окне.

Чтобы сделать ссылкой изображение, необходимо лишь поместить это изображение внутрь ссылки. Пример:

1. <ahref="http://google.com/">
2. <imgsrc="image.jpg">
3. </a>

Более подробно об изображениях мы поговорим в следующем разделе.

Внешние ссылки

Под внешними ссылками понимаются ссылки, которые ведут на сторонние сайты. Такие ссылки ещё называют абсолютными.

Абсолютные ссылки всегда начинаются с названия протокола передачи данных. Обычно это http или https. И соответственно ссылка на корневой каталог внешнего сайта записывается как "http://example.com/" или "https://example.com/". Обычно сервера настроены так, что при обращении к корневому каталогу сайта пользователю отправляется файл index.html, лежащем в корневом каталоге. Но название этого файла может отличаться от приведённого, т.к. его можно изменить в настройках веб-сервера.

Всё, что расположено после адреса сайта, является путём в дереве каталогов сайта. Однако далеко не всегда то, что написано после доменного имени сайта является реальными каталогами или файлами. Веб-сервер может быть настроен как угодно. Например вы переходите по ссылке "http://example.com/news/", что означает, вы просите посмотреть содержимое каталога news, который лежит в корне сайта, однако по факту, сервер получает GET запрос "/news/", и у него прописано, что по этому запросу нужно выдать, допустим, страницу page.html (а не содержимое каталога), которая лежит в папке pages, которая лежит в папке site. То, что я сейчас описал, возможно покажется непонятным, но для front-end разработчика такие подробности, в принципе, не обязательны. Если же вы в будущем планируете заняться разработкой серверной части, то потом вы поймёте, как работает сервер. А пока вам лишь нужно знать, что в абсолютных ссылках пишется полный адрес страницы, который вы обычно видите в адресной строке браузера.

Внутренние ссылки

Данный тип ссылок используется для навигации по вашему сайту. Такие ссылки ещё называют относительными, потому что они ссылаются на ваши каталоги или файлы относительно вашего же сайта. Причем домен вашего сайта и его расположение роли не играет. Используя относительные ссылки в вашем коде вы можете спокойно изменить домен и ваши ссылки продолжат работать. Поэтому не стоит делать навигацию по вашему сайту с помощью абсолютных ссылок, т.к. при смене домена вам придётся переделывать все ссылки вашего сайта, что весьма затруднительно, особенно когда сайт крупный.

Есть три приёма навигации по вашему сайту. Первый из них, это сослаться на корень вашего сайта. Такие ссылки начинаются со знака "/". После этого знака располагается путь от корня сайта. Например запись "/index.html" ссылается на файл index.html лежащий в корне вашего сайта. Запись "/pages/page.html" ссылается на файл page.html, который лежит в папке pages, которая расположена в корне вашего сайта. Стоит отметить, что не стоит использовать ссылки на корень сайта, когда ваш сайт ещё лежит на вашем компьютере. Для операционной системы Windows такая запись будет бессмысленной и он выдаст ошибку, а на Unix подобных системах вы сошлётесь на корневой каталог вашей системы, и скорее всего, этот файл не будет найдет (если конечно по этому адресу у вас действительно не лежит эта страница). Поэтому, пока ваш сайт не будет расположен на сервере, пользуйтесь следующими двумя приёмами.

Второй приём навигации по сайту, это ссылка относительно текущего документа, в котором эта ссылка расположена. Допустим страница расположена по адресу "/pages/page.html" и вторая страница по адресу "/pages/contacts.html". Чтобы со страницы page.html сослаться на страницу contacts.html нужно написать ссылку вида "contacts.html" (обратите внимание на отсутствие "/" в начале ссылки). В этом случае в том каталоге, в котором лежит файл page.html будет искаться файл по указанному пути. В данном случае это файл contacts.html. Аналогичным способом можно сослаться на каталоги, расположенные в данной папке. Например чтобы сослаться из файла "/pages/page.html" на файл "/pages/old/error.html", в первом файле необходимо указать ссылку вида "old/error.html".

И третий приём, это ссылка на вышестоящие каталоги в дереве каталогов. Допустим вам нужно сослаться со страницы "/pages/page.html" на страницу "/index.html". Для этого нужно выйти из каталога pages и найти там страницу index.html. Для выхода из каталога используется запись "../" и итоговая ссылка, которая должна быть размещена на странице page.html будет выглядеть так: "../index.html". Аналогично делается, если вам нужно выйти из нескольких каталогов. Например вам нужно сослаться со страницы "/pages/old/error.html" на "index.html". Ссылка для этого будет выглядеть так: "../../index.html".

Подведём итоги. Чтобы сослаться на корень сайта и искать файл относительно него, в начале ссылки размещают "/". Далее переход по каталогам осуществляется перечислением необходимых каталогов с указанием после каждого из них знака "/". Необходимый файл указывается в конце. Если не ссылаться на корень, то навигация осуществляется относительно текущего каталога, и знак "/" в начале не указывается. Если необходимо выйти из каталога то в ссылке прописывается "../".

Сводка рассмотренных тегов

 

	Ссылка
<a href="...">...</a>	Используется для форматирования ссылок. Тип отображения inline. Текст ссылки помещается как содержимое тега. В атрибуте href указывается адрес ссылки. По умолчанию текст ссылки подчёркивается и выделяется синим цветом. После посещения цвет ссылки меняется на фиолетовый.

 

Изображения

Для добавления изображений в HTMLиспользуется тег <img>. Данный тег мы уже рассматривали при создании и анализе своей первой страницы. У этого тега есть обязательный атрибут src, в котором указывается ссылка на изображение. Убедитесь в том, что расширение вашего изображения jpeg, gifили png. Другие типы изображений данный тег не поддерживает. Также крайне желательно указывать атрибут alt, в котором будет написано краткое описание изображения. Оно будет выведено пользователю, если по какой-то причине картинка не загрузилась. Тип отображения по умолчанию - inline. Пример использования данного тега:

1. <p>Текст...
2. <imgsrc="http://example.com/image.jpg"alt="Example image">
3.... текст.
4. </p>

	Изображение
<imgsrc="..."alt="...">	Используется для добавления изображений. Тип отображения inline. В атрибуте href указывается адрес изображения. В атрибуте altпишется краткое описание картинки. Оно будет выведено, если изображение не удалось загрузить.

 

Списки

Списки определений

Списки определений используются для создания списка терминов и их определений. Каждый пункт этого списка представляет из себя термин и его определение. В общем случае, каждый пункт — это пара «имя/значение». Например, данные списки также применяют для форматирования вопросов и ответов к ним. Чтобы создать список определений, необходимо каждое «имя» заключить в тег <dt>, после каждого имени расположить его «значение» и заключить его в тег <dd>, а затем все эти элементы заключить в тег - контейнер <dl>. Пример:

1. <dl>
2. <dt>Имя 1</dt>
3. <dd>Значение 1</dd>
4. <dt>Имя 2</dt>
5. <dd>Значение 2</dd>
6. <dt>Имя 3</dt>
7. <dd>Значение 3</dd>
8. </dl>

Допустимо использовать несколько значений для одного имени (для этого разместите все значения после соответствующего имени), и для одного значения несколько имён (записывается список имён, а после размещают значение, соответствующее перечисленным именам).

Сводка рассмотренных тегов

 

	Маркированный список
<ul>...</ul>	Используется для форматирования маркированных списков. В этот тег помещаются все элементы списка. Является блочным элементом. По умолчанию имеет внутренний отступ слева.
	Нумерованный список
<ol>...</ol>	Используется для форматирования нумерованных списков. В этот тег помещаются все элементы списка. Является блочным элементом. По умолчанию имеет внутренний отступ слева.
	Элемент списка
<li>...</li>	С помощью этого тега выделяют элемент списка. Данный тег не является ни блочным, ни встроенным. Имеет тип отображения "display: list-item;". Данный тип отображения мы не рассматривали, но по отображению он схож с блочными элементами, за исключением добавления маркера списка слева.
	Список определений
<dl>...</dl>	Используется для форматирования списка терминов и их определений. В этот тег помещаются все имена и соответствующие им значения. Является блочным элементом.
	Имя списка определений
<dt>...</dt>	С помощью этого тега выделяют имена списка определений. Является блочным элементом.
	Значение списка определений
<dd>...</dd>	С помощью этого тега выделяют значения списка определений. Является блочным элементом. По умолчанию имеет внешний отступ слева.

 

Таблицы

Многие из вас уже создавали таблицы в редакторе MS Word. Язык HTML предоставляет похожие возможности форматирования таблиц. В нём можно управлять количеством ячеек, их размерами, объединять ячейки и т.д. Мы рассмотрим самые основные и необходимые способы форматирования, но углубляться в остальные возможности не станем. Скорее всего, вы с таблицами столкнётесь в реальной жизни очень не скоро. Но поскольку необходимым пластом знаний вы уже будете обладать, вам не составит труда их изучить полностью.

Многие из вас таблицы видели лишь только на сайте «Википедия» и более нигде с ними не сталкивались. Большинство сайтов просто не нуждается в предоставлении каких-либо табличных данных. Даже если будет необходимо разместить подобные таблицы, чаще всего тех возможностей, о которых мы поговорим в этом разделе, будет достаточно.

Раньше, когда HTML только зарождался, таблицы активно использовались при создании дизайна страницы. Это было связано с тем, что на тот момент ещё не было CSS. Для создания структуры страницы создавали таблицу такой ширины, чтобы она умещалась на экране большинства компьютеров. И в зависимости от дизайна, создавалось нужное количество ячеек с определёнными размерами. Чаще всего это были трёх-колоночные или двух-колоночные макеты, в которых был один блок с основным контентом, и один или два блока по бокам с дополнительной информацией, навигацией и т.д. Например, трёх-колоночный макет создавался таблицей 3×3. Ячейки первой и последней строки объединялись в одну. Это были шапка и футер сайта. Во второй строке ячейкам задавали необходимую ширину. Затем в необходимые ячейки добавлялись картинки дизайна обычной вставкой тега <img>. Если дизайн был сложный, то в некоторые ячейки вставлялись ещё таблицы с нужным количеством ячеек и в них, опять же, вставлялись картинки.

Сейчас создание макета страницы с помощью таблиц считают, мягко говоря, плохим тоном. Во первых, таблицы необходимы для предоставления табличных данных, и не для использования в дизайнерском оформлении страницы, т.е. применение таблиц в дизайне есть грубая семантическая ошибка. Анализировать такие страницы поисковым роботам весьма затруднительно, а программы для чтения страниц, которыми пользуются слабовидящие, не могут сориентироваться на таких страницах и дать необходимую пользователю информацию. Во вторых, появился язык CSS, возможности которого позволяют сделать не только простой трёх-колоночный или двух-колоночный макет, но и более сложные макеты, в которых элементы могут располагаться весьма необычным образом и таблицы с такими задачами не справились бы. В третьих, HTML код страницы, свёрстанной на таблицах является более громоздким и трудночитаемым по сравнению с кодом, в котором применялись лишь теги организации структуры страницы (о которых мы поговорим позже) и CSS.

Базовая структура таблицы

Теперь перейдем к изучению таблиц. Таблицы в HTML создаются при помощи двойного тега <table>. Внутри этого тега размещают строки таблицы двойным тегом <tr> (сокращение от table row), а в каждой строке размещают ячейку строки двойным тегом <td> (сокращение от table data). Пример таблицы 3×3:

1. <table>
2. <tr>
3. <td>Cтрока 1, ячейка 1</td>
4. <td>Cтрока 1, ячейка 2</td>
5. <td>Cтрока 1, ячейка 3</td>
6. </tr>
7. <tr>
8. <td>Cтрока 2, ячейка 1</td>
9. <td>Cтрока 2, ячейка 2</td>
10. <td>Cтрока 2, ячейка 3</td>
11. </tr>
12. <tr>
13. <td>Cтрока 3, ячейка 1</td>
14. <td>Cтрока 3, ячейка 2</td>
15. <td>Cтрока 3, ячейка 3</td>
16. </tr>
17. </table>

Таблицы отображаются на странице с новой строки. Тег <table> имеет тип отображения table («display: table;»), тег <tr> - table-row («display: table-row;»), тег <td> - table-cell («display: table-cell;»). Это новые для нас типы отображения. Сейчас мы не будем на них останавливаться. Более подробно о них я рекомендую почитать на сайте http://web ref.ru/ после освоения курса по CSS. Знание этих типов отображения в дальнейшем поможет вам, например, центровать текст по вертикали, с чем часто сталкиваются web-разработчики и может вызвать затруднения.

В тегах <tr> допустимо использовать различное количество тегов <td> (например в первой строке 2 ячейки, а во второй 3), но результат такого действия вас скорее всего разочарует. Если вы попытаетесь таким образом объединить ячейки, то у вас ничего не выйдет. На каждую ячейку будет выделено ровно столько пространства, сколько допустимо в столбце, в котором она находится. Т.е. растянуть одну ячейку на величину двух ячеек у вас не выйдет. Плюс ко всему, эти ячейки будут расположены по порядку, и если вы хотели, допустим, пропустить какие-то ячейки, то они выведутся по порядку, а в конце останется пустое пространство без ячеек. Поэтому на начальном этапе при форматировании таблиц всегда создавайте во всех строках одинаковое количество ячеек.

Для создания заголовочных ячеек используют тег <th> (сокращение от table header). Он отличается от тега <td> тем, что содержимое в такой ячейке будет выделено полужирным и выравнено по центру. Семантический смысл тега <th> - это выделение заголовков. Поэтому не используйте этот тег, если вам нужно просто выделить какие-то ячейки полужирным и выравнять по центру. Для этих целей пользуйтесь возможностями CSS. Также, как и тег <td>, тег <th> имеет тип отображения table-cell.

1.9.7.2 Теги <thead>, <tfoot>, <tbody>

Помимо этого есть возможность группировать строки таблицы тегами <thead>, <tfoot>, <tbody>. Они не являются обязательными, но крайне рекомендую их использовать. Эти теги наделяют части таблицы семантическим смыслом. Строки, выделенные тегом <thead> считаются заголовочными, <tfoot> - нижний колонтитул таблицы, <tbody> - основной контент таблицы. Располагать их в таблице необходимо в таком порядке: сначала <thead>, после <tfoot> и лишь затем <tbody>. Несмотря на то, что <tfoot> в коде располагается до <tbody>, браузеры выводят его в конце таблицы. Допустимо использовать в таблице лишь один тег <thead> и один <tfoot>. Количество тегов <tbody> может быть любым. С помощью нескольких тегов <tbody> можно разделить основной контент таблицы на смысловые части. Например в таблице могут быть представлены какие-либо данные за несколько лет. Строки с данными, представленными за один год, можно выделить тегом <tbody>. Типотображениятега<thead> - table-header-group, тега<tfoot> - table-footer-group, тега<tbody> - table-row-group. Сейчас вам это ни о чём не говорит, но вам стоит знать, что данные теги имеют отличный тип отображения от тегов <tr>. Возможно это поможет вам в дальнейшем избежать ошибок при написании CSS кода. Чем-то особенным, данные типы отображения не обладают.

1.9.7.3 Тег <caption>

Название таблицы можно разместить в теге <caption>. Этот тег располагают внутри тега <table> в самом начале, до тегов <thead>, <tfoot>, <tbody> и т.п. Также в этом теге могут размещаться подсказки по структуре таблицы или краткое описание её содержимого. Тип отображения по умолчанию table-caption. Также, как и типы отображения тегов <thead>, <tfoot> и <tbody>, этот тип отображения ничем особенным не выделяется. Пример форматирования таблицы с использованием рассмотренных тегов:

1. <table>
2. <caption>...</caption>
3. <thead>
4. <tr>
5. <td>...</td>
6....
7. <td>...</td>
8. </tr>
9....
10. <tr>...</tr>
11. </thead>
12. <tfoot>
13. <tr>...</tr>
14....
15. <tr>...</tr>
16. </tfoot>
17. <tbody>
18. <tr>...</tr>
19....
20. <tr>...</tr>
21. </tbody>
22. <tbody>
23....
24. </tbody>
25. </table>

Объединение столбцов

Как вы помните, ранее я описывал ситуацию, когда количество столбцов в одной из строк меньше, чем максимальное количество столбцов во всей таблице. В этом случае, если вы пропускаете какой-то столбец, в надежде объединить его с другим столбцом, вы получите просто меньшее количество столбцов, но пространство от удалённых столбцов не будет никак использовано. Оно всегда останется пустым. Чтобы это исправить, можно растянуть какую-то ячейку вправо на N-ое количество столбцов. Для этого необходимо добавить атрибут colspan нужной ячейке, и значением этого атрибута указать количество ячеек, которое в итоге будет занимать эта ячейка. Пример:

1. <table>
2. <tr>
3. <td colspan="2">Эта ячейка займет пространство 2х столбцов</td>
4. </tr>
5. <tr>
6. <td>Строка 2, Столбец 1</td>
7. <td>Строка 2, Столбец 2</td>
8. </tr>
9. </table>

Объединение строк

Чтобы объединить строки, используется тот же приём с растягиванием ячейки, что и с объединением столбцов. Только в данном случае, растягивается она сверху вниз на указанное количество ячеек. Для этого добавляется атрибут rowspan и задается значение атрибута, равное количеству ячеек, которое в итоге будет занимать ячейка. Пример:

1. <table>
2. <tr>
3. <td colspan="2">Эта ячейка займет пространство 2х строк</td>
4. <td>Строка 1, Столбец 2</td>
5. </tr>
6. <tr>
7. <td>Строка 2, Столбец 2</td>
8. </tr>
9. </table>

Сводка рассмотренных тегов

 

	Таблицы
<table>...</table>	Создаёт элемент таблицы. Семантическое значение — форматирование табличных данных. Применение таблиц для дизайнерского оформления страницы является семантической ошибкой. Тип отображения по умолчанию — table. Таблица с данным типом отображения всегда начинается с новой строки.
	Строка таблицы
<tr>...</tr>	Создаёт строку таблицы. Тип отображения по умолчанию — table-row. Каждая строка таблицы начинается (логично) с новой строки.
	Ячейка таблицы
<td colspan="N" rowspan="M">... </td>	Создаёт ячейку таблицы. Тип данных ячейки может быть любым. Тип отображения по умолчанию — table-cell. Атрибут colspan растягивает ячейку вправо так, что её ширина становится равной N ячеек. N — целое число. Атрибут rowspan растягивает ячейку вниз так, что её высота становится равной M ячеек. M — целое число.
	Ячейка таблицы с заголовочной информацией
<th colspan="N" rowspan="M">... </th>	Создаёт ячейку таблицы. Данный тег предназначен для хранения заголовочной информации таблицы соответствующего столбца или строки. Тип отображения по умолчанию — table-cell. Атрибут colspan растягивает ячейку вправо так, что её ширина становится равной N ячеек. N — целое число. Атрибут rowspan растягивает ячейку вниз так, что её высота становится равной M ячеек. M — целое число.
	Группа строк в области заголовка
<thead>...</thead>	Группирует строки, являющиеся заголовочными. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-header-group. Должен быть расположен после элемента <caption>.
	Группа строк в области нижнего колонтитула
<tfoot>...</tfoot>	Группирует строки, являющиеся нижним колонтитулом таблицы. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-footer-group. Должен быть расположен после элемента <thead>.
	Группа строк основной части таблицы
<tbody>...</tbody>	Группирует строки, являющиеся основной частью таблицы. Допустимо использовать несколько раз для разделения контента таблицы на логические части. Необязательный тег. Тип отображения по умолчанию — table-row-group. Все теги <tbody> должны быть расположены после элемента <tfoot> по порядку.
	Описание таблицы
<caption>...</caption>	Выделяет название/описание таблицы. Допустимо лишь единственное упоминание в таблице. Необязательный тег. Тип отображения по умолчанию — table-caption. Должен быть расположен в самом начале таблицы (после открывающего тега <table>).

 

Общие элементы

Теперь поговорим об общих элементах. Эти элементы не имеют своих особенных стилей отображения. Также у них нет никакого семантического значения. Это теги <div> и <span>. Они используются там, где нет специальных тегов, которые бы подходили по семантическому значению или там, где этого значения и вовсе не должно быть.

Тег <div> имеет тип отображения block (блочный элемент). И это всё, чем он обладает. Ни особенного стиля форматирования, ни семантического значения у него нет. Обычно он используются в связке с CSS. И это один из самых распространённых тегов при вёрстке, т.к. он используется для задания структуры страницы путём расположения этих блоков в нужных местах. Например один блок для шапки, второй для контента, третий для сайдбара и четвертый для футера. Расположение блоков определяется CSS кодом. Об этом более подробно мы поговорим в главе посвящённой CSS. А вот пример HTML кода для того же трехколоночного макета, который мы рассматривали при вёрстке таблицами:

1. <div> Шапка </div>
2. <div>
3. <div> Левая колонка </div>
4. <div> Центральная колонка </div>
5. <div> Правая колонка </div>
6. </div>
7. <div> Футер </div>

По сравнению с версткой таблицами этот код менее громоздкий и достаточно гибкий. Дизайн можно будет в любой момент изменить с помощью CSS, но HTML код при этом не нуждается в доработке.

Тег <span>отличается от тега <div>только типом отображения. В отличии от тега <div>он имеет значение inline (встроенный элемент). Он используется для придания какого-либо стиля отображения кусочкам текста, которые нельзя семантически разметить с помощью существующих тегов. Например, можно этим тегом выделить логин и e-mailпользователя сайта в его профиле или добавить с помощью этого тега какой-то особенный символ-иконку, которые сейчас часто используются вместо изображений (например есть пакет иконок, называемый Font Awesome, в котором присутствует особенный шрифт, содержащий эти иконки).

	Тег <div>
<div>...</div>	Тип отображения по умолчанию block (блочный элемент). Семантического значения не имеет.
	Тег <span>
<span>...</span>	Тип отображения по умолчанию inline (встроенный элемент). Семантического значения не имеет.

 

Формы

Формы в языке HTMLиспользуются для сбора информации, которую пользователь вводит в специально отведённые поля этой формы. После того, как пользователь введёт свои данные и нажмет кнопку «Отправить», все эти данные будут отправлены на сервер. Затем эти данные будут обработаны и сервер отправит ответ пользователю. Данные на сервер можно отправить двумя разными методами - GETили POST.

Когда вы вводите в адресной строке браузера какой-либо адрес, и переходите по нему, вы отправляете серверу запрос, называемый GET. Эти запросы могут как содержать, так и не содержать в себе данные. Например запрос https://www.google.ru/ не содержит в себе никаких данных. А вот запрос https://www.google.ru/search?q=it+center содержит в себе переменную "q", которая имеет значение "it center". Если разобрать подробнее, то если отправить GETзапрос на адрес https://www.google.ru/search, браузер просто подставит в конце знак "?" и перечислит все данные полей и их названия через знак "&" предварительно кодируя данные в URLкод (т.к. не все символы допустимо использовать в строке адреса). Сервер, увидев подобный запрос, просто берёт данные из этой адресной строки. Метод GETне является безопасным, т.к. все данные, которые вы отправляете, содержаться в адресной строке. Если её содержимое попадет в чужие руки, то не составит труда декодировать от туда данные. Поэтому не используйте его для отправки паролей или какой-либо конфиденциальной информации. Обычно данный метод используется для поисковых запросов.

Метод POST, в отличие от GET, отправляет отдельный запрос. Содержимое этого запроса доступно толь