Список тэгов html
Ниже приведены наиболее широко используемые тэги и атрибуты HTML и рассмотрены примеры, которые могут оказаться полезными. Тэги организованы по их функциям.
Основная структура страницы HTML
Страница HTML – это текстовый файл со следуюшей основной структурой:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!--Insert page content here-->
</body>
</html>
Первая строка является необязательной, но она сообщает HTML программам подтверждения (вроде сервиса на www.w3.org), какую версию HTML вы собираетесь использовать на своей странице.
Структура и тэги заголовка страницы
<HTML>…</HTML>
Заключите в эти блоки всю страницу HTML.
<HEAD>…</HEAD>
Включите в этот блок тэг <TITLE> и другие тэги общей информации о странице (вроде <META> и <STYLE>).
<BODY>…</BODY>
Включите содержимое страницы в этот блок, идущий после раздела <HEAD>. Используйте атрибуты для управления видом страницы, включая текст и цвет фона.
Возможный результат
<body bgcolor="#cccc99"
text="#003300">
Устанавливает цвет фона и текста
<body link="#993300"
alink="#cc6600"
vlink="#993333">
Устанавливает цвет обычной, активной и посещенной гиперссылки
<body background="images/bkgd.gif">
Устанавливает фоновый рисунок
<body leftmargin=0
topmargin=0
marginwidth=0
marginheight=0>
Страница появляется в левом верхнем углу окна броузера. (Используйте все четыре атрибута для поддержки и Internet Explorer и Netscape)
<TITLE>…</TITLE>
Обеспечивает заголовок страницы, который появляется в строке заголовка броузера.
<BASE>
Установливает "базовый" сетевой адрес для гиперссылок (вместо положения страницы). Или, используется на страницах с фреймами для указания целевого фрейма для гиперссылок.
Возможный результат
<base href="http://www.callahansoftware.com/">
Все родственные гиперссылки обращаются к указанному веб сайту, даже если страница расположена не здесь
<base target=main>
Все гиперссылки загружают страницы в фрейм с названием "main"
<LINK>
Ссылается на внешнюю таблицу стилей или создает отношения с другой страницей или файлом.
Возможный результат
<link rel="stylesheet"type="text/css"
href="styles.css">
Страница использует стили, найденные во внешней таблице стилей styles.css
<link rel="shortcut icon"
href="favicon.ico">
Internet Explorer использует указанный файл значка для меню Favorites
<STYLE>…</STYLE>
Обеспечивает стиль из каскадированных таблиц стилей (cascading style sheet, сокращенно CSS) для страницы.
<SCRIPT>…</SCRIPT> и <NOSCRIPT>…</NOSCRIPT>
Обеспечивает код сценария, вроде JavaScript, для вашей страницы. Можно использовать блок <NOSCRIPT>, чтобы написать альттернативный HTML для броузеров, которые не понимают сценарии.
Возможный результат
<script language="JavaScript">
<!--
if (document.styleSheets)
window.location='new.htm';.
//-->
</script>
Этот код переадресовывает посетителей, использующих Internet Explorer 4 или более поздних версий или Netscape 6 или более поздних версий на страницу с названием new.htm; благодаря индикаторам комментария сценарий будет проигнорирован старыми броузерами
<!-- comment -->
позволяет вам ввести комментарии в ваш HTML, который не появится на вашей странице в броузере.
Заголовки, параграфы и разрывы строки
<P>…</P>
Создает параграф с пробелами до и после. Закрывающий тэг использовать необязательно, но рекомендуется (обязательно при использовании таблиц стилей).
Возможный результат
<p align=center>This is a paragraph.</p>
Текст центрирован и имеет пустую строку сверху и снизу
<p style="margin-top:6;margin-bottom:6">
This P is tight with the neighbors.</p>
Между текстом и следующим параграфом 6 пикселов
<H1>…</H1> - <H6>…</H6>
Показывает жирный текст заголовка. Заголовки уровня 1 – больше, а уровня 6 – меньше, чем обычный текст. По умолчанию заголовки выровнены по левому краю; чтобы центрировать их, установите атрибуту align значение center.
<DIV>…</DIV> и <SPAN>…</SPAN>
Является признаком текстового блока, к которому вы хотите применить стиль. Установите стиль блоку текста с помощью атрибутов style, class или id. Броузеры отобразят конец строки до и после тэга <DIV>, а тэг <SPAN> может быть использован в части параграфа, не разрывая строку.
Возможный результат
<div align=center>
Middle of the road.
</div>
Разделы центрированы, строка разрывается до и после
<div style=
"position:absolute;top:80;left:80">
Unbearable lightness of being.
</div>
Раздел выровнен по верхнему краю других элементов страницы, это ровно 80 пикселов от верха и левого края окна броузера
<BR>
Разрыв с переходом на следующую строку.
Возможный результат
<br clear=all>
Броузер разрывает строку и переходит на следующую
<NOBR>…</NOBR>
Не дает броузеру разрывать строку. Если текст не умещается на экране, посетителям придется воспользоваться полосой прокрутки; если текст не умещается в колонке, она расширится.
Форматирование текста
<FONT>…</FONT>
Устанавливает гарнитуру и размер шрифта для блока текста. Размер указывается цифрами от 1 до 7, где 3 обычно стоит по умолчанию. Чтобы более точно установить шрифт, используйте стили вместо <FONT>.
Возможный результат
<font size=4 face=
"'Courier New',courier,monospace">
My old friend the typewriter.</font>
Показывает текст шрифтом Courier New (или другим имеющимся шрифтом), размер шрифта больше чем обычно
<B>…</B> или <STRONG>…</STRONG>
Пишет включенный текст жирно.
<I>…</I> или <EM>…</EM>
Пишет включенный текст наклонно.
<U>…</U> -Подчеркивает включенный текст.
<PRE>…</PRE>
Устанавливает моноширинный (машинописный) шрифт, и отображает текст точно, как он появляется в HTML (с такими же пробелами и разрывами строк).
Возможный результат
<pre>
AGE
OF
AQUARIUS
</pre>
AGE
OF
AQUARIUS
<UL>…</UL>, <LI>…</LI>
Отображает маркированный список. Список с отступом и имеет отбивки сверху и снизу.
Возможный результат
<p>I hope we have heard the last of:</p>
<ul type=square>
<li>Conformity</li>
<li>Consistency</li>
</ul>
I hope we have heard the last of:
· Conformity
· Consistency
<OL>…</OL>, <LI>…</LI>
Отображает нумерованный список. Список с отступом и имеет отбивки сверху и снизу.
Возможный результат
<ol start=4>
<li>Cuatro</li>
<li>Cinco</li>
<li>Seis</li>
</ol>
4. Cuatro
5. Cinco
6. Seis
Гиперссылки
<A>…</A>
Обеспечивает гиперссылку на другую страницу или файл. Используйте атрибут name чтобы указать позицию на странице на которую другая ссылка может перепрыгнуть.
Возможный результат
<a href="matt.htm">Matthew’s Page</a>
Отображает подчеркнутую гиперссылку (Matthew’s Page) на страницу с названием matt.htm в той же папке
<a name="news">News about Fiona</a>
Определяет якорь на странице на который перепрыгнет другая гиперссылка
<a href="#news">Read the News</a>
Отображает гиперссылку на якорь
<a href="baby.htm"onmouseover=
"window.status='Babies!';return true">
<img src="baby.jpg"width=40
height=30></a>
Отображает рисунок baby.jpg как гиперссылку на страницу baby.htm; когда посетитель проводит мышкой по ссылке, в строке статуса появляется сообщение
Объекты и рисунки
<IMG>
Отображает GIF, JPEG, или PNG рисунок.
Возможный результат
<img src="green.jpg"width=100 height=50
align=right vspace=8 hspace=8>
Помещает рисунок green.jpg в правое поле соответственно текст будет обтекать его слева. Рисунок появляется как минимум в 8 пикселах от краев текста или объектов
<img src="welcome.gif"width=80
height=30 alt="Welcome to Lewes,DE">
Отображает рисунок welcome.gif и обеспечивает альтернативный текст для броузеров, которые не могут показать изображение
<HR>
Отображает горизонтальную линию поперек страницы.
<BGSOUND>
В Internet Explorer, проигрывает фоновый звук. Используйте атрибут src для указания аудио файла, вроде файла WAVE (.wav) или MIDI (.mid).
<EMBED>
Вставляет плагин броузера для проигрывания медиа или отображения информации. Определите файл для проигрывания или объект для отображения с помощью атрибута src, и используйте атрибуты для определения параметров плагина.
Возможный результат
<embed src="Groove.wav"hidden=true
autostart=true volume=50 loop=true>
Автоматически проигрывает WAVE файл при открытии страницы
<embed width=280 height=200
src="chomsky.mov"autoplay=true
controller=false
type="video/quicktime"pluginspage=
"http://www.apple.com/quicktime/">
Отображает плагин QuickTime и проигрывает указанный файл movie (.mov).
<OBJECT>…</OBJECT>, <PARAM>
В Internet Explorer для Windows встраивает средство ActiveX для проигрывания медиа или отображения информации. Используйте тэг <PARAM> для указания параметров объекта.
Возможный результат
<object id="real"classid=
"clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
width=300 height=100>
<param name="src"value="Ocean.ram">
<param name="hidden"value="false">
<param name="autostart"value="false">
</object>
Отображает средство RealAudio ActiveX, загружает указанный аудио файл (.ram) после чего можно прослушивать
<APPLET>…</APPLET>, <PARAM>
Встраивает апплет Java. Используйте тэг <PARAM> для указания параметров апплета.
Возможный результат
<applet code="chat.class"
width=495 height=83>
<param name="server"value="ares">
<param name="user"value="evan">
<param name="picture"value="evan.jpg">
</applet>
Отображает апплет, код которого находится в файле chat.class, отправляет три параметра апплету
Таблицы
<TABLE>…</TABLE>, <TR>…</TR>, <TD>…</TD>, <TH>…</TH> и <CAPTION>
Создает таблицу с одной или несколькими строками (блоки <TR>) и столбцами (блоки <TD>). По желанию вы можете добавить заголовки столбцов (блоки <TH>) или заголовок для всей таблицы.
Возможный результат
<table border=3 cellpadding=5>
<caption>The Happy Life</caption>
<tr>
<th>Desire</th><th>Satisfaction</th
</tr>
<tr>
<td>Greed</td><td>Generosity</td>
</tr>
</table>
Таблица данных с заголовком, строкой заголовка, и одной строкой данных
<table cellpadding=0 cellspacing=0
border=0 width=620>
<tr>
<td width=220>
Narrow left column
</td>
<td width=400>
Wide right column
</td>
</tr>
</table>
Таблица размещения страницы в две колонки без пробелов или границ между ячейками
Задание 1. Создайте в блокноте HTML – документ следующего содержания:
<HTML>
<HEAD>
<TITLE>Мой первый документ</TITLE>
</HEAD>
<BODY>
Это тело моего первого документа
</BODY>
</HTML>
Сохраните этот документ в своей паке под именем Проба1.txt, переименуйте его так, чтобы расширение документа стало htm, и откройте этот документ с использованием программы Internet Explorer.
Внутри тела документа могут быть размещены заголовки, которые организуются при помощи тегов <H1>и</H1>, подзаголовки организуются тегами <H2>и</H2> и т.д. (до шести уровней подзаголовков).
Обычные абзацы организуются при помощи тегов <P> и </P>. Разделяющая горизонтальная линия может быть проведена одиночным тегом <HR>. Для перехода на новую строку без создания нового абзаца используется одиночный тег <BR>.
Задание 2. Создайте Web-страницу следующего содержания:
Для указания гиперссылок на другие Web-документы необходимо использовать теги <A></A> с атрибутом HREF=”имя другой Web-страницы”.
Например:
<P>Если Вы хотите подробнее узнать обо мне нажмите сюда<A HREF= “MyFile.HTM”> Сведения обо мне.</A>
Задание 3. Создайте Web-страницу следующего содержания(о себе). Ссылка Мои увлечения должна позволять открыть другую Web-страницу, на которой указаны Ваши увлечения.
Внимание! При указании адреса ссылки не нужно указывать полное имя, если вторая страница расположена в той же папке, что и первая.
Практична робота №8