Тэги в HTML
Источник: http://welikeit.ru/
Данное "руководство" не содержит всех возможностей html.
Глава первая
Голова документа
<html>
<head>
<title>Название вашей страницы в строке браузера
</title>
</head> <body>
Текст на вашей страничке...
<br>
Добро пожаловать на мою страничку
</body>
</html>
Этот документ можно создать с помощью блокнота (или
вашего html редактора), потом сохранить с расширением htm и открыть
сохранённое с помощью вашего браузера. Сохранив изменения в блокноте,
просто нажимайте в вашем браузере кнопку "обновить", чтобы увидеть
изменения.
<head>
</head> - голова документа
<body> </body> - тело документа
Глава вторая
Изменение вида и цвета
текста
<font
color="#CC0000"> Изменение
цвета</font>
<font color="#669966">> Изменение цвета
</font>
<font
color="#330099"> Изменение
цвета</font>
Цвет кодируется последовательностью из трех пар
символов. Каждая пара представляет собой шестнадцатеричное значение
насыщенности заданного цвета одним из трех основных цветов (красным,
зеленым и синим) в диапазоне от нуля (00) до 255 (FF).
<b>
Полужирный
текст </b>
<i> Наклонный текст (курсив)
</i>
<u>
Подчеркнутый текст </u>
<MARQUEE>
</MARQUEE>
<big>Увеличенный шрифт
</big>
<small>Уменьшенный шрифт
</small>
<sub>Нижний математ. шрифт
</sub>
<s>Зачеркнутый шрифт </s>
<acronym
title="Текст подсказки">Подсказка</acronym>
Глава третья
Параграфы и заголовки
<br> - перенос строки
Такая пара меток описывает абзац. Все, что заключено между
<P> и </P>,
воспринимается как один абзац.
<p
align="center">
Пример выравнивания текстов с помощью параграфов по
центру.
</p>
<p> может содержать
следующие выравнивания:
<p
align="center"></p> - по центру
<p align="left"></p> - по ширине
<p align="left"></p> - по
левой стороне документа
<p
align="right"></p> - по правой стороне документа
Заголовки
Метки вида
<Hi> (где i — цифра от 1 до 6) описывают
заголовки шести различных уровней. Заголовок первого уровня — самый
крупный, шестого уровня, естественно — самый мелкий.
Пример
Заголовок 6-го уровня
Заголовок 3-го уровня
Заголовок 1-го уровня
<font
size="+3">
Еще один пример
</font>
<font
size="-1">
Уменьшенный вариант </font>
Глава четвёртая
Создание линков
(ссылок)
Самый простой пример
<a
href="/index">главная страница сайта
</a> - главная страница сайта
Ссылка на вашу почту
<a
href="mailto:почтовый@адрес.ru">пишите письма</a>пишите
письма
Ссылка для скачивания файлов
<A HREF="ftp://адрес/имя файла">>Скачать
файл</A> - Скачать файл
Меняем цвет
ссылки при наведении мыши
<style>
<style><!-- A:hover {color:
#ff6600} - "#ff6600" - цвет ссылки при наведении
A {text-decoration: none}--> - эта строка
убирает подчёркивание ссылок
</style>
Глава пятая
Таблицы
В этой главе раcсказаны не все возможности таблицы, а
только самые необходимые(на мой взгляд).
Таблица начинается с
метки <table> и заканчивается меткой
</table>. Метка <table> может включать следующие атрибутов:
align="center" align="left"
align="right" - выравнивание таблицы по центру, левому и правому
краю документа.
width="50%" - ширина
таблицы в процентах от ширины страницы.
width="50" - ширина таблицы в пикселях.
Border="2" - ширина рамки таблицы. Если не
указывать этот атрибут, таблица будет без рамки.
bgcolor="#ff9900" - цвет таблицы
Каждая
строка таблицы начинается с метки <tr>
и заканчивается меткой </tr>. Метка
<tr> может включать в себя атрибуты как
и в <table>; align,
width, bgcolor.
Каждая ячейка таблицы начинается с метки
<TD> и заканчивается меткой
</TD>. Метка <TD> может включать в себя следующие
атрибуты: align, width, bgcolor.
Если
ячейка таблицы пуста, вокруг неё не рисуется рамка. Если ячейка пуста, а
рамка нужна, в ячейку можно ввести символьный объект
(non-breaking space - не разрывающий
пробел). Ячейка по-прежнему будет пустой, а рамка вокруг неё будет.
Пример простой таблицы
<table
align="center" bgcolor="#e5e5e5" border="1" width="300">
<tr>
<td
width="150">ячейка 1-ой строки</td>
<td
width="150">2-ая ячейка 1-ой строки</td>
</tr>
<tr>
<td width="150">ячейка 2 строки
</td>
<td
width="150"> </td>
</tr>
</table>
В итоге получится
| ячейка 1-ой строки |
2-ая ячейка 1-ой строки |
| ячейка 2 строки |
|
Любопытно
отметить, что любая ячейка таблицы может содержать в себе другую
таблицу.
Глава шестая
Мета теги
<META HTTP-EQUIV="Expires"
Content="Mon, 30 Mar 2002 11:50:01 GMT"> - Мета тега для
определения обновления браузера документа и замены его на новый по дате.
<META HTTP-EQUIV="Refresh"
CONTENT="[время]; URL=[документ]"> Если пользователь не
предпримет никаких видимых действий в течение [время в секундах] после
загрузки документа, содержащего такую инструкцию, автоматически будет
загружен [документ]. Очень полезно когда ваша страница была перемещена
на другой адрес.
<META Name="autor"
Content="Ваши Ф.И.О., E-Mail..."> - Для указания
дополнительной информации владельца страницы.
<META Name="copyright" Content="ваша
фирма..."> - Для указания авторских прав.
<META HTTP-EQUIV="Content-Type" Content="text/html;
Charset=Windows-1251"> - Для определения написания на языке
браузера.
<META Name="description"
Content="Описание Вашей Страницы"> - Для описания вашей
страницы в поисковых мета-систем.
<META
HTTP-EQUIV="Pragma" Content="no-cache"> - Потрясающий мета тег
не дающий никакой возможности вашему посетителю просматривать вашу
страничку в автономном режиме.
Глава седьмая
Фреймы
<html>
<head>
<title> Название сайта в строке браузера</title> <frameset
cols="100,*">
<frameset rows="100,*">
<frame
src="/logo">
<frame src="/menu">
</frameset>
<frame src="/content">
</frameset>
</head>
</html> - Этот
скрипт фрейм вставляеться на главную страницу вашего сайта для
последующего отображения страницы
<html>
<head>
<title> Название сайта в строке браузера
</title>
<frameset rows="100,*">
<frame src="/logo">
<frameset cols="150,*">
<frame src="/menu">
<frame src="/content">
</frameset>
</frameset>
</head>
</html> - Еще один пример фрейма
Глава восьмая
Картинки
<img src="ваш.gif">
- Простейший пример вставки изображений.
<img
src="http://адрес/картинка.gif"> -
Пример вставки картинки с другого сайта.
<img
src="ваш.gif" alt="текстТЕКСТтекст"> - Картинка с текстом в виде подсказки.
<img src="ваш.gif" width="50">
- Картинка по вертикали вы можете
изменить параметр в width="ваш параметр в цифрах по размеру разрешения".
<img src="ваш.gif" height="50">
- Картинка по горизонтали вы можете
изменить параметр в height="ваш параметр в цифрах по размеру
разрешения".
<img src="ваш.gif"
border="7"> - Картинка с
рамкой, border="толщина рамки"
<body
background="ваш_фон.jpg"> - Картинка применяется как фон на
вашей страничке.
Глава девятая
Фильтры
<IMG SRC="ваш.jpg"
STYLE=filter:alpha(Opacity=50)> - Этот фильтр делает картинку,
фон прозрачным. Фильтры этого примера описание: (Opacity=ваше значение в
цифрах по прозрачности обьекта).
Пример
<IMG SRC="ваш.jpg"
STYLE=filter:blur(Add=1, Direction=1, Strength=55)> - Этот
фильтр сделает картинку, фон в размытом виде. Фильтры этого примера
описание:(Add=значение наложения на исходный образец от
1)(Direction=значение в радиусе пример 0-45-90 и т.д.по часовой стрелке
вверх)(Strength=значение в цифрах по размытости объекта).
Пример
<IMG SRC="ваш.jpg"
STYLE=filter:fliph()> - Горизонтально переворачивает вашу
картинку или фон.
Пример
<IMG SRC="ваш.jpg"
STYLE=filter:flipv()> - Вертикально переворачивает вашу
картинку или фон.
Пример
<IMG SRC="ваш.jpg"
STYLE=filter:gray()> - Делает картинку или фон чёрно-белым.
Пример
<IMG SRC="ваш.jpg" STYLE=filter:invert()> -
Этот фильтр придаёт картинке, фону насыщенный оттенок и яркость объекта
на противоположные.
Пример
<IMG SRC="ваш.jpg"
STYLE=filter:xray()> - Этот фильтр делает рентгеновский снимок
вашей картинке, фону.
Пример
