 |
||||||
| индекс | ||||||
12. HTMLКак было сказано выше, язык разметки гипертекста HTML (Hyper Text Markup Language) является основой Всемирной паутины. Именно он является основой создания веб-страниц. С помощью HTML осуществляется логическое форматирование документа, и только для этих целей он и может использоваться. Структура HTML-документаHTML-документы строятся на основе тегов, которые структурируют документ. Обычно теги бывают парными, т. е. состоят из открывающего и закрывающего тега, хотя бывают и исключения. Имена открывающих тегов заключаются в угловые скобки < … >, а закрывающих помимо этого еще и предваряются знаком слеш </ … >. HTML-документ обрамляется парными тегами <html> … </html>. Кроме того, для обеспечения корректного отображения документа современный стандарт требует использования одиночного тега <!DOCTYPE>, имеющего следующую структуру: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> HTML-документы состоят из заголовка и тела документа. Заголовок и тело документа представляются парными тегами <head> … </head> и <body> … </body>, соответственно. Таким образом, каркас HTML-документа будет иметь следующую структуру: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> Заголовок включает в себя несколько специализированных тегов, основными из которых являются <title> … </title> и <meta> … </meta> Тег <title> содержит заголовок документа, который будет выводится в заголовочной части окна браузера. Тег <meta> содержит специальную информацию, такую как тип кодировки: <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> а так же список ключевых слов и информацию о содержании сайта: <meta name="keywords" content="список ключевых слов"> Первое необходимо для корректной поддержки кодировки, а второе позволяет поисковым машинам производить корректное индексирование страниц (следует заметить, что современные поисковые системы обычно игнорируют ключевые слова, но это не отменяет необходимости использования этого атрибута). В рассмотренных тегах name="keywords" и content="список ключевых слов" являются атрибутами тегов, которые конкретизируют их. Например, атрибуты могут указывать, что текст, заключенный в данном теге, при отображении должен выравниваться по центру. Атрибуты записываются сразу после имени тега, причем значения атрибутов заключаются в кавычки. Атрибутов у тега может быть несколько, но могут и вовсе отсутствовать. Приведем пример простейшей веб-страницы: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> Текст может быть набран в любом редакторе, например в NotePad, и сохранен с расширением htm или html. Теперь этот файл можно открыть при помощи какого-либо браузера, например Internet Explorer. Следует обратить внимание на заголовок окна браузера, где отобразился заголовок страницы, который «обернут» тегом <title>. При создании веб-страниц им всегда необходимо присваивать осмысленные имена. Теги заголовков и абзацевТекст, содержащийся в теле документа, обычно обрамляется другими тегами, наиболее распространенными из которых являются теги абзацев <p> … </p> и заголовков <h1> … </h1>, <h2> … </h2>, <h3> … </h3>, вплоть до <h6> … </h6>. Число, присутствующее в названии заголовка, характеризует степень его вложенности. Приведем пример использования рассмотренных тегов: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"> Как уже говорилось ранее, теги могут иметь атрибуты. Одним из основных атрибутов является атрибут форматирования align, который может принимать следующие значения: left – выравнивание по левому краю, center – по центру, right – по правому краю, justify – выравнивание по обоим краям. Приведем примеры использования этих атрибутов: <p align="left">Моя первая веб-страница</p> Не смотря на то, что атрибуты физического форматирования еще весьма широко используются, следует воздерживаться от их применения, так как для этих целей предназначены средства каскадных таблиц стилей, о чем речь пойдет ниже. СпискиСовременным стандартом HTML предусмотрено три основных вида списков:
Маркированные спискиМаркированные списки названы так потому, что перед каждым пунктом таких списков устанавливается тот или иной маркер. Иногда, используя дословный перевод, их называют неупорядоченными списками (unordered list). Маркированные списки задаются при помощи тегов <ul> … <ul>. Для задания элементов списка используются теги <il> … </il> (item list): <ul> Помимо элементов списка внутри тегов <ul> … <ul> можно размещать и другие теги, например теги заголовков: <ul> Тип маркера может задаваться с помощью атрибута type. Три его возможные значения: circle, disk и square. По умолчанию используется тип disc. Следует отметить, что различные модели браузеров могут по-разному отображать маркеры. Типичные способы отображения маркеров приведены в табл. 9: Таблица 9
Типы маркеров маркированных списков
Ниже приводится пример использования маркера типа circle: <ul type="circle"> Нумерованные спискиВ нумерованных списках (ordered list), которые иногда называют упорядоченными, каждому пункту присваивается номер. Создаются такие списки при помощи тегов <ol> … </ol>. Для элементов списков, как и в случае маркированных списков, используются теги <il> … </il>. В таких списках доступны пять типов маркеров, которые так же как и в маркированных списках, определяются при помощи атрибута type (табл. 10). Таблица 10
Типы маркеров нумерованных списков
Ниже приведены примеры нумерованных списков. <ol> <ol type="I"> Списки определенийСписки определений применяются для того, чтобы организовать текст по примеру словарных статей. Они задаются с помощью тегов <dl> … </dl> (definition list). Определяемый термин, или понятие, помещается в теги <dt> … </dt> (definition term). Определение понятия заключается в теги <dd> … </dd> (definition description). В тексте, содержащемся внутри тегов <dt> … </dt>, не могут использоваться теги уровня блока, такие как <p> или <div>. Как и в предыдущих случаях внутри списков определений могут использоваться теги заголовков и прочие теги: <dl> Вложенные спискиКак маркированные, так и нумерованные списки можно вкладывать друг в друга. Причем допускается произвольное вложение различных типов списков. При вложении друг в друга маркированных и нумерованных списков следует быть внимательным. Ниже приведен пример вложенных списков: <ul> ТаблицыТаблицы являются одной из основных структур, используемых для структурирования информации в HTML-документах. Кроме того, таблицы часто используются для организации структуры страницы, и хотя сейчас такое использование таблиц признано устаревшем и не рекомендуемым, оно до сих пор применяется многими веб-дизайнерами. Пример простой таблицы: <table border="3" cellpadding="7"
cellspacing="3" height="80" width="50%"> Для того чтобы получить таблицу, в которой несколько ячеек объединены в одну, используются атрибуты colspan и rowspan тега <td>: <table width="75%" border="5"
cellspacing="0" cellpadding="5"> Как и списки, таблицы можно вкладывать одна в другую (рис. 15):
Рис. 15. Вложенные таблицы <table width="100%" border="5"
cellspacing="0" cellpadding="5"> ГиперссылкиДля связи различных документов HTML предусматривает использование ссылок. Сам термин HTML (Hyper Text Markup Language) подразумевает их широкое использование. Для реализации ссылок в HTML используется тег <a> … </a>, который, как и большинство html-тегов, является контейнерным. Основным атрибутом этого тега является href, который собственно и содержит адрес ресурса, на который указывает ссылка. Внутри тега <a> … </a> помещается текст ссылки. В ссылках может использоваться как относительная, так и абсолютная адресация. В случае абсолютной адресации атрибуту href присваивается абсолютный URL адрес ресурса: <a href="http://server.com/doc3.htm">Ссылка на документ с абсолютным адресом http://server.com/doc3.htm</a> В случае использования относительной адресации указывается путь к документу относительно текущей страницы: <a href="doc1.htm">Ссылка на документ с относительным адресом doc1.htm</a> Если в заголовочной части документа использован тег <base>, то отсчет будет вестись от адреса, заключенного в этом теге. Помимо веб-страниц допускается ссылаться и на другие интернет-ресурсы: e-mail, ftp, Ghofe, WAIS, Telnet, newsgroup. Ниже приведен пример ссылки на адрес электронной почты: <a href="mailto:sss@mail.ru">Ссылка на адрес электронной почты sss@mail.ru</a> Если необходимо направить пользователя на конкретное место текущего документа, то можно использовать именованные якоря. Для этого в том месте, куда необходимо совершить переход, устанавливаются такие якоря (выделены жирным курсивом): <ul> Для того чтобы сослаться на именованный якорь, атрибуту href присваивается имя якоря, которое предваряется значком #: <a href="#Пункт 1.1">Ссылка на пункт 1.1</a> и <a href="#Пункт 2">Ссылка на пункт 2</a> Если необходимо сослаться на именованный якорь, находящийся в другом документе, то имя якоря, так же предваряемое значком #, записывается сразу после адреса этого документа, причем знак пробела не ставится. <a href="doc2.htm#Пункт 3 Документа 1" >Ссылка
на Пункт 3 Использование рисунков в роли ссылокВ роли ссылок могут выступать и рисунки. Для этого сначала надо вставить рисунок с помощью тега <img>. У атрибута src данного тега устанавливается значение, соответствующее имени файла рисунка: <img src="fig1.jpg"> Далее, рисунок «обертывается» в тег ссылки: <a href="link2.htm"><img src="fig1.jpg" border="0"></a> Карты изображенийДля задания конфигурации карты-изображения используется парный тег <map> … </map>. Он имеет единственный атрибут name, являющееся именем карты, которое указывается в атрибуте usemap тега рисунка, являющегося ее основой: <map name="Map"> Внутри тега <map> задаются непосредственно области карты-изображения, которые задаются при помощи тега <area>. Тег <area> имеет следующие атрибуты: shape, coords, href, nonhref, target и alt. Допустимыми значениями атрибута shape являются: rect, circle, poly, default. По умолчанию устанавливается значение rect, задающий область в виде прямоугольника. Значением атрибута coords являются координаты области, которые задаются в виде списка. Для прямоугольника (rect) задаются координаты левого верхнего и правого нижнего углов: <area shape="rect" coords="-1,1,264,232" href="fromimagemap2.htm" alt="На Документ 2"> Для круга (circle) – координата центра и радиус: <area shape="circle" coords="133,116,59" alt="Нет ссылки (nonhref)" nonhref> Для многоугольника (poly) задаются координаты всех вершин, причем если координаты последней вершины не совпадают с первой, то браузер автоматически создает последнюю вершину, с координатами первой и область замыкается: cords="355,75,400,99,450,130,363,295,356,313,348,348,181,291,189, 281,260,291,305,290,316,248,317,224,318,197" href="fromimagemap3.htm" alt="На Документ 3"> Назначение атрибутов href, target и alt такое же, как и в случае тега <a>. Ниже приведен пример создания карты изображения: <img src="fig1.jpg" border="0"
usemap="#Map"> Атрибут nonhref используется для того, чтобы указать, что область не является активной. Например, его можно использовать, чтобы сделать активной область в виде кольца. <img src="fig2.gif" border="0"
usemap="#Map2">
|
|
|||||||||||||||||||||||||||||||||
| на главную | материалы | ПО | библиография | карта сайта | словарь | наверх | ||||||||||||||||||||||||||||
| ©Structuralist
2005-2006 structuralist@narod.ru |
|
