Как сделать сайт: основные HTML-теги

Основные HTML - теги

Идентификация:
<html> и </html> - Указывают браузеру, что это HTML документ. Открывающий и закрывающий тэги, соответственно обязаны стоять в начале и конце документа. Все остальные тэги должны располагаться между ними.

Головная часть :
<head> и </head> - Головная секция документа. (Не путать с тэгами <title> и </title>). Между этими тэгами располагаются специальные МЕТА-тэги для браузера и для поисковых машин. В основном здесь располагается не отображаемая (невидимая для пользователя) информация.

Заголовок:
<title> и </title> - Заголовок документа. Эти тэги обязаны располагаться между тегами <head> и </head>. Строка, стоящая между и будет помещена в заголовок окна, внутри которого выводится этот документ.

Тело документа: <body> и </body> - В этой секции (между этими тэгами) располагается видимая информация. Также с помощью этого тэга можно управлять цветом фона, текста и ссылок. Полностью этот тэг записывается так: <body bgcolor=#RRGGBB text=#RRGGBB link=#RRGGBB alink=#RRGGBB vlink=#RRGGBB> Любой из этих атрибутов может быть пропущен. Но желательно указывать атрибуты текста и фона, т.к. в разных программах для просмотра HTML-документов используются разные цвета, установленные по умолчанию. Цвет задается в шестнадцатеричном формате RGB. Т.е. указываются доли красного, зеленого и синего цвета соответственно. Пример: text=#FF0000 - означает ярко красный цвет текста. Значение атрибутов тэга body: bgcolor - Цвет фона документа. text - Цвет шрифта. Его можно переопределить тэгами font. link - Цвет гиперссылки на которой вы еще не были. vlink - Цвет гиперссылки на которой вы уже были. alink - Цвет гиперссылки при нажатии.

Параметры текста. Основные параметры: <text> и </text> - Эти тэги позволяют управлять цветом и размером шрифта. Полная запись этого тэга выглядит так: <text size=? color=#RRGGBB> Любой из этих параметров может быть пропущен. Значение атрибутов тэга text: size - Размер шрифта, от 1 до 7. color - Цвет шрифта. Задается в формате RGB. Например: color=#00FF00 - ярко зеленый цвет текста. Жирность: Для того чтобы вывести строку полужирным шрифтом, следует заключить этот текст между тэгами <b< и </b>. Вообще это сокращенно bold. Наклон: Для того чтобы вывести строку наклонным шрифтом, следует заключить этот текст между тэгами <i> и </i>. Вообще это сокращенно italic.

Подчеркивание:Для того чтобы вывести строку подчеркнутым шрифтом, следует заключить этот текст между тэгами <u> и </u>.

Зачеркивание:
Для того чтобы вывести строку зачеркнутым шрифтом, следует заключить этот текст между тэгами <s> и </s>.

Печатная машинка: Для того чтобы вывести строку, имитирующую шрифт печатной машинки, следует заключить этот текст между тэгами <tt> и </tt>.

Заголовки:Создание заголовков. Для того чтобы сделать строку заголовок, следует обрамить эту строку тэгами <h1> и </h1> - это самый большой заголовок. Заголовок чуть поменьше можно сделать тэгами <h2> и </h2>, а совсем маленький заголовок делается тэгами <h6> и </h6>.

Форматирование текста.

Заранее форматированный текст: Если текст документа уже был отформатирован, например, вы хотите перенести часть текстовых документов в формат HTML, то можно воспользоваться тэгами <pre> и </pre>. При использовании этих тэгов текст документа выводится как есть.

Параграф:<p align=?> и </p> - Эти тэги обрамляют часть текста который следует отформатировать. Параметр align необязателен, но с его помощью можно указать метод форматирования.

Значение атрибута align:

left - Отформатировать по левому краю.
right - Отформатировать по правому краю.
center - Отформатировать по центру.
JUSTIFY - Растянуть текст по ширине.

Перевод строки: Для того чтобы перевести строку следует в месте перевода поместить тэг <br>.

Левый отступ:
Для того, чтобы сделать отступ с левой стороны от текста, следует обрамить этот текст тэгами <dir> и </dir>.

<p>Отступы: Для того, чтобы сделать отступы с левой и правой стороны от текста, следует обрамить этот текст тэгами <blockquote> и </blockquote>.

Список: <ul> и </ul> - Эти тэги обрамляют текст списка. Для того, чтобы начать очередной фрагмент списка, следует указать тэг <li>. Тэг <li> помещает в начале каждого фрагмента списка либо кружек, либо квадратик. Пронумерованный список: <ol> и </ol> - Эти тэги обрамляют текст списка. Для того, чтобы начать очередной фрагмент списка, следует указать тэг <li>. Тэг <li> помещает в начале каждого фрагмента списка порядковый номер фрагмента.

Ссылка на страницу: Для создания ссылки вызова другой страницы используются тэги <a href="URL"> и </a>, строка стоящая между этими тэгами становится ссылкой на документ указанный вместо URL.

Ссылка внутри страницы:Вообще создавать такую ссылку крайне нежелательно, т.к. она может не сработать и при открытии такой ссылки документ заново скачивается с сервера. Тэги <a href="#URLNAME"> и </a> обрамляют слово, которое будет являться ссылкой на текст, который в свою очередь обрамляется тэгами <a name="URLNAME"> и </a>.

Почтовая ссылка :
Ссылка на почтовый адрес делается тэгами <a href="mailto:EMAIL"> и </a>, желательно, чтобы строка ссылки напоминала, что это ссылка на E-Mail. При нажатии на эту ссылку загружается почтовая программа в качестве параметра которой передается EMAIL. Некоторые броузеры не позволяют работать с такими ссылками.

Картинки:Для того чтобы вставить в документ картинку используется тэг <img src="name"> у этого тэга нет завершающей части, обязательный параметр src указывает адрес картинки. Полный формат записи : <img src="name" border=? width=? alt=? height=?>. Все атрибуты кроме src являются необязательными и их можно не указывать. Значение атрибутов тэга img: src - адрес изображения. border - размер рамки вокруг картинки. width - ширина картинки. height - высота картинки.

Контейнер таблицы:

<table> </table> - таблица может использоваться по прямому назначению (т.е.просто для представления информации в табличном виде) либо как «скелет» документа, который помогает организовать все логические блоки на странице. Каждый блок помещается в свою ячейку (ячейки). Всю страницу можно поместить в одну таблицу, но это нежелательно (увеличивается время загрузки). Обычно используют несколько «каркасных» таблиц – например, отдельно для шапки, отдельно для меню, отдельно для основного текста и т.д. Тег поддерживает следующие атрибуты:

bgcolor – фон таблицы
background – фоновый рисунок таблицы
border – ширина рамки; если таблица карскасная - (невидимая, то border =0)
align – равнение таблицы по ширине страницы; лучше не использовать, так как в Netscape Navigator это иногда дает совершенно непредсказуемый эффект; применяйте внешние тэги - <center>, <div>.
cellspacing – отступ внутри ячейки
cellpadding – отступ между ячейками таблицы
cols – задает количество равновеликих колонок в таблице
width – ширина таблицы; может быть указана как в пикселах, так и в процентах
height – минимальная высота таблицы; пикселы или проценты

Контейнер строки таблицы:
<tr> </tr> . Атрибуты:

bgcolor – фон строки
align – горизонтальное выравнивание текста в строке
valign – вертикальное выравнивание текста в строке

Контейнер ячейки таблицы:
<td> </td>. Поддерживает атрибуты:

bgcolor – фон ячейки
background – фоновый рисунок ячейки
align - горизонтальное выравнивание текста в ячейке
valign – вертикальное выравнивание текста в ячейке
colspan – слить N ячеек в одну по ширине
rowspan - слить N ячеек в одну по высоте
width – ширина ячейки, пикселы или проценты
height – высота ячейки, пикселы или проценты