Лекция: H1,H2,...H6

(HTML 2.0) — Headers
Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни — разделы и подразделы.

 

Параметры:

ALIGN — определяет способ выравнивания заголовка по горизонтали.

Возможные значения: left, right, center.


Пример:
<H1 ALIGN=«center»>Самый большой заголовок посередине</H1> <H2>Заголовок поменьше</H2>… <H6>Малюююсенький такой заголовочек</H6>

 

 

I

(HTML 2.0) — Italic
Текст, заключенный между начальным и конечным тэгами, будет выделен курсивом.

 

Пример:
Текст с <I>курсивом</I>

 

 

IMG

(HTML 2.0) — Image
Используется для вставки изображений в HTML-документ.
Это один из самых популярных элементов, незаменимый инструмент web-дизайнера. Элемент допускает вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные). Последние версии браузеров позволяют также использовать формат PNG, но до тех пор пока они не устареют от применения PNG лучше воздержаться.
Элемент IMG не имеет конечного тэга.

 

Параметры:

SRC — обязательный параметр. Указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH — определяют ширину и высоту изображения соответственно. Если указанные значения не совпадают с реальным размером изображения, изображение масштабируется (порой с заметной потерей качества).

HSPACE и VSPACE — определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

ALIGN — обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left — выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right — выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop — выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle — выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle — выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline — выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom — выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

NAME — определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

ALT — определяет текст, отображаемый браузером на месте изображения, если браузер не может найти файл с изображением или включен в текстовый режим. В качестве значения задается текст с описанием изображения.

BORDER — определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

LOWSRC — указывает адрес (URL) файла с альтернативным изображением более низкого качества (и, соответственно, меньшего объема), чем изображение, указанное в параметре SRC. Браузеры, поддерживающие данный параметр, сначала загрузят картинку из LOWSRC, a затем заменят ее картинкой из SRC.

USEMAP — применяет к изображению навигационную карту (image map), заданную элементом MAP. В качестве значения задается имя карты с предшествующей ему решеткой. Например, если имя карты — «map1», то ссылка на нее будет выглядеть как "#map1" (см. Пример 4). Обратите внимание: прописные и строчные буквы в данном параметре трактуются браузером как разные.

ISMAP — определяет изображение как навигационную карту (image map), обрабатываемую сервером. Имеет смысл использовать только тогда, когда изображение является гиперссылкой. После клика мышкой на изображении серверу отправляются x,y-координаты нажатия. В зависимости от полученных координат, сервер (при наличии на нем соответствующего программного обеспечения) может показать вам тот или иной документ. Данный параметр является флагом и не требует присвоения значения.

 

Пример 1:
<IMG src=«img/picture.gif» WIDTH=«45» HEIGHT=«53» ALT=«Рысь» HSPACE=«10» ALIGN=«left»> Этот текст обтекает картинку с рысью справа и находится от нее на расстоянии 10 пикселов.

 

 


Пример 2. Использование изображения в качестве гиперссылки:
<A HREF=«carlson.html»> <IMG src=«img/button.jpg» WIDTH=«70» HEIGHT=«30» ALIGN=«right» BORDER=«0» ALT=«Досье Карлсона»> </A> Для просмотра досье нажмите на кнопку справа.

 

 


Пример 3. Использование ISMAP:
<A HREF=«www.igf.ru/bin/imagemaps/map1»> <IMG SRC=«map.gif» ISMAP></A>

 

 


Пример 4. Использование USEMAP:
<IMG src=«img/buttons.jpg» WIDTH=«170» HEIGHT=«120» ALIGN=«middle» BORDER=«0» USEMAP="#ButtonsMap">

 

 

Примечания (особо важно):

Золотое правило web-мастера — всегда явно задавать размеры картинки в параметрах HEIGHT и WIDTH, резервируя тем самым место в окне браузера еще до загрузки изображения. В противном случае документ при загрузке каждой картинки будет заново перерисовываться. А на медленных машинах или при подключении к сети посредством модема это смотрится просто отвратительно.
Второе золотое правило web-мастера: если на картинке изображено что-то разборчивое, нужно описать это словами в параметре ALT.
ВСЕГДА сразу после <IMG ...> ставьте <BR>!!! А то проблем не миновать — после картинки появится пустое пространство в несколько пикселей. Причем, ставьте вплотную, без пробелов: <img ...><br>. Увижу что сделали иначе — лично пристрелю!
Для завершения обтекания изображения текстом используйте параметр CLEAR элемента BR.
Значения top и texttop параметра ALIGN не совсем идентичны, и их использование порой дает разный результат. Попробуйте поэкспериментировать.
Указывайте значения параметров HSPACE и VSPACE, даже если вы хотите оставить поля нулевой ширины. Бывает, что некоторые браузеры по умолчанию присваивают им какое-то небольшое значение, не равное нулю.
По возможности старайтесь не создавать навигационных карт, обрабатываемых на сервере. Иначе говоря, вместо параметра ISMAP используйте параметр USEMAP и локальные карты.

 

INPUT

(HTML 2.0) — Input
Элемент INPUT создает поле формы (кнопку, поле ввода, чекбокс и т.п.), содержание которого может быть изменено или активизировано пользователем. Элемент не имеет конечного тэга. Элемент INPUT должен располагаться внутри элемента FORM.

 

Параметры:

NAME — определяет имя, используемое при передаче содержания данной формы на сервер. Этот параметр необходим для большинства типов (параметр TYPE — cм. ниже) элемента INPUT и обычно используется для идентификации поля или для группы полей, связанных логически.

TYPE — определяет тип поля для ввода данных. По умолчанию — это «text». Возможные значения:

text — создает поле ввода под одну строку текста. Как правило используется совместно с параметрами SIZE и MAXLENGTH.
textarea — создает поле ввода для текста в несколько строк. Но для этих целей лучше использовать элемент TEXTAREA
file — дает возможность пользователю приобщить файл к текущей форме. Возможно использование совместно с параметром ACCEPT.
password — создает поле ввода под одну строку, однако текст, вводимый пользователем, отображается в виде значков "*", скрывая тем самым его содержание от любопытных глаз.
checkbox — создает поле ввода для атрибутов типа Boolean («да»/«нет») или для атрибутов, которые могут одновременно принимать несколько значений. Эти атрибуты представляют собой несколько полей CHECKBOX, которые могут иметь одинаковые имена. Каждое выбранное поле CHECKBOX создает отдельную пару name/value в информации, посылаемой на сервер, даже если результатом будут дублирующиеся имена. Поле типа CHECKBOX обязательно должно иметь параметры NAME и VALUE, а также необязательный атрибут CHECKED, который указывает на то, что поле активизировано.
radio — создает поле ввода для атрибутов, которые принимают одно значение из нескольких возможных. Все кнопки (radio buttons) в группе должны иметь одинаковые имена, но только выбранная кнопка в группе создает пару name/value, которая будет послана на сервер. Как и для полей CHECKBOX, атрибут CHECKED необязателен; он может быть использован для определения выделенной кнопки в группе кнопок (radio button).
submit — создает кнопку, при нажатии которой заполненная форма посылается на сервер. Параметр VALUE в данном случае изменяет надпись на кнопке, содержание которой, заданное по умолчанию, зависит от браузера. Если параметр NAME указан, то при нажатии данной кнопки к информации, посылаемой на сервер, добавляется пара name/value, указанная для для параметра SUBMIT, в противном случае пара не добавляется.
image — создает графический образ для кнопки, инициализирующей передачу данных на сервер. Местонахождение графического изображения можно задать с помощью параметра SRC. При передаче данных серверу сообщаются координаты x и y той точки на изображении, где был произведен щелчок клавишей мыши. Координаты измеряются из верхнего левого угла изображения. При этом информация о поле типа image записывается в виде двух пар значений name/value. Значение name получается посредством добавления к названию соответствующего поля IMAGE суффиксов ".x" в случае абсциссы, и ".y" в случае ординаты.
reset — создает кнопку, перезагружающую поля формы к их первоначальным значениям. Надпись на кнопке может быть изменена с помощью параметра VALUE. По умолчанию надпись на кнопке зависит от браузера.
hidden — поля этого типа не отображаются на экране монитора, что позволяет разместить «секретную» информацию в рамках формы. Содержание этого поля посылается на сервер в виде name/value вместе с остальной информацией формы. Этот тип может быть использован для передачи информации о взаимодействии клиент/сервер.
button — позволяет создать кнопку в HTML документе, что добавляет функции при использовании Visual Basic Script или Java Script. Параметр NAME позволяет задать имя данной кнопке, которое может быть использовано для какой-либо функции в скрипте. Параметр VALUE позволяет задать текст, который будет отображен на кнопке в документе.

ACCEPT — конкретизирует тип файла. Используется только совместно с пара-метром TYPE=«file». Значение задается в виде MIME.

VALUE — задает текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение вида Boolean (отмеченный или неотмеченный), таких как checkbox или radio, будет возвращено значение, заданное в параметре VALUE.

CHECKED — указывает, что поля типов checkbox и/или radio (см. выше параметр TYPE) активизированы.

SIZE — определяет размер поля в символах. Например, чтобы определить поле с видимой шириной в 24 символа, надо указать SIZE=«24».

MAXLENGTH — определяет максимальное количество символов, которые можно ввести в текстовом поле. Оно может быть больше, чем количество символов, указанных в параметре SIZE, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено.

SRC — задает URL-адрес картинки, используемой при создании графической кнопки, инициирующей передачу данных. Используется совместно с параметром TYPE=«image».

ALIGN — определяет способ вертикального выравнивания для изображений. Используется совместно с параметром TYPE=«image». Полностью аналогичен параметру ALIGN элемента IMG. По умолчанию имеет значение bottom.

 

Пример 1:
<FORM NAME=«Form1» ACTION=«www.igf.ru/cgi-bin/banya.pl»> <INPUT TYPE=«hidden» NAME=«info» VALUE=«Запись в баню на воскресенье»> <INPUT TYPE=«radio» NAME=«sex» VALUE=«Male» CHECKED> Мужик<BR> <INPUT TYPE=«radio» NAME=«sex» VALUE=«Female»> Баба<BR> Имя:<BR> <INPUT TYPE=«text» NAME=«textfield» VALUE=«Вася Пупкин» SIZE=«30» MAXLENGTH=«60»><BR> Пароль:<BR> <INPUT TYPE=«password» WIDTH=«10» NAME=«passwd»><BR><BR> <INPUT TYPE=«submit» VALUE=«Запулить»> </FORM>

 

 


Пример 2:
Хочу получать следующие издания:<br> <FORM NAME=«Form2» ACTION=«www.igf.ru/cgi-bin/magazines.pl»> <INPUT TYPE=«checkbox» NAME=«m1»>Страшная газета<br> <INPUT TYPE=«checkbox» NAME=«m2»>6 соток<BR> <INPUT TYPE=«checkbox» NAME=«m3» CHECKED>Мурзилка<BR> <INPUT type=«image» src=«img/button.gif» WIDTH=«60» HEIGHT=«30»> </FORM>

 

 

KBD

(HTML 2.0) — Keyboard
Предназначен для отображения текста, который пользователь должен набрать на клавиатуре (например, при заполнении формы, введении пароля и т.п.). Как правило текст, заключенный между начальным и конечным тэгами, выделяется жирным моноширинным шрифтом.

 

Пример:
Чтобы войти в систему наберите <KBD>«GUEST»</KBD> заглавными буквами.

 

 

LI

(HTML 2.0) — List Item
Создает пункт в списке. Располагается внутри элементов OL или UL.

 

Параметры:

VALUE — изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.

 

Пример:
<OL TYPE=«A» START=«2»> <LI> Пункт, озаглавленный буквой B. <LI VALUE=«6»> Пункт, озаглавленный буквой F. <LI> Пункт, озаглавленный буквой G. </OL>

 

 

LINK

(HTML 2.0) — Link
Элемент LINK описывает взаимосвязь документа с другими документами на сайте, указывая его место в иерархической структуре сайта. Элемент не имеет конечного тэга. В заголовке может содержаться несколько элементов LINK.

 

Параметры:

HREF — определяет URL объекта.

REL — определяет тип взаимосвязи текущего документа с объектом, определенным параметром HREF. Возможные значения:

stylesheet — указывает на файл, содержащий таблицу стилей (CSS) для текущего документа. Браузер загрузит css-файл с указанного в параметре HREF адреса и применит его к текущему документу (см. также элемент STYLE)
home — указывает на заглавную страницу вашего сайта
toc, contents — указывают на файл, содержащий оглавление данного документа.
index — указывает на файл, содержащий информацию для индексного поиска по текущему документу.
glossary — указывает на файл, содержащий перечень терминов, относящихся к текущему документу.
copyright — указывает на страницу сайта, в которой говорится о его создателях, авторских правах и т.п.
up, parent — указывает на «родительскую» страницу (документ, стоящий на ступеньку выше в иерархической структуре вашего сайта).
child — указывает на «дочернюю» страницу (документ, стоящий на ступеньку ниже в иерархической структуре вашего сайта).
next — указывает на следующую страницу в последовательности документов (напр. следующую страницу электронного каталога, документации или словаря).
previous — указывает на предыдущую страницу в последовательности документов.
last, end — указывает на последнюю страницу в последовательности документов.
first — указывает на первую страницу в последовательности документов.
help — указывает на страницу с подсказкой (напр. по навигации по вашему сайту).

TYPE — определяет MIME-тип для объекта, указанного в параметре HREF.

 

Пример 1:
<HEAD> <TITLE>Элемент DIV</TITLE> <LINK REL=«HOME» TITLE=«HTML-справочник» HREF=«index.html»> <LINK REL=«UP» TITLE=«Текстовые блоки» HREF=«textblocks.html»> <LINK REL=«PREVIOUS» TITLE=«Элемент P» HREF=«p.html»> <LINK REL=«NEXT» TITLE=«Элемент ADDRESS» HREF=«address.html»> </HEAD>

 

 

Пример 2:
<HEAD> <TITLE>Полдневье</TITLE> <LINK REL=«stylesheet» TYPE=«text/css» HREF=«deco1.css»> </HEAD>

 

 

Примечания:

Элемент LINK, к сожалению, используется web-мастерами довольно редко, чаще всего только для внедрения CSS из отдельного файла. Почти все браузеры игнорируют информацию о положении документа в структуре сайта — эта информация интересна только индексирующим роботам поисковых систем.

 

Списки

Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера.


Элементы:

UL Создает неупорядоченный список
OL Создает упорядоченный список
LI Создает пункт меню внутри элементов OL или UL
MENU, DIR Создает неупорядоченный список, подобный UL
DL Открывает и закрывает список определений
DT Создает термин в списке определений внутри элемента DL
DD Cоздает определение термина внутри элемента DL

 

 

MAP

(HTML 3.2) — Map
Создает новую навигационную карту. Между начальным и конечным тэгами содержит один или несколько элементов AREA, определяющих навигационные области карты.

 

Параметры:

NAME — единственный и обязательный параметр. Определяет имя навигационной карты, уникальное для данного документа. Используется для вызова карты с помощью параметра USEMAP элемента IMG. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр.


Пример:
<!-- Создаем карту Map1: --> <MAP NAME=«Map1»><!-- Задаем области --> <AREA HREF="...> <AREA HREF="...>… </MAP><!-- Карта готова -->

 

 

META

(HTML 2.0) — Meta
Элемент МЕТА используется для техописания документа, которое представляет собой метаданные в виде пары «имя-значение». С помощью этого элемента в заголовок документа внедряется дополнительная полезная информация, невидимая для пользователя, но порой просто незаменимая для правильной индексации вашей страницы роботами поисковых серверов. Элемент не имеет конечного тэга.

 

Параметры:

NAME — определяет имя мета-записи. Существует множество предопределенных имен, некоторые из которых вы можете увидеть в указанном ниже примере.

HTTP-EQUIV — определяет имя мета-записи. Практически аналогичен параметру NAME, но используется лишь в случае необходимости передачи дополнительной информации в HTTP-заголовке.

CONTENT — присваивает значение мета-записи, определенной в параметре NAME (или HTTP-EQUIV).

 

Пример:
<HEAD>… <META HTTP-EQUIV=«Expires» CONTENT=«Sat, 26 Jun 1999 17:38:15 GMT»> <META NAME=«GENERATOR» CONTENT=«Владимир Городулин»> <META NAME=«Publisher-Email» CONTENT=«green@igf.ru»> <META NAME=«Publisher-URL» CONTENT=«Idea GraFix — www.igf.ru/»> <META NAME=«Keywords» CONTENT=«OpenGL,3D,graphics,3Dfx,Permedia,Diamond, графика»> <META NAME=«Description» CONTENT=«Российский сайт, полностью посвященный 3D-графике, ее разработке и использованию.»> </HEAD>

 


================================

Таблица MIME-типов

ПРИЛОЖЕНИЕ 3. Таблица MIME-типов

 

еще рефераты
Еще работы по информатике