Создание статического содержания. HTML
2.1.4. Другие элементы языка HTML
В последних версиях HTML практически у каждого тега огромное число необязательных параметров – обычно не меньше 15. Приведем только основные параметры тегов [2,23].
Текстовые блоки
- <BR> – новая строка. Этот тег не закрывается (то есть не существует тега </BR> );
- <HR> – горизонтальная линия;
- <BLOCKQUOTE> … </BLOCKQUOTE> – цитата (обычно текст сдвигается вправо);
- <PRE> … </PRE> – режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе). Форматирование текста
- <EM> … </EM> – логическое ударение (обычно отображается курсивным шрифтом );
- <STRONG> … </STRONG> – усиленное логическое ударение (обычно отображается жирным шрифтом );
- <I> … </I> – выделение текста курсивом;
- <B> … </B> – выделение текста жирным шрифтом;
- <U> … </U> – подчеркивание текста;
- <S> … </S> – зачеркивание текста;
- <STRIKE> … </STRIKE> – то же самое, что <S> … </S> ;
- <BIG> … </BIG> – увеличение шрифта;
- <SMALL> … </SMALL> – уменьшение шрифта;
- <SUB> … </SUB> – подстрочный текст;
- <SUP> … </SUP> – надстрочный текст;
-
<FONT параметры> … </FONT> – задание параметров шрифта:
- COLOR=color – задание цвета (в шестнадцатеричной форме или названием);
- FACE=шрифт меняет шрифт;
- SIZE=размер меняет размер шрифта (от 1 до 7, стандартный по умолчанию 3);
- SIZE=+размер или SIZE=-размер – размер задается по сравнению со стандартным.
Объекты
- EMBED – вставка различных объектов: не- HTML документов и media-файлов;
- APPLET – вставка Java-апплетов.
Формы
Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.
- FORM – создание формы;
- INPUT – элемент ввода (может иметь разные функции – от ввода текста до отправки формы);
- TEXTAREA – текстовая область (многострочное поле для ввода текста);
- SELECT – список (обычно в виде выпадающего меню);
- OPTION – пункт списка.
2.1.5. XHTML
XHTML (Extensible Hypertext Markup Language, расширяемый язык разметки гипертекста) – язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML [23]. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является ее подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины ( W3C ) 31 мая 2001 года.
Стандарт XHTML построен не как самодостаточное описание языка, а как перечень различий между HTML 4.01 и XHTML [2]:
- Все элементы должны быть закрыты. Теги, которые не имеют закрывающего тега (например, <img> или <br> ) должны иметь на конце / (например, <br /> ).
- Булевы атрибуты записываются в развернутой форме. Например, следует писать <option selected="selected"> или <td nowrap="nowrap">.
- Имена тегов и атрибутов должны быть записаны строчными буквами (например, <img alt="" /> вместо <IMG ALT="" /> ).
- XHTML гораздо строже относится к ошибкам в коде; < и & везде, даже в URL, должны замещаться < и & соответственно. По рекомендации W3C браузеры, встретив ошибку в XHTML, должны сообщить о ней и не обрабатывать документ. Для HTML браузеры должны были попытаться понять, что хотел сказать автор.
- Кодировкой по умолчанию является UTF-8 (в отличие от HTML, где кодировкой по умолчанию является ISO 8859-1).
Для XHTML страниц рекомендуется задавать MIME-тип – application/xhtml+xml, но это не является обязательным, более того – браузер Internet Explorer 8 и младшие версии, не смогут обрабатывать страницу, поэтому с XHTML 1.0 традиционно используется MIME-тип для HTML – text/html.
- XHTML 1.0 Переходный (Transitional): предназначен для легкой миграции из HTML 3.2 и для тех, кто использует инлайн-фрэймы.
- XHTML 1.0 Строгий (Strict): полностью отделяет содержание документа от оформления (которое теперь задается только через CSS), многие атрибуты (такие как, например, bgcolor и align) более не поддерживаются, их поведение можно задавать только через таблицу стилей.
- XHTML 1.0 Фрэймовый (Frameset): используется, если необходимо разделить окно браузера на несколько фрэймов.
- XHTML 1.1 Модульный (Module-based): авторы могут импортировать дополнительные свойства в их разметку.
- XHTML Основной (Basic): специальная облегченная версия XHTML для устройств, которые не могут использовать полный набор элементов XHTML – в основном используется в миниатюрных устройствах, таких как мобильные телефоны. Подразумевается, что он заменит WML и C-HTML.
- XHTML мобильного профиля (Mobile Profile): основанный на XHTML Basic, добавляет специфические элементы для мобильных телефонов.
- XHTML 2.0. Пока в разработке. Синтаксис еще больше приближен к синтаксису XML. Также является модульным языком.
Валидным (т. е. отвечающим всем правилам) XHTML -документом считается документ, удовлетворяющий технической спецификации [24]. В идеале, все браузеры должны следовать веб-стандартам и, в соответствии с ними, валидные документы должны отображаться во всех браузерах на всех платформах. Валидация XHTML -документа рекомендована даже, несмотря на то, что она не гарантирует кросс-браузерности. Документ может быть проверен на соответствие спецификации с помощью онлайновой Службы валидации разметки W3C. Валидация обнаружит и разъяснит ошибки в XHTML -разметке.
Валидный документ должен содержать определение типа документа ( DTD ). DTD должен быть расположен до всех других элементов документа. Вот наиболее распространенные типы DTD для XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Самыми распространенными ошибками в XHTML -разметке являются:
- Незакрытые элементы ( XHTML, в отличие от HTML, требует закрытия всех элементов, в том числе не имеющих закрывающего тега, как, например, <br /> ).
- Отсутствие альтернативных текстов для изображений (достигающийся применением атрибута alt, который помогает сделать документы доступнее для устройств, которые не в состоянии отображать изображения, или предназначенных для слабовидящих людей).
- Присутствие текста непосредственно в теге <body> документа (должен быть объявлен блочный элемент, внутрь которого следует помещать содержимое).
- Вложение блочных элементов внутрь инлайновых (внутристрочных) (например, блочные элементы <div> или <p> не могут быть вложены внутрь инлайновых элементов <a>, <span>, <em> и так далее).
- Пренебрежение заключением значений атрибутов в кавычки ( <a href=http://www.ru/> вместо <a href="http://www.ru/"> ).
- Неправильное вложение элементов (конструкции вида <strong> <em> </strong> </em> ).
- Неправильное использование ссылок-мнемоник (например, & вместо & )
- Написание тегов и/или атрибутов прописными буквами ( <DIV STYLE="…"> вместо <div style="..."> ).
- Задание в теге <!DOCTYPE …> относительного пути к DTD -файлу, скопированного с сайта www.w3.org ( "DTD/xhtml11.dtd" вместо "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" ).
Валидный XHTML -документ можно снабжать специальным баннером W3C, подтверждающим валидность XHTML -разметки.
2.1.6. Ключевые термины
HTML, Веб-браузер, W3C, Теги, DTD, Заголовок документа, Метатеги, Теги <LINK>, <title>, <SCRIPT>, Тело документа, Теги <DIV>, <TABLE>, <H1>, <A>, <IMG>, <SPAN>, Маркированные списки, Параграфы, XHTML.
2.2. Краткие итоги
HTML – стандартный язык разметки документов во Всемирной паутине.
Текстовые документы, содержащие код на языке HTML (такие документы традиционно имеют расширение .html или .htm ), обрабатываются специальными приложениями, которые отображают документ в его форматированном виде, называемые "браузерами" или "интернет-обозревателями".
HTML – это теговый язык разметки документов. Чтобы браузер понимал, что имеет дело не с простым текстом, а с особым элементом, который задает его форматирование, применяются теги.
Теги бывают одиночными и парными (контейнеры).
Обычные веб-страницы состоят из двух разделов – заголовка ( <HEAD> ) и тела документа ( <BODY> ). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части.
DTD – язык описания структуры SGML-документа. DTD на HTML -странице задается с помощью <!DOCTYPE>, которые различаются в зависимости от версии HTML, на которую ориентированы.
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем.
Тег <TITLE> используется для отображения заголовка документа (строки текста) в левом верхнем углу окна браузера.
Тег <LINK> устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.
Тег <SCRIPT> предназначен для описания скриптов, может содержать ссылку на программу или ее текст на определенном языке.
Элемент <DIV> является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого.
Для добавления таблицы на веб-страницу используется тег -контейнер <TABLE>.
На строке 24 (а также 57) находится тег заголовка <H1> ( <H2> ).
Заголовки обозначаются тегами <H1>, <H2>,…, <H6>.
На строке 25 (а также в других местах) находится тег ссылки <A>.
Для создания ссылки используется тег <A>, сообщающий браузеру, что текст, заключенный в него, является ссылкой, а также указывающий адрес документа, на который следует сделать ссылку.
Для установки маркированного списка используются теги <UL> и <LI>.
Блоки текста разделяют между собой абзацами ( параграфами ) с помощью тега <p>.
Для встраивания изображения в документ используется тег <IMG>.
Тег <SPAN> предназначен для определения встроенных элементов документа.
XHTML – язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML.