Язык гипертекстовой разметки HTML
Элемент разметки STYLE
Элемент разметки STYLE предназначен для размещения описателей стилей. При этом описание стиля из данного элемента разметки, если оно совпадает по имени класса и/или идентификатору подкласса со стилем, описанным во внешнем файле, заменяет описание стиля из внешнего файла. С точки зрения влияния на весь документ, описатели стилей задают правила отображения контейнеров HTML -документа для всей страницы.
В настоящее время контейнер используется только с одним атрибутом TYPE, который задает тип описателя стиля. Это может быть либо text/css, либо text/javascript. Если элемент разметки открыт открывающим тегом, то он должен завершаться закрывающим тегом. В общем виде запись элемента STYLE выглядит так:
<STYLE TYPE=тип_описания_стилей> описание стиля/стилей </STYLE>
Элемент разметки SCRIPT
Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. В принципе, SCRIPT можно использовать не только в заголовке документа, но и в его теле. В отличие от контейнера STYLE, ему не требуется дополнительный контейнер LINK для загрузки внешних файлов кодов. Это можно сделать непосредственно в самом контейнере SCRIPT:
<SCRIPT TYPE="text/javascript" SRC=script.code >
В общем виде запись контейнера выглядит следующим образом:
<SCRIPT [TYPE=тип_языка_сценариев]> JavaScript / VBScript - код </SCRIPT>
или
<SCRIPT [TYPE=тип_языка_сценариев]
[SRC=URL]>
</SCRIPT>Веб-браузерами поддерживается несколько сценарных языков: JavaScript, VBScript, JScript. По умолчанию подразумевается JavaScript.
Теги тела документа
Теги тела документа предназначены для управления отображением информации в программе интерфейса пользователя. Они описывают гипертекстовую структуру базы данных при помощи встроенных в текст контекстных гипертекстовых ссылок. Тело документа состоит из:
- иерархических контейнеров и заставок;
- заголовков (от Н1 до Н6);
- блоков (параграфы, списки, формы, таблицы, картинки и т.п.);
- горизонтальных отчеркиваний и адресов;
- текста, разбитого на области действия стилей (подчеркивание, выделение, курсив);
- математических описаний, графики и гипертекстовых ссылок.
Тело документа - контейнер BODY
Описание тегов тела документа следует начинать с тега BODY. В отличие от тега НEАD, тег BODY имеет атрибуты.
Атрибут BАСКGROUND определяет фон, на котором отображается текст документа. Если источником для фона HTML - документа является графический файл image.gif, то в открывающем теге тела BODY появляется соответствующий атрибут:
<ВОDY ВАСКGROUND="image.gif">
Следует заметить, что разные интерфейсы пользователя поддерживают различные дополнительные атрибуты для тега ВОDY.
| Атрибут | Описание |
|---|---|
| MARGINHEIGHT | определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Netscape. |
| TOPMARGIN | определяет ширину (в пикселах) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer. |
| MARGINWIDTH | определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Netscape. |
| LEFTMARGIN | определяет ширину (в пикселах) левого и правого полей документа. Работает только в браузерах Internet Explorer. |
| BACKGROUND | определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. |
| BGCOLOR | определяет цвет фона документа |
| TEXT | определяет цвет текста в документе |
| LINK | определяет цвет гиперссылок в документе |
| ALINK | определяет цвет подсветки гиперссылок в момент нажатия |
| VLINK | определяет цвет гиперссылок на документы, которые вы уже просмотрели |
Значения атрибутов BGCOLOR, TEXT, LINK, ALINK и VLINK задаются либо RGB -значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Например:
<HTML> <BODY BACKGROUND="image.jpg" BGCOLOR="black" TEXT="#FFFFFF" LINK="#FF0000" VLINK="#656565" MARGINHEIGHT="25" TOPMARGIN="25" LEFTMARGIN="45" MARGINWIDTH="45"> Текст документа. </BODY> </HTML>
Теги управления разметкой
| Теги | Описание тегов | Атрибуты | Описание атрибутов |
|---|---|---|---|
| от <Н1> до <Н6> | Заголовки. Обозначают начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1></Н1>, получается большим - это основной заголовок. Если текст окружен тегами <Н2></Н2>, то он выглядит несколько меньше (подзаголовок); текст внутри <НЗ></НЗ> еще меньше и так далее до <Н6></Н6>. | ||
| <P> | Тег <P> применяется для разделения текста на параграфы. В нем используются те же атрибуты, что и в заголовках | АLIGN |
Позволяет выравнять текст по левому или правому краю, по центру или ширине. По умолчанию текст выравнивается по левому краю. Данный атрибут применим также к графике и таблицам. Возможные значения атрибута:
|
| <ВR> | Принудительный перевод строки используется для того, чтобы нарушить стандартный порядок отображения текста. При обычном режиме интерпретации программа интерфейса пользователя отображает текст в рабочем окне, автоматически разбивая его на строки. | СLЕАR | Используется для того, чтобы остановить в указанной точке обтекание объекта текстом и затем продолжить текст в пустой области за объектом. Возможные значения атрибута: LEFT, RIGHT, АLL. |
| <NOВR> | Дает браузеру команду отображать весь текст в одной строке, не обрывая ее. Если текст, заключенный в <NОВR>, не поместится на экране, браузер добавит в нижней части окна документа горизонтальную полосу прокрутки. |
Списки в HTML
Еще одним способом структурирования текстов являются списки. В НТМL имеются следующие виды списков:
- ненумерованный список (тег <UL>);
- нумерованный список;
- список определений.
Ненумерованный список записывается в виде последовательности:
<UL> <LI>первый элемент списка <LI>второй элемент списка <LI>третий элемент списка </UL>
Можно задавать любой тип маркера в произвольном месте списка. Ниже перечислены теги с атрибутами стандартных маркеров:
- <UL TYPE=DISC> Стандартные маркеры списков первого уровня (по умолчанию).
- <UL TYPE=СIRCLE> Маркеры в виде окружностей.
- <UL TYPE=SQUARE> Квадратные маркеры.
Тег <OL> вместе с атрибутом ТYРЕ позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры:
<ОL ТYРЕ=l> Тег создает список с нумерацией в формате 1., 2., 3... <ОL ТYРЕ=А> Тег создает список с нумерацией в формате А., В., С... <OL ТYРЕ=а> Тег создает список с нумерацией в формате а., b., с... <ОL ТYРЕ=I> Тег создает список с нумерацией в формате I., II., III...
Теги списка <DL>, <DT>, <DD> используют для создания списка терминов и их определений по следующей схеме :
<DL> <DT>Термин</DT> <DD>Определение</DD> </DL>
Комментарии
Комментарии HTML начинаются с символа "<!--" и оканчиваются символом "-->". Содержимое комментариев браузер не выводит на экран.
Гипертекстовые ссылки
Для записи гипертекстовой ссылки используется тег <А>, который называют "якорем". Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде
<А НREF="http://www.example.com"> Пример гипертекстовой ссылки </А>
Значение атрибута HREF и есть адрес документа. Форма записи этого адреса задается в виде URL.
Графика в HTML
Для вставки изображения в HTML документ используется тег <IMG> с обязательным атрибутом SRC, значением которого является URL графического файла.
Пример:
<IMG SRC="myimage.gif" ALT="Картинка">
Тегом HTML, который заставляет браузер выводить изображение, является <IMG> с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.
Пример вставки изображения:
<IMG SRC="image.gif" ALT="ИЗОБРАЖЕНИЯ">
Изображения на веб-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A> , что и для текста, но между <A> и </A> вставляется тег изображения <IMG> :
Тег <IMG> имеет один обязательный атрибут SRC и несколько необязательных: ALT, ALIGN, USEMAP, HSPACE, VSPACE, BORDER, WIDTH, HEIGHT.
Средства описания таблиц в HTML
Для описания таблиц используется тег <ТАВLЕ> . Строки таблицы задаются с помощью тегов <ТR></ТR> . Внутри строки таблицы обычно размещаются ячейки с данными. Каждая ячейка, содержащая текст или изображение, должна быть окружена тегами <ТD></ТD> . Заголовки для столбцов и строк таблицы задаются с помощью тега заголовка <ТН></ТН> . Эти теги подобны <ТD></ТD> , однако текст, заключенный между тегами <ТН></ТН> , автоматически выделяется жирным шрифтом и по умолчанию располагается посередине ячейки. Тег <CAPTION> позволяет создавать заголовки таблицы.
| Атрибут | Описание |
| NOWRAP | При использовании атрибута NOWRAP с тегами <ТН> или <ТD> длина ячейки расширяется настолько, чтобы заключенный в ней текст поместился в одну строку |
| СОLSPAN | Если требуется сделать какую-нибудь ячейку шире, чем верхняя или нижняя, то можно воспользоваться атрибутом СОLSPAN, чтобы расширить ее на любое количество обычных ячеек. |
| ROWSPAN | Подобен атрибуту СОLSPAN, только он задает число строк, на которые расширяется ячейка |
| WIDТН | Можно поместить его в тег <ТАВLЕ> , чтобы задать ширину всей таблицы, или можно использовать в тегах <ТD> или <ТН> , чтобы задать ширину ячейки или группы ячеек. Ширину можно указывать в пикселах или в процентах. |
| СЕLLРАDDING | Определяет ширину пустого пространства между содержимым ячейки и ее границами |
| АLIGN, VALIGN | Теги <ТR> , <ТD> и <ТН> можно модифицировать с помощью атрибутов ALIGN и VALIGN. Атрибут АLIGN определяет выравнивание текста и графики по горизонтали. VALIGN осуществляет выравнивание текста и графики внутри ячейки по вертикали. |
| BORDER | В теге <ТАВLЕ> определяет, как будут выглядеть рамки, то есть линии, окружающие ячейки таблицы и саму таблицу |
| СЕLLSPACING | Определяет ширину промежутков между ячейками в пикселах. Если этот атрибут не указан, по умолчанию задается величина, равная двум пикселам |
| BGCOLOR | Позволяет установить цвет фона. В зависимости от того, с каким тегом он применяется, цвет фона может быть установлен для всей таблицы ( TABLE ), для строки ( TR ) или для отдельной ячейки ( TD ). Значением данного атрибута является RGB -код или стандартное название цвета |
| BACKGROUND | Задает фоновое изображение для таблиц. Применим к тегам TABLE и TD. Его значением является URL файла с фоновым изображением |