Основы Web-дизайна (стр. 2 )

Остальную часть рынка делят между собой:

–Opera – быстрый браузер, максимально похожий по поведению на Internet Explorer в отношении к HTML-коду, объектной модели и пр.

–Safari – браузер фирмы Apple.

Главное преимущество Internet Explorer состоит в том, что в нем реализована XML-поддержка. Кроме того, он подходит для создания динамических HTML-документов, имея развитую модель объектов и средства управления их свойствами.

Достоинством Mozilla Firefox является мультиплатформенность: браузер может использоваться в UNIX в том же виде, что и в Windows.

Преимуществом Opera является скорость и нетребовательность к ресурсам компьютера.

Спецификации HTML и CSS

Язык HTML приобрел широкую популярность к середине 90-х годов. К этому времени назрела необходимость стандартизации языка, поскольку различные компании, разрабатывающие программное обеспечение для доступа в Интернет, предлагали свои варианты тэгов и способы их интерпретации браузерами. Созданием спецификации HTML занялся Консорциум всемирной паутины (World Wide Web Consortium: W3C) – организация, в которую вошли крупнейшие производители программного обеспечения для Интернета. Начиная с 1995 года – со времени первой официально признанной спецификации HTML 2.0 вышло несколько рекомендованных спецификаций, последняя из которых – 4.0, в версии 4.01. Основной идеей в последней спецификации стало отделение структуры документа от его представления на экране монитора, в соответствии с чем рекомендуется более широко использовать технологию каскадных таблиц стилей CSS. Для реализации этой идеи в спецификации 4.0 некоторые тэги отменены, или, другими словами, объявлены не рекомендуемыми. Это означает, что браузеры все еще должны продолжать поддержку таких тэгов, но в последующих версиях эти тэги, могут быть объявлены устаревшими. Устаревшие тэги не поддерживаются браузерами.

В настоящее время спецификация CSS уровня 2 поддерживается всеми браузерами. К сожалению, большинство свойств в новейшей спецификации CSS3 (2004-2005 годы), предложенных Консорциумом W3C, до сих пор не реализовано ни в одном из широко известных браузеров, поэтому в данном пособии используется стандарт CSS2, версия 2.1.

Создание HTML-документа

HTML-документы можно создавать в любом текстовом редакторе, например, при работе под управлением Windows в стандартной программе Блокнот.

1.2 Ссылки

Ссылки на другие документы и файлы

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

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

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

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

Организация ссылок

Ссылка состоит из двух частей. Первая из них — это то, что вы видите на Web-странице; она называется указатель ссылки (anchor). Вторая часть, дающая инструкцию браузеру, называется адресной частью ссылки (URL-адрес). Когда вы щелкаете мышью по указателю ссылки, браузер загружает документ, адрес которого дается URL-адресом. Ниже рассмотрены правила

построения отдельных элементов ссылок.

Указателем ссылки может быть слово, группа слов или изображение. Внешний вид ссылки зависит от его типа, способов создания и установок программы просмотра читателя. Указатели бывают двух типов — текстовые и графические. Текстовые указатели обычно представляют собой слово или несколько слов, выделенных на экране подчеркиванием. Цвет текстового указателя может регулироваться автором и установками программы просмотра.

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

<А href="example. html"></А>

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

<А HREF="example. html"><IMG SRC="picture. gif"></A>

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

Указание адреса может быть относительным или абсолютным.

Если в URL-адресе не указывается полный путь к файлу, то такая ссылка называется относительной. В этом случае определение местоположения файлов выполняется с учетом местоположения документа, в котором имеется такая ссылка. Например, если браузер загрузил страницу, находящуюся по адресу http://www. /page, то относительный указатель /picture подразумевает адрес http://www. /page/picture, т. е. подкаталог, расположенный на той же машине.

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

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

Правила записи ссылок

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

Оба действия выполняются при помощи тэга <А>.

Тэг <А>

Тэг <А> имеет единственный параметр href, значением которого является URL-адрес. Указатель может быть как относительным, так и абсолютным, например, http://www. /home/index. htm. Этот тэг является контейнером, поэтому необходимо поставить закрывающий тэг </А>:

<А hyref=URL-адрес>Текстовый указатель ссылки</А>

Указатель ссылки может быть относительным или абсолютным. Для облегчения работы с относительными указателями ссылок введен тэг <BASE>. Он располагается в начале документа в разделе HEAD и содержит URL-адрес, относительно которого в документе построена вся адресация. Это указание влияет на любой тэг документа, в котором используется относительная адресация. Если тэг <BASE> отсутствует, то адресация строится относительно адреса текущего документа.

Внутренние ссылки

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

Для построения внутренней ссылки сначала нужно создать указатель, определяющий место назначения. Например, если вы хотите сделать ссылку на текст определенной главы документа, нужно разместить там указатель и дать ему имя при помощи параметра name тэга <А>. При этом параметр href не используется, и браузер не выделяет содержимое тэга <А>. Например:

<А name =chapter_5> </A>

Обратите внимание, что в приведенном примере отсутствует содержимое тэга <А>. Обычно именно так и делают, поскольку здесь нет необходимости как-то выделять текст, а требуется лишь указать местоположение.

После того как место назначения определено, можно приступить к созданию ссылки на него. Для этого, вместо указания в параметре href адреса документа, как это делалось ранее, поместим туда имя ссылки с префиксом #, говорящим о том, что это внутренняя ссылка.

<А href ="#chapter_5">Глава 5</A>

Теперь, если пользователь щелкнет кнопкой мыши на словах "глава 5",

браузер выведет соответствующую часть документа в окне просмотра.

Ссылки на другие ресурсы Интернета

Ресурсы Интернета Формат ссылки Пример записи ссылки

Web-страница http://sitename http://www. /

e-mail mailto:address mailto:*****@***com

Newsgroup news:newsgroupname news: news. newusers. questions

FTP ftp://sitename ftp://ftp. /

TelNet telnet://sitename telnet://bbs. /

1.3 Списки

В языке HTML предусмотрены основные типы списков: маркированный, нумерованный и список определений.

Для создания маркированного списка, называемого также ненумерованным или неупорядоченным, предусмотрен тэг <UL> (Unordered List). В маркированном списке для выделения его элементов используются специальные символы, называемые маркерами списка. Вид маркеров списка определяется браузером, причем при создании вложенных списков браузеры автоматически разнообразят вид маркеров различного уровня вложенности.

Тэги <UL> и <LI>

Для создания маркированного списка необходимо использовать тэг-контейнер <UL> </UL>, внутри которого располагаются все элементы списка. Открывающий и закрывающий тэги списка обеспечивают перевод строки до и после списка, таким образом отделяя список от основного содержимого документа, поэтому здесь нет необходимости использовать тэги абзаца <P> или принудительного перевода строки <BR>. Каждый элемент списка должен начинаться тэгом <LI> (List Item – элемент списка). Тэг <LI> не нуждается в соответствующем закрывающем тэге, хотя его наличие в принципе не возбраняется. Браузеры обычно при отображении документа начинают каждый новый элемент списка с новой строчки. Пример HTML-документа, использующего маркированный список, отображение которого браузером показано на рис. 1.3.1: