Теги HTML

2020-06-032021-03-09zzyxelСтудИзба

6.2. Теги HTML

Рассказ о тегах языка HTML поведем на примере создания некоторой Web-страницы. Пусть перед нами стоит задача сделать страницу, посвященную некоторой личности (например, самому читателю), тогда такая Web-страница будет называться ``домашней'' (homepage). Сейчас будут рассмотрены теги языка, а применение их на странице будет оставлено Читателю в качестве упражнения.

6.2.1 Заглавные теги

Начиная писать HTML-документ, имеет смысл идентифицировать его как таковой. Такая идентификация достигается путем вставления в самое начало документа тегов <!DOCTYPE HTML PUBLIC ``-//W3C//DTD HTML 3.2//EN''> и <HTML> (соответственно, в конец документа, закрывающего тега </HTML>; никогда не забывайте закрывать скобки!). Тег DOCTYPE является тегом языка SGML и объявляет, что документ будет описан в соответствии со спецификацией HTML 3.2. Тег HTML указывает на начало документа. Теперь пора подумать об информационном наполнении. Начнем, естественно, с заголовка. Заголовок HTML-файла находится в обязательной секции <HEAD>, которая должна находиться в самом начале, то есть сразу после тега <HTML>. Оформляется заголовок с помощью тега <TITLE>. Назовем наш документ ``The first homepage''. Ниже приведен листинг получившегося HTML-документа:

<HTML>

<HEAD>

<TITLE>The first homepage</TITLE>

</HEAD>

</HTML>

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

FREE

Разработка Web-сайта на основе HTML с использованием JavaScript

Информатика

FREE

Лабораторные работы по HTML

Информатика

FREE

Разработка сайта "Интернет-магазин средств связи" средствами веб-программирования PHP, HTML 4.01, CSS, JavaScript

Информатика

FREE

Язык HTML в программировании

Информатика

FREE

Создание HTML-таблиц. Фреймы и формы

Информатика

FREE

Lecture 6 CSS (Программирование на HTML/CSS/JavaScript (Веб-разработка))

Информатика

Попробуем просмотреть этот файл с помощью какой-нибудь программы просмотра, например, Navigator фирмы Netscape Communications Corp. После загрузки экран программы остался пустым. ``А где же заголовок?'',- спросит возмущенный читатель. Присмотритесь повнимательней к ЗАГОЛОВКУ ОКНА программы просмотра в оконной системе и убедитесь, что заголовок отображен именно там. Тег <TITLE> позволяет задавать название для всего документа. Это название будет появляться в заголовке окна программы просмотра, а также будет появляться в списке закладок (bookmarks, shortcuts в различных терминологиях) при создании таковых.

Другими элементами секции <HEAD>...</HEAD> являются:

<BASE параметры> - тег для указания URL документа. Тег имеет такие параметры:

HREF - указывает базовый URL для документа. Замечание: URL должен быть указан в полной форме.

TARGET - указывает окно для отображения документов, на которые ссылается данный документ.

<STYLE> - тег, зарезервированный для использования в будущем для так называемых ``стилей'' (stylesheets). Точный синтаксис тега пока недокументирован.

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

HTTP-EQUIV=``refresh'' - указывает программе просмотра, что нужно перепрыгнуть на страничку, указанную в параметре CONTENT по прошествии указанного там же промежутка времени.

CONTENT=``number; url=URL'' - задает временной интервал number и URL для команды HTTP-EQUIV=``refresh''.

NAME=``description'' или NAME=``keywords'' - указывает серверу, как интерпретировать параметр CONTENT - как описание документа или как список ключевых слов.

CONTENT=``text или список значений'' - это не опечатка. У параметра CONTENT два смысла: один для команды HTTP-EQUIV=``refresh'', другой для команды NAME. В последнем случае значение параметра определяет либо описание документа (если параметр NAME=``description''), либо список разделенных запятыми ключевых слов (если параметр NAME=``keywords'').

Теперь перейдем к оформлению содержимого документа. В терминах HTML содержимое документа называется его ТЕЛОМ, или по-английски - BODY. Именно так и называется тег, в поле действия которого находится все содержимое (то есть, оно заключено между внутри тега <BODY>...</BODY>). Тег <BODY>...</BODY> может содержать дополнительные параметры, позволяющие изменить цвета, используемые в документе или назначить фоновую картинку:

BGCOLOR - определяет цвет фона документа. Цвет может быть задан как RGB-триплет (например, BGCOLOR= "#FFFFFF"--белый цвет), или быть одним из предопределенных символьных имен: aquablackbluefuchsia

gray green lome maroon

navy olive purple red

silver teal white yellow

BACKGROUND - позволяет задать фоновую картинку для документа. Картинка будет размножена (tiled) и покроет всю видимую площадь области отображения окна программы просмотра.

TEXT - задает цвет текста документа. Цвет задается так же как и для параметра BGCOLOR.

LINK - задает цвет для текста и рамок изображений в активных зонах документа, содержащих ссылки (anchors).

VLINK - (Visited LINKs color) задает цвет для ранее выбранных ссылок.

ALINK - (Active LINKs color) задает цвет для ссылок в момент выбора.

6.2.2 Форматирующие теги

Если теперь набрать внутри тела документа несколько строк текста, а потом просмотреть его в браузере (мы будем использовать этот англоязычный термин вместо длинного ``программа просмотра''), то в окне появится текст, написанный простым мелким шрифтом, причем имеющиеся в исходном тексте переводы строк не сохранятся. Браузеры сами ``заливают'' текст на страницу, исходя при этом из доступной ширины окна. Для того чтобы вставить ``насильный'' перевод строки, необходимо воспользоваться тегом <BR> . При отображении браузер переведет строку на месте появления этого тега.
ВНИМАНИЕ! ТЕГ <BR> ИСПОЛЬЗУЕТСЯ БЕЗ ЗАКРЫВАЮЩЕГО ЭЛЕМЕНТА </BR>. В HTML есть еще несколько тегов, обладающих подобным свойством. Их обычно называют пустыми, так как они не содержат ``внутреннего'' наполнения. Если вам необходимо сделать так, чтобы в определенном месте текст НЕ МОГ быть разорван, напишите в этом месте тег <NOBR>

Для разбивки текста на параграфы используется тег
<P параметры>

Точнее, параграф помещается внутрь тега <P>...</P>, но так как вложенных параграфов не бывает, можно пропускать закрывающий тег перед любым другим тегом, вызывающим вертикальный разрыв в тексте (такие теги мы в дальнейшем будем называть блочными).

Тег <P> имеет один параметр ALIGN, указывающий на способ выравнивания текста внутри параграфа: текст может быть выровнен по правому (RIGHT), левому (LEFT) краям или отцентрирован (CENTER). Если параметр опущен, текст выравнивается по левому краю.

Чтобы отцентрировать параграф можно также пользоваться тегом
<CENTER>...</CENTER>

Еще одним способом разделения текста на части можно назвать горизонтальную линию. Линия является элементом языка HTML и вставляется в текст посредством тега

<HR параметры>, где параметры могут быть следующими:

WIDTH - задает ширину линии. Единицей измерения в HTML считается точка устройства вывода, то есть, указав в качестве параметра тегу <HR> WIDTH=100, вы создадите линию шириной 100 точек. Очевидно, что такой способ не очень удобен, так как документ может быть отображен на устройствах с различной разрешающей способностью (количеством точек по горизонтали и по вертикали) по-разному. По этой причине в HTML существует возможность задавать ОТНОСИТЕЛЬНЫЕ размеры элементов, то есть процент от общей ширины области отображения (окна браузера или листа бумаги). Пример: указав в качестве параметра тегу <HR> WIDTH=50%, вы получите линию в половину области отображения документа.

SIZE - задает толщину линии.

NOSHADE - если этот параметр задан, линия не будет иметь тени.

6.2.3 Комментарии

Как и во всяком языке программирования, в HTML есть способ закомментировать часть текста так, чтобы она не обрабатывалась программами просмотра. Комментарии заключаются между последовательностями < ! - - и - - >. Пример комментария:

6.2.4 Заголовки

Если посмотреть на получившуюся к этому моменту страницу, то она покажется однотонной и малопривлекательной. С первого взгляда даже непонятно, о чем она (если не смотреть на заголовок окна). Странице не хватает ``настоящего'' заголовка, то есть, заголовка в теле самого документа. HTML различает шесть различных видов заголовков. Для их создания используются теги <H1>...</H1>,...,<H6>...</H6>. Название тегов происходит от английского слова Heading (то есть, заголовок) что определяет их использование. Размер 1 соответствует самому крупному шрифту, размер 6 самому мелкому. Итак, озаглавим нашу страницу, напишем перед основным текстом строчку

<H1>Welcome to my homepage!</H1>

Теперь просмотрим нашу страницу в браузере. Теперь страница смотрится гораздо лучше чем раньше. Теги <Hn> являются блочными: в месте их применения происходит разрыв абзацев.

6.2.5 Шрифты

Другими средствами шрифтового оформления текста являются выделения курсивом и жирным шрифтом. Таким способом очень удобно выделять отдельные слова в тексте, а также, создавать заголовки. Например, очень удобно заголовки первого и второго уровней оформлять с помощью тегов <Hn>, а заголовки третьего уровня выделить жирным шрифтом. Выделение курсивом осуществляется с помощью тега <I> (от слова Italic), а жирным шрифтом -- с помощью тега <B> (от слова Bold).

В HTML есть также понятие emphasis - обобщенное выделение. Оформляется оно с помощью тега <EM>...</EM>. Такое выделение - средство описания логической структуры документа. Обычно выделенный таким способом текст отображается курсивом.

Другим средством логического выделения можно считать тег
<STRONG>...</STRONG>
Он используется для усиления участков текста. Содержимое тега обычно отображается жирным шрифтом.

Изменить размеры и цвет шрифтов можно с помощью тега
<FONT параметры>...</FONT>

Параметры могут быть следующими:

SIZE=``value или value'' - задает абсолютный или относительный размер шрифта. Относительный размер задается по отношению к базовому размеру (см. далее). Диапазон принимаемых значений -- от одного до семи.

COLOR - указывает цвет для текста.

FACE - расширение Microsoft Internet Explorer и Netscape Navigator. Позволяет задать гарнитуру (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста. Конечный результат зависит от количества и разнообразия шрифтов, установленных в системе. Пример:

Пример выделения текста другой гарнитурой.

</FONT>

Базовый размер шрифта для всего документа можно задать с помощью тега <BASEFONT параметры>. Параметр всего один:

SIZE - задает размер шрифта.

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

<BLINK>...</BLINK>
Пользоваться этим тегом надо с некоторой осторожностью, так как не всегда приятно наблюдать мигающие объекты.

6.2.6 Списки

Списки в HTML бывают трех типов: ненумерованные, нумерованные и так называемые списки терминов. Ненумерованный список оформляется с помощью блока

<UL>
<LI> элемент

<LI> элемент

...
</UL>
Список будет отображен примерно так:

· Элемент 1

· Элемент 2

· ....

Нумерованный список отличается от ненумерованного тем, что около пунктов вместо жирных точек вставляются порядковые номера пунктов. Оформляется он в виде блока

<OL>
<LI> элемент

<LI> элемент

...
</OL>
Отобразится он в таком виде:

1. Элемент 1

2. Элемент 2

3. ....

Третим видом списка является список терминов. Он очень удобен для оформления всевозможных глоссариев. Оформить такой список можно с помощью блока

<DL>
<DT>Термин1 <DD>Описание1

<DT>Термин2 <DD>Описание2

</DL>
Вид у полученного списка будет примерно следующий:

Термин1
Описание1
Термин2
Описание2
...

6.2.7 Цитаты и преформатированный текст

Иногда возникает ситуация, когда необходимо вставить в документ цитату, исходный текст программы или просто текстовый документ, где формат имеет значение и нежелательно, чтобы Web-браузер сам пытался вставлять переводы строк там, где он хочет. Язык HTML имеет для возможности для всех эти случаев.

Цитаты в HTML оформляются с помощью тега
<BLACKQUOTE> ... </BLACKQUOTE>

Браузер выделит цитату каким-либо способом, например шрифтом и/или вставит горизонтальные отступы справа и слева.

Чтобы вставить в документ исходный текст можно воспользоваться тегом <CODE> ... </CODE>

Текст будет выделен шрифтом фиксированной ширины.

Случай, когда в документе необходимо присутствие текста с фиксированным форматом особенно распространен. Часто такая возможность применяется, например, при включении в текст содержимого электронных писем или статей из сети Usenet. Оформляется все это с помощью тега
<PRE>
текст1 ...

...
текстN </PRE>

При этом отображен он будет, по возможности, примерно так:

текст1

...

текстN

6.2.8 Адреса

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

<ADDRESS> ... </ADDRESS>
Браузеры обычно выделяют его курсивом, то есть строка <ADDRESS> ул. Пирогова, д. 2 </ADDRESS> будет отображена как

ул. Пирогова, д. 2.

6.2.9 Гипертекстовые ссылки

Одной из самых мощных возможностей WWW является возможность организации гипертекстовых связей между документами. Прежде чем описывать средства языка HTML для организации таких связей, следует рассказать об идентификации ресурсов в Internet. Объемы информации в Internet огромны, и существует множество способов доступа к ним. Для указания местоположения отдельного ресурса используется запись под названием URL (Uniform Resource Locator). Она описывает способ доступа к ресурсу и его местоположение. URL имеет вид:

метод://[имя-пользователя@][хост][:порт][имя-ресурса], где

метод идентифицирует метод обращения к ресурсу,

имя-пользователя указывает на учетное имя пользователя в системе, обычно предполагается анонимный доступ.

хост указывает сетевое имя (или сетевой адрес) хоста, на котором содержится ресурс.

порт: номер порта для доступа к сервису.

имя-ресурса идентифицирует ресурс на хосте и зависит от метода доступа.

Существуют идентификаторы способов доступа к ресурсам для большинства сервисов Internet. Обозначения таковы:

http - для доступа по протоколу HTTP, используемому в WWW.

ftp - для доступа по протоколу FTP.

telnet - для доступа по протоколу telnet, эмуляция терминала.

gopher - для доступа к Gopher-серверам.

wais - для доступа к WAIS (Wide Area Information System).

news - для доступа к новостям Usenet.

file - для доступа к локальным файлам.

Чтобы оформить какой-либо элемент документа в качестве гипертекстовой ссылки, достаточно лишь заключить его внутрь тега <A> (anchor). Полный синтаксис тега таков:

....
</A>
где параметры могут быть следующими:

HREF - обязательный параметр, определяет или URL или файл, на который мы ссылаемся. Если мы ссылаемся на файл, то поле HREF содержит имя файла в файловой системе Web-сервера.

NAME - если этот параметр указан, то ссылка никуда не ссылается. Неочевидно, но в этом случае тег <A> указывает именованную метку в документе, на которую потом можно будет сослаться используя символ # в параметре HREF.

target - параметр, указывающий имя окна или рамки в которой будет отображен документ. Если окна или рамки с таким именем не существует, будет открыто новое окно.

6.2.10 Верстка таблиц

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

Создается таблица с помощью конструкции

<CAPTION>Заголовок</CAPTION>
<TR параметры>

...
</TD>
.... </TR>

</TABLE>

Тег TABLE начинает описание таблицы и может иметь следующие параметры:

BORDER - определяет толщину рамки таблицы. Если указано нулевое значение, то рамка не отображается. Если этот параметр не указан, его значение считается нулевым (рамка не отображается).

WIDTH, HEIGHT - указывает размеры таблицы, если они должны быть жестко заданы.

ALIGN - определяет, как должна быть выровнена таблица: справа (RIGHT), слева (LEFT) или в центре (CENTER) страницы.

CELLSPACING - число точек между отдельными ячейками в таблице.

CELLPADDING - число точек между рамкой и содержимым ячейки.

С помощью тега <TR параметры>...</TR> оформляются строки таблиц. Он может иметь следующие параметры:

ALIGN - используется для задания способа горизонтального форматирования данных внутри ячеек: они могут прижиматься к правому (RIGHT), левому (LEFT) краям или центрироваться (CENTER).

VALIGN - используется для задания способа вертикального форматирования данных внутри ячеек: они могут прижиматься к верхнему (TOP), нижнему (BOTTOM) краям, центрироваться (MIDDLE) или иметь общую базовую линию (BASELINE).

Конкретные ячейки задаются с помощью тега <TD параметры>...</TD>, где параметры могут быть следующими:

WIDTH - задает ширину ячейки.

COLSPAN - определяет, сколько колонок таблицы ячейка будет перекрывать.

ROWSPAN - определяет, сколько строк таблицы ячейка будет перекрывать.

NOWRAP - если этот параметр указан, содержимое ячеек не будет переноситься, чтобы влезать в ширину ячейки.

BGCOLOR - параметр, поддерживаемый современными браузерами: указывает цвет фона ячейки в виде RGB-триплета или символьного имени.

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

Если нужно задать заголовок ВСЕЙ таблицы, используйте тег <CAPTION параметры>...</CAPTION>. Он должен быть внутри тега <TABLE>, но вне описания ячеек. Тег имеет один параметр:

ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

Пример:

<TR>

</TR>

<TR>

</TR>

<TR>

</TR>

</TABLE>

6.2.11 Картрированные изображения

Очень мощным средством организации гипертекстовых ссылок является так называемые ``картрированые изображения'' (imagemaps). Они представляют собой изображения с чувствительными областями, то есть, выделение различных частей изображения указательным устройством приводит к движению по гипертексту в различных ``направлениях''.

Картрированные изображения бывают двух типов: обрабатываемые на сервере (server-side) или на клиенте (client-side).

Для создания карт на стороне клиента используется тег HTML под названием <MAP>. Синтаксис тега таков:

...
<AREA параметры>

</MAP>
где параметры тега <AREA> могут быть такими:

SHAPE - определяет форму активной области для карты. Может принимать значения RECT, CIRCLE, POLY, DEFAULT, соответствующие областям прямоугольной, круглой, многоугольной и области по умолчанию соответственно. Все типы областей, кроме DEFAULT, требуют указания координат в атрибуте COORDS.

COORDS - определяет координаты областей. В зависимости от типа области может иметь вид: для прямоугольной--значения координат верхнего левого и правого нижнего углов, (``x1,y1,x2,y2''); для круговой--координаты центра и радиус (``x,y,r''); для многоугольной--список координат вершин (``x1,y1,x2,y2,x3,y3,...'');

HREF - определяет URL, на который ссылается данная область.

NOREF - указывает, что область ``мертва'', то есть за ней не скрывается ссылка.

Чтобы использовать локальную карту на изображении в параметре USEMAP тега <IMG> необходимо указать имя карты. Например:

<AREA SHAPE="RECT" COORDS="420,220,520,260" HREF=\

"http://www.some.com/rect/">

<AREA SHAPE="CIRCLE" COORDS="320,150,30" HREF=\

"http://www.some.com/circle">

<AREA SHAPE="POLY" COORDS="150,450,300,450,225,240" \

HREF="http://www.some.com/poly">

</MAP>

......

<IMG SRC="picture.gif" ALT="Imagemap" BORDER="0" WIDTH="640" \

HEIGHT="480" USEMAP="#mymap">

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

При использовании различных Web-серверов формат описания карты на сервере может варьироваться. Два наиболее распространенных формата произошли от HTTP-серверов NCSA и CERN. Приведем пример использования карты с сервером NCSA httpd.

На стороне сервера, файл (например)

/usr/local/etc/httpd/conf/imagemap.conf:

# This is a map for NCSA server

test_map : /home/joe/public_html/maps/test.map

Использовать эту карту можно примерно таким образом:

<IMG SRC="test_img.gif" ALT="Server-side imagemap" WIDTH="320"

HEIGHT=200 ISMAP></A>

Ключевым в данном примере является слово ISMAP, которое указывает браузеру, что при активации изображения необходимо послать серверу информацию о координатах курсора указательного устройства относительно изображения, после чего ждать от сервера ответа в виде URL, на который браузер должен ``перейти''.

Видно, что для реализации карты, обрабатываемой сервером, требуется больше шагов, но иногда без карт такого рода просто не обойтись: например, когда требуется ТОЧНО знать координаты внутри изображения (скажем, когда обрабатывается какая-либо шкала).

Для создания карт существует множество программ для различных OS, например ImageMap компании Boutell.Com. Эта программа существует в версиях для MS Windows и для Linux.

6.2.12 Специальные символы

Некоторые общеупотребимые символы не имеют своих мест на клавиатуре, например значок ©. Другие же трактуются браузерами как командные последовательности, как, например, угловые скобки, в которые заключаются теги языка HTML. Очевидно, должен быть способ набора таких символов в текст. В HTML существует набор макропоследовательностей, которые превращаются браузерами в соответствующие им ``непечатные'' символы. Очевидно, что не во всех шрифтах есть полный набор символов, и браузер не во всех ситуациях будет способен их корректно отобразить. Но для полного описания документа все особые символы должны быть правильно закодированы. Приведем список специальных символов и соответствующие им макрокоманды языка.

Table 1: Специальные символы

Амперсанд

Вам также может быть полезна лекция "Требования к газовому оборудованию".

Левая угловая скобка

Правая угловая скобка

Поделитесь ссылкой:

Популярные услуги

Теги HTML

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

Рекомендуемые лекции