Главная | Обратная связь | Поможем написать вашу работу!

Стили форматирования в HTML

Тема 4. Создание HTML-документов

Элементы языка HTML

HTML-документы и Web-страницы

HTML-документы представляют собой файлы с расширением html. Если открыть такой документ при помощи какого-нибудь простого редактора, например, при помощи блокнота и сравнить его с тем, что видно в окне броузера, то будет обнаружено следующее: текст, который виден в окне броузера, присутствует в файле в том же виде, но без форматирования. Кроме того, в файле присутствуют фрагменты текста, заключенные в угловые скобки.

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

Тот же эффект, который получается при просмотре HTML‑документа через блокнот, можно получить в броузере Internet Explorer после выполнения цепочки команд меню: Вид / Просмотр HTML кода.

Рис. 4.1. Структура Web-страницы.

HTML‑документ может ссылаться не только на другие HTML- документы, но и на объекты другого формата. Например, он может ссылаться на графические файлы, на звуковые файлы, на видеофайлы, на программы- апплеты и просто на другие программы. Таким образом, структуру Web- страницы можно представить согласно Рис. 4.1.

Создание Web-страниц на языке HTMLосуществляется путем составления различными способами текстового файла, в котором с помощью языка разметки гипертекста - HTML (HyperText Markup Language) определяются места и формы выдачи Web-броузером информации на странице.

Web-страница – отдельный документ с гипертекстовой информацией, расположенный на сервере и доступный для пользователей сети через службу WWW. Оформляется как совокупность файлов, включающая заглавный HTML-документ и все его внутренние ссылки. Web-страницы размещаются на сервере Internet. Они должны быть доступны для просмотра и копирования по протоколу HTTP.

Структура языка HTML

HTML –язык гипертекстовой разметки - состоит из операторов (тегов), которые окружают некоторый текстовый или графический объект, определяя его расположение, форму, размеры, цвет, параметры анимации и т.д.

Современные средства разработки страниц типа Microsoft FrontPage дают возможность из готовых текстовых и графических объектов с помощью кнопок и команд меню оформить страницы, автоматически применяя нужные теги.

Однако большинство Web-мастеров используют для своей работы и редакторы, и написание текстов непосредственно на HTML, чаще всего в "Блокноте" (Notepad) из Windows.

Документ должен начинаться тегом <HTML> и заканчиваться закрывающим тегом </HTML>. Между ними должны находится теги <HEAD> открывающий и </HEAD> закрывающий с названием и заголовком,

а также <BODY> открывающий и </BODY> закрывающий с текстом страницы.

Название страницы на латинском языке ограничивается тегами <TITLE> открывающий и </TITLE> закрывающий.

Таким образом, страница имеет вид:

<HTML>

<HEAD>

<TITLE> Welcome to my home page </TITLE>

</HEAD>

<BODY> Содержимое странички </BODY>

</HTML>

В заголовке страницы между тегами <HEAD> и </HEAD> можно указывать тег <META>.

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

В HTML используется набор 8-разрядных однобайтовых символов ISO 8859/1, который также известен как Латинский алфавит № 1(Latin-1). Это набор из 256 символов, который содержит много графических элементов и символов с диакритическими знаками, необходимых для текстов на большинстве европейских языков, в том числе и для текстов на английском языке. Младшие 128 кодов символов ISO 8859/1 практически те же, что и в ASCII, и этот поднабор иногда называют International Reference Version, или ISO-646. На практике из-за ограниченного набора символов клавиатуры и в целях переносимости на другие процессоры и платформы большинство документов HTML содержат знаки только из первой половины кодовой таблицы ASCII.

Рассмотрим некоторые общие операции, необходимые для подготовки Web страниц.

Задание отображения страницы. Связано с проблемой кодовых страниц. Компьютер все "понимает" только в виде чисел. А как написать буквы? Как сопоставить буквы числам? Для этого используются кодовые страницы. Это таблица, в которой по вертикали и горизонтали записаны цифры, а в - ячейках буквы. Компьютер получает цифры, подставляет их в эту таблицу и получает буквы. Проблема заключается в том, что таких таблиц существует множество (особенно много их в России). Наиболее популярными считаются КОИ-8 и Windows-1251. Если web-страничка написана в одной кодировке, а броузер читает ее в другой, то получается полная ЕПСМДЮ (слово "ерунда" в кодировке КОИ-8).

Перед публикацией страниц в Интернете необходимо уточнить, какие кодовые страницы поддерживает тот сервер, на котором будет размещена страница. Если создана страница, например в Windows-1251, а нужно КОИ-8, то следует использовать какой-либо редактор (например, FrontPage) и сохранить страницу в нужной кодировке или использовать специальные перекодировочные программы. Для того, чтобы броузер показывал страницу именно в той кодировке, которая нужна, используется тег <META HTTP- EQUIV = "Content -type" CONTENT="text/html; charset=windows-1251"> или charset=KOI-8.

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

Для реализации первого метода используется тег <META HTTP-EQUIV="refresh" CONTENT= ”x”>, где x - количество секунд, по прошествии которых страница будет перезагружена. Этот тег должен использоваться только в заголовке страницы (между тегами <HEAD> и </HEAD>). Для реализации второго метода используется тег <META HTTP-EQUIV="refresh" CONTENT="x; url=адрес">, где x - время в секундах, по истечению которого будет загружена страница, расположенная по адресу (например, http: // www. loft.lv). Можно на странице, указанной в атрибуте url, разместить такой же тег, указывающий на другую страницу и т.д. Это проведет пользователя по всем страницам презентации.

Реклама страницы. Для этого можно использовать два тега <META> со следующими параметрами:

<META NAME="description" CONTENT="Описание странички. Это то описание, которое получает пользователь при поиске. Основная информация о страничке">;

<META NAME="keywords" CONTENT="Ключевые слова через запятую. Если они совпадут с ключевыми словами, по которым пользователь делает запрос в поисковой системе, то он найдет страницу">.

Форматирование текста

В HTML предусмотрено 6 стандартных размеров шрифта для оформления заголовков. Они устанавливаются при помощи тегов:

<H1>Заголовок стиля 1</H1>;

<H2>Заголовок стиля 2</H2>;

<H3>Заголовок стиля 3</H3>;

<H4>Заголовок стиля 3</H4>;

<H5>Заголовок стиля 3</H5>;

<H6>Заголовок стиля 6</H6>.

Пример 1.

<HTML>

<HEAD>

<TITLE>

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

</TITLE>

</HEAD>

<BODY>

Стили форматирования в HTML

<H1>Стиль заголовка первого уровня. Самый крупный и тяжёлый

</H1>

<H2>Стиль заголовка второго уровня с меньшими размерами и толщиной шрифта

</H2>

<H3>Стиль заголовка третьего уровня ещё меньше

</H3>

<H4> Стиль заголовка четвёртого уровня

</H4>

<H5> Стиль заголовка пятого уровня

</H5>

<H6> Стиль заголовка шестого уровня. Самый маленький и светлый из базовых шрифтов

</H6>

<P>Тег для выделения абзаца. Его можно использовать без завершающего тега, так как новый тег Р по смыслу означает не только начало, но и конец предыдущего абзаца. Грамотно с точки зрения языка HTML и удобно для броузера завершать абзац закрывающим тегом

</P>

</BODY>

</HTML>

Для форматирования абзаца используются теги <P> - создание нового абзаца и <Br> - код пропуска строки или большой отступ.

Для выравнивания, видоизменения и выделения текста используются теги <P> с атрибутами ALIGN. Теги <P ALIGN="right">.. </P> выполняют выравнивание по правому краю. При задании выравнивания по правому краю концы строк находятся на одном уровне, а начальные символы строк - на разных уровнях.

При задании выравнивания по левому краю с помощью тегов<P ALIGN="left">.. </P> начальные элементы строк находятся на одном уровне, а концы строк - на разных уровнях. Этот вид выравнивания часто используется при написании эпиграфов или просто для оригинальности.

Теги < P ALIGN="center">.. </P> выполняют выравнивание по центру.

Форматирование шрифта выполняют теги: <B> </B> - жирный текст; <I> </I> - курсив;<U> </U> - подчеркнутый текст.

Вид шрифта - очень важная часть дизайна Web-страниц. Он позволяет придавать тексту определенную выразительность, эмоциональность. Строгие шрифты показывают важность текста, его официальность. Рукописные шрифты придают тексту некоторую красоту, поэтичность и т.д. Существует огромное множество шрифтов, но HTML сейчас только начинает развиваться в области использования шрифтов. В классической версии языка HTML 3.0 эта проблема решена единственным образом - доступны шрифты, установленные в системе пользователя с помощью атрибута FACE= в теге FONT. Сейчас появляются новые технологии. Например, загрузка шрифтов из Интернета или встраивание шрифтов непосредственно в документ. Ещё одной новаторской идеей в этой области является использование графических литер с определенным начертанием вместо текста. После загрузки 2-3 листов, написанных таким методом, почти все буквы оказываются загруженными в кеш броузера, и открытие последующих страниц происходит очень быстро.

Для задания размера шрифта используется атрибут SIZE= в теге FONT. Можно задавать базовый размер шрифта тегом <BASEFONT SIZE=x> для использования на всей странице, а в нужных участках текста использовать атрибут SIZE= для задания размера определенного участка. По умолчанию используется тег <BASEFONT SIZE=3>. Заголовок <H1> имеет размер 6. Чтобы сделать шрифт больше, чем <H1>, можно выбрать размер шрифта, равный 7. Основное отличие тега <FONT> от <Hx> заключается в том, что он не разбивает строку. В HTML можно использовать вышеуказанный список шрифтов в теге <FONT>. Можно перечислить в этом списке несколько шрифтов, из которых броузер выберет первый, установленный в системе, и использует его для отображения текста. Например, <FONT FACE="Arial, COMIC SANS MS, Tahoma, AG_Cooper"> текст</FONT>.

Размеры символов (1,3,5,7) в тексте указываются тегами:

<FONT SIZE="1">, < FONT SIZE="3">, < FONT SIZE="5">, < FONT SIZE="7">. Поместив текст между каким-либо из этих тегов и закрывающим тегом </FONT>, получим шрифт нужного размера.

Вид шрифта в тексте:

<FONT FACE="Times New Roman">ABC</FONT>.

<FONT FACE="System">DEF</FONT>.

<FONT FACE="Arial">GHI</FONT>.

<FONT FACE="Courier">xyz</FONT>.

Для задания размера текста существуют и другие теги. Это теги <BIG> </BIG> и <SMALL> </SMALL>. Заключенный между ними текст будет соответственно больше или меньше окружающего текста.

Можно использовать все виды красок на странице, задавая цвет в атрибуте COLOR= тега <FONT>.

Цвета текста в документе задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:

<FONT COLOR="#FF0000"> Красный текст</FONT>.

< FONT COLOR ="#CF2CD4">Лиловый текст</FONT>

<FONT COLOR ="#0000FF"> Синий текст </FONT>

< FONT COLOR="#00FF00"> Зелёный текст</FONT>

<FONT COLOR="#808080"> Серый текст</FONT>

<FONT COLOR="silver"> Серебряный текст </FONT>

<FONT COLOR="green" SIZE="4"> Зелёный текст с размером шрифта 4. </FONT>

Наименования цветов приведены в Таблице 4.1.

Атрибуты тега <BODY> для задания цвета фона документа - BGCOLOR; цвета текста - TEXT; цвета ссылок - LINK; атрибутом COLOR= просмотренных ссылок – VLINK; цвета ссылок в момент нажатия на них правой кнопкой – ALINK. Цвета текста, ссылок и фона задаются в кодировке RGB - шестью шестнадцатеричными числами или именованными цветами, например:

С помощью атрибута BACKGROUND тега <BODY> можно вставить небольшие рисунки (размножаемые Web-броузером) в формате gif (файл - background.gif) или jpg (файл - background.jpg), т.е. создать графический фон:

<BODY BACKGROUND="background.gif"> - размноженный рисунок возникает на заднем плане.

Для наилучшего усвоения информации используют различные способы выделения абзацев. Тег списка <DL> (Definition List) позволяет создавать списки определений, т.е. отдельные абзацы с отступом без нумерации или маркеров. В конце определения необходимо поместить закрывающий тег </DL>. Списки состоят из двух частей: определения (DT) и описания (DD). Атрибут title показывает текст в виде всплывающей подсказки.

Таблица 4.1.

Именованные	цвета
black
Maroon
Green
Olive
Navy
Purple
Teal
Gray
Silver
Red
Lime
Yellow
Blue
Fuchsia
Aqua
White

Пример 2.

<HTML>

<BODY>

<DT>HTML

<DD>Это язык разметки гипертекста

<DT>Броузер

<DD> Это программа для просмотра гипертекста в интернете

</DL>

</BODY>

</HTML>

В результате такого форматирования получим определения следующего вида.

HTML

Это язык разметки гипертекста

Броузер

Это программа для просмотра гипертекста в интернете

Тег <BLOCKQUOTE> создает поля слева и справа от текста.

Атрибуты LEFTMARGIN=n, RIGHTMARGIN=n, TOPMARGIN=n, где n - ширина поля в пикселях, указываются в теге <BODY> для задания левого, правого и верхнего полей для всей страницы.

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

Теги <MULTICOL> и </MULTICOL> выводят текст в несколько колонок (используются только для броузера Netscape 3.0 и выше).

Они имеют следующий полный формат: <MULTICOL COLS="x" GUTTER="у"> текст </MULTICOL>, где x - количество столбцов, у - расстояние между столбцами.

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

- поместить текст между тегами <NOBR>;

- если надо оборвать строку в определенном месте, - поставить там тег <BR>;

- если надо задать места переноса текста - поставить там тег <WBR>.

Для задания отступа перед новым абзацем используется тег <TAB INDENT=n>, где n - число так называемых n-пробелов.

Пример. Установка пяти подряд расположенных пробелов между буквами А и Я с применением символа неразрушающего пробела - &nbsp:

А     Я

Для создания линий используется тег <HR> с атрибутами SIZE=, WIDTH=, ALIGN=, задающими соответственно высоты в пикселях, ширины в пикселях или в процентах от размера окна и выравнивание. Дополнительный атрибут NOSHADE создает линию без рельефности. С помощью этих атрибутов можно создавать очень разнообразные размещения текста. Например, тег <HR NOSHADE SIZE=30 WIDTH="30%" ALIGN=LEFT> создаёт толстую линию на треть страницы, расположенную слева.

Анимация текста

Бегущая строка создаётся с помощью тега <MARQUEE>, который позволяет выводить информацию в виде бегущей строки. К сожалению, он работает только в Internet Explorer. Если просмотреть этот тег в другом броузере, то будет видна статичная строчка текста. Для создания бегущей строки необходимо поместить текст между тегами <MARQUEE></MARQUEE> и он "побежит". Существует несколько атрибутов этого тега.

Атрибут ALIGN= размещает текст в верхней (TOP), средней (MIDDLE) или нижней (BOTTOM) части бегущей строки.

Атрибут BEHAVIOR= управляет движением текста. Если его нет, то текст пробегает справа налево. Если задать BEHAVIOR=SCROLL, то текст будет просто пробегать по экрану. Это значение по умолчанию. Если указать BEHAVIOR = SLIDE, то текст выползает на экран и останавливается. Если использовать параметр ALTERNATE, то текст будет сначала выползать на экран, а потом, отскакивать от боковых стенок, т.е. прыгать.

Атрибут BGCOLOR = задает цвет фона бегущей строки. Для указания цвета используются значения кода в шестнадцатеричном формате или названия цвета.

Атрибут DIRECTION = указывает направление движения текста. Налево – LEFT, направо – RIGHT.

Атрибуты HEIGHT= и WIDTH= задают соответственно толщину и ширину бегущей строки в пикселях или процентах от размера окна.

Атрибуты HSPACE= и VSPACE= задают горизонтальные и вертикальные поля вокруг бегущей строки.

Атрибут LOOP= задает количество "пробегов" текста. Если бедный текст должен бегать вечно, то не нужно использовать этот атрибут или задать LOOP=INFINITE.

Атрибут SCROLLAMOUNT= определяет скорость "пробегания". Задается числами. Число 1 даёт скорость улитки, ползущей по монитору, а при SCROLLAMOUNT=8000 скорость движения настолько велика, что ничего не возможно увидеть.

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

Мигающий текст можно создать с помощью тегов <BLINK> </BLINK>. Текст, расположенный между ними, должен мигать. Используется для выделения новой информации. Работает, к сожалению, только в броузере Netscape Navigator.

Для привлечения внимания посетителя сайта некоторые тексты можно сопровождать фоновой музыкой. Она создаётся с помощью тега <BGSOUND SRC = "имя файла в формате wav, avi, mid" LOOP=x>, где x - число повторений звукового файла. Можно написать LOOP=INFINITE, чтобы файл повторялся вечно.

Вставка рисунков

Вставка рисунка на страницу из файла в формате gif или jpg выполняется тегом <IMG> с атрибутами, перечисленными ниже.

<IMG SRC="имя файла или полного пути в Интернете" ALT="текст" ALIGN=”расположение” WIDTH=”ширина” HEIGHT =”высота” >.

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

Атрибут ALIGN указывает место расположения изображения и может принимать следующие значения: TOP - последующий текст располагается в верхней части изображения; BOTTOM - последующий текст располагается в нижней части изображения; LEFT - изображение находится в левой части листа, текст обтекает изображение справа; MIDDLE - изображение находится в центре листа, RIGHT - изображение находится в правой части листа, текст обтекает изображение слева.

Ширина задаёт ширину изображения в пикселях.

Высота задаёт высоту изображения в пикселях.

Атрибуты ALT, ALIGN, WIDTH, HEIGHT являются необязательными.

Например: <IMG SRC="links.gif" ALT="Links" WIDTH="47" HEIGHT="47">.

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

- Поместить тег <IMG SRC="/путь/имя файла"> в том месте, где должен быть графический объект.

- Добавить атрибут ALIGN=LEFT, ALIGN=RIGHT или ALIGN=CENTER.

- Добавить атрибуты: HSPACE= ширина горизонтальных полей и VSPACE= ширина вертикальных полей, отделяющих изображение от текста.

Можно создать рамку вокруг рисунка или обрамление таблицы текстом. Остановка в определенном месте обтекания текстом объекта и продолжение текста ниже объекта выполняются с помощью тегов:

<BR CLEAR=LEFT> - начиная с ближайшего пустого левого поля;

<BR CLEAR=RIGHT> - начиная с ближайшего пустого правого поля;

<BR CLEAR=ALL> - текст будет продолжен, когда и левое и правое поля будут пустыми.

Рамка вокруг изображения – задается в каком-либо теге с помощью атрибута BORDER=n, где n - ширина рамки в пикселях.

В теге <IMG> можно задать рамку вокруг изображения, если это изображение является ссылкой.

Вставка гиперссылок

Текстовые и графические ссылки могут указывать на удалённые разделы в пределах одного большого документа. Для таких ссылок необходимо создать две части: якорь и непосредственно ссылку. Якорь определяет ту точку, в которую организуется переход из места расположения ссылки. Ссылка использует имя якоря вместо имени файла. Задаётся в теге <A HREF=”#Якорь”> </A>. Перед именем якоря указывается специальный символ #.

Между открывающим и закрывающим тегами располагается текст ссылки, на котором производится щелчок для перехода по ссылке.

В месте расположения якоря ставится открывающий тег <A NAME=” Якорь”>. Между открывающим и закрывающим </A> тегами вводится текст, который будет показан на экране.

Пример 3.

<HTML>

<HEAD>

<TITLE>

Ссылки в пределах одного документа

</TITLE>

</HEAD>

<BODY>

<H1>Ссылки в пределах одного документа</H1>

<P>

<OL>

<LI><A HREF=”#Малина”>Mалина</A>

<LI><A HREF=”#Яблоко”>Яблоко</A>

<LI><A HREF=”#Арбуз”>Арбуз</A>

<P>Длинный абзац с текстом, после которого расположены пояснения к ссылочным словам

</P>

<P>

<B><A NAME=”Малина”>Малина</A>садовая</B><Br>

Это ягода. Она сочная и сладкая. Спелая малина имеет красный цвет

<P>

<B><A NAME=”Яблоко”>Яблоко</A>осеннее</B><Br>

Это фрукт. Осенние яблоки это спелые плоды. Иногда красные, иногда красно-белые, иногда бело-зелёные

<P>

<B><A NAME=”Арбуз”>Арбуз</A>бахчевой</B><Br>

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

</BODY>

</HTML>

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

Ссылка на другую страницу с именем "СatGraph", размещенную по адресу "http://www.cat.lv", будет иметь вид:

<A HREF="http://www.cat.lv">CatGraph</A>

Ссылка на графический файл "lis.gif", размещенный по адресу "http://www.lis.lv/~cat5", будет иметь вид:

Ссылка на адрес электронной почты "david@lis.lv" будет иметь вид:

<A HREF="mailto:david@lis.lv">Напишите мне письмо</A>

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

<A HREF="имя файла#имя метки"> Название ссылки </A>. Например, <A HREF="index.htm#имя метки">Название ссылки</A>

Рисунки -гиперссылки

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

Множественные рисунки-гиперссылки реализуются как активные изображения.

Активное изображение - это изображение, на котором находятся несколько активных областей (hot spots), каждая из которых ссылается на определенную Web-страницу. Активные изображения представляют собой отличный метод создания красивых и удобных меню. Различают два типа активных изображений: активные изображения, работающие на сервере, и активные изображения, работающие на стороне клиента.

Первый тип для своей работы использует cgi-сценарий. Это программа, работающая на сервере. Такие программы выполняют многие процессы на Web-страницах. Например, большинство гостевых книг работают на основе таких программ. Пишутся cgi-скрипты чаще всего на языке Perl. Эти скрипты перестают использоваться, т.к. в настоящее время существуют более совершенные Java-скрипты и другие технологии. Проблема cgi-скриптов заключается в том, что они выполняются на сервере. Это серьезная угроза для безопасности сервера. Кроме того, они требуют определенных ресурсов системы. Большинство системных администраторов не разрешает пользоваться директорией cgi-bin, в которой запускаются эти программы. Выходом из такой проблемы являются многочисленные бесплатные сервисы, предоставляющие возможность использовать наиболее распространенные cgi-скрипты на страницах просто вставляя куски HTML-кода. Понятно, что такой метод не очень удобен и доступен немногим, но его поддерживают почти все броузеры.

Второй метод не требует использования сервера вообще, но он работает только в броузерах, поддерживающих HTML 3.0 (Internet Explorer, Netscape Navigator 2.0, Mosaic 2.0 и более современные).

Создание активных изображений вручную трудоемкий процесс, т.к. требуется задавать много активных областей в координатах. Лучше всего использовать программы, созданные специально для задания активных областей и простого формирования всего активного изображения. Кроме того, такую функцию поддерживают большинство HTML редакторов, например FrontPage или MapEdit.

Списки

Заголовок списка создаётся тегом <LH>, за которым следует текст.

Теги <LI> и </LI>обозначают элемент списка.

Для создания ненумерованного списка используется тег <OL TYPE=x>. Значение х определяет вид значка маркера. Возможно задание значка маркера одним из трех стандартных видов:

<LI>Первая строка

<LI>Вторая строка

</UL>

<LI> Первая строка

<LI>Вторая строка

</UL>

<LI> Первая строка

<LI>Вторая строка

</UL>

<PLAIN> - атрибут для создания ненумерованного списка без маркера.

Задание значка маркера допускается в виде любой картинки:

<LI> Первая строка

<LI>Вторая строка

</UL>

Этот атрибут можно задавать в теге <UL>, определив сразу все маркеры списка, а можно использовать разные файлы с расширением gif для разных пунктов списка, помещая атрибут SRC= в каждом теге <LI>. Для использования этого атрибута нужно задать атрибут PLAIN=.

Для создания нумерованного списка используется тег <OL TYPE=x>. Значение х = 1, если требуется создать список с нумерацией в виде последовательности арабских цифр, т.е. в формате 1,2,3,4.… Значение х = А создает список вида А,В,С,D.… Значение х = а - список вида а,b,c,d.… Значение х = I - список вида I, II, III, IV…. Значение х = i - список вида i, ii, iii,.…Таким образом, для получения нумерованного списка необходимо написать последовательность тегов:

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI>< FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI><FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

<LI><FONT SIZE="4">Первая строка </FONT></LI>

<LI><FONT SIZE="4">Вторая строка </FONT></LI>

</OL>

Для смены порядка нумерации используются атрибуты SKIP=, START= и VALUE= в теге <LI> или <OL>.

Атрибут SKIP= пропускает заданное число пунктов нумерации.

START= используется для указания места, с которого в заданном типе нумерации (числа, буквы, римские цифры) следует начать нумеровать список.

Атрибут VALUE= присваивает определенный номер данному пункту нумерованного списка. После задания этого атрибута последующие пункты будут нумероваться, начиная с заданного в этом атрибуте номера. Например:

<LI>Первая строка </LI>

<LI>Вторая строка </LI>

<LI>3-я строка </LI>

<LI>4-я строка </LI>

</OL>

Если на странице мало места под списки, то удобно использовать атрибут COMPACT=. Он показывает списки в сжатом виде за счет уменьшения межстрочных интервалов, использования меньшего размера шрифта и других методов.

Пример 4.

<HTML>

<HEAD>

<TITLE>

Списки

</TITLE>

</HEAD>

<BODY>

<P>

<H1>Посмотрим, как выглядит упорядоченный список</H1>

<P>

<H2>Каждое утро я кладу в свой портфель:</H2><Br>

<LI>Тетради

<LI>Книги

<LI>Карандаши

<LI>Ручку

<LI>Линейку

<LI>Пакет с завтраком

<LI>Кошелёк

</OL>

</BODY>

</HTML>

Таблицы

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

Для создания таблицы используются теги <TABLE> и </TABLE>. Между этими тегами располагаются теги <TR> и </TR>. Они окружают каждую строку таблицы. Если необходимо создать несколько строк в таблице, используется столько же тегов <TR> и </TR>. В каждой строке таблицы обычно отображаются ячейки. Каждая ячейка должна быть окружена тегами <TD> и </TD>. Количество этих тегов в строке определяет количество ячеек. Число ячеек в строках не обязательно должно быть одинаковым.

Для создания заголовков столбцов и строк вместо простой строки, создается заголовок и текст его размещается между тегами <TH> и </TH>. Этот текст будет отображен жирным шрифтом и отцентрирован. Разрешается применить некоторые атрибуты.

Атрибут NOWRAP. Он используется в тегах <TH> и </TH> или <TD> и </TD> для того, что бы текст помещался в одной строке (ячейка при этом расширяется).

Атрибут COLSPAN=x. Если какая-нибудь ячейка должна быть шире вышерасположенных или нижерасположенных, то используется этот тег. Величина х указывает количество объединяемых горизонтальных ячеек.

Атрибут ROWSPAN=x. Этот атрибут аналогичен предыдущему, только он объединяет x вертикальных ячеек.

Атрибут WIDTH=x. Этот атрибут определяет ширину таблицы, если он задан в теге <TABLE>, ширину группы ячеек или ширину отдельной ячейки, если указан в тегах <TR> и </TR> или <TH> и </TH>. Величина х указывает ширину в пикселях или в процентах. Оптимальным значением является WIDTH=50%.

Атрибут UNIT=. Он применяется в теге <TABLE> для определения единицы измерения размеров в таблице. Атрибут принимает следующие значения:

UNIT=EN - в en-пробелах,

UNIT=RELATIVE - относительные значения в процентах от общей ширины таблицы,

UNIT=PIXELS - в пикселях, например <TABLE UNIT=PIXELS WIDTH=200> создает таблицу шириной в 200 пикселей.

Атрибут COLSPEC=. Используется с атрибутом UNIT=. Он определяет, сколько места занимает каждый столбец таблицы и тип выравнивания данных. Применяется только в теге <TABLE>. В атрибуте COLSPEC= перечисляются все столбцы. Для каждого задаётся выравнивание одним из пяти типов: L - по левому краю, С - по центру, R - по правому краю, J - по правому и левому краю, D - по десятичной запятой. Размер задаётся в пикселях. Например, тег <TABLE UNIT=PIXELS COLSPEC="L10 C20 R10"> определяет таблицу, в которой первая ячейка имеет ширину в 10 пикселей и выравнивание по левому краю, вторая - 20 пикселей и выравнивание по центру, третья - 10 пикселей, выравнивание по правому краю.

Атрибут DP=. Определяет символ, используемый для отделения целой части десятичной дроби. По умолчанию используется тег DP=".", определяющий в качестве разделителя точку. Атрибут DP="," задает запятую.

Атрибут CELLPADDING=x. Определяет поле вокруг содержимого ячейки. Величина х задает число пикселей.

Атрибут ALIGN=. Используется в тегах <TR>, <TD>, <TH>. Он определяет выравнивание содержимого по горизонтали. Значения атрибута могут быть следующими:

ALIGN=LEFT - выравнивает содержимое ячейки по левому краю,

ALIGN=CENTER - по центру,

ALIGN=RIGHT - по правому краю,

ALIGN=BLEEDLEFT - предыдущие значения учитывали отступ, заданный атрибутом CELLPADDING. При задании этого атрибута содержимое ячейки прижимается вплотную к левому краю.

Атрибут VALIGN=. Сходен с предыдущим, но задает выравнивание по вертикали. Значения:

VALIGN=TOP - выравнивание содержимого по верхней границе,

VALIGN=MIDDLE - центрирует по вертикали,

VALIGN=BOTTOM - выравнивает по нижней границе.

Для создания заголовков таблицы существует тег <CAPTION>. Заголовок может быть над таблицей (<CAPTION ALIGN=TOP>), или под таблицей (<CAPTION ALIGN=BOTTOM>). Заголовком может быть текст или графика. Этот тег хорош для создания подписей под рисунками, заключенными в таблицу без границ.

Основной частью таблицы являются границы ячеек. Для управления толщиной границ используется атрибут BORDER=x. Можно сделать таблицу вообще без границ, задав атрибут в теге <TABLE BORDER=0>. Читатель страницы даже не будет знать, как получена такая точная компоновка содержимого. Напротив, толстые границы привлекают внимание к таблице. Можно задать красивую толстую рамку вокруг картинки, она будет похожа на настоящую рамку.

Для задания толщины промежутков между ячейками используется атрибут CELLSPACING=x. По умолчанию x=2 пикселям. Этот атрибут хорошо использовать вместе с атрибутом BORDER= для задания красивых рамок вокруг изображений.

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

Пример 5.

<HTML>

<HEAD>

<TITLE>

Простая таблица

</TITLE>

</HEAD>

<BODY>

<CAPTION ALIGN=CENTER>Мои друзья</ CAPTION>

<TR>

<TH>Год рождения</TH>

</TR>

<TR>

<TD>Ольга</TD>

</TR>

<TR>

<TD>Марина</TD>

</TR>

<TR>

<TD>Игорь</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Фреймовые структуры

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

Для разбиения страницы на кадры создают главный файл, в котором описывается вся кадровая структура страницы. При просмотре страницы, соответствующей главному файлу, на экран выводятся все заданные кадры. Их размещение описано в кадровой структуре. Для задания структуры кадров используется тег <FRAMESET>.

В странице с кадровой структурой нет тега <BODY>. После тега </HEAD>, закрывающего описание "заголовка" этой страницы размещается тег <FRAMESET>. Он содержит информацию о количестве будущих кадров, их размерах и ориентации. У него могут быть только два атрибута: ROWS=, задающий количество и размер кадров, расположенных друг над другом вертикально, и COLS=, задающий число и размер кадров, расположенных друг за другом горизонтально. Р

Воспользуйтесь поиском по сайту: