19 февраля 2011 г.

Основные 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 - слить ячеек в одну по высоте
  • width – ширина ячейки, пикселы или проценты
  • height – высота ячейки, пикселы или проценты

0 коммент.:

Отправить комментарий

Статистика блога