Основные теги html

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

Post on 16-Jun-2015

670 views

Category:

Education


2 download

DESCRIPTION

Немного об HTML

TRANSCRIPT

Page 1: Основные теги HTML

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

Page 2: Основные теги HTML

Основные тегиОсновные теги <html></html><html></html> Указывает Указывает

программе просмотра страниц что программе просмотра страниц что это HTML документ. это HTML документ.

<head></head><head></head> Определяет место, Определяет место, где помещается различная где помещается различная информация не отображаемая в теле информация не отображаемая в теле документа. Здесь располагается тег документа. Здесь располагается тег названия документа и теги для названия документа и теги для поисковых машин. поисковых машин.

<body></body><body></body> Определяет Определяет видимую часть документавидимую часть документа

Page 3: Основные теги HTML

Теги оглавленияТеги оглавления

Page 4: Основные теги HTML

<base href="www.?"><base href="www.?"> Указание браузеру от Указание браузеру от какого базового адреса все ссылки (кроме какого базового адреса все ссылки (кроме ссылок явно прописанных полностью)ссылок явно прописанных полностью)

<base target="?"><base target="?"> Указание браузеру от Указание браузеру от какого базового окна в котором открываются какого базового окна в котором открываются все ссылки (кроме ссылок с отдельным все ссылки (кроме ссылок с отдельным указанием данного параметра)указанием данного параметра)

<meta name="allow-search" content="?"><meta name="allow-search" content="?"> Указание для поисковых роботов как следует Указание для поисковых роботов как следует сканировать данную страницу сканировать данную страницу

<meta http-equiv="distribution" content="?"><meta http-equiv="distribution" content="?"> Указание для поисковых роботов относится ли Указание для поисковых роботов относится ли данная страница к мировым данная страница к мировым

<meta name="robots" content="?"><meta name="robots" content="?"> Указание Указание для поисковых роботов как следует для поисковых роботов как следует сканировать данную страницу сканировать данную страницу

<meta name="author" content="?"><meta name="author" content="?"> УказаниеУказание автораавтора страничкистранички <meta <meta

Page 5: Основные теги HTML

namename="="keywordskeywords" " contentcontent="?">="?"> Описание Описание содержащийся информации (для поисковых содержащийся информации (для поисковых машин)машин)

<meta http-eguiv="content-type" <meta http-eguiv="content-type" content="text/plain;churset="?">content="text/plain;churset="?"> Указание Указание браузеру в какой кодировке следует подгружать браузеру в какой кодировке следует подгружать страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-страницу (Window-1251, KOI8-R, KOI8-U, ISO-8859-5, UTF-8, UTF-16 и д.р.)5, UTF-8, UTF-16 и д.р.)Некоторые хостинги (восновном иностранные) Некоторые хостинги (восновном иностранные) автоматически перекодируют страници автоматически перекодируют страници получаемые сервером в определенную получаемые сервером в определенную кодировку. Поэтому уточняйте передпостановкой кодировку. Поэтому уточняйте передпостановкой этого тега у поставщиков хостинга этот вопрос.этого тега у поставщиков хостинга этот вопрос.

<meta name="description" content="?"><meta name="description" content="?"> Ключевые слова странички (для поисковых Ключевые слова странички (для поисковых машин)машин)

<title></title><title></title> Помещает название документа в Помещает название документа в оглавление программы просмотра страницоглавление программы просмотра страниц

Page 6: Основные теги HTML

Атрибуты тела документаАтрибуты тела документа

Page 7: Основные теги HTML

<body bgcolor="?"><body bgcolor="?"> Устанавливает цвет фона Устанавливает цвет фона документа, используя значение цвета в виде документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.RRGGBB - пример: FF0000 - красный цвет.

<body text="?"><body text="?"> Устанавливает цвет текста Устанавливает цвет текста документа, используя значение цвета в виде документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет. RRGGBB - пример: 000000 - черный цвет.

<body link="?"><body link="?"> Устанавливает цвет Устанавливает цвет гиперссылок, используя значение цвета в гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.виде RRGGBB - пример: 00FF00 - зеленый цвет.

<body vlink="?"><body vlink="?"> Устанавливает цвет Устанавливает цвет гиперссылок, на которых вы уже побывали, гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.пример: 333333 - серый цвет.

<body alink="?"><body alink="?"> Устанавливает цвет Устанавливает цвет гиперссылок при нажатии.гиперссылок при нажатии.

Page 8: Основные теги HTML

Теги форматирования текстаТеги форматирования текста

Page 9: Основные теги HTML

<pre></pre><pre></pre> Обрамляет предварительно Обрамляет предварительно отформатированный текст. отформатированный текст.

<h1></h1><h1></h1> Создает самый большой заголовок Создает самый большой заголовок <h2></h2>, <h3>, </h3><h4></h4>, <h5>, <h2></h2>, <h3>, </h3><h4></h4>, <h5>,

</h5></h5> Создает заголовоки промежуточных Создает заголовоки промежуточных размеров размеров

<h6></h6><h6></h6> Создает самый маленький Создает самый маленький заголовок заголовок

<b></b><b></b> Создает жирый текст Создает жирый текст (нерекомендованный) (нерекомендованный)

<i></i><i></i> Создает наклонный текст Создает наклонный текст (нерекомендованный) (нерекомендованный)

<tt></tt><tt></tt> Создает текст - имитирующий стиль Создает текст - имитирующий стиль печатной машинки. (нерекомендованный)печатной машинки. (нерекомендованный)

<kbd></kbd><kbd></kbd> Создает текст - имитирующий Создает текст - имитирующий стиль печатной машинки. (рекомендованный) стиль печатной машинки. (рекомендованный)

<var></var><var></var> Название переменных Название переменных отображается курсивом отображается курсивом

<cite></cite><cite></cite> Выделение цитат курсивом Выделение цитат курсивом

Page 10: Основные теги HTML

<address></address><address></address> Отображается Отображается курсивом в виде отдельного абзацакурсивом в виде отдельного абзаца

<em></em><em></em> Наклонный текст Наклонный текст (воспринимается посковыми роботами (воспринимается посковыми роботами как выделение) как выделение)

<strong></strong><strong></strong> Жирный текст Жирный текст (воспринимается посковыми роботами, (воспринимается посковыми роботами, как особо сильное выделение) как особо сильное выделение)

<font size="?"></font><font size="?"></font> Устанавливает Устанавливает размер текста в пределах от 1 до 7. размер текста в пределах от 1 до 7.

<font color="?"></font><font color="?"></font> Устанавливает Устанавливает цвет текста, используя значение цвета цвет текста, используя значение цвета в виде RRGGBB в виде RRGGBB

Page 11: Основные теги HTML

ГиперссылкиГиперссылки

Page 12: Основные теги HTML

<a href="URL"></a><a href="URL"></a> Создает гиперссылку на Создает гиперссылку на другие сайты. другие сайты.

<atarget="?"></a><atarget="?"></a> Указывает в каком окне Указывает в каком окне открывать открывать гиперссылки.Пгиперссылки.ПараметрыЗначениеараметрыЗначение__BlankBlankЗагрузЗагрузка содержимого страницы, заданной ссылкой, в ка содержимого страницы, заданной ссылкой, в новое пустое окно_новое пустое окно_ParentParentЗагрузка содержимого Загрузка содержимого страницы, заданной ссылкой, в окно, которое страницы, заданной ссылкой, в окно, которое содержит ссылку_содержит ссылку_SelfSelfЗагрузка содержимого Загрузка содержимого страницы, заданной ссылкой, в окно, игнорируя страницы, заданной ссылкой, в окно, игнорируя используемые фреймыиспользуемые фреймы_Top_TopЗагрузка Загрузка содержимого страницы, заданной ссылкой, в содержимого страницы, заданной ссылкой, в окно, игнорируя использованные фреймы окно, игнорируя использованные фреймы При использовании фреймов и вложенных При использовании фреймов и вложенных фреймов значением может выступать имя фреймов значением может выступать имя фрейма или вложенной сетки фреймов, приэтом фрейма или вложенной сетки фреймов, приэтом страница откроется в указаной части окна.страница откроется в указаной части окна.

<a href="NAME"></a><a href="NAME"></a> Создает гиперссылку на Создает гиперссылку на другую страницу. другую страницу.

Page 13: Основные теги HTML

<a href="mailto:EMAIL"></a><a href="mailto:EMAIL"></a> Создает гиперссылку вызова Создает гиперссылку вызова почтовой программы для написания почтовой программы для написания письма по указанному адресу. письма по указанному адресу.

<a href="#name"></a><a href="#name"></a> Создает Создает гиперссылку на метку текущей гиперссылку на метку текущей страници. страници.

<a name="name"></a><a name="name"></a> Отмечает Отмечает часть текста, как метку для часть текста, как метку для гипперссылок на странице. гипперссылок на странице.

<a href="NAME#name"></a><a href="NAME#name"></a> Создает гиперссылку на метку Создает гиперссылку на метку другой страници.другой страници.

Page 14: Основные теги HTML

ФорматированиеФорматирование

Page 15: Основные теги HTML

<p></p><p></p> Создает новый параграф Создает новый параграф <p align="?"></p><p align="?"></p> Выравнивает Выравнивает

параграф относительно одной из параграф относительно одной из сторон документа, значения: left, right, сторон документа, значения: left, right, justify или center justify или center

<nobr><nobr> Запрещает перевод строки. Запрещает перевод строки. <wbr><wbr> Указывает где разбивать строку Указывает где разбивать строку

для переноса при необходимости. для переноса при необходимости. <br><br> Вставляет перевод строки. Вставляет перевод строки. <blockquote></blockquote><blockquote></blockquote> Создает Создает

отступы с обеих сторон текста. отступы с обеих сторон текста. <dl></dl><dl></dl> Создает список определений. Создает список определений.

Page 16: Основные теги HTML

<dt><dt> Определяет каждый из терминов Определяет каждый из терминов спискасписка

<dd><dd> Описывает каждое определение Описывает каждое определение <ol></ol><ol></ol> Создает нумерованный список Создает нумерованный список <li><li> Определяет каждый элемент списка Определяет каждый элемент списка

и присваивает номер и присваивает номер <ul></ul><ul></ul> Создает ненумерованный Создает ненумерованный

списоксписок <li><li> Предваряет каждый элемент списка Предваряет каждый элемент списка

и добавляет кружок или квадратик.и добавляет кружок или квадратик. <div align="?"></div><div align="?"></div> Важный тег Важный тег

используемый для форматирования используемый для форматирования больших блоков текста HTML документа, больших блоков текста HTML документа, также используется в таблицах стилейтакже используется в таблицах стилей

Page 17: Основные теги HTML

Графические элементыГрафические элементы

Page 18: Основные теги HTML

<img src="name"><img src="name"> Добавляет Добавляет изображение в HTML документ изображение в HTML документ

<img src="name" align="?"><img src="name" align="?"> Выравнивает изображение к одной из Выравнивает изображение к одной из сторон документа, принимает значения: сторон документа, принимает значения: left, right, center; bottom, top, middleleft, right, center; bottom, top, middle

<img src="name" border="?"><img src="name" border="?"> Устанавливает толщину рамки вокруг Устанавливает толщину рамки вокруг изображения изображения

<img src="name" vspase="?"><img src="name" vspase="?"> Устанавливает поля сверху и снизу Устанавливает поля сверху и снизу

<img src="name" hspase="?"><img src="name" hspase="?"> Устанавливает поля сбоков Устанавливает поля сбоков

Page 19: Основные теги HTML

<img src="name" alt="?"><img src="name" alt="?"> Всплывающая Всплывающая подсказка при наведении на имеджподсказка при наведении на имедж

<hr><hr> Добавляет в HTML документ Добавляет в HTML документ горизонтальную линию. горизонтальную линию.

<hr size="?"><hr size="?"> Устанавливает высоту Устанавливает высоту (толщину) линии(толщину) линии

<hr width="?"><hr width="?"> Устанавливает ширину Устанавливает ширину линии, можно указать ширину в линии, можно указать ширину в пикселах или процентах. пикселах или процентах.

<hr noshade><hr noshade> Создает линию без тени. Создает линию без тени. <hr color="?"><hr color="?"> Задает линии Задает линии

определенный цвет. Значение RRGGBB.определенный цвет. Значение RRGGBB.

Page 20: Основные теги HTML

ТаблицыТаблицы

Page 21: Основные теги HTML

<table></table><table></table> Создает таблицу. Создает таблицу. <tr></tr><tr></tr> Определяет строку в Определяет строку в

таблице. таблице. <td></td><td></td> Определяет отдельную Определяет отдельную

ячейку в таблице. ячейку в таблице. <th></th><th></th> Определяет заголовок Определяет заголовок

таблицы (нормальная ячейка с таблицы (нормальная ячейка с отцентрованным жирным текстом)отцентрованным жирным текстом)

<caption></caption><caption></caption> Определяет Определяет подпись таблицы подпись таблицы

Page 22: Основные теги HTML

Атрибуты таблицыАтрибуты таблицы

Page 23: Основные теги HTML

<table border="#"><table border="#"> Задает толщину рамки Задает толщину рамки таблицы. таблицы.

<table cellspacing="#"><table cellspacing="#"> Задает расстояние между Задает расстояние между ячейками таблицы.ячейками таблицы.

<table cellpadding="#"><table cellpadding="#"> Задает расстояние между Задает расстояние между содержимым ячейки и ее рамкой. содержимым ячейки и ее рамкой.

<table width="#"><table width="#"> Устанавливает ширину таблицы Устанавливает ширину таблицы в пикселах или процентах от ширины документа.в пикселах или процентах от ширины документа.

<table height="#"><table height="#"> Устанавливает высоту таблицы Устанавливает высоту таблицы в пикселах или процентах от высоты документа.в пикселах или процентах от высоты документа.

<tr align="?"><tr align="?"> илиили <td align="?"> <td align="?"> Устанавливает Устанавливает выравнивание ячеек в таблице, принимает выравнивание ячеек в таблице, принимает значения: left, center, или right.значения: left, center, или right.

<tr valign="?"> <tr valign="?"> илиили <td valign="?"> <td valign="?"> Устанавливает Устанавливает вертикальное выравнивание для ячеек таблицы, вертикальное выравнивание для ячеек таблицы, принимает значения : top, middle, или bottom.принимает значения : top, middle, или bottom.

Page 24: Основные теги HTML

<td colspan="#"><td colspan="#"> Указывает кол-во столбцев, Указывает кол-во столбцев, которое объединено в одной ячейке. (по которое объединено в одной ячейке. (по умолчанию=1) умолчанию=1)

<td rowspan="#"><td rowspan="#"> Указывает кол-во строк, Указывает кол-во строк, которое объединено в одной ячейке. (по которое объединено в одной ячейке. (по умолчанию=1) умолчанию=1)

<td nowrap><td nowrap> Не позволяет программе Не позволяет программе просмотра делать перевод строки в ячейке просмотра делать перевод строки в ячейке таблицы.таблицы.

<td width="#"><td width="#"> Устанавливает ширину ячейки Устанавливает ширину ячейки в пикселах или процентах от ширины таблицы в пикселах или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную (ячейки одного столбца не могут иметь разную ширину). ширину).

<td height="#"><td height="#"> Устанавливает высоту ячейки Устанавливает высоту ячейки в пикселах или процентах от высоты таблици в пикселах или процентах от высоты таблици (ячейки одной строки не могут иметь разную (ячейки одной строки не могут иметь разную высоту). высоту).

Page 25: Основные теги HTML

<frameset></frameset><frameset></frameset> Предваряет тег <body> Предваряет тег <body> в документе, содержащем фреймыв документе, содержащем фреймы

<frameset rows="value,value"><frameset rows="value,value"> Определяет Определяет строки в таблице фреймов, высота которых строки в таблице фреймов, высота которых определена кол-вом пикселов или в процентном определена кол-вом пикселов или в процентном соотношении к высоте таблицы фреймов. соотношении к высоте таблицы фреймов.

<frameset cols="value,value"><frameset cols="value,value"> Определяет Определяет столбцы в таблице фреймов, ширина которых столбцы в таблице фреймов, ширина которых определена кол-вом пикселов или в процентном определена кол-вом пикселов или в процентном соотношении к ширине таблицы фреймовсоотношении к ширине таблицы фреймов

. <frame>. <frame> Определяет единичный фрейм или Определяет единичный фрейм или область в таблице фреймов. область в таблице фреймов.

<noframes></noframes><noframes></noframes> Определяет, что будет Определяет, что будет показано в окне браузера, если он не показано в окне браузера, если он не поддерживает фреймы.поддерживает фреймы.

Page 26: Основные теги HTML

Атрибуты фреймовАтрибуты фреймов

Page 27: Основные теги HTML

<frame src="URL"><frame src="URL"> Определяет какой из HTML Определяет какой из HTML документов будет показан во фрейме. документов будет показан во фрейме.

<frame name="name"><frame name="name"> Указывает Имя фрейма Указывает Имя фрейма или области, что позволяет перенаправлять или области, что позволяет перенаправлять информацию в этот фрейм или область из других информацию в этот фрейм или область из других фреймов. фреймов.

<frame marginwidth="#"><frame marginwidth="#"> Определяет величину Определяет величину отступов по левому и правому краям в нутрь отступов по левому и правому краям в нутрь фрейма; должно быть равно или больше 1.фрейма; должно быть равно или больше 1.

<frame marginheight="#"><frame marginheight="#"> Определяет величину Определяет величину отступов по верхнему и нижнему краям в нутрь отступов по верхнему и нижнему краям в нутрь фрейма; должно быть равно или больше 1.фрейма; должно быть равно или больше 1.

<frame scrolling=VALUE><frame scrolling=VALUE> Указывает будет-ли Указывает будет-ли выводится линейка прокрутки во фрейме; выводится линейка прокрутки во фрейме; значение value может быть "yes," "no," или "auto". значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов Значение по умолчанию для обычных документов - auto. - auto.

<frame noresize><frame noresize> Препятствует изменению Препятствует изменению размеров фрейма пользователем.размеров фрейма пользователем.

Page 28: Основные теги HTML

Ифрейм и его атрибутыИфрейм и его атрибуты

Page 29: Основные теги HTML

<iframe></iframe><iframe></iframe> Создает контейнер, Создает контейнер, который может содержать любые который может содержать любые элементы. Остальные элементы элементы. Остальные элементы обтекают этот контейнер. обтекают этот контейнер.

<iframe src="URL"><iframe src="URL"> Определяет какой из Определяет какой из HTML документов будет показан в HTML документов будет показан в ифрейме. ифрейме.

<iframe name="name"><iframe name="name"> Указывает Имя Указывает Имя ифрейма, что позволяет перенаправлять ифрейма, что позволяет перенаправлять информацию в этот ифрейм . информацию в этот ифрейм .

<iframe vspase="?"><iframe vspase="?"> Устанавливает поля Устанавливает поля сверху и снизу с наружи от ифрейма сверху и снизу с наружи от ифрейма

<iframe hspase="?"><iframe hspase="?"> Устанавливает поля Устанавливает поля сбоков с наружи от ифрейма сбоков с наружи от ифрейма

Page 30: Основные теги HTML

<iframe marginwidth="#"><iframe marginwidth="#"> Определяет величину Определяет величину отступов по левому и правому краям в нутрь отступов по левому и правому краям в нутрь ифрейма; должно быть равно или больше 1. ифрейма; должно быть равно или больше 1.

<iframe marginheight="#"><iframe marginheight="#"> Определяет величину Определяет величину отступов по верхнему и нижнему краям в нутрь отступов по верхнему и нижнему краям в нутрь ифрейма; должно быть равно или больше 1. ифрейма; должно быть равно или больше 1.

<iframe scrolling=VALUE><iframe scrolling=VALUE> Указывает будет-ли Указывает будет-ли выводится линейка прокрутки в ифрейме; выводится линейка прокрутки в ифрейме; значение value может быть "yes," "no," или "auto". значение value может быть "yes," "no," или "auto". Значение по умолчанию для обычных документов - Значение по умолчанию для обычных документов - auto. auto.

<iframe width="#"><iframe width="#"> Определяет ширину ифрейма Определяет ширину ифрейма <iframe height="#"><iframe height="#"> Определяет высоту ифрейма; Определяет высоту ифрейма; <iframe title="?"><iframe title="?"> Текст всплывающей подсказки Текст всплывающей подсказки

Page 31: Основные теги HTML

ФормыФормы

Page 32: Основные теги HTML

<form></form><form></form> СоздаетСоздает формыформы <select multiple name="NAME" size="?"></select><select multiple name="NAME" size="?"></select>

СоздаетСоздает скролируемоескролируемое менюменю. . Size устанавливает Size устанавливает кол-во пунктов меню, которое будет показано на кол-во пунктов меню, которое будет показано на экране, остальные будут доступны при экране, остальные будут доступны при использовании прокрутки. <option> Указывает использовании прокрутки. <option> Указывает каждый отдельный элемент меню каждый отдельный элемент меню

<select name="NAME"></select><select name="NAME"></select> СоздаетСоздает ниспадающеениспадающее менюменю

<option><option> Указывает каждый отдельный элемент Указывает каждый отдельный элемент менюменю

<textarea name="NAME" cols=40 <textarea name="NAME" cols=40 rows=8></textarea>rows=8></textarea> СоздаетСоздает окноокно длядля вводаввода текстатекста. Columns . Columns указываетуказывает ширинуширину окнаокна; rows ; rows указываетуказывает егоего высотувысоту. .

<input type="checkbox" name="NAME"><input type="checkbox" name="NAME"> СоздаетСоздает checkbox. checkbox.

Page 33: Основные теги HTML

<input type="radio" name="NAME" <input type="radio" name="NAME" value="x">value="x"> СоздаетСоздает radio radio кнопкукнопку. .

<input type=text name="foo" size=20><input type=text name="foo" size=20> Создает строку для ввода текста. Создает строку для ввода текста. Параметром Size указывается длина в Параметром Size указывается длина в символах. символах.

<input type="submit" value="NAME"><input type="submit" value="NAME"> Создает кнопку "Отправить" Создает кнопку "Отправить"

<input type="image" border="0" <input type="image" border="0" name="NAME" src="name.gif">name="NAME" src="name.gif"> Создает Создает кнопку "Отправить" - для этого кнопку "Отправить" - для этого используется изображениеиспользуется изображение

<input type="reset"><input type="reset"> Создает кнопку Создает кнопку "Очистить""Очистить"