Спонсор: Microsoft
Опубликован: 19.07.2010 | Доступ: свободный | Студентов: 1449 / 67 | Оценка: 4.07 / 3.43 | Длительность: 20:59:00
Лекция 2:

Язык гипертекстовой разметки HTML

< Лекция 1 || Лекция 2: 123 || Лекция 3 >

Элемент разметки 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

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

Возможные значения атрибута:

  • justify
  • left
  • right
  • center
<В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.

Атрибут Описание
SRC Указывает файл изображения и путь к нему
ALT Позволяет указать текст, который будет выводиться вместо изображения браузерами, неспособными представлять графику
АLIGN Определяет положение изображения относительно окружающего его текста
USEMAP Если щелкнуть кнопкой мыши на активной области изображения, для которого определен атрибут USEMAP, произойдет переход по ссылке на документ, заданный для этой области >
BORDER Определяет толщину рамки вокруг изображения. Если значение равно нулю, рамка отсутствует
HSPACE Задает горизонтальное расстояние между вертикальной границей страницы и изображением, а также между изображением и огибающим его текстом
VSPACE Задает вертикальное расстояние между строками текста и изображением
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 файла с фоновым изображением
< Лекция 1 || Лекция 2: 123 || Лекция 3 >
Наталья Алмаева
Наталья Алмаева
Россия
Андрей Лучицкий
Андрей Лучицкий
Россия