HTML теги

Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Веб-страницы. Каждый тэг содержит определенную инструкцию и заключается в угловые скобки <>. Большинство тэгов состоят из открывающей и закрывающей частей и воздействуют на текст, заключенный внутри.

Теги b, i, u, font

Тег b - Устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Закрывающий тег обязателен.

Тег u - Добавляет подчеркивание к тексту. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Закрывающий тег обязателен.

Тег i - Устанавливает курсивное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Закрывающий тег обязателен.

Тег font - Представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста. Закрывающий тег обязателен.

Параметры тега font:

Параметр color - Устанавливает цвет текста внутри контейнера font.
Значение цвета можно задавать двумя способами:
1. По его названию. Браузеры поддерживают некоторые цвета по их названию. (Например: red, green, blue)
2. По шестнадцатеричному значению. Для задания цветов используются числа в шестнадцатеричном коде. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #. Каждый из трех компонентов цвета — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие (#rrggbb), где первые два соответствуют красному компоненту цвета, два средних — зеленому, а два последних - синиму. Узнать HTML код интересующих цветов можно на Яндексе.

Параметр face - Служит для задания гарнитуры шрифтов, использующихся для текста. Список шрифтов можно найти в любом текстовом, графическом и HTML редакторе.

Параметр size - Задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной, так и относительной. В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта.

Примеры:

Теги b, i, u
<b>Пример</b>	Пример
<i>Пример</i>	Пример
<u>Пример</u>	Пример
Тег FONT и его атрибуты
<font face="Calibri" color="red">Пример</font>	Пример
<font size="4" face="Calibri">Пример</font>	Пример
<font face="Segoe Script">Пример</font>	Пример
<font size="+1" face="Segoe Script" color="red"><i><b><u>Пример</u></b></i></font>	Пример

Параметры style, onclick, onmouseover, onmouseout, title.

(Рекомендуется не перенасыщать тегами стену, вопросы, идеи, задания. Не стоит портить дизайн сайта. Все это может повлечь блокировку аккаунта!)

Параметр style пишется внутри любого тега. Вот некоторые значения параметра style:

<b style="background-color:#66FF99">Пример</b>	Пример
<font style="text-shadow:1px 1px 2px lime; border:1px solid #f0f; background-color:#eeeeee; padding:1px;">Пример</font>	Пример

Здесь, background-color задает цвет фона, text-shadow - тень, отбрасываемую от текста (отображается не во всех браузерах), border - рамку.

Перед изучением значений параметров следует знать:

top - верх, right - право, bottom - низ, left - лево.
После каждого значения параметра нужно поставить точку с запятой ;

Значений параметра style огромное количество, но здесь будут описаны только самые распространенные (в скобках приведены примеры)

background-color - задает цвет фона [background-color:#66FF99"]

border устанавливает параметры рамки [border:1px solid #ccc], где 1px - толщина рамки, solid - стиль рамки (возможные варианты ниже), #ccc - цвет рамки

dotted dashed solid double groove ridge inset outset

border-top - то же самое что и border, только задает параметры для верхней границы рамки [border-top:1px solid #ccc]
border-right
border-bottom
border-left

color - определяет цвет (как в font color, только без участия тега font. Это может пригодиться при оформлении оплачиваемых заданий, где тег font запрещен) [color:#999999]

cursor - задает тип курсора. Ниже приведены возможные варианты [cursor:pointer]

float - определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон [float:right]

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

font-size - определяет размер шрифта (как в font size, только без участия тега font. Это может пригодиться при оформлении оплачиваемых заданий, где тег font запрещен) [font-size:medium]

Значение	Размер
xx-small	1
x-small
small	2
medium	3
large	4
x-large	5
xx-large	6

font-weight - устанавливает насыщенность шрифта. Значение устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое может отобразить браузер, имеет значение 100, а сверхжирное — 900. Нормальное начертание шрифта (которое установлено по умолчанию) эквивалентно 400, стандартный полужирный текст — значению 700. Насыщенность шрифта задается с помощью ключевых слов: bold — полужирное начертание, bolder — жирное начертание; lighter — светлое начертание, normal — нормальное начертание. Также допустимо использовать условные единицы от 100 до 900 [font-weight:bold]

letter-spacing - определяет интервал между символами в пределах элемента [letter-spacing:10px]

margin - устанавливает величину отступа от каждого края элемента [margin:2px 3px 4px 5px] (в этом примере: 2px - отступ сверху; 3px - справа; 4px - снизу; 5px - слева. То есть, перечисление идет по часовой стрелке.)

Число значений	Результат
1	Отступы будут установлены одновременно от каждого края элемента.
2	Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.
3	Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4	Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Число значений	Пример
1	margin:3px
2	margin:3px 2px
3	margin:3px 2px 4px
4	margin:3px 2px 4px 2px

margin-top - устанавливает величину отступа от верхнего края элемента
margin-right
margin-bottom
margin-left

padding - устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое [padding:7px]

Это значение очень схоже с margin, а именно:

Число значений	Результат
1	Поля будут установлены одновременно от каждого края элемента.
2	Первое значение устанавливает поля от верхнего и нижнего края, второе — от левого и правого.
3	Первое значение задает поле от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.
4	Поочередно устанавливается поля от верхнего, правого, нижнего и левого края.

Число значений	Пример
1	padding:3px
2	padding:3px 2px
3	padding:3px 2px 4px
4	padding:3px 2px 4px 2px

padding-top - Устанавливает значение поля от верхнего края содержимого элемента
padding-right
padding-bottom
padding-left

text-decoration - Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания (в браузерах семейства Internet Explorer параметр text-decoration отображается некорректно) [text-decoration:line-through]

blink Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте (пример).

line-through Создает перечеркнутый текст

overline Линия проходит над текстом

underline Устанавливает подчеркнутый текст

text-indent - устанавливает величину отступа первой строки блока текста. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера. [text-indent:15px]

text-shadow - добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия [text-shadow: black 1px 1px 2px], где black - цвет тени, 1px (слева) - сдвиг по X (смещение тени по горизонтали относительно текста), 1px (справа) - сдвиг по Y (смещение тени по вертикали относительно текста), 2px - радиус (задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0)

word-spacing - устанавливает интервал между словами [word-spacing:20px]

text-align - устанавливает положение текста. Чтобы установить текст по центру, воспользуйтесь кодом <font style="text-align:center; display:block;">текст</font> (без display:block не работает).