Советы вебмастеру
Главная | Сайтостроение | Хостинг | Программы | Заработок вебмастеру | Продвижение сайта
 
  ПОЛЕЗНОЕ

• Хартия оптимизаторов

•Справочник HTML

• META-тэги

• Таблицы стилей

• Электронные деньги

 

Справочник HTML

ОСНОВНЫЕ ТЕГИ ЯЗЫКА 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>

  1. < li type ="A" value="5"> ... первый пункт списка (стиль нумерации - большие латинские буквы, 5-й элемент списка)
  2. < li type="a"> ... второй пункт списка (стиль нумерации - маленькие латинские буквы)
  3. < 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>

    Специальные символы HTML

    &nbsp;   пробел
    &quot; " кавычка
    &not; ¬
    &laquo; «
    &raquo; »
    &copy; ©
    &reg; ®
    &amp; & амперсанд
    &lt; <
    &gt; >
    &para;
    &middot; ·
    &deg; °
    &plusmn; ±
    &brvbar; ¦

    Справочная информация по разработке сайтов

    Практика разработки сайтов
      ОБЪЯВЛЕНИЯ
    Copyright 2006. Советы вебмастеру. All Right Reserved.