Реклама
Основные элементы HTML
Текстовые блоки
<BR>— новая строка. Этот тег не закрывается (то есть не существует тега</BR>)<HR>— горизонтальная линия<PRE> … </PRE>— режим preview. В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе)
Форматирование текста
- <U> … </U> — подчёркивание текста
- <S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста
- <BIG> … </BIG> — увеличение шрифта
- <SMALL> … </SMALL> — уменьшение шрифта
- <BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript
- <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст
- <SUB> … </SUB> — подстрочный текст
- <SUP> … </SUP> — надстрочный текст
- <FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:
COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием
FACE=шрифт задание гарнитуры шрифта
SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер
SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного
Списки
У этих тегов есть параметры: type = «тип», где тип — форма: в <UL> — символов
- square — квадрат
- round — окружность
- disk — круг: по умолчанию
- а в <OL> — цифр или букв
- A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами
- I или i — римские цифры: соответственно заглавными или строчными буквами
- 1 — арабские цифры: по умолчанию
пишется так:
<ol type="i">
<li> Первое </li>
<li> Второе </li>
<li> И т.д. </li>
</ol>
Параметр start = «начало» (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26. Пишется так:
<ol start="24">
<li> Двадцать четыре </li>
<li> Двадцать пять </li>
<li> И т.д. </li>
и, наконец для тега <LI> параметр value = «следующий» — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23
<ol>
<li> Один </li>
<li> Два </li>
<li value="22"> Двадцать два </li>
<li> Двадцать три </li>
Наконец, третьим, и последним, списком является список определений:
<DL>
<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>
<DT> Кот </DT> <DD> муж кошки </DD>
<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>
</DL>
Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.
Объекты
- EMBED — вставка различных объектов: не-HTML документов и media-файлов
- APPLET — вставка Java-апплетов
- SCRIPT — вставка скриптов
Изображения
IMG — вставка изображения. Этот тег не закрывается.
- SRC — имя или URL
- ALT — альтернативное имя (отобразится, если в браузере запретить отображать картинки)
- TITLE — краткое описание изображения (отобразится при наведении курсора на картинку)
- WIDTH, HEIGHT — размеры (если не совпадают с истинными размерами картинки, то изображение «растянется» или «сожмется»)
- ALIGN — задает параметры обтекания текстом (top, middle, bottom, left, right)
- VSPACE, HSPACE — задают размеры вертикального и горизонтального пространства вокруг изображения
Пример:
<IMG SRC="url" ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой:
<A HREF="url" ><IMG SRC=url></A>
Карта изображений
<MAP>…</MAP> — создание карты изображений позволяющей хранить в одном изображении несколько ссылок.
Пример:
<IMG width="500" height="200" usemap="#somemap" src="url">
<MAP name="somemap">
<AREA shape="rect" coords="6, 7, 140, 196" href="url1">
<AREA shape="circle" coords="239, 98, 92" href="url2">
<AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">
</MAP>
Таблицы
TABLE — создание таблицы. Параметры тега:
- ALIGN=LEFT Определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения аттрибута: LEFT (слева), CENTER (по центру страницы) и RIGHT (справа)
- BORDER — толщина разделительных линий в таблице. BORDER=»n» устанавливает толщину рамки. По умолчанию n=0 — таблица рисуется без рамки
- CELLSPACING — расстояние между клетками CELLSPACING=»n» Определяет расстояние между рамками ячеек таблицы в пикселях
- CELLPADDING – этот параметр указывает на отступ от содержимого в ячейке до рамки таблицы html. CELLPADDING=»n» Определяет расстояние в пикселях между рамкой ячейки и текстом
- CAPTION — заголовок таблицы (этот тег необязателен) Таблица может включать заголовок, который распологается между тегами
. Он должен быть непосредственно после тега <TITLE>. К заголовку возможно применение аттрибута ALIGN, определяющего его положение относительно таблицы: TOP — значение по умолчанию, заголовок над таблицей по центру. LEFT — заголовок над таблицей слева. RIGHT — заголовок над таблицей справа. BOTTOM — заголовок под таблицей по центру - TR — строка таблицы
- TH — заголовок столбца таблицы (этот тег необязателен)
- TD — ячейка таблицы
- height — высота таблицы
- width — ширина таблицы
- Background — фоновый рисунок для html таблицы. BACKGROUND=»image.gif» Заполняет фон таблицы изображением
- Bgcolor – задаётся в виде прямого имени или 16-ричного значения. Определяет цвет фона таблицы html. BGCOLOR=»#FFFFFF» устанавливает цвет фона для всей таблицы, где #FFFFFF — шестнадцатиричное число
- Bordercolor – задаёт цвет рамки. BORDERCOLOR=»#FFFFFF» Устанавливает цвет окантовки, где #FFFFFF (белый) — шестнадцатиричное значение цвета
- Cols – задаёт число столбцов в таблице html
- Frame – указывает в каком стиле оформить границы вокруг html таблицы. FRAME=»значение» Управляет внешней окантовкой таблицы, может принимать следующие значения: VOID — окантовки нет (значение по умолчанию). ABOVE — только граница сверху. BELOW — только граница снизу. HSIDES — границы сверху и снизу. VSIDES — только границы слева и справа. LHS — только левая граница. RHS — только правая граница. BOX — рисуются все четыре стороны. BORDER — также все четыре стороны.
- Rules — указывает в каком стиле оформить границы между ячейками таблицы
- Summary – сюда заносится описание таблицы (может использоваться поисковыми роботами)
- COLSPAN=»n» Растягивание ячейки по горизонтали. Например,
означает, что ячейка будет растянута на 2 колонки - ROWSPAN=»n» Растягивание ячейки по строке. Например,
У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на:
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">
Так, например,
<TABLE BORDER="1" CELLSPACING="0">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD>
<TD> 214 </TD>
</TR>
<TR>
<TD> 1998 </TD>
<TD> 216 </TD>
</TR>
<TR>
<TD> 1999 </TD>
<TD> 207 </TD>
</TR>
</TABLE>Другой пример:
lt;table align="left;" border="1" cellpadding="2"
cellspacing="2" height="100%" width="100%">
<tr align="center">
<td colspan="3" height="100"
width="100%">ШАПКА</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область главного меню</td>
</tr>
<tr>
<td height="167" width="140">Левое меню</td>
<td height="167" width="691">Область контента</td>
<td height="167" width="140">Правое меню</td>
</tr>
<tr>
<td colspan="3" height="14"
width="100%">Область пользователя</td>
</tr>
<tr align="center"> <td colspan="3" height="100"
width="100%">ПОДВАЛ</td>
</tr>
</table>Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).
Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.
Например, если заменить первые строки таблицы на:
<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">
<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>
<TH> Год </TH>
<TH> Улов </TH>
<TR>
<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.
Формы
Основные теги
- FORM — создание формы
- INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)
- TEXTAREA — текстовая область (многострочное поле для ввода текста)
- SELECT — список (обычно в виде выпадающего меню)
- OPTION — пункт списка
Простая форма для ввода данных о новом пользователе:
<form action="http://example.com/app/profile.php" method="post">
<p>
<label for="username">
Имя:
</label>
<input type="text" name="username" />
<br />
<label for="nick">
Ник:
</label>
<input type="text" name="nick" />
<br />
<label for="email">
Адрес эл. почты:
</label>
<input type="text" name="email" />
<br />
<label for="sex">
Пол:
</label>
<input type="radio" name="sex" value="male" />
мужской
<br />
<input type="radio" name="sex" value="female" />
женский
<br />
<input type="radio" name="sex" value="secret" />
не хочу отвечать
<input type="submit" value="Отправить">
<input type="reset" value="Очистить">
</p>
</form>В HTML определены следующие элементы управления:
- кнопка: элемент <input> типов submit (отправка формы), image (картинка-кнопка), reset (очистка формы, приведение формы в начальное состояние), button (кнопка), а также элемент <button> (отправка формы);
- чекбокс (флажок): тип checkbox;
- радиокнопка: тип radio;
- меню: элемент <select> с элементами <optgroup> и <option> внутри;
- строка текста: тип text, а также элемент <textarea> (многострочное текстовое поле);
- пароль: тип password;
- скрытое поле: тип hidden;
- файл: тип file.
Форма задаётся с помощью элемента
- ROWSPAN=»n» Растягивание ячейки по строке. Например,