|
Web-мастеру |
Как заработать в сети? |
Спонсоры |
|
ОСНОВНЫЕ ТЕГИ ЯЗЫКА HTML
Тэги задания структуры документов
<html></html>Указывает браузеру, что это HTML документ.
<head></head>Определяет место, где помещается различная информация не отображаемая в теле документа. Здесь же располагается тег названия документа и теги для поисковых машин.
<body></body>Определяет видимую часть документа.
атрибуты:
- bgcolor Определяет цвет фона для тела документа.
- text Определяет цвет, используемый при выводе на экран текста из данного документа. Обычно используется, когда Вы меняете фоновый цвет с помощью атрибутов BGCOLOR или BACKGROUND.
- link Определяет цвет, который будет использоваться при выводе на экран текста из еще не выбранных вами гипертекстовых связей.
- vlink Определяет цвет, который будет использоваться при выводе на экран текста из уже проверенных вами гипертекстовых связей.
- alink Задает цвет, которым будут выделяться в тексте гипертекстовые связки в тот момент, когда пользователь щелкает по ним клавишей мыши.
- background Определяет адрес URL, откуда будет браться изображение для подготовки фона к текущему документу.
<title></title> Помещает название документа в оглавление браузера.
<! --> … --> или<comment >…</comment> комментарии
ПРИМЕР HTML-документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Draft//EN"> (обязательный элемент, описывающий версию HTML)
<HTML>
<HEAD>
<TITLE>Название странички</TITLE>
... другие элементы заголовка
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META NAME="Description" content="ключевые слова через запятую">
<META NAME="Keywords" content=" ключевые слова через запятую ">
<LINK href="внешний файл таблицы стилей" rel=stylesheet type=text/css>
<script lanquage="JavaScript" src="файл со скриптами JavaScript">
</script>
</HEAD>
<BODY bgcolor=white text=black link=red vlink=maroon alink=fuschia>
... тело документа
</BODY>
</HTML>
Теги для форматирования текста
<pre></pre> Обрамляет предварительно отформатированный текст.
<h1></h1> Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6> Создает самый маленький заголовок
<b></b> Создает жирный текст
<i></i> Создает наклонный текст
<tt></tt> Создает текст - имитирующий стиль печатной машинки.
<cite></cite> Используется для цитат, обычно наклонный текст.
<em></em> Используется для выделения из текста слова (наклонный или жирный текст)
<strong></strong> Используется для выделения наиболее важных частей текста (наклонный или жирный текст)
<code></code> Примеры исходного текста программ (отображаются моноширинным шрифтом Courier)
<kbd></kbd> Пример ввода текста с клавиатуры (отображается моноширинным шрифтом Courier)
<var></var> Переменная
<dfn></dfn> Определение термина
<big></big> Увеличение шрифта
<small></small> Уменьшение шрифта
<sub></sub> Подстрочный индекс
<sup></sup> Надстрочный индекс
<strike></strike> Перечеркнутый текст
<font size=?></font> Устанавливает размер текста в пределах от 1 до 7. (3 по умолчанию). Можно задать размер шрифта относительно текущего значения (напр. +2, -1)
<font color=?></font> Устанавливает цвет текста, используя значение цвета в виде RRGGBB.
<font face=?></font> Задает имя шрифта. Можно задавать несколько шрифтов, в этом случае используется первый найденный шрифт.
Гиперссылки
<a href="URL">текст</a> Создает гиперссылку на другие документы или часть текущего документа.
- target Имя фрейма, в котором должен быть отображен документ.
<a href="mailto:EMAIL">текст</a> Создает гиперссылку вызова почтовой программы для написания письма автору документа.
<a name="NAME"></a> Отмечает часть текста как цель для гиперссылок в документе.
<a href="#NAME"></a> Создает гиперссылку на часть текущего документа.
Форматирование
<p>...</p> Создает новый параграф
<p align=?> Выравнивает параграф относительно одной из сторон документа, значения: left, right, center, justify
<br> Вставляет перевод строки.
<nobr></nobr> Не разрешает автоматический перенос текста.
<wbr> Переносит текст в данной точке при необходимости.
<blockquote>
</blockquote> Создает отступы с обеих сторон текста.
<hr> Горизонтальная линия.
атрибуты:
- size Толщина линии в пикселях.
- width Ширина линии в пикселях или процентах по отношению к ширине документа.
- align Выравнивание линии (left, right, center).
- noshade Линия без тени.
- color Цвет линии.
Списки
Неупорядоченный список
<ul>
<ul>
- < li type =disc> ... первый пункт списка (стиль разметки - диск)
- < li type=circle> ... второй пункт списка (стиль разметки - круг)
- < li type=square> ... третий пункт списка (стиль разметки - квадрат)
</ul>
Нумерованный список
<ol>
атрибуты:
- type Тип нумерации списка (A,a,I,i и 1).
- start Начальное значение для нумерации списка.
<ol>
- < li type ="A" value="5"> ... первый пункт списка (стиль нумерации - большие латинские буквы, 5-й элемент списка)
- < li type="a"> ... второй пункт списка (стиль нумерации - маленькие латинские буквы)
- < li type="1"> ... второй пункт списка (стиль нумерации-числа)
</ol>
Список определений <dl>
compact Компактный вид списка
<dl>
<dt> ... первый термин <dd> ... определение первого термина
<dt> ... второй термин <dd> ... определение второго термина
</dl>
Изображение, звук, мультимедиа
<img src="url">Добавляет изображение в HTML документатрибуты:
- src="url"
Указатель на файл с изображением
- Alt="text"
Текст, отображаемый вместо изображения
- align=(top, left, right, bottom, middle)
Позиция изображения относительно строки текста, в которую оно помещено
- width, height
Ширина и высота изображения в пикселах
- border
Ширина рамки вокруг изображения-активной ссылки (0-нет рамки)
- hspace
Ширина чистых полей в пикселах слева и справа изображения
- vspace
Ширина чистых полей в пикселах сверху и снизу изображения
- usemap
Имя навигационной карты
- ismap
Передает координаты точки изображения
- lowsrc="url"
URL изображения, загружаемого первым (обычно указывается изображение меньших размеров)
<bgsound src="url" loop="x"> Проигрывает звуковой файл с числом повторов-x
<object> Вставка изображения, видеоклипа, апплета Java, эл-та ActiveX.
<embedded> Встраивание плагина.
<noembedded></noembedded> Альтернативный текст или изображение, отображаемое если плагин отсутствует.
<map></map> Описание навигационной карты, гиперссылка на которую делается с помощью <img usemap="url"> Включает в себя одну или несколько областей <area>
<area> Определяет чувствительную область для навигационной карты
Таблицы
<table></table> Создает таблицу.атрибуты:
- border Задает толщину рамки таблицы в пикселях.
- bordercolor Цвет рамки.
- cellspacing Задает расстояние между ячейками таблицы.
- bgcolor Цвет фона таблицы.
- cellpadding Задает расстояние между содержимым ячейки и ее рамкой.
- width Устанавливает ширину таблицы в пикселах или процентах от ширины документа.
<tr></tr> Определяет строку в таблице.атрибуты:
- align Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
- valign Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
<td></td> Определяет отдельную ячейку в таблице.атрибуты:
- align Устанавливает выравнивание ячеек в таблице, принимает значения: left, center, или right.
- valign Устанавливает вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.
- colspan Указывает кол-во столбцев которое объединено в одной ячейке. (по умолчанию=1)
- rowspan Указывает кол-во строк которое объединено в одной ячейке. (по умолчанию=1)
- nowrap Не позволяет программе просмотра делать перевод строки в ячейке таблицы.
<th></th> Определяет заголовок таблицы (нормальная ячейка с отцентрованным жирным текстом)
Фреймы
<frameset></frameset> Предваряет тег <body> в документе, содержащем фреймы;атрибуты:
- rows="value,value" Определяет строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном соотношении к высоте таблицы кадров.
- cols="value,value" Определяет столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймов.
<frame> Определяет единичный фрейм или область в таблице фреймов.атрибуты:
- src="URL" Определяет какой из HTML документов будет показан во фрейме.
- name="name" Указывает имя фрейма или области, что позволяет перенаправлять информацию в этот фрейм или область из других фреймов.
- marginwidth Определяет величину отступов по левому и правому краям фрейма; должно быть => 1.
- marginheight Определяет величину отступов по верхнему и нижнему краям кадра; должно => 1.
- scrolling Включение-выключение скроллинга во фрейме; значение (yes, no, или auto) Значение по умолчанию для обычных документов - auto.
- noresize Препятствует изменению размеров фрейма.
<noframes></noframes> Определяет, что будет показано в окне браузера если он не поддерживает фреймы.
Формы
Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML создает только внешний интерфейс формы.
<form></form> Создает формы (input, select and textarea) атрибуты:
- action="url" Адрес, который используется для отправления формы по эл.почте, либо для запуска на сервере.
- method Если action задает URL сервера, то определяет какой из HTTP методов будет использоваться для пересылки этому серверу содержимого формы (get, post). По умолчанию get.
- enctype Механизм кодирования содержимого формы (по умолчанию application/x-www-form- urlencoded)
<input type> Создает текстовое поле, радиокнопку, кнопку, checkbox.атрибуты:
- type=text (по умолчанию) Текстовое поле <input type=text size=40 name=user value="ваше имя">
- type=checkbox Checkbox <input type=checkbox checked name=uscitizen value=yes>
- type=radio Радиокнопка <input type=radio name=age value="0-12" checked>
- type=submit Кнопка для передачи данных <input type=submit value="Принадлежность к ...">
- type=image Графическая кнопка для передачи данных <input type=image name=point src="map.gif">
- type=reset Кнопка сброса формы <input type=reset value="Инициирует пере...">
- type=file Кнопка выбора файла <input type=file name=photo size=20 accept="image/*">
- type=hidden Скрытое поле <input type=hidden name=customerid value="22233322">
<select ></select> Создает поле со списком и список.атрибуты:
- size Количество пунктов меню, которые будут видны на экране, остальные будут доступны при прокрутке
- multiple Разрешает выбор нескольких пунктов меню
поле со списком
<SELECT NAME="вкус">
<OPTION VALUE=a> Ваниль
<OPTION VALUE=b> Клубника
</SELECT>
список
<SELECT NAME="вкус" size=2>
<OPTION VALUE=a> Ваниль
<OPTION VALUE=b> Клубника
</SELECT>
<textarea></textarea> Создает элемент textarea
<TEXTAREA NAME=address ROWS=4 COLS=40> Ваш адрес ... </TEXTAREA>
Специальные символы
|
|
пробел |
" |
" |
кавычка |
¬ |
¬ |
|
« |
« |
|
» |
» |
|
© |
© |
|
® |
® |
|
& |
& |
амперсанд |
< |
< |
|
> |
> |
|
¶ |
¶ |
|
· |
· |
|
° |
° |
|
± |
± |
|
¦ |
¦ |
|
|