Значения флагов разметки документа

Флаги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и рессурсами Интернет.

Основные флаги разметки

< HEAD> и < /HEAD>. Между этими флагами располагается информация о документе.

< TITLE> и < /TITLE>. В эих флагах заключается название странички, которое будет выведено в рамке окна программы просмотра.

< BODY> и < /BODY>. " Тело" документа (текст, графика и т.д.) располагается между этими двумя флагами.

Параметры флага < BODY>:

BGCOLOR - цвет фона (< BODY BGCOLOR =" #FFFFFF" >)

BACKGROUND - " обои" или бэкграунд

TEXT - цвет текста

LINK - цвет гипертекстовой связи (ссылки)

VLINK - цвет ссылки, уже посещенной в прошлом

ALINK - цвет активной сылки Флаги, служащие для форматирования текста

< P> и < /P> Флаги, служащие для выделения абзадцев. Новый абзац чсегда отделяется от предыдущего пустой строкой.

< BR> Флаг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.

< HR> Флаг, служащий для логического разделения текста горизонтальной линией.

< PRE> и < /PRE> Между этими флагами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа " курьер".

Параметры выравнивания

Используются в < P> и < H*>

ALIGN=LEFT - выравнивание по левому полю

ALIGN=RIGHT - выравнивание по правому полю

ALIGN=CENTER - выравнивание по центру

Флаги выравнивания

< LEFT> и < /LEFT> - выравнивание по левому полю

< RIGHT> и < /RIGHT> - выравнивание по правому полю

< CENTER> и < /CENTER> - выравнивание по центру

Заголовки, служащие для выделения логических частей текста

< H1> и < /H1> Заголовок первого уровня.

< H2> и < /H2> Заголовок второго уровня.

< H3> и < /H3> Заголовок третьего уровня.

< H4> и < /H4> Заголовок четвертого уровня.

< H5> и < /H5> Заголовок пятого уровня.

< H6> и < /H6> Заголовок шестого уровня.

Флаги для выделения текста и шрифта

< B> и < /B> Флаги для выделения текста (слов, букв) жирным шрифтом.

< I> и < /I> Флаги для выделения текста (слов, букв) курсивным шрифтом, типа Italic.

< U> и < /U> Текст, расположенный между двумя этими флагами, будет подчеркнут.

< BLINK> и < /BLINK> Текст, расположенный между двумя этими флагами, будет мигать.

< FONT SIZE=+n> и < /FONT>

< FONT SIZE=-n> и < /FONT> Флаги для изменения размера шрифта.

< FONT COLOR=" #0000FF> и < /FONT> Флаги для изменения цвета шрифта.

Флаги для формирования списков

< OL> и < /OL> Флаги, показывающие начало и конец нумерованного списка

< UL> и < /UL> Флаги, показывающие начало и конец маркированного списка.

< LI> Элемент списка

< DL> и < /DL> Флаги, показывающие начало и конец глоссария.

< DT> Термин глоссария, располагается без отступа от левого поля страницы.

< DD> Описание термина, располагается с отступом от левого поля страницы.

Флаги-команды для вставки в текст объектов нетекстовой информации

< IMG SRC =" file.gif" > или < IMG SRC =" file.jpg" > - команда для вставки графического изображения

< IMG SRC =" file.wav" > - команда для вставки звукового фрагмента

< IMG SRC =" file.avi" > - команда для вставки видео фрагмента

Параметры графического изображения

WIDHT - ширина картинки в пикселях

HEIGHT- высота картинки в пикселях

ALIGN - выравнивание (ALIGN=LEFT - выравнивание по левому полю, ALIGN=RIGHT - по правому полю, ALIGN=TOP - по верхней границе, ALIGN=BOTTOM - по нижней границе, ALIGN=MIDDLE или CENTER - по центру)

HSPACE - горизонтальный отступ от графического изображения

VSPACE - вертикальный отступ

ALT - альтернативный текст, служит для обозначения изображения

Команды, служащие для гиперсвязи с другими HTML-документами и рессурсами Интернет

< A HREF=" fail.htm" > и < /A> или < A HREF=" https://www.ru" > и < /A> - гиперсвязи

< ADDRESS> < A HREF=mailto: person@firm.ru> person@firm.ru< /ADDRESS> - гиперсвязь с адресом электронной почты

Таблицы

Таблица - сетка для показа данных в строках и столбцах, а также средство для форматирования текста

< TABLE> и < /TABLE> Флаги для вставки таблицы в HTML документ

Параметры флага < TABLE>

BGCOLOR - цвет фона

BORDER - ширина бордюра

WIDHT - ширина таблицы

Флаги разметки таблицы

< CAPTION> и < /CAPTION> - название таблицы, имеет параметр ALIGN=TOP - выравнивание над таблицей и ALIGN=BOTTOM - под таблицей.

< TR> и < /TR> Строчка таблицы. Может иметь параметры BGCOLOR - цвет фона внутри строки; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри строки; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание внутри строки таблицы.

< TD> и < /TD> Столбец таблицы. Может иметь параметры BGCOLOR - цвет фона под столбцом; ALIGN=LEFT, RIGHT, CENTER - выравнивание внутри столбца; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN растягивание клетки на несколько столбцов, ROWSPAN - растягивание клетки на несколько строк.

< TH> и < /TH> Заголовок столбца. Может иметь параметры BGCOLOR - цвет фона под названием; ALIGN=LEFT, RIGHT, CENTER - выравнивание; VALIGN=TOP, BOTTOM, MIDDLE - вертикальное выравнивание; COLSPAN, ROWSPAN - растягивание клетки на несколько столбцов или строк; WIDHT - ширина названия.

Рамки-фреймы

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

< FRAMESET> и < /FRAMESET> Флаги для создания рамки

Параметры флага < FRAMESET>

COLS - подразделяют экран на опредленное количество колонок (вертикальных)

ROWS - подразделяют экран на опредленное количество колонок (горизонтальных)

BORDCOLOR - цвет рамки

BORDER - ширина бордюра

FRAMEBORDER - граница рамки (FRAMEBORDER=YES - есть граница, FRAMEBORDER=NO - нет границы,

FRAMESPACING=n - ширина границы)

< FRAME> Флаг для описания рамки (< FRAME SRC=" file.htm" >).

Параметры флага < FRAME>

SCROLING - параметр для регулировки полосы прокрутки:

SCROLING=YES - полоса прокрутки будет всегда

SCROLING=NO - полосы прокрутки не будет

SCROLING=AUTO - полоса прокрутки появляется только в случае необходимости

MARGINWIDHT и MARGINHEIGHT - параметры, которые управляют отступом внутри рамок, служат для выравнивания графического изображения внутри рамки

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

A link to < A HREF=" file.htm" TARGET=" frame2" > file.htm< /A> - Связь между фреймами

TARGET - атрибут связи между фреймами. Имеет несколько значений:

_BLANK загружает содержимое страницы, заданной ссылкой, в новое пустое окно.

_SELF содержимое страницы, заданной ссылкой, в окно, которое содержит ссылку.

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

_TOP содержимое страницы, заданной ссылкой, в окно, игнорируя используемые фреймы.

Обработка браузеров, не поддерживающих фреймы:

< FRAMESET>

...Здесь располагаются фреймы

< /FRAMESET>

< NOFRAMES>

< BODY>

...Здесь располагается текст без фреймов

< BODY>

< /NOFRAMES>

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

Бегущая строка

< MARQUEE> ТЕКСТ< /MARQUEE> - Флаг, создающий бегущую строку

< MARQUEE DIRECTION=left> TEKCT< /MARQUEE> - Если бегущую строку нужно направить справа налево

< MARQUEE DIRECTION=right> TEKCT< /MARQUEE> - движение слева направо.

scroll - стандартное движение от правого края к левому

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

alternate - движение от правого края страницы к левому и обратно. Бесконечный цикл.

< MARQUEE LOOP=n BEHAVIOR=scroll> TEKCT< /MARQUEE> - Ограничение числа циклов. Значение n оператора LOOP указывает число повторений цикла.

< MARQUEE WIDHT=n> TEKCT< /MARQUEE> - указать ширину участка, занимаемого бегущей строкой, где n - ширина той части страницы, на которой расположена бегущая строка. Значение n указывается как в пикселях, так и в процентах от общей ширины видимой части страницы.

< MARQUEE scrollamount=n> TEKCT< /MARQUEE> - Регулировка движения надписи по экрану. Здесь n - число пикселей.

< MARQUEE scrolldelay=t> TEKCT< /MARQUEE> В данном случае переменная величина - время t - измеряется в миллисекундах. Метод задания скорости состоит в указании времени, спустя которое текст будет перерисован на экране заново.

< FONTSIZE=n> < MARQUEE> ТЕКСТ< /MARQUEE> < /FONT> - возможность указывать величину шрифта текста в строке.

< MARQUEE BGCOLOR=n> ТЕКСТ < /MARQUEE> - окрасить поверхность бегущей строки в какой-либо цвет, где n, как это бывало и раньше, можно указать в вид шестнадцатеричного числа либо написав его название

< MARQUEE HEIGHT=n> ТЕКСТ< /MARQUEE> - указать высоту бегущей строки, задавая величину n в пикселях

Начиная писать 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>

Попробуем просмотреть этот файл с помощью какой-нибудь программы просмотра, например, 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" -белый цвет), или быть одним из предопределенных символьных имен:

aqua black blue fuch

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) задает цвет для ссылок в момент выбора.

Шрифты

Другими средствами шрифтового оформления текста являются выделения курсивом и жирным шрифтом. Таким способом очень удобно выделять отдельные слова в тексте, а также, создавать заголовки. Например, очень удобно заголовки первого и второго уровней оформлять с помощью тегов < hn>, а заголовки третьего уровня выделить жирным шрифтом. Выделение курсивом осуществляется с помощью тега < i> (от слова italic), а жирным шрифтом -- с помощью тега < b> (от слова bold).

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

Другим средством логического выделения можно считать тег

< strong>...< /strong>

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

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

< font параметры>...< /font>

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

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

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

face - расширение microsoft internet explorer и netscape navigator. Позволяет задать гарнитуру (или список гарнитур, из имеющихся в системе шрифтов будет выбран наиболее подходящий) для текста. Конечный результат зависит от количества и разнообразия шрифтов, установленных в системе. Пример:

< font face=" arial, times roman" >

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

< /font>

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

< basefont параметры>. Параметр всего один:

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

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

< blink>...< /blink>

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

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

Одной из самых мощных возможностей 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 параметры>

....

< /a>

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

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

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

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

Организация текста внутри документа

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

Ненумерованные списки: < UL>... < /UL>

Текст, расположенный между метками < UL> и < /UL>, воспринимается как ненумерованный список. Каждый новый элемент списка следует начинать с метки < LI>. Например, чтобы создать вот такой список:

* Иван;

* Данила;

* белая кобыла

необходим вот такой HTML-текст:

< UL>

< LI> Иван;

< LI> Данила;

< LI> белая кобыла

< /UL>

Обратите внимание: у метки < LI> нет парной закрывающей метки.

Нумерованные списки: < OL>... < /OL>

Нумерованные списки устроены точно так же, как ненумерованные, только вместо символов, выделяющих новый элемент, используются цифры. Если слегка модифицировать наш предыдущий пример:

< OL>

< LI> Иван;

< LI> Данила;

< LI> белая кобыла

< /OL>

получится вот такой список:

- 1. Иван;

- 2. Данила;

- 3. белая кобыла

Списки определений: < DL>... < /DL>

Список определений несколько отличается от других видов списков. Вместо меток < LI> в списках определений используются метки < DT> (от английского definition term — определяемый термин) и < DD> (от английского definition definition — определение определения). Разберем это на примере. Допустим, у нас имеется следующий фрагмент HTML-текста:

< DL>

< DT> HTML

< DD> Термин HTML (HyperText Markup Language) означает

'язык маркировки гипертекстов'. Первую версию HTML

разработал сотрудник Европейской лаборатории физики

элементарных частиц Тим Бернерс-Ли.

< DT> HTML-документ

< DD> Текстовый файл с расширением *.html

(Unix-системы могут содержать файлы

с расширением *.htmll).

< /DL>

Этот фрагмент будет выведен на экран следующим образом:

HTML

Термин HTML (HyperText Markup Language) означает 'язык маркировки гипертекстов'. Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

HTML-документ

Текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll).

Обратите внимание: точно так же, как метки < LI>, метки < DT> и < DD> не имеют парных закрывающих меток.

Если определяемые термины достаточно коротки, можно использовать модифицированную открывающую метку < DL COMPACT>. Например, вот такой фрагмент HTML-текста:

< DL COMPACT>

< DT> А

< DD> Первая буква алфавита

< DT> Б

< DD> Вторая буква алфавита

< DT> В

< DD> Третья буква алфавита

< /DL>

будет выведен на экран примерно так:

А

Первая буква алфавита

Б

Вторая буква алфавита

В

Третья буква алфавита

Вложенные списки

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

Вложенные списки очень удобны при подготовке разного рода планов и оглавлений.

< html>

< head>

< title> Пример 6< /title>

< /head>

< body>

< H1> HTML поддерживает несколько видов списков < /H1>

< DL>

< DT> Ненумерованные списки

< DD> Элементы ненумерованного списка выделяются специальным символом и отступом слева:

< UL>

< LI> Элемент 1

< LI> Элемент 2

< LI> Элемент 3

< /UL>

< DT> Нумерованные списки

< DD> Элементы нумерованного списка выделяются отступом слева, а также нумерацией:

< OL>

< LI> Элемент 1

< LI> Элемент 2

< LI> Элемент 3

< /OL>

< DT> Списки определений

< DD> Этот вид списков чуть сложнее, чем два предыдущих, но и выглядит более эффектно.

< P> Помните, что списки можно встраивать один в другой, но не следует закладывать слишком много уровней вложенности.

< /P>

< P> Обратите внимание, что внутри элемента списка может находиться несколько абзацев. Все абзацы при этом будут иметь одинаковое левое поле. < /P>

< /DL>

< /body>

< /html>

Форматированный текст: < PRE>... < /PRE>

В самом начале мы говорили о том, что браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.

Текст, заключенный между метками < PRE> и < /PRE> (от английского preformatted — предварительно форматированный), выводится браузером на экран как есть — со всеми пробелами, символами табуляции и конца строки. Это очень удобно при создании простых таблиц.

Текст с отступом: < BLOCKQUOTE>... < /BLOCKQUOTE>

Текст, заключенный между метками < BLOCKQUOTE> и < /BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.