Рис. 8.3. Пример одновременного использования двух параметров – FACE и SIZE тега FONT
В рассмотренном примере использовался шрифт Comic Sans MS, однако на практике при создании веб-страниц чаще всего применяются следующие шрифты: Arial, Courier New, Comic Sans MS, Times New Roman и Verdana. Эти шрифты установлены на абсолютном большинстве компьютеров, поэтому их применение гарантирует, что конечный пользователь будет видеть созданную веб-страничку в том же виде, что и ее автор.
Кроме размера и названия шрифта можно использовать различные эффекты, которые задаются самостоятельными тегами, не относящимися к тегу <FONT>. В табл. 8.1 приведен список таких тегов.
Таблица 8.1. Теги для задания эффектов, применяемых к шрифту
На рис. 8.4 можно увидеть, как выглядит действие перечисленных в табл. 8.1 тегов.
Рис. 8.4. Эффекты, применяемые к шрифтам, и теги, задающие их
Добавим, что можно применять несколько эффектов к одному и тому же тексту. Так, например, код <B><I>Текст</I></B> отобразит слово «Текст» наклонным полужирным шрифтом.
Гиперссылки
Гиперссылки по праву считаются основой Интернета. Вся суть Всемирной паутины заключается в присутствии ссылок на страницах различных интернет-ресурсов, благодаря чему становится возможным быстрый переход с сайта на сайт. Рассмотрим вопросы использования ссылок в веб-документах.
Как и прочие элементы оформления веб-страниц, гиперссылки создаются с помощью тегов. Тег для гиперссылки выглядит так: <A HREF="HTTP://SITE.RU">Название ссылки</A>. Разумеется, в приведенном примере адрес http://site.ru заменяется конкретным адресом страницы, а вместо слов Название ссылки пишутся те, которые нужны в данном контексте.
Насчет конкретного адреса страницы стоит поговорить отдельно. Адрес может быть абсолютным или относительным. Чтобы подробнее объяснить, что это такое, покажем все на примере. Допустим, есть сайт, который называется http://site.ru. На этом сайте есть каталоги, один из которых носит имя, например, dir1. В этом каталоге есть некоторые файлы, один из которых называется file1.html, а другой – file2.html. Таким образом, абсолютный путь к первому файлу будет выглядеть так: http://site.ru/dir1/file1.html. Данный путь приведет именно к этому файлу, на какой бы из страниц Интернета ни была расположена данная ссылка.
Другое дело – относительные ссылки. Если в рассматриваемом примере нужно разместить ссылку на файл file1.html или file2.html, то в качестве пути достаточно будет задать просто имя файла, то есть file1.html. Тогда полностью тег ссылки будет выглядеть примерно так: <A HREF="FILE1.HTML">Ссылка</A>. При этом данная ссылка будет обрабатываться корректно, только если она находится в файле, размещенном в той же директории.
Разумеется, относительный путь короче и писать его удобнее. При этом он будет корректно работать, скажем, на локальном компьютере, пока пользователь тестирует работоспособность сайта. Поэтому в большинстве случаев его применение оправданно.
Иногда бывает необходимо, чтобы ссылка открывалась не в том же окне, что и основная страница, а в новом. В большинстве браузеров это можно сделать, удерживая нажатой клавишу Shift при переходе по ссылке. Однако нас интересует открытие ссылки в новом окне независимо от воли пользователя. Для этого используется параметр TARGET со значением → blank. Полностью код выглядит так: <A HREF="HTTP://SITE.RU" TARGET=" → BLANK">Название ссылки</A>.
Гиперссылка может вести не только к документу, но и к конкретному месту в нем. Для этого в месте документа, на которое планируется установить ссылку, вставляется так называемый якорь. Выглядит это так: <A NAME="ЧИСЛО ИЛИ ИМЯ АНГЛИЙСКИМИ БУКВАМИ"></A>. Допустим, в качестве имени якоря в файле file1.html, находящегося в папке dir1, задали параметр metka1. Тогда абсолютная ссылка на него будет выглядеть так: <A HREF="HTTP://SITE.RU/DIR1/FILE1.HTML#METKA1"> Название ссылки</A>. Если же речь идет о ссылке из того же файла (то есть если нужно переместиться в другое место уже открытой страницы), то ссылка может быть описана следующим тегом: <A HREF=" #METKA1">Название ссылки</A>.
Владея уже изложенными в данной книге знаниями о веб-дизайне, в принципе, можно создать простейшую веб-страничку. Однако вид она будет иметь несколько «бедноватый», поэтому поговорим о дополнительных элементах оформления.
Использование цветов в языке HTML
Страница не будет достаточно красочной, если ограничиться в ее оформлении только черным и белым цветом. Вкратце расскажем, как задается цвет тех или иных элементов страницы в языке HTML.
Тег, определяющий цвет, выглядит следующим образом: COLOR="#000000", где нули обычно заменяются цифрами, которые, собственно, и задают цвет. Сам по себе этот тег ничего не меняет, а используется вместе с другими тегами. Например, тег <FONT COLOR="#000000">Текст</FONT> задает цвет выводимого текста. Также с помощью тега COLOR можно задавать цвет заливки фона веб-страницы, ячеек и границ таблицы и т. п.
Чтобы окрасить текст в конкретный цвет, заменив нули в теге требуемыми цифрами, необходимо знать следующие сведения. Шесть цифр идут после знака #. Первые две обозначают насыщенность цвета красным (Red), следующие две – насыщенность зеленым (Green), и две последние – насыщенность синим цветом (Blue). Отсюда название принципа обозначения цвета цифрами – RGB, по первым буквам соответствующих английских слов. Цифры, использующиеся в обозначении цвета, – шестнадцатеричные, то есть их значение может колебаться в пределах от 00 до FF.
Если для вас обозначение цвета с помощью цифр, да еще и шестнадцатеричных, – слишком сложное занятие, то на помощь может прийти русско-английский словарь. Для обозначения цвета вместо #000000 можно использовать соответствующие английские слова, например тег COLOR="RED" обозначает красный цвет. Однако с помощью цифровых кодов можно получить гораздо больше цветовых оттенков.
Таблицы
Если для обычного документа таблица – это элемент оформления, без которого при желании можно обойтись (во всяком случае таблицы, как правило, не являются основой обычных документов), то для веб-страницы значение таблиц сложно переоценить. Правда, в последнее время многие сайты создают основу своего оформления на базе других элементов языка HTML, но таблицы по-прежнему актуальны в веб-дизайне.
С помощью таблицы можно создать сколь угодно сложное оформление веб-страницы, например оформить меню или другие элементы.
Тег, с помощью которого на веб-страницу вставляется таблица, достаточно объемен, однако и сама таблица не простой элемент. Пример таблицы с размером ячейки 2 × 2 приведен в листинге 8.3.
Листинг 8.3. Пример простейшей таблицы
<TABLE WIDTH="200" BORDER="1" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD>Ячейка 1</TD>
<TD>Ячейка 2</TD>
</TR>
<TR>
<TD>Ячейка 3</TD>
<TD>Ячейка 4</TD>
</TR>
</TABLE>
Внешний вид этой таблицы представлен на рис. 8.5.
Рис. 8.5. Вид простейшей таблицы
Стоит дать некоторые пояснения, хотя если вдумчиво посмотреть на приведенный фрагмент HTML-кода, то и так все становится ясно.
Тег <TABLE> означает начало таблицы, здесь же задаются некоторые следующие параметры:
• WIDTH – ширина таблицы;
• BORDER – толщина бордюра или границы;
• CELLSPASING – расстояние между ячейками;
• CELLSPADDING – отступ от границ ячейки внутри ее.
Тег <TR> начинает новую строку таблицы, а <TD> – новую ячейку. Для обоих этих тегов допустимо применение тех же параметров, которые задаются для таблицы. Другие теги, используемые в табличном дизайне, приведены в табл. 8.2.
Таблица 8.2. Теги, применяемые при форматировании таблиц
Используя перечисленные теги в разных сочетаниях, с помощью таблиц можно придать сайту желаемый вид. Чтобы веб-ресурс выглядел еще привлекательнее, на его страницах нужно разместить рисунки.
Картинки
Современный сайт сложно представить без изображений. Не будем рассуждать об их необходимости, а сразу скажем, что для вставки картинки на веб-страницу используется тег <img src="URL">, где вместо букв URL пишется реальный адрес рисунка в Интернете. Тег вставки картинки непарный, то есть не имеет закрывающего тега. К этому тегу могут быть также применены некоторые дополнительные параметры, например WIDTH, HEIGHT, BORDER, ALIGN могут применяться не только к элементам таблицы, но и к изображениям. Причем в этом случае они имеют то же значение и формат, что и таблицы.
Среди дополнительных параметров назовем HSPACE и VSPACE. Они позволяют задать соответственно горизонтальный и вертикальный отступы текста от картинки, чтобы сделать страницу более привлекательной, не «слепливая» все в кучу.
Рисунок, как и текст, можно вставить внутрь гиперссылки – щелкнув на такой картинке, можно будет перейти на заданную страницу.
