Инструменты пользователя

Инструменты сайта


html5

Различия

Здесь показаны различия между двумя версиями данной страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Предыдущая версия
html5 [2018/05/06 11:29]
html5 [2019/01/29 09:40] (текущий)
darkfire
Строка 1: Строка 1:
 +====== Использование HTML 5 ======
 +
 +{{htmlmetatags>​
 +metatag-description=(Общие сведения об HTML. Что такое HTML5 и его особенности. Шпаргалка по HTML.)
 +}}
 +
 +
 +  * [[http://​dev.w3.org/​html5/​spec/​|Спецификация HTML5]]
 +
 +
 +  * ul, ol [[Маркированные(неупорядоченные) и нумерованные списки]]. Многоуровневые списки.
 +  * [[Site navigation menu|Меню навигации сайта]]
 +  * [[Списки определений]]:​ список терминов,​ личностей,​ событий или дат.
 +  * Тег: [[<​a>​]]. Гиперссылки. Закладки. Графическая навигационная панель.
 +        * [[nofollow]] - атрибута rel тега [[<​a>​]]
 +  * Тег: [[iframe]]
 +  * Тег: [[noindex]] используется для запрета индексации какой-либо части текста страницы или ее кода.
 +  * [[Символьные подстановки]]
 +  * [[Цитаты]]
 +
 +
 +**HTML 5** (HyperText Markup Language, version 5) больше не является частью [[SGML]], теперь это самостоятельный язык разметки.
 +
 +HTML5 — это не что-то цельное,​ это набор индивидуальных особенностей. Поэтому нет никакого смысла пытаться определять поддержку HTML5 в браузерах. Но есть возможность определять поддержку составляющих компонентов,​ таких как
 +  * [[Canvas]] - создание растрового изображения,​
 +  * video,
 +  * [[html5#​geolocation_api|геолокации]].
 +
 +Элементы,​ такие как <​section>,​ <​article>,​ <​header>​ и <nav> разработаны для семантического обогащения содержимое html- страницы. Семантика HTML5 нужна для поисковых систем,​ которые ее должны будут использовать когда-нибудь:​)
 +===== Правила записи элементов и их атрибутов =====
 +
 +По большому счету, это правила записи элементов XML. Однако,​ XHTML документы также являются документами XML и подчинены тем же требованиям. ​
 +
 +Введем ряд определений: ​
 +  * **тэг или дескриптор** - специального вида текстовая метка в документе,​ отмечающая границы - начало или конец - некоторого элемента содержимого. Например,​ для обозначения начала абзаца,​ используется тэг <p>, а для его завершения - </​p> ​
 +  * **элементом** - называется совокупность открывающего и закрывающего тэга и его содержимого. Содержимым элемента может быть не только простой текст, а и вложенные в него другие элементы. Кроме того, существует ряд элементов принципиально не могущих иметь содержимого. Такие элементы подчиняются несколько отличным от традиционных правилам записи. ​
 +  * **атрибут** - это свойство элемента. Записываются атрибуты в начальном тэге элемента и определяют внешний вид и логику использования элемента. ​
 +
 +Элементы - одна из наиболее важных сущностей XHTML документа. С помощью элементов производится разбиение страницы на структурные блоки и выполняется визуальное оформление документа. ​
 +
 +Рассмотрим ряд правил. которым вы должны следовать при записи тэгов и самих элементов. ​
 +
 +  * Правило записи начального тэга. Начальный тэг элемента должен быть записан в следующем виде:<​file>​
 +<​имя_элемента>​
 +</​file>​ Сразу за символом < должно следовать имя элемента. Имена элементов должны быть обязательно записанны в нижнем регистре! ​
 +
 +<​note>​В ранних версиях языка разметки HTML правила записи имен элементов несколько отличались. Например,​ не существовало принципиальной разницы между записью <​BODY>​ и <​body>​. Браузеры до сих пор "​понимают"​ устаревшую форму записи и не делают между ними различия. Однако,​ вы должны следовать требованиям современных стандартов,​ чтобы научиться создавать страницы не только привлекательно выглядящие в браузере,​ но и отвечающие современным представлениям о правильном оформлении XHTML документов.</​note>​
 +В начальном тэге элемент может содержать один и более атрибутов: ​
 +<​file>​
 +<​имя_элемента атрибут="​значение"​ ...>
 +</​file>​ Имя элемента и имя первого атрибута должен разделять как минимум один пробельный символ. ​
 +  * Правило записи конечного тэга. Конечный тэг элемента должен быть записан в следующей форме:
 +<​file>​
 +...</​имя_элемента>​
 +</​file>​Сразу за символом < должен следовать символ /, а за ним - имя элемента. В закрывающем тэге больше ничего не должно содержаться. Перечисление здесь атрибутов элемента будет грубой ошибкой! ​
 +  * Правило записи элементов,​ не имеющих содержимого. В XHTML существуе ряд элементов,​ которые принципиально не могут иметь содержимого. К таким элементам относятся,​ например,​ элемент вставки рисунка - img или принудительный перенос - br. Безусловно,​ нет ошибки в такой форме записи: ​
 +<​file>​
 +<img ... ></​img>​
 +</​file>​
 +Однако,​ между открывающим и закрывающим тэгами элемента img никогда не может быть содержимого. Поэтому было принято соглашение об альтернативной,​ более компактной форме записи подобных элементов: ​
 +<​file>​
 +<img ... />
 +</​file>​
 +Последовательность " />" закрывает элемент так, как обыкновенный закрывающий тэг. Причем,​ между именем тэга или значением последнего атрибута (если таковые имеются) и символом "/"​ должен следовать хотя бы один пробел! ​
 +<​note>​Отсутствие пробела перед символом "/"​ не приведет к катастрофическим результатам при запуске страницы в браузере. Однако,​ при проверке документа HTML Validator выдает предупреждение об его отсутствии.</​note>​
 +Атрибуты - это способ указания свойств элемента. Существует,​ к примеру,​ возможность с помощью атрибутов повлиять на визуальное представление элемента,​ связав с ним стиль. Атрибуты элемента перечисляются в его начальном тэге: ​
 +<​file>​
 +<​имя_элемента атрибут="​значение"​ атрибут="​значение"​ ... >
 +</​file>​
 +При записи атрибута указывается пара имя="​значение",​ причем значение атрибута обязательно заключается в одинарные (') или двойные (") кавычки. Между именем следующего атрибута и значением предыдущего обязательно должен следовать как минимум один пробел. ​
 +
 +Ниже приводится перечень атрибутов,​ которые могут присутствовать в любом элементе: ​
 +<​file>​
 +id - уникальный идентификатор элемента ​
 +style - стиль элемента ​
 +class - класс стиля в таблице стилей CSS 
 +title - всплывающая подсказка элемента ​
 +lang - код языка, применяемый к элементу и его содержимому ​
 +dir - задает направление размещения текста содержимого
 +</​file>​
 +
 +===== DOCTYPE html head meta body =====
 +
 +  * **Шаблон HTML5**:<​file>​
 +<​!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>​
 +</​file>​
 +
 +  * <​!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">​ также поддерживается. [[kodirovka?&#​ukazanie_kodirovki_dokumenta_web-stranicy|Указание кодировки документа web- страницы]].
 +<​note>​HTTP- заголовок(генерируемый Web сервером) является более предпочтительным,​ он перекрывает тег meta.</​note>​
 +          * Перечисление ключевых слов, помогающих поисковым системам проиндексировать вашу страницу
 +          * Описание или подключение таблиц стилей и сценариев<​file>​
 +<link rel="​shortcut icon" href="/​favicon.ico"​ /> определение иконки,​ связанной с текущей страницей.
 +</​file>​
 +  * **Элемент meta** является дочерним по отношению к разделу заголовка документа head. Закрывающий тег для meta не используется.
 +  * **Тело документа - body**. Тело документа представляет собой то, ради чего создается документ - его содержательную часть, то, что увидит конечный пользователь на странице. Здесь происходит разбиение текста страницы на структурные блоки (заголовки и абзацы),​ выполняется вставка изображений,​ таблиц,​ списков и прочих элементов содержания.
 +  * **Подвал страницы - [[verstka?&#​footer_podval|footer]]**.
 +===== Линейные и блочные элементы =====
 +По способу форматирования содержимого элементы XHTML можно разделить на **блочные** и **линейные**. Грубо говоря,​ блочные элементы используются для выделения больших структурных блоков в тексте,​ таких как абзацы или заголовки. Линейные же элементов служат для выделения фрагментов текста внутри этих блоков.
 +
 +Для примера:​ тег абзаца "<​p></​p>"​ - блочный элемент,​ выделение текста жирным ("<​b></​b>"​) или курсивным ("<​i></​i>"​) начертанием - линейные элементы.
 +  * **Элементы линейной разметки.**
 +Линейные элементы обладают,​ скажем так, меньшей сферой влияния по сравнению с блочными. Их можно использовать,​ например,​ для выделения фрагмента усиленного значения,​ некоторой фразы или слова в текстовом блоке. Линейные элементы могут свободно размещаться в одной строке и вкладываться друг в друга. ​
 +
 +По принципу разметки информации,​ линейные элементы можно разделить на следующие два типа: ​
 +  * элементы физического форматирования
 +  * элементы логического форматирования ​
 +Элементы логического форматирования привносят в HTML код семантику. То есть, по самому названию элемента можно судить о сути, смысле выделяемого фрагмента. При этом, физуальный эффект разметки играет второстепенную роль и даже может отсутствовать. ​
 +
 +<​note>​Факт отсутствия визуального эффекта не должен вас беспокоить. В дальнейшем его можно добиться с помощью стилей CSS.</​note>​
 +<note important>​В противовес элементам логического форматирования,​ элементы физического форматирования на первое место выводят именно внешний вид содержимого. Такие элементы ровным счетом ничего не сообщают о типе выделяемой информации. Их использование считается не рекомендованным,​ хотя и приносит,​ на первый взгляд,​ куда большую пользу.</​note>​
 +
 +  * **Элементы блочной разметки.**
 +К блочным элементам относятся <​div>,​ <h1> и <p>.
 +<note important>​Любой блочный элемент по умолчанию размещается на странице таким образом,​ что занимает всю доступную ему ширину,​ а высота элемента уже зависит от содержимого. Несколько записанных подряд блочных элементов размещаются друг под другом,​ даже если им хватает места для размещения в одной строке. Т.е. всегда начинаются с новой строки. </​note>​
 +Простой пример блочной разметки  ​
 +<​file>​
 +...
 +<​body>​
 +    <​p>​Первый абзац.</​p>​
 +    <p>И второй абзац.</​p>​
 +</​body>​
 +...
 +</​file>​
 +Любой сложный многоуровневый документ можно разбить на разделы. Раздел принято начинать заголовком. Это будет первый уровень разбиения. Каждый раздел,​ в свою очередь,​ можно поделить на более мелкие структурные единицы - подразделы (второй уровень) и так далее.
 +===== Атрибут style =====
 +
 +  * [[css#​podkljuchenie_stilej_css_k_html_3_sposoba|3 способа подключения стилей CSS к HTML]]
 +Наиболее простым способом применения стилей CSS является использование атрибута style:<​file>​
 +<​элемент style="​правила стиля">​ ...
 +</​file>​
 +Правила стиля записываются в виде пар "​название:​значение;"​ последовательно одно за другим. Например,​ если необходимо установить в заголовке 1го уровня размер текста равным 16 пунктам,​ а цвет сделать темно-красным,​ можно использовать следующий набор правил: ​
 +<​file>​
 +<​body>​
 +    <​h1>​Обыкновенный заголовок 1го уровня</​h1>​
 +    <h1 style="​font-size:​ 16pt; color: #​660000;">​
 +        Заголовок 1го уровня,​ использующий стили.
 +    </h1>
 +</​body>​
 +</​file>​
 +
 +===== Тег form, тег label =====
 +
 +[[jquery.maskedinput.js|Маска ввода в полях формы на jQuery]]
 +
 +Форма создаётся с помощью тега <​form>​. Формы обеспечивают получение данных от пользователя и передачу их на сервер,​ где они уже подвергаются анализу и обработке. Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение»,​ где имя определяется атрибутом name тега <​input>​ или другим тегом допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После нажатия пользователем кнопки Submit, происходит вызов обработчика формы, который получает введённую в форме информацию.
 +<​note>​Можно использовать несколько форм на странице,​ но они не должны вкладываться одна в другую.</​note>​
 +У тега form существует несколько необязательных атрибутов:​
 +  * атрибут **name** – определяет имя формы, уникальное для данного документа. Используется только,​ если в документе присутствует несколько форм.
 +  * атрибут **action** служит для указания адреса программы на Web-сервере,​ которая будет обрабатывать содержимое данных формы. ​ Если атрибут action не указывать,​ то передача происходит на адрес текущей страницы. Например:<​file html>
 +<form method="​post"​ action="/​test/​test.php"></​form>​
 +<form method="​get"​ action="​http://​localhost:​1277/">​
 +</​file>​
 +  * атрибут **method** принимает два значения get или post. Указывает метод передачи данных на сервер [[GET]] или [[POST]].
 +<note important>​Во время обычного submit'​а формы браузер сам кодирует значения полей и составляет тело GET/POST- запроса для посылки на сервер. При работе через [[XmlHttpRequest]],​ это нужно делать самим, в JavaScript- коде.</​note>​
 +  * атрибут **enctype** указывает способ кодирования данных формы при их отправке на сервер. Возможные значения:​
 +      * application/​x-www-form-urlencode:​ Пробел представляется как %20, русские буквы и большинство спецсимволов кодируются,​ английские буквы и дефис оставляются без изменений.
 +      * multipart/​form-data:​ Данные не кодируются. Это значение применяется при отправке файлов.
 +      * text/plain:
 +<​note>​[[PHP - загрузка файла на сервер]].</​note>​
 +**События формы.** Эти события напрямую связаны только с тем, что случается в форме и в ее элементах ввода. С помощью события отправки данных — submit отслеживается момент передачи данных из формы; с помощью события изменения — change отслеживается пользовательский ввод данных в элемент;​ а событие select
 +возникает,​ когда был обновлен элемент <​select>​.
 +
 +<​note>​Атрибут tabindex определяет последовательность перехода между ссылками при нажатии на кнопку Tab.</​note>​
 +
 +**Тег <​label>​** устанавливает связь между определённой меткой,​ в качестве которой обычно выступает текст, и элементом формы (<​input>,​ <​select>,​ <​textarea>​). Такая связь необходима,​ чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <​label>​ можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам.
 +
 +Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <​label>​. При втором способе элемент формы помещается внутрь контейнера <​label>​.
 +
 +<​file>​
 +<input id="​идентификатор"><​label for="​идентификатор">​Текст</​label>​
 +<​label><​input type="​...">​ Текст</​label>​
 +</​file><​file>​
 +<label for="​from">​From</​label>​
 +<input type="​text"​ id="​from"​ name="​from"/>​
 +</​file>​
 +
 +===== Тег input =====
 +
 +**Тег <​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"/>​ кнопка. Тег <​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"/>​— для локальных даты и времени;​
 +
 +<​note>​По умолчанию все поля имеют тип "​text"​.</​note>​
 +  * **Замещающие строки**. Для вывода текста внутри поля формы, который исчезает при получении фокуса,​ служит атрибут placeholder. Если внутри строки предполагается пробел,​ ее необходимо брать в двойные или одинарные кавычки.<​file>​
 +<input placeholder="​строка">​
 +</​file>​
 +  * FAQ: Тэг input ввод только цифр:<​file><​label>​Number: ​
 +<input type="​text"​ onkeyup="​this.value = this.value.replace (/\D/, ''​)"></​label>​
 +</​file>​
 +
 +====== Тег button ======
 +**Тег <​button>​** создает на веб-странице кнопки аналогичные,​ получаемый с помощью тега <​input>​ (с атрибутом type="​button | reset | submit"​). В отличие от этого тега, <​button>​ позволяет размещать любые элементы HTML, в том числе изображения. Используя стили можно определить вид кнопки путем изменения шрифта,​ цвета фона, размеров и т.д.
 +
 +**Использование**:​
 +<​file>​
 +<​form>​
 +  <button type="​button | reset | submit">​...</​button>​
 +</​form>​
 +</​file>​
 +Значения:​
 +  * button - обычная кнопка
 +  * reset - кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
 +  * submit - кнопка для отправки данных формы на сервер. ​
 +<​note>​Значение по умолчанию submit.</​note>​
 +<​file>​
 +<button type="​button">​
 +    <img alt="​Left"​ src="​img/​arrow_left_blue.png"​ />
 +</​button>​
 +</​file>​
 +  * HTML button как ссылка на ресурс:​ <​file>​
 +<button onclick="​javascript:​window.location.href = '/​export/​pdf?​file=irregular_verbs.pdf'"​
 +title="​Export to PDF">​PDF</​button>​
 +</​file>​
 +
 +====== Тег select. Выпадающий список. ======
 +  * [[http://​www.dmsdesign.ru/​js6.html|Тег <​select>​]]
 +Тег <​select>​ позволяет создать элемент интерфейса в виде раскрывающегося списка,​ а также список с одним или множественным выбором.
 +<​file>​
 +            <​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>​
 +</​file>​
 +К описанию выбранного элемента можно обратиться через свойство text, а к значению при помощи свойства value<​file>​
 +var a = document.getElementById('​selc'​);​
 +alert(a.options[a.selectedIndex].text);​
 +alert(a.options[a.selectedIndex].value);​
 +</​file>​
 +
 +====== Тег pre. Обработка пробельных символов. ======
 +Браузеры проводят предварительную обработку текста перед его форматированием и выводом.
 +
 +Суть предварительной обработки состоит в следующем:​ несколько идущих подряд символов пробела или табуляции "​сворачиваются"​ в один пробел;​ все символы "​перевод строки и возврат каретки"​ (Enter) удаляются. Исключением является только,​ преформатированный текст. Таким образом,​ следующая фраза ​
 +<​file>​
 +<p>
 +Эта фраза
 + будет выведена  ​  ​одной
 +строкой с одним пробелом ​   между
 +каждым
 +словом!
 +</p>
 +</​file>​
 +... в браузере будет выглядеть вполне обычной:​
 +<​file>​
 +Эта фраза будет выведена одной строкой с одним пробелом между каждым словом!
 +</​file> ​
 +
 +Однако,​ может возникнуть ситуация,​ когда все же будет необходимо написать каждую фразу некоторого текста с новой строки (например,​ разместить на странице некоторое стихотворение или программный код). В таких случаях исходное форматирование текста имеет довольно большое значение и его необходимо сохранить. Для используется элемент <pre> - preformated,​ преформатированный. Этот элемент выводит свое содержимое на страницу с сохранением исходного форматирования текста.
 +<​file>​
 +<​pre></​pre>​
 +</​file>​
 +
 +====== Тег img. Вставка рисунка. ======
 +
 +Вставить изображение на web страницу можно, используя элемент <img />. Этот элемент должен содержать атрибут src, указывающий адрес файла изображения. Ниже показан пример вставки изображения,​ расположенного по адресу "​C:​\images\image1.jpg": ​
 +<​file>​
 +<img src="​file:///​c:/​image/​image1.jpg"​ />
 +</​file>​
 +Элемент 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"​. Тогда код для подключения данного изображения будет иметь вид: ​
 +<​file>​
 +<img src="​http://​www.otherhost.com/​Images/​image.jpg"​ />
 +</​file>​
 +Относительную адресацию используют для указания адреса ресурса в пределах одного и того же сайта, логического диска. При этом используются следующие обозначения: ​
 +<​file>​
 +"/"​ - обозначает корневой каталог web-узла или диска ​
 +"​./"​ - обозначает текущий каталог ​
 +"​../"​ - обозначает родительский каталог ​
 +"​имя/"​ - обозначает каталог,​ дочерний по отношению к текущему
 +</​file> ​
 +Таким образом,​ если необходимо указать путь к изображению "​image.jpg",​ расположенному в каталоге "​Images",​ дочернему по отношению к текущему,​ используют следующий адрес: ​
 +<​file>​
 +<img src="​Images/​image.jpg"​ />
 +</​file>​
 +
 +  * **alt - альтернативный текст**
 +Атрибут alt используется для текстового описания изображения. Если браузер посетителя web-узла не поддерживает изображения,​ или они в данный момент отключены,​ то, вместо изображений,​ пользователь на странице увидит текст. Альтернативный текст может дать пользователю хоть какую нибудь информацию о данном изображении. Это вдвойне важно в тех случаях,​ когда изображение является,​ так же, и ссылкой. В случае же, когда изображение отобразилось успешно,​ альтернативный текст выступает в качестве всплывающей подсказки.
 +
 +  * **title** - всплывающая подсказка
 +Атрибут title предоставляет дополнительную информацию о картинке и не является обязательным,​ хотя SEO - эксперты рекомендуют его применять для лучшего продвижения по изображениям. Текст, внесенный в атрибут title, показывается при наведении курсора мышки на картинку,​ а согласно генеральной концепции поисковых систем - все, что видит пользователь - учитывается при ранжировании.
 +
 +  * **width и height - размеры изображения**
 +Помимо прочих атрибутов,​ рекомендуется,​ так же задавать размеры изображения с помощью атрибутов width и height. При этом, следует указывать реальные размеры изображения в пикселях. Это нужно для того, чтобы браузер сразу, еще перед непосредственной загрузкой изображения с сервера выделил пространство под элемент и не нарушал в дальнейшем структуру страницы. ​
 +
 +Кроме того, с помощью атрибутов width и height можно масштабировать изображение по вашему желанию. Например,​ если вы хотите в 2 раза увеличить изображение с размерами 160x120, то достаточно указать только один из размеров (высоту или ширину),​ увеличив его в 2 раза. Второй размер будет подогнан автоматически так, чтобы сохранить пропорции изображения: ​
 +
 +Листинг:​ Масштабирование изображения  ​
 +<​file>​
 +<img src="​sample_img_3.3.1.jpg"​ alt="​Исходное изображение"​ />
 +<img src="​sample_img_3.3.1.jpg"​ alt="​Увеличенное изображение"​ width="​320"​ />
 +</​file>​
 +<note important>​При изменении обоих атрибутов width и height для изображения есть риск его искажения. Поэтому,​ рассчитывайте новую высоту и ширину изображения таким образом,​ чтобы не изменять отношение сторон.</​note>​
 +В любом случае,​ изменять размеры изображений,​ которые вы используете на своих страницах с помощью специализированного ПО, например - [[Gimp]]. Не стоит масштабировать изображения средствами HTML. У специализированных программ гораздо более продвинутые и эффективные алгоритмы интерполяции изображений и, следовательно,​ уменьшается нежелательный эффект пикселизации при масштабировании.
 +
 +  * **float - выравнивание изображения**
 +Для выравнивания изображений относительно границ страницы можно использовать свойство стиля float. Это свойство может принимать следующие значения: ​
 +<​file>​
 +"​left"​ - изображение размещается слева, текст "​обтекает"​ его справа ​
 +"​right"​ - изображение размещается справа,​ текст "​обтекает"​ его слева
 +</​file> ​
 +То есть, атрибут align используется не только для выравнивания изображения,​ но и для управления обтеканием его текстом. Пример: ​
 +<​file>​
 +...
 +<​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>
 +...
 +</​file>​
 +В ряде случаев обтекание изображения требуется прекратить. Например,​ необходимо начать новый раздел сразу под изображением. В таком случае,​ сразу за элементом,​ после которого обтекание необходимо прекратить,​ вставляют элемент <br style="​clear:​ both;" />. Например: ​
 +<​file>​
 +...
 +<img src="​someimage.jpg"​ alt="​Какое-то изображение"​ style="​float:​ left;" />
 +<​p>​Текст абзаца,​ который обтекает изображение ...
 +</​p>​  ​
 +<br style="​clear:​ both;" />
 +<​p>​Этот абзац располагается уже под изображением,​ не обтекая его.</​p>​
 +</​file>​
 +Для выравнивания изображения по центру вложите элемент img в элемент div или p, выровненный по центру: ​
 +Листинг. Выравнивание изображения по центру  ​
 +<​file>​
 +<div style="​text-align:​ center;">​
 +    <img src="​sample_img_3.3.1.jpg"​ alt="​По центру!"​ />
 +</​div>​
 +</​file>​
 +====== Тег table. Создание таблиц. ======
 +Табличное представление информации используется в тех случаях,​ когда необходимо вывести на страницу большое количество данных,​ характеризуемых однотипным набором данных.
 +
 +**Таблицы строятся с помощью элементов следующих типов**: ​
 +  * **table** - собственно контейнер,​ содержащий таблицу. Этот элемент может содержать только элементы группировки строк (thead, tfoot и tbody).
 +  * **caption** -  надпись над таблицей. Элемент <​caption>​ обычно располагают сразу следом за открывающим тэгом table. Надпись обычно выравнивается по центру относительно таблицы. Для изменения выравнивания используйте стилевое правило text-align.
 +  * **thead** - предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента <​thead>​ в одной таблицы. Он должен располагаться в исходном коде сразу после тега <​table>,​ тег <​caption>​ может располагаться выше.
 +  * **tfoot** -  предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег <​tfoot>​ в исходном коде должен быть определен до тега <​tbody>,​ браузеры отображают его в самом низу таблицы. В пределах таблицы разрешается использовать только один элемент <​tfoot>​.
 +  * **tbody** - тело таблицы. Внутри этого элемента должны размещаться только строки таблицы.
 +  * **tr** - служит для создания строк таблицы. В строке могут размещаться элементы данных таблицы (td) или элементы заголовка (th).
 +  * **td** - элемент данных таблицы.
 +  * **th** - элемент заголовка таблицы.
 +
 +
 +Пример:<​file>​
 +<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>​
 +</​file>​
 +
 +
 +**Атрибуты элемента table**
 +
 +  * **border** - данный атрибут определяет наличие и толщину рамки таблицы. Если border имеет значение больше 0, то таблица,​ а так же каждая ее непустая ячейка,​ приобретет рамку. Кроме того, толщина внешней рамки таблицы определяется присвоенным значением.
 +  * **width** - ширина всей таблицы. При этом, ширина каждого столбца таблицы подбирается автоматически на основании длины значений ячеек, составляющих данный столбец. Ширину таблицы можно указывать в пикселях или в процентах. В последнем случае сразу после числа ставится знак "​%"​.
 +  * **cellspacing** - размер внешнего отступа от границ ячеек до соседних ячеек или рамки таблицы. Аналог CSS border-spacing.
 +  * **cellpadding** - размер внутреннего отступа от границ ячеек до содержимого. [[http://​htmlbook.ru/​faq/​kakim-stilevym-svoystvom-zamenit-cellpadding|Каким стилевым свойством заменить атрибут cellpadding тега <​table>?​]]
 +  * align - выравнивание таблицы. Отменен! Для выравнивания всей таблицы используют [[CSS]]
 +<note tip>​Фоновый цвет или изображение,​ а так же другие свойства стиля (цвет текста,​ шрифт, начертание,​ ... ), вы можете назначить для всей таблицы,​ для отдельной ее строки и даже для отдельной ячейки. Для этого добавьте атрибут style в соответствующий элемент.</​note>​
 +<note tip>​**Как убрать рамку таблицы?​** <​file>​
 +<td style="​border-width:​ 0px; border: none none;">​
 +</​file>​или части рамки таблицы<​file>​
 +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;​
 +}
 +</​file>​
 +</​note>​
 +===== Выравнивание данных таблиц =====
 +Выравнивать данные таблицы можно для каждой конкретной ячейли,​ для всей строки и для группы строк или столбцов (<​tbody>,​ <​thead>,​ <​tfoot>​ и пр.; см. далее). Кроме того, данные можно выравнивать по горизонтали и вертикали. Для горизонтального выравнивания используется атрибут ​ align, который может принимать следующие значения: ​
 +  * left - по левой стороне ячейки ​
 +  * center - по правой стороне ячейки
 +  * right - по центру ячейки
 +  * justify - по ширине ячейки. ​
 +Для вертикальоного выравнивания используется атрибут ​ valign. Значения этого атрибута могут быть следующими: ​
 +  * top - по верху ячейки
 +  * middle - по центру ячейки
 +  * bottom - по низу ячейки. ​
 +Для какого бы элемента вы ни указали атрибуты ​ align или ​ valign (<​td>,​ <th>, <tr> или группе),​ выравнивание происходит относительно границ каждой ячейки. Указав выравнивание для элемента <td>, мы расположим соответственно только его содержимое. Задав выравнивание для всей строки <tr>, мы задаем выравнивание для всех ячеек данной строки. Аналогичным образом и для групп строк или столбцов. ​
 +
 +Листинг:​ Выравнивание данных в ячейках таблицы  ​
 +<​file>​
 +    ...
 +    <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>​
 +    ...
 +</​file>​
 +
 +===== Управление размерами ячеек =====
 +Для ячеек <td> и <th> можно указать размеры,​ используя стилевые свойства width и height: ​
 +  * width:​ширина;​
 +  * height:​высота; ​
 +В принципе,​ эти стилевые свойства можно использовать не только для указания размеров ячеек таблиц. С их помощью можно указать размеры любого блочного элемента страницы (например - абзаца или заголовков). ​
 +
 +Листинг:​ Управление размерами ячеек  ​
 +<​file>​
 +    ...
 +    <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>​
 +    ...
 +</​file>​
 +
 +<note tip>​Очевиден тот факт, что при указании размеров каждой ячейки таблицы,​ вы формируете столбцы заданной ширины. Это означает,​ что общая ширина всей таблицы будет равна суммарной ширине столбцов. Поэтому указывать общую ширину таблицы в этом случае не следует. В нашем примере первый столбец имеет ширину 220 пикселей,​ второй - 150 пикселей и третий - 60 пикселей. Суммарная ширина таблицы составит 430 пикселей (без учета ширины рамки).</​note>​
 +===== Объединение ячеек =====
 +Управление объединением ячеек происходит с помощью атрибутов элементов <td> и <​th>: ​
 +  * colspan="​N"​ - объединяет N столбцов
 +  * rowspan="​N"​- - объединяет N строк
 +
 +Листинг:​ Таблица с объединением ячеек  ​
 +<​file>​
 +<table border="​1"​ cellpadding="​2"​ cellspacing="​0">​
 +    <​tbody>​
 +        <tr style="​background-color:​ #​dddddd;">​
 +            <td rowspan="​2"​ style="​width:​ 200px;">&​nbsp;</​td>​
 +            <td colspan="​2"​ style="​width:​ 100px;">&​nbsp;</​td>​
 +        </tr>
 +        <tr style="​background-color:​ #​dddddd;">​
 +            <td style="​width:​ 40px;">&​nbsp;</​td>​
 +            <td style="​width:​ 60px;">&​nbsp;</​td>​
 +        </tr>
 +        <tr>
 +            <td style="​width:​ 200px;">&​nbsp;</​td>​
 +            <td style="​width:​ 40px;">&​nbsp;</​td>​
 +            <td style="​width:​ 60px;">&​nbsp;</​td>​
 +        </tr>
 +        ... 
 +    </​tbody>​
 +</​table>​
 +</​file>​
 +===== Группы строк и столбцов =====
 +В данном разделе речь пойдет о нескольких новых элементах,​ позволяющих логически обьединять ячейки таблицы в столбцы и группы столбцов,​а строки в группы строк. Для чего это может быть необходимо?​ Выполняя ряд предыдущих примеров,​ вы наверняка задумывались:​ "а это действительно так нужно - задавать выравнивание,​ ширину и прочие атрибуты для каждой ячейки столбца?"​. Нет ли такого механизма,​ который позволил бы упростить задачи форматирования данных таблиц? ​
 +
 +Действительно,​ такой механизм существует. Объединив ячейки в столбцы,​ а столбцы в группы строк по определенному признаку,​ вы можете задать всему столбцу или даже всей группе необходимый стиль и атрибут. ​
 +
 +Столбцы и группы столбцов создаются в таблицах с помощью элементов двух типов: ​
 +  * <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>​ может объединять не только реальные,​ но и виртуальные столбцы! :) 
 +
 +Листинг:​ Столбцы и группы столбцов  ​
 +<​file>​
 +<table border="​1"​ cellspacing="​0"​ cellpadding="​2">​
 +    <!-- Группа из 4х столбцов -->
 +    <​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>
 +        ...
 +</​file>​
 +В приведенном примере создается сначала группа из 4х столбцов. Их свойства по умолчанию: ​
 +<​file>​
 +цвет фона ​ style="​background-color:​ #​ddeeff;", ​
 +ширина ячеек ​ width="​250", ​
 +горизонтальное выравнивание ​ align="​center"​.
 +</​file> ​
 +Внутри группы размещается 4 элемента <col />. Некоторые из них применяют индивидуальное форматирование конкретного столбца,​ остальные (те, что без атрибутов) используются просто для пропуска столбца. Пропущенные столбцы используют форматирование,​ определенное для всей группы. Далее, за пределами группы расположен еще один столбец со своими индивидуальными параметрами. ​
 +
 +Обратите внимание,​ что в ячейках таблицы уже не перечисляются ни атрибуты,​ ни стили. Таким образом,​ с использованием столбцов и групп столбцов код таблицы становится значительно нагляднее. ​
 +
 +  * Группы строк
 +В общем случае,​ строки таблицы можно логически разбить на три группы: ​
 +
 +строки,​ составляющие "​шапку"​ или строки заголовка таблицы, ​
 +строки итоговой части таблицы, ​
 +остальные строки,​ составляющие содержимое,​ тело таблицы ​
 +Для логического выделения этих групп строк используют элементы ​
 +
 +<​thead> ​
 +<​tfoot> ​
 +<​tbody> ​
 +соответственно для заголовка,​ итоговой части и тела. Причем,​ элемент <​tbody>​ может встречаться в таблице многократно. ​
 +
 +При использовании элементов <​thead>​ и <​tfoot>,​ их следует размещать перед первым из элементов <​tbody>​ в начале таблицы. Это позволит браузеру отобразить шапку и итоги до того, как будут загружены все данные ячеек таблицы. Относительно порядка отображения не стоит беспокоиться:​ браузеры размещают содержимое элемента <​thead>​ в начале таблицы,​ а содержимое элемента <​tfoot>​ в самом конце таблицы,​ уже после строк тела таблицы. ​
 +
 +Элементы <​thead>,​ <​tbody>​ и <​tfoot>​ поддерживают следующие специальные атрибуты: ​
 +  * align - горизонтальное выравнивание ячеек для группы строк
 +  * valign - вертикальное выравнивание. ​
 +Помимо специальных атрибутов,​ поддерживаются все общие атрибуты (id, style и пр.). Используя стиль можно назначить свойства форматирования всем ячейкам группы строк. Воспользуйтесь этой ссылкой для запуска примера,​ использующего объединение строк и столбцов вместе (код примера не приводится в разделе в силу его громоздкости). ​
 +
 +
 +====== Тег wbr перенос текста ======
 +**Тег <​wbr>​** указывает браузеру место, где допускается делать перенос строки в тексте,​ если этого требует ширина родительского элемента. При изменении ширины окна текст будет переноситься в тех местах,​ где указан тег <​wbr>​. Символ дефиса не добавляется,​ если требуется дефис используйте [[символьные подстановки]] - символ &​shy. ​
 +
 +==== Элементы физического форматирования ====
 +
 +<b> - элемент,​ выделяющий содержимое полужирным шрифтом. Специальные атрибуты отсутствуют.
 +<​file>​
 +<​p>​Иногда что-то необходимо <​b>​выделить</​b>​ из общего текста...</​p>​
 +</​file>​
 +<i> - элемент,​ выделяющий содержимое курсивом. Специальные атрибуты отсутствуют.
 +<​file>​
 +<​p>​Иногда что-то необходимо <​i>​выделить</​i>​ из общего текста...</​p>​
 +</​file>​
 +Для достижения комбинированного эффекта при форматировании (например - создания полужирного подчеркнутого курсива) можно вкладывать элементы друг в друга: ​
 +<​file>​
 +<​p>​Иногда что-то необходимо <​b><​i><​u>​выделить</​u></​i></​b>​ из общего текста...</​p>​
 +</​file>​
 +В примере выше слово "​выделить"​ будет выведено полужирным подчеркнутым курсивом. ​
 +
 +
 +==== Элементы логического форматирования ====
 +
 +  * <​abbr>,​ <​acronym>​ - элементы,​ идентифицирующие выделенный текст как аббревиатуру. Специальные атрибуты отсутствуют. Рекомендуется добавлять атрибут title для расшифровки значения аббревиатуры. Визуальный эффект форматирования по умолчанию отсутствует.
 +<​file>​
 +<​p><​acronym title="​World Wide Web Consortium">​W3C</​acronym>​ - международная ​
 +организация,​ занимающаяся стандартизацией языков разметки.</​p>​
 +</​file>​
 +  * <​address>​ - применяется для идентификации автора документа и указания адреса автора. Сюда же обычно помещаются и сведения об авторских правах,​ а также дата создания и последней модификации документа. Тег применяется обычно вначале или/и в конце документа. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.
 +<​file>​
 +<​p><​address>&​copy;​ Артемов ​ АН, 2004г. http://​alexart.od.ua</​address></​p>​
 +</​file>​
 +   * <​cite>​ - элемент,​ идентифицирующий выделенный текст как цитату или ссылку на другой содержащий ее ресурс. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.
 +<​file>​
 +<​p>​Как сказал Марк Твен, <​cite>"​Бросить курить достаточно легко. ​
 +Лично я проделывал это неоднократно..."</​cite></​p>​
 +</​file>​
 +  * code - элемент,​ идентифицирующий выделенный текст как фрагмент программного кода. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается моноширным шрифтом.
 +<​file>​
 +<​p><​code>​if (a*10 == b) printf ("​%d",​ a);</​code></​p>​
 +</​file>​
 +  * <dfn> - элемент,​ используемый для выделения первого появления некоторого термина в документе. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.
 +<​file>​
 +<​p><​dfn>​Абзац</​dfn>​ - это блок текста,​ отмеченный элементом "​р"​.</​p>​
 +</​file>​
 +  * <em> - emphasis (акцент). Используется для акцентирования внимания на некотором фрагменте текста. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается курсивом.
 +<​file>​
 +<​p><​em>​Абзац</​em>​ - это блок текста,​ отмеченный элементом "​р"​.</​p>​
 +</​file>​
 +  * <​strong>​ - используется для обозначения фрагмента текста усиленной важности. Специальные атрибуты отсутствуют. Выделенный текст по умолчанию отображается полужирным начертанием.
 +<​file>​
 +<​p><​strong>​Абзац</​strong>​ - это блок текста,​ отмеченный элементом "​р"​.</​p>​
 +</​file>​
 +
 +===== Тег span линейный,​ а div блочный =====
 +
 +Иногда появляется необходимость,​ выделить фрагмент,​ к примеру,​ только цветом,​ какой элемент использовать?​ Кому назначать стиль? Специально для таких ситуаций,​ существует элемент <​span>​. Это элемент - пустышка,​ обертка,​ которую можно сделать красивой,​ благодаря стилям. Span является линейным элементом,​ и не подходит для форматирования крупных текстовых блоков. Для этой цели необходимо использовать его блочный аналог - элемент div.
 +<code css>
 +<​span>​ style="​font-weight:​ bold; color: red;">​Красные жирные слова</​span>​
 +</​code>​
 +
 +
 +
 +
 +
 +