Использование HTML 5

Спецификация HTML5

ul, ol markirovannye_neuporjadochennye_i_numerovannye_spiski. Многоуровневые списки.
Меню навигации сайта
Теги HTML: Списки определений: список терминов, личностей, событий или дат.
Тег: Гиперссылки: Значения и использование атрибутов rel, href, target blank ссылок HTML тега a. Гиперссылки. Закладки. Графическая навигационная панель.
Тег: Что это iFrame и как использовать правильно
Тег: Валидный тег noindex для блокировки индексирования частей сайта используется для запрета индексации какой-либо части текста страницы или ее кода.
Символьные подстановки, cпецсимволы в HTML, Мнемоники
citaty

HTML 5 (HyperText Markup Language, version 5) больше не является частью SGML, теперь это самостоятельный язык разметки.

HTML5 — это не что-то цельное, это набор индивидуальных особенностей. Поэтому нет никакого смысла пытаться определять поддержку HTML5 в браузерах. Но есть возможность определять поддержку составляющих компонентов, таких как

Canvas - создание растрового изображения,
video,
геолокации.

Элементы, такие как <section>, <article>, <header> и <nav> разработаны для семантического обогащения содержимое html- страницы. Семантика HTML5 нужна для поисковых систем, которые ее должны будут использовать когда-нибудь:)

По большому счету, это правила записи элементов XML. Однако, XHTML документы также являются документами XML и подчинены тем же требованиям.

Введем ряд определений:

тэг или дескриптор - специального вида текстовая метка в документе, отмечающая границы - начало или конец - некоторого элемента содержимого. Например, для обозначения начала абзаца, используется тэг <p>, а для его завершения - </p>
элементом - называется совокупность открывающего и закрывающего тэга и его содержимого. Содержимым элемента может быть не только простой текст, а и вложенные в него другие элементы. Кроме того, существует ряд элементов принципиально не могущих иметь содержимого. Такие элементы подчиняются несколько отличным от традиционных правилам записи.
атрибут - это свойство элемента. Записываются атрибуты в начальном тэге элемента и определяют внешний вид и логику использования элемента.

Элементы - одна из наиболее важных сущностей XHTML документа. С помощью элементов производится разбиение страницы на структурные блоки и выполняется визуальное оформление документа.

Рассмотрим ряд правил. которым вы должны следовать при записи тэгов и самих элементов.

Правило записи начального тэга. Начальный тэг элемента должен быть записан в следующем виде:
```
<имя_элемента>
```
Сразу за символом < должно следовать имя элемента. Имена элементов должны быть обязательно записанны в нижнем регистре!

В ранних версиях языка разметки HTML правила записи имен элементов несколько отличались. Например, не существовало принципиальной разницы между записью <BODY> и <body>. Браузеры до сих пор "понимают" устаревшую форму записи и не делают между ними различия. Однако, вы должны следовать требованиям современных стандартов, чтобы научиться создавать страницы не только привлекательно выглядящие в браузере, но и отвечающие современным представлениям о правильном оформлении XHTML документов.

В начальном тэге элемент может содержать один и более атрибутов:

<имя_элемента атрибут="значение" ...>

Имя элемента и имя первого атрибута должен разделять как минимум один пробельный символ.

Правило записи конечного тэга. Конечный тэг элемента должен быть записан в следующей форме:

...</имя_элемента>

Сразу за символом < должен следовать символ /, а за ним - имя элемента. В закрывающем тэге больше ничего не должно содержаться. Перечисление здесь атрибутов элемента будет грубой ошибкой!

Правило записи элементов, не имеющих содержимого. В XHTML существуе ряд элементов, которые принципиально не могут иметь содержимого. К таким элементам относятся, например, элемент вставки рисунка - img или принудительный перенос - br. Безусловно, нет ошибки в такой форме записи:

<img ... ></img>

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

<img ... />

Последовательность " />" закрывает элемент так, как обыкновенный закрывающий тэг. Причем, между именем тэга или значением последнего атрибута (если таковые имеются) и символом "/" должен следовать хотя бы один пробел!

Отсутствие пробела перед символом "/" не приведет к катастрофическим результатам при запуске страницы в браузере. Однако, при проверке документа HTML Validator выдает предупреждение об его отсутствии.

Атрибуты - это способ указания свойств элемента. Существует, к примеру, возможность с помощью атрибутов повлиять на визуальное представление элемента, связав с ним стиль. Атрибуты элемента перечисляются в его начальном тэге:

<имя_элемента атрибут="значение" атрибут="значение" ... >

При записи атрибута указывается пара имя="значение", причем значение атрибута обязательно заключается в одинарные (') или двойные (") кавычки. Между именем следующего атрибута и значением предыдущего обязательно должен следовать как минимум один пробел.

Ниже приводится перечень атрибутов, которые могут присутствовать в любом элементе:

id - уникальный идентификатор элемента 
style - стиль элемента 
class - класс стиля в таблице стилей CSS 
title - всплывающая подсказка элемента 
lang - код языка, применяемый к элементу и его содержимому 
dir - задает направление размещения текста содержимого

DOCTYPE html head meta body

Шаблон HTML5:

<!DOCTYPE html>
<!-- Note-->
<html lang="ru">
    <head>
        <title>Shablon</title>
        <meta name="keywords" content="HTML,CSS,XML,JavaScript" />
        <meta name="author" content="darkfire" />
        <meta charset="UTF-8" />
        <link rel="stylesheet" href="css/divtext.css" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
             <header>
                <h1>Shablon HTML 5 and JavaScript</h1>
            </header>
            <div>
            </div>
            <footer>
                <h2>Footer</h2>                    
                Документ: <i><script type="text/javascript">document.write(document.title);</script></i><br>
                URL: <i><script type="text/javascript">document.write(document.URL);</script></i><br>
                Дата последнего обновления:<i><script type="text/javascript">document.write(document.lastModified);</script></i>
            </footer>
    </body>
</html>

<!DOCTYPE HTML> или <!DOCTYPE html> - не чувствителен к регистру.
Корневой элемент - html. В соответствии с синтаксисом xml, любой документ должен иметь единственный элемент верхнего уровня, в который должны быть вложены остальные элементы. В него вкладываются остальные элементы, такие как head - раздел заголовка и body - тело, содержательная часть документа. Можно определить язык, использующийся на данной странице, это возможность необязательна, обязательно нужно указывать кодировку страницы в разделе head.
Раздел заголовка - head. Содержит метаданные — информацию о странице, а не содержимое самой страницы. В разделе заголовка обычно размещают информацию, характеризующую страницу в целом. Как то:
- Создание заголовка страницы
- Объявление кодировки страницы в HTML 5: <meta charset="UTF-8" />, кавычки в utf-8 необязательны. Старая запись вида <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> также поддерживается. Указание кодировки документа web- страницы.

HTTP- заголовок(генерируемый Web сервером) является более предпочтительным, он перекрывает тег meta.

Перечисление ключевых слов, помогающих поисковым системам проиндексировать вашу страницу

Описание или подключение таблиц стилей и сценариев

<link rel="shortcut icon" href="/favicon.ico" /> определение иконки, связанной с текущей страницей.

Элемент meta является дочерним по отношению к разделу заголовка документа head. Закрывающий тег для meta не используется.
Тело документа - body. Тело документа представляет собой то, ради чего создается документ - его содержательную часть, то, что увидит конечный пользователь на странице. Здесь происходит разбиение текста страницы на структурные блоки (заголовки и абзацы), выполняется вставка изображений, таблиц, списков и прочих элементов содержания.
Подвал страницы - footer.

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

Для примера: тег абзаца "<p></p>" - блочный элемент, выделение текста жирным ("<b></b>") или курсивным ("<i></i>") начертанием - линейные элементы.

Элементы линейной разметки.

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

По принципу разметки информации, линейные элементы можно разделить на следующие два типа:

элементы физического форматирования
элементы логического форматирования

Элементы логического форматирования привносят в HTML код семантику. То есть, по самому названию элемента можно судить о сути, смысле выделяемого фрагмента. При этом, физуальный эффект разметки играет второстепенную роль и даже может отсутствовать.

Факт отсутствия визуального эффекта не должен вас беспокоить. В дальнейшем его можно добиться с помощью стилей CSS.

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

Элементы блочной разметки.

К блочным элементам относятся <div>, <h1> и <p>.

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

Простой пример блочной разметки

...
<body>
    <p>Первый абзац.</p>
    <p>И второй абзац.</p>
</body>
...

Любой сложный многоуровневый документ можно разбить на разделы. Раздел принято начинать заголовком. Это будет первый уровень разбиения. Каждый раздел, в свою очередь, можно поделить на более мелкие структурные единицы - подразделы (второй уровень) и так далее.

3 способа подключения стилей CSS к HTML

Наиболее простым способом применения стилей CSS является использование атрибута style:

<элемент style="правила стиля"> ...

Правила стиля записываются в виде пар "название:значение;" последовательно одно за другим. Например, если необходимо установить в заголовке 1го уровня размер текста равным 16 пунктам, а цвет сделать темно-красным, можно использовать следующий набор правил:

<body>
    <h1>Обыкновенный заголовок 1го уровня</h1>
    <h1 style="font-size: 16pt; color: #660000;">
        Заголовок 1го уровня, использующий стили.
    </h1>
</body>

Форма создаётся с помощью тега <form>. Формы обеспечивают получение данных от пользователя и передачу их на сервер, где они уже подвергаются анализу и обработке. Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name тега <input> или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введённую в форме информацию.

Можно использовать несколько форм на странице, но они не должны вкладываться одна в другую.

У тега form существует несколько необязательных атрибутов:

атрибут name – определяет имя формы, уникальное для данного документа. Используется только, если в документе присутствует несколько форм.
атрибут action служит для указания адреса программы на Web-сервере, которая будет обрабатывать содержимое данных формы. Если атрибут action не указывать, то передача происходит на адрес текущей страницы. Например:
```
<form method="post" action="/test/test.php"></form>
<form method="get" action="http://localhost:1277/">
```
атрибут method принимает два значения get или post. Указывает метод передачи данных на сервер get или Метод HTTP POST.

Во время обычного submit'а формы браузер сам кодирует значения полей и составляет тело GET/POST- запроса для посылки на сервер. При работе через Свойства и методы XMLHttpRequest, это нужно делать самим, в JavaScript- коде.

атрибут enctype указывает способ кодирования данных формы при их отправке на сервер. Возможные значения:
- application/x-www-form-urlencode: Пробел представляется как %20, русские буквы и большинство спецсимволов кодируются, английские буквы и дефис оставляются без изменений.
- multipart/form-data: Данные не кодируются. Это значение применяется при отправке файлов.
- text/plain:

Пример PHP - загрузка файла на сервер.

События формы. Эти события напрямую связаны только с тем, что случается в форме и в ее элементах ввода. С помощью события отправки данных — submit отслеживается момент передачи данных из формы; с помощью события изменения — change отслеживается пользовательский ввод данных в элемент; а событие select возникает, когда был обновлен элемент <select>.

Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

Тег label устанавливает связь между определённой меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью label можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега label. При втором способе элемент формы помещается внутрь контейнера label.

<input id="идентификатор"><label for="идентификатор">Текст</label>
<label><input type="..."> Текст</label>

<label for="from">From</label>
<input type="text" id="from" name="from"/>

Тег <input> позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы:

текстовое поле (text)
поле с паролем (password)
переключатель (radio)

<label><input type="checkbox" checked />no-dns</label>

- флажок

<input type="hidden"/> — скрытое поле
<input type="button"/> кнопка. Тег
предоставляет больше возможностей.
- <input type="submit"/> кнопка для отправки формы
- <input type="reset"/> кнопка для очистки формы
- поле для отправки файла (file)
- кнопка с изображением (image)
В HTML5 добавлены новые типы:
- <input type="search"/> — для блоков поиска;
- <input type="number"/>— для счетчика; <input type="number" name="quantity" min="1" max="5">
- <input type="range"/>— для «ползунка»;
- <input type="color"/>— для выбора цвета;
- <input type="tel"/>— для телефонного номера;
- <input type="url"/>— для веб адреса;
- <input type="email"/>— для адреса электронной почты;
- <input type="date"/>— для выбора даты из календаря;
- <input type="month"/>— для месяца;
- <input type="week"/>— для недели;
- <input type="time"/>— для временной метки (timestamp);
- <input type="datetime"/>— для точной абсолютной даты/времени;
- <input type="datetime-local"/>— для локальных даты и времени;
По умолчанию все поля имеют тип "text".
- Замещающие строки. Для вывода текста внутри поля формы, который исчезает при получении фокуса, служит атрибут placeholder. Если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки.
  <input placeholder="строка">
- FAQ: Тэг input ввод только цифр:
  <label>Number: <input type="text" onkeyup="this.value = this.value.replace (/\D/, '')"></label>
Как запретить отправку с пустого поля input в form при помощи javacripts?

Для запрета отправки пустой формы достаточно добавить добавить required для полей формы. Например, для тега input:
```
<input type="text" name="whois_name" id="whois_name"  placeholder="example.com" value="" required />
```
Тег button

Тег создает на веб-странице кнопки аналогичные, получаемый с помощью тега <input> (с атрибутом type="button | reset | submit"). В отличие от этого тега, позволяет размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и т.д.

Использование:

<form> <button type="button | reset | submit">...</button> </form>

Значения:

button - обычная кнопка

reset - кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.

submit - кнопка для отправки данных формы на сервер.

Значение по умолчанию submit.
<button type="button"> <img alt="Left" src="img/arrow_left_blue.png" /> </button>

HTML button как ссылка на ресурс:
<button onclick="javascript:window.location.href = '/export/pdf?file=irregular_verbs.pdf'" title="Export to PDF">PDF</button>

Тег select. Выпадающий список.

Тег <select>

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором.

<form> <select id="selc"> <option value='-'>-</option> <option value='1'>1</option> <option value='3'>3</option> <option selected value="5">5</option> <option value='7'>7</option> <option value='10'>10</option> </select> </form>

К описанию выбранного элемента можно обратиться через свойство text, а к значению при помощи свойства value

var a = document.getElementById('selc'); alert(a.options[a.selectedIndex].text); alert(a.options[a.selectedIndex].value);

Тег pre. Обработка пробельных символов.

Браузеры проводят предварительную обработку текста перед его форматированием и выводом.

Суть предварительной обработки состоит в следующем: несколько идущих подряд символов пробела или табуляции "сворачиваются" в один пробел; все символы "перевод строки и возврат каретки" (Enter) удаляются. Исключением является только, преформатированный текст. Таким образом, следующая фраза

<p> Эта фраза будет выведена одной строкой с одним пробелом между каждым словом! </p>

… в браузере будет выглядеть вполне обычной:

Эта фраза будет выведена одной строкой с одним пробелом между каждым словом!

Однако, может возникнуть ситуация, когда все же будет необходимо написать каждую фразу некоторого текста с новой строки (например, разместить на странице некоторое стихотворение или программный код). В таких случаях исходное форматирование текста имеет довольно большое значение и его необходимо сохранить. Для используется элемент <pre> - preformated, преформатированный. Этот элемент выводит свое содержимое на страницу с сохранением исходного форматирования текста.

<pre></pre>

Тег img. Вставка рисунка.

Вставить изображение на web страницу можно, используя элемент <img />. Этот элемент должен содержать атрибут src, указывающий адрес файла изображения. Ниже показан пример вставки изображения, расположенного по адресу "C:\images\image1.jpg":

<img src="file:///c:/image/image1.jpg" />

Элемент img может иметь следующие специальные атрибуты (обязательными являются только два из них: src и alt):

src - абсолютный или относительный адрес файла изображения (Обязателен!)

alt - альтернативный текст (Обязателен!). Может содержать несколько предложений, разделенных точкой.

title - рекомендуется заполнить SEO

width - ширина изображения

height - высота изображения

align - выравнивание изображения (Отменен!)

hspace - отступы от границ изображения по горизонтали (Отменен!)

vspace - отступы от границ изображения по вертикали (Отменен!)

src - добавление изображения

Атрибут src должен содержать адрес файла рисунка. Адрес, или путь, можно указать в двух различных формах: абсолютно и относительно.

Абсолютное указание пути используют в тех случаях, когда необходимо адресовать ресурс расположенный на другом сайте, другом компьютере в сети или другом логическом диске (если речь идет об адресации файла локально, в пределах одной машины). Например - страница расположена на сайте "http://www.somehost.com/index.html", изображение "image.jpg" расположено в папке Images на сайте "http://www.otherhost.com". Тогда код для подключения данного изображения будет иметь вид:

<img src="http://www.otherhost.com/Images/image.jpg" />

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

"/" - обозначает корневой каталог web-узла или диска "./" - обозначает текущий каталог "../" - обозначает родительский каталог "имя/" - обозначает каталог, дочерний по отношению к текущему

Таким образом, если необходимо указать путь к изображению "image.jpg", расположенному в каталоге "Images", дочернему по отношению к текущему, используют следующий адрес:

<img src="Images/image.jpg" />

alt - альтернативный текст

Атрибут alt используется для текстового описания изображения. Если браузер посетителя web-узла не поддерживает изображения, или они в данный момент отключены, то, вместо изображений, пользователь на странице увидит текст. Альтернативный текст может дать пользователю хоть какую нибудь информацию о данном изображении. Это вдвойне важно в тех случаях, когда изображение является, так же, и ссылкой. В случае же, когда изображение отобразилось успешно, альтернативный текст выступает в качестве всплывающей подсказки.

title - всплывающая подсказка

Атрибут title предоставляет дополнительную информацию о картинке и не является обязательным, хотя SEO - эксперты рекомендуют его применять для лучшего продвижения по изображениям. Текст, внесенный в атрибут title, показывается при наведении курсора мышки на картинку, а согласно генеральной концепции поисковых систем - все, что видит пользователь - учитывается при ранжировании.

width и height - размеры изображения

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

Кроме того, с помощью атрибутов width и height можно масштабировать изображение по вашему желанию. Например, если вы хотите в 2 раза увеличить изображение с размерами 160x120, то достаточно указать только один из размеров (высоту или ширину), увеличив его в 2 раза. Второй размер будет подогнан автоматически так, чтобы сохранить пропорции изображения:

Листинг: Масштабирование изображения

<img src="sample_img_3.3.1.jpg" alt="Исходное изображение" /> <img src="sample_img_3.3.1.jpg" alt="Увеличенное изображение" width="320" />

При изменении обоих атрибутов width и height для изображения есть риск его искажения. Поэтому, рассчитывайте новую высоту и ширину изображения таким образом, чтобы не изменять отношение сторон.

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

float - выравнивание изображения

Для выравнивания изображений относительно границ страницы можно использовать свойство стиля float. Это свойство может принимать следующие значения:

"left" - изображение размещается слева, текст "обтекает" его справа "right" - изображение размещается справа, текст "обтекает" его слева

То есть, атрибут align используется не только для выравнивания изображения, но и для управления обтеканием его текстом. Пример:

... <h2>finalFlares v1.0</h2> <img src="sample_img_3.3.1.jpg" style="float: left;" ... /> <p style="text-align: justify;"> <i>Светорассеивание</i>, <i>свечение</i> и <i>контурное свечение</i> - основные эффекты, создаваемые с помощью <b>finalFlares</b> от <b>cebas Computer GmbH</b>. В отличие от встроенного в 3ds max эквивалента, finalFlares создает гораздо более естественно выглядящие эффекты с мощным и гибким контролем. Помимо более быстрого рендеринга и лучшего контроля над эффектами, finalFlares также обеспечивает полной поддержкой <i>Particle Flow</i> и <i>ThinkingParticles</i>. </p> <p style="text-align: justify;">finalFlares доступен для 3ds max 6 и 7 по цене <b style="color: red;">245$</b> до 30 апреля 2005 года. После 30 апреля цена будет составлять <b style="color: red;">299$</b>. К сожалению нет никакой информации о доступности демонстрационной версии продукта. </p> ...

В ряде случаев обтекание изображения требуется прекратить. Например, необходимо начать новый раздел сразу под изображением. В таком случае, сразу за элементом, после которого обтекание необходимо прекратить, вставляют элемент <br style="clear: both;" />. Например:

... <img src="someimage.jpg" alt="Какое-то изображение" style="float: left;" /> <p>Текст абзаца, который обтекает изображение ... </p> <br style="clear: both;" /> <p>Этот абзац располагается уже под изображением, не обтекая его.</p>

Для выравнивания изображения по центру вложите элемент img в элемент div или p, выровненный по центру: Листинг. Выравнивание изображения по центру

<div style="text-align: center;"> <img src="sample_img_3.3.1.jpg" alt="По центру!" /> </div>

Тег table. Создание таблиц.

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

Таблицы строятся с помощью элементов следующих типов:

table - собственно контейнер, содержащий таблицу. Этот элемент может содержать только элементы группировки строк (thead, tfoot и tbody).

caption - надпись над таблицей. Элемент
обычно располагают сразу следом за открывающим тэгом table. Надпись обычно выравнивается по центру относительно таблицы. Для изменения выравнивания используйте стилевое правило text-align.

thead - предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <thead> в одной таблицы. Он должен располагаться в исходном коде сразу после тега <table>, тег
может располагаться выше.

tfoot - предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <tfoot> в исходном коде должен быть определен до тега <tbody>, браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент <tfoot>.

tbody - тело таблицы. Внутри этого элемента должны размещаться только строки таблицы.

tr - служит для создания строк таблицы. В строке могут размещаться элементы данных таблицы (td) или элементы заголовка (th).

td - элемент данных таблицы.

th - элемент заголовка таблицы.

Пример:

<table border="1" width="500" cellspacing="0" cellpadding="3"> <caption style="text-align: left">Тестовая таблица</caption> <thead> <tr> <th>thead</th> <th>верхняя строка таблицы (заголовок столбца)</th> </tr> </thead> <tfoot> <tr> <td>tfoot</td> <td>нижняя строка таблицы</td> </tr> </tfoot> <tbody> <tr style="background-color: aquamarine;"> <td>77777</td> <td>777772</td> </tr> <tr> <td>88888</td> <td>888882</td> </tr> <tr style="background-color: aquamarine;"> <td>99999</td> <td>999992</td> </tr> </tbody> </table>

Атрибуты элемента table

border - данный атрибут определяет наличие и толщину рамки таблицы. Если border имеет значение больше 0, то таблица, а так же каждая ее непустая ячейка, приобретет рамку. Кроме того, толщина внешней рамки таблицы определяется присвоенным значением.

width - ширина всей таблицы. При этом, ширина каждого столбца таблицы подбирается автоматически на основании длины значений ячеек, составляющих данный столбец. Ширину таблицы можно указывать в пикселях или в процентах. В последнем случае сразу после числа ставится знак "%".

cellspacing - размер внешнего отступа от границ ячеек до соседних ячеек или рамки таблицы. Аналог CSS border-spacing.

cellpadding - размер внутреннего отступа от границ ячеек до содержимого. Каким стилевым свойством заменить атрибут cellpadding тега <table>?

align - выравнивание таблицы. Отменен! Для выравнивания всей таблицы используют Основы работы с CSS

Фоновый цвет или изображение, а так же другие свойства стиля (цвет текста, шрифт, начертание, … ), вы можете назначить для всей таблицы, для отдельной ее строки и даже для отдельной ячейки. Для этого добавьте атрибут style в соответствующий элемент.
Как убрать рамку таблицы?
<td style="border-width: 0px; border: none none;">

или части рамки таблицы

th{ border-top:none; } td:first-child, th:first-child{ border-left:none; } td:last-child, th:last-child{ border-right:none; } tr:last-child td{ border-bottom:none; }

Выравнивание данных таблиц

Выравнивать данные таблицы можно для каждой конкретной ячейли, для всей строки и для группы строк или столбцов (<tbody>, <thead>, <tfoot> и пр.; см. далее). Кроме того, данные можно выравнивать по горизонтали и вертикали. Для горизонтального выравнивания используется атрибут align, который может принимать следующие значения:

left - по левой стороне ячейки

center - по правой стороне ячейки

right - по центру ячейки

justify - по ширине ячейки.

Для вертикальоного выравнивания используется атрибут valign. Значения этого атрибута могут быть следующими:

top - по верху ячейки

middle - по центру ячейки

bottom - по низу ячейки.

Для какого бы элемента вы ни указали атрибуты align или valign (<td>, <th>, <tr> или группе), выравнивание происходит относительно границ каждой ячейки. Указав выравнивание для элемента <td>, мы расположим соответственно только его содержимое. Задав выравнивание для всей строки <tr>, мы задаем выравнивание для всех ячеек данной строки. Аналогичным образом и для групп строк или столбцов.

Листинг: Выравнивание данных в ячейках таблицы

... <tr> <td>XHTML</td> <td align="center">Дональд Макмэтью </td> <td align="right">2004</td> </tr> <tr> <td>Использование PHP 5</td> <td align="center">Мак Мэтью</td> <td align="right">2005</td> </tr> ...

Управление размерами ячеек

Для ячеек <td> и <th> можно указать размеры, используя стилевые свойства width и height:

width:ширина;

height:высота;

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

Листинг: Управление размерами ячеек

... <tr> <td style="width: 220px;">XHTML</td> <td style="width: 150px;" align="center">Дональд Макмэтью </td> <td style="width: 60px;" align="right">2004</td> </tr> <tr> <td style="width: 220px;">Использование PHP 5</td> <td style="width: 150px;" align="center">Мак Мэтью</td> <td style="width: 60px;" align="right">2005</td> </tr> ...

Очевиден тот факт, что при указании размеров каждой ячейки таблицы, вы формируете столбцы заданной ширины. Это означает, что общая ширина всей таблицы будет равна суммарной ширине столбцов. Поэтому указывать общую ширину таблицы в этом случае не следует. В нашем примере первый столбец имеет ширину 220 пикселей, второй - 150 пикселей и третий - 60 пикселей. Суммарная ширина таблицы составит 430 пикселей (без учета ширины рамки).

Объединение ячеек

Управление объединением ячеек происходит с помощью атрибутов элементов <td> и <th>:

colspan="N" - объединяет N столбцов

rowspan="N"- - объединяет N строк

Листинг: Таблица с объединением ячеек

<table border="1" cellpadding="2" cellspacing="0"> <tbody> <tr style="background-color: #dddddd;"> <td rowspan="2" style="width: 200px;"> </td> <td colspan="2" style="width: 100px;"> </td> </tr> <tr style="background-color: #dddddd;"> <td style="width: 40px;"> </td> <td style="width: 60px;"> </td> </tr> <tr> <td style="width: 200px;"> </td> <td style="width: 40px;"> </td> <td style="width: 60px;"> </td> </tr> ... </tbody> </table>

Группы строк и столбцов

В данном разделе речь пойдет о нескольких новых элементах, позволяющих логически обьединять ячейки таблицы в столбцы и группы столбцов,а строки в группы строк. Для чего это может быть необходимо? Выполняя ряд предыдущих примеров, вы наверняка задумывались: "а это действительно так нужно - задавать выравнивание, ширину и прочие атрибуты для каждой ячейки столбца?". Нет ли такого механизма, который позволил бы упростить задачи форматирования данных таблиц?

Действительно, такой механизм существует. Объединив ячейки в столбцы, а столбцы в группы строк по определенному признаку, вы можете задать всему столбцу или даже всей группе необходимый стиль и атрибут.

Столбцы и группы столбцов создаются в таблицах с помощью элементов двух типов:

<col /> - объединяет ячейки в столбец

<colgroup>…</colgroup> - объединяет столбцы в группу.

Элементы <col /> и <colgroup> указываются в начале таблицы перед элементами <tbody>, <thead> или <tfoot>.

Элемент <col /> поддерживает следующие специальные атрибуты:

align="left|right|center|justify" - выравнивание данных в ячейках столбца

valign="top|middle|bottom" - вертикальное выравнивание данных

width="ширина" - указывает ширину ячеек столбца

Помимо этого поддерживаются все общие стрибуты. Элемент <col /> пустой и не может содержать вложенных элементов. Может использоваться внутри элементов <table> и <colgroup>. Элемент <colgroup> позволяет объединить несколько столбцов в группу. Это может понадобиться в том случае, когда несколько столбцов имеют какие то одинаковые черты форматирования: выравнивание, фоновый цвет, ширину и пр. Тогда, общие признаки можно вынести в элемент <colgroup>, а во вложенных в него элементах <col /> перечислить только индивидуальные признаки отдельных столбцов.

Элемент <colgroup> поддерживает следующие специальные атрибуты:

span="N" - колич ество объединяемых в группу столбцов

align="left|right|center|justify" - выравнивание данных в ячейках столбца

valign="top|middle|bottom" - вертикальное выравнивание данных

width="ширина" - указывает ширину ячеек столбца.

Наибольший интерес представляет атрибут span, позволяющий указать количество объединяемых столбцов. Казалось бы, это совершенно бесполезное занятие. Зачем указывать количество столбцов? Браузер же может его определить по количеству вложенных элементов <col />. Однако на деле все немного иначе. Элемент <colgroup> не обязательно должен содержать вложенные элементы <col />. Ведь столбец - понятие "виртуальное", абстрактное. Физически его не существует. Это просто совокупность ячеек, расположенных на одном и том же месте в каждой строке таблицы. Таким образом, приходим к выводу, что <colgroup> может объединять не только реальные, но и виртуальные столбцы! :)

Листинг: Столбцы и группы столбцов

<table border="1" cellspacing="0" cellpadding="2">  <colgroup span="4" width="250" align="center" style="background-color: #ddeeff;"> <col width="100" align="left" /> <col />  <col width="100" align="right" style="background-color: #ddffee;" /> <col />  </colgroup>  <col width="120" align="center" style="color:red;" /> <tbody> <tr> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> <th>Заголовок</th> </tr> <tr> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> <td>Данные</td> </tr> ...

В приведенном примере создается сначала группа из 4х столбцов. Их свойства по умолчанию:

цвет фона style="background-color: #ddeeff;", ширина ячеек width="250", горизонтальное выравнивание align="center".

Внутри группы размещается 4 элемента <col />. Некоторые из них применяют индивидуальное форматирование конкретного столбца, остальные (те, что без атрибутов) используются просто для пропуска столбца. Пропущенные столбцы используют форматирование, определенное для всей группы. Далее, за пределами группы расположен еще один столбец со своими индивидуальными параметрами.

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

Группы строк

В общем случае, строки таблицы можно логически разбить на три группы:

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

<thead> <tfoot> <tbody> соответственно для заголовка, итоговой части и тела. Причем, элемент <tbody> может встречаться в таблице многократно.

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

Элементы <thead>, <tbody> и <tfoot> поддерживают следующие специальные атрибуты:

align - горизонтальное выравнивание ячеек для группы строк

valign - вертикальное выравнивание.

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

Тег wbr перенос текста

Тег <wbr> указывает браузеру место, где допускается делать перенос строки в тексте, если этого требует ширина родительского элемента. При изменении ширины окна текст будет переноситься в тех местах, где указан тег <wbr>. Символ дефиса не добавляется, если требуется дефис используйте Символьные подстановки, cпецсимволы в HTML, Мнемоники - символ &shy.

Элементы физического форматирования

<b> - элемент, выделяющий содержимое полужирным шрифтом. Специальные атрибуты отсутствуют.

<p>Иногда что-то необходимо <b>выделить</b> из общего текста...</p>

<i> - элемент, выделяющий содержимое курсивом. Специальные атрибуты отсутствуют.

<p>Иногда что-то необходимо <i>выделить</i> из общего текста...</p>

Для достижения комбинированного эффекта при форматировании (например - создания полужирного подчеркнутого курсива) можно вкладывать элементы друг в друга:

<p>Иногда что-то необходимо <b><i><u>выделить</u></i></b> из общего текста...</p>

В примере выше слово "выделить" будет выведено полужирным подчеркнутым курсивом.

Элементы логического форматирования

<abbr>, <acronym> - элементы, идентифицирующие выделенный текст как аббревиатуру. Специальные атрибуты отсутствуют. Рекомендуется добавлять атрибут title для расшифровки значения аббревиатуры. Визуальный эффект форматирования по умолчанию отсутствует.

<p><acronym title="World Wide Web Consortium">W3C</acronym> - международная организация, занимающаяся стандартизацией языков разметки.</p>

<address> - применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах, а также дата создания и последней модификации документа. Тег применяется обычно вначале или/и в конце документа. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

<p><address>© Артемов АН, 2004г. http://alexart.od.ua</address></p>

<cite> - элемент, идентифицирующий выделенный текст как цитату или ссылку на другой содержащий ее ресурс. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

<p>Как сказал Марк Твен, <cite>"Бросить курить достаточно легко. Лично я проделывал это неоднократно..."</cite></p>

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

<p><code>if (a*10 == b) printf ("%d", a);</code></p>

<dfn> - элемент, используемый для выделения первого появления некоторого термина в документе. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

<p><dfn>Абзац</dfn> - это блок текста, отмеченный элементом "р".</p>

<em> - emphasis (акцент). Используется для акцентирования внимания на некотором фрагменте текста. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.

<p><em>Абзац</em> - это блок текста, отмеченный элементом "р".</p>

<strong> - используется для обозначения фрагмента текста усиленной важности. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается полужирным начертанием.

<p><strong>Абзац</strong> - это блок текста, отмеченный элементом "р".</p>

Тег span линейный, а div блочный

Иногда появляется необходимость, выделить фрагмент, к примеру, только цветом, какой элемент использовать? Кому назначать стиль? Специально для таких ситуаций, существует элемент <span>. Это элемент - пустышка, обертка, которую можно сделать красивой, благодаря стилям. Span является линейным элементом, и не подходит для форматирования крупных текстовых блоков. Для этой цели необходимо использовать его блочный аналог - элемент div.

<span> style="font-weight: bold; color: red;">Красные жирные слова</span>

📌 Для тестирования скриптов, установщиков VPN, Python ботов рекомендуем использовать надежные VPS на короткий срок. Если вам нужна помощь с более сложными задачами, вы можете найти фрилансера, который поможет с настройкой. Узнайте больше о быстрой аренде VPS для экспериментов и о фриланс-бирже для настройки VPS, WordPress. 📌

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!

7 Самых Популярных Статей

Как запустить скрипты и веб-приложения на Python

Что такое страны TIER 1,2,3

7 способов сравнения файлов по содержимому в Windows или Linux

Установка и тестирование веб-панели HestiaCP

Китайский VPN Shadowsocks простая установка и настройка

top, htop, atop определение загрузки ОС (Load average, LA)

Использование rsync в примерах

7 Самых Популярных Обзоров

ТОП 4 лучших антидетект браузеров (Бесплатные & Платные)

Обзор Cloudways: Управляемый хостинг WordPress без головной боли

Обзор и отзывы о PQ Hosting в 2024 году

Хостинг в России

Хостинг в Европе

Обзор браузера Dolphin {anty} для мультиаккаунтинга

Хостинг в Турции

Использование HTML 5

Правила записи элементов и их атрибутов

DOCTYPE html head meta body

Линейные и блочные элементы

Атрибут style

Тег form, тег label

Тег input

Как запретить отправку с пустого поля input в form при помощи javacripts?

Тег button

Тег select. Выпадающий список.

Тег pre. Обработка пробельных символов.

Тег img. Вставка рисунка.

Тег table. Создание таблиц.

Выравнивание данных таблиц

Управление размерами ячеек

Объединение ячеек

Группы строк и столбцов

Тег wbr перенос текста

Элементы физического форматирования

Элементы логического форматирования

Тег span линейный, а div блочный

7 Самых Популярных Статей

7 Самых Популярных Обзоров