Основы разработки web-страниц

«XHTML-шпаргалка»

Статья из библиотеки сайта Макинтош и образование

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

Общая структура

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...	Указание типа документа. В зависимости от используемой версии разметки может быть: <!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 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> и др.
<html>		HTML-документ
<head>	Головная часть
</head>
<body>	Тело документа
</body>
</html>

Теги головной части

<title>...</title>	Заголовок страницы (текст, который будет показан в заголовке окна браузера).
<meta http-equiv="Content-Type" content="text/html; windows-1251" />	Мета-тег. В данном случае указывает тип и кодировку документа
<meta http-equiv="Refresh" content="время; URL=url" />	Мета-тег. Указывает, что страница должна быть обновлена через заданное (в секундах) время. Если указан URL, произойдет переход на соответствующую страницу
<link rel="stylesheet" href="url" type="text/css" />	Подключение внешней таблицы стилей
<style type="text/css"> ... </style>	Встроенная таблица стилей

Внедрение сценариев JavaScript

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

<script src="url" type="text/javascript"> </script>	Подключение внешнего файла сценариев JavaScript
<script type="text/javascript"> ... </script>	Сценарий JavaScript

Структурные элементы

<h1>...</h1> ... <h6>...</h6>	Заголовки (1 — Самый крупный, 6 — Самый мелкий)
<p>...</p>	Абзац
<div>...</div>	Раздел. Наиболее крупное подразделение страницы
Другие блочные элементы
<address>...</address>	Контактная информация
<blockquote>...</blockquote>	Блок-цитата. По умолчанию выводится с отступом слева
<pre>...</pre>	Предварительно форматированный текст. Выводится моноширинным шрифтом с сохранением всех пробелов, переводов строк и т. п.
<hr />	Горизонтальная линейка

Списки

<ol>...</ol>	Упорядоченный (нумерованный) список
<ul>...</ul>	Неупорядоченный список (с метками)
<li>...</li>	Элемент списка. Должен находиться в контейнере <ol>...</ol> или <ul>...</ul>
<dl>...</dl>	Список определений (словарь)
<dt>...</dt>	Термин. Должен находиться внутри контейнера <dl>...</dl>
<dd>...</dd>	Определение. Должен находиться внутри контейнера <dl>...</dl>

Таблицы

<table>...</table>	Таблица. Полезные атрибуты: width="размер" — ширина (в пикселах или процентах) border="размер" — толщина рамки (в пикселах) cellspacing="размер" — расстояние между ячейками (в пикселах) cellpadding="размер" — расстояние между границей ячейки и ее содержимым (в пикселах)
<tr>...</tr>	Строка таблицы
<td>...</td> <th>...</th>	Ячейка таблицы Заголовочная ячейка таблицы Особые атрибуты: colspan="число" — растянуть на заданное число столбцов rowspan="число" — растянуть на заданное число строк
<thead>...</thead> <tbody>...</tbody> <tfoot>...</tfoot>	Группы строк таблицы. Таблица может содержать не более чем по 1 блоку thead и tfoot
<colgroup span="число">...</colgroup>	Оформление группы столбцов. Не содержит ничего, либо включает последовательность тегов <col />
<col />	Оформление столбца
Полезные атрибуты тегов <tr>, <td>, <th>, <colgroup> и <col />: width="размер" — ширина (в пикселах или процентах) align="выравнивание" — по горизонтали (left, right, center...) valign="выравнивание" — по вертикали (top, middle, bottom...)
<caption>...</caption>	Название таблицы (выводится либо над, либо под таблицей). Должен быть указан сразу после открывающего тега <table>

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

<em>...</em>	Выделенный (по умолчанию, курсивом) текст
<strong>...</strong>	Особо выделенный (по умолчанию, полужирным) текст
<sub>...</sub>	Подстрочный (нижний) индекс
<sup>...</sup>	Надстрочный (верхний) индекс
<span>...</span>	Универсальный тег для форматирования с использованием стилей
<br />	Разрыв строки (без начала нового абзаца)
Редко употребляемые теги
<abbr title="расшифровка">...</abbr> <acronym title="расшифровка">...</acronym>	Аббревиатура Акроним
<dfn>...</dfn>	Определение термина
<cite>...</cite>	Цитата (внутри абзаца)
<q>...</q>	Цитата (при выводе заключается в кавычки). Не распознается Internet Explorer
<code>...</code>	Текст программы
<kbd>...</kbd>	Текст, вводимый с клавиатуры
<samp>...</samp>	Пример выводимых программой данных
<var>...</var>	Переменная
Теги, которые можно заменить использованием CSS
<b>...</b>	Полужирный шрифт
<i>...</i>	Курсивный шрифт
<tt>...</tt>	«Телетайп» — моноширинный шрифт
<big>..</big>	Увеличенный кегль шрифта
<small>...</small>	Уменьшенный кегль шрифта

Гиперссылки

<a href="url">...</a>	Гиперссылка. Полезный атрибут: target="имя" — где открыть ссылку (_blank, _self, _parent, _top или имя целевого фрейма)
<a name="метка"></a> <a id="метка"></a>	«Закладка». В HTML используется атрибут «name», в XHTML этот атрибут считается устаревшим. Роль «закладки» может играть любой тег с атрибутом «id»

Графика и другие объекты

Включение изображения. Текст атрибута «alt» используется, если невозможно показать изображение. Рекомендуемые атрибуты:

height="высота"
width="ширина"

Полезные атрибуты:

hspace="размер" — отступы слева и справа
vspace="размер" — отступы сверху и снизу

Включение специального объекта. Атрибут «classid» используется для апплетов Java и подобных им объектов, «data» — для звука, видео и т. п.
Содержимое контейнера object выводится только в том случае, если невозможно отобразить объект.
Можно использовать атрибуты height, width, hspace, vspace (см. тег «img»)

Параметры объекта. Должен быть вложен в <object>

Формы

<form action="url" method="метод">...</form>	Контейнер формы ввода. Атрибут «acton» обычно указывает url сценария-обработчика формы. Чаще всего используют методы отправки post или get
<fieldset>...</fieldset>	Группа элементов формы
<input type="тип" id="имя" value="значение" />	Элемент управления. Возможные типы: text — строка ввода текста password — строка ввода пароля (введенный текст скрывается) checkbox — «флажок» radio — «переключатель» file — элемент выбора локального файла hidden — скрытый элемент image — кнопка-изображение button — кнопка с текстом submit — кнопка «Отправить» reset — кнопка «Очистить»
<button type="тип" id="имя">...</button>	Кнопка с произвольным содержимым. Возможные типы: button — кнопка с любым значением submit — кнопка «Отправить» reset — кнопка «Очистить»
<select>...</select>	Список выбора. Полезные атрибуты: size="число" — сколько строк показано одновременно; если атрибут не указан, создается выпадающий список multiple="multiple" — возможен множественный выбор
<optgroup label="строка">...</optgroup>	Группа элементов списка выбора
<option>...</option>	Элемент списка выбора. Полезные атрибуты: value="значение" (если отличается от содержимого контейнера) selected="selected" — выбран по умолчанию
<textarea cols="число" rows="число">...</textarea>	Поле ввода текста. Полезный атрибут: readonly="readonly" — запрет изменений

Фреймы

<frameset rows="размер, размер">...</frameset>	Набор горизонтальных фреймов
<frameset cols="размер, размер">...</frameset>	Набор вертикальных фреймов
Размер может быть указан в пикселах, процентах или «звездочках» Например: rows="50, 60%, 2, " (Число фреймов в наборе может быть больше 2)
<frame src="url" name="имя" />	фрейм, его имя и первоначально отображаемый файл Атрибуты: frameborder="0 или 1" — будет ли рамка marginheight="размер" — поля сверху и снизу marginwidth="размер" — поля справа и слева noresize="noresize" — запрет изменения размера scrolling="yes/no/auto" — будет ли линейка прокрутки
<noframes>...</noframes>	То, что будет отображаться в браузерах, не поддерживающих фреймы
<iframe src="url" width="размер" height="размер">...</iframe>	«Плавающий» фрейм. Атрибуты аналогичны тегу «frame». Содержимое контейнера будет показано браузерами, не поддерживающими iframe

Общие атрибуты

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

id="имя"	Идентификатор элемента. Уникальное в пределах документа имя элемента. Используется для назначения стилей, управления сценариями, а также в качестве «закладки» для гиперссылок
class="имя"	Класс элемента
style="стиль"	Описание стиля элемента
title="текст"	Заголовок элемента. В большинстве браузеров отображается в виде всплывающей подсказки
onmouseup="сценарий", onmouseover="сценарий", onmouseout="сценарий", onclick="сценарий" и др.	Вызов обработчика события
onblur="сценарий", onfocus="сценарий", onchange="сценарий", onselect="сценарий", onreset="сценарий", onsubmit="сценарий" и др.	Вызов обработчика события (только в формах и их элементах)

Как избежать ошибок

Чтобы не возникало проблем после загрузки готовых страниц на сервер,

записывайте имена файлов и каталогов только строчными английскими буквами, можно использовать также цифры, знаки «-» и «_»; не используйте какие-либо другие символы и пробелы;
проверьте, чтобы все внутренние ссылки были относительными (особенно, если готовите страницы на Windows-компьютере — убедитесь, что ссылки не содержат «C:» или что-то подобное «file:///C|/»), а также, чтобы в записи путей использовались прямые («/»), а не обратные («\») слэши.

Для проверки правильности разметки полезно использовать «валидаторы», например, validator.w3.org.

Макинтош и образование