Игорь Квинт - HTML, XHTML и CSS на 100%

• Название: HTML, XHTML и CSS на 100%
• Автор: Игорь Квинт
• Жанр: Интернет
• Год: 2010
• ISBN: 978-5-49807-594-5

Вы хотите создать собственный сайт на просторах Интернета? Причем желательно, чтобы он был красивым, удобным и «неглючным»? Казалось бы, чего проще: существует столько программ – конструкторов сайтов. Однако чтобы создать действительно профессиональный сайт, подобных утилит недостаточно. Вам потребуется знание языков программирования HTML и XHTML, а также каскадных таблиц стилей CSS. И в этом случае книга, которую вы держите в руках, – именно то, что вам необходимо. С ее помощью вы научитесь создавать красиво оформленные, быстрые и профессиональные сайты. С этой книгой ваша страничка никогда не останется незамеченной в Сети!

---

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

Параметр resource-type сообщает поисковому роботу тип страницы и применяется для больших сайтов, где много страниц различного назначения. Страница индексируется, только если в качестве значения resource-type задано document.

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

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

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

Таблица 1.5. Значения атрибута content для свойства robots

Встретив строку URL, робот прекратит индексацию текущей страницы и перейдет на страницу с адресом test.ru.

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

Вы должны знать, что без возможностей элемента META для раскрутки сайта в поисковых системах не обойтись, но они не спасут, если сайт не будет соответствовать ожиданиям посетителей. Поэтому пользуйтесь ими в качестве дополнения к качественно сделанному сайту.

Элемент STYLE

Внутри этого элемента задаются стили, используемые на странице. Таких элементов внутри заголовка страницы может быть несколько. Элемент STYLE поддерживает знакомые вам атрибуты lang и title, а также новые атрибуты type и media. Атрибут type указывает, какой язык задания стилей применяется в данном документе, а атрибут media определяет, на каком устройстве предполагается воспроизводить данный HTML-документ.

Для задания стилей в документе HTML 4.01 применяется язык CSS, который мы будем подробно рассматривать в гл. 7. Здесь же мы немного познакомим вас с возможностями этого языка, чтобы вы поняли их достоинства. Они настолько велики, что консорциум W3C отказался от использования атрибутов форматирования содержимого HTML-документов в элементах, применяемых для разметки текста, например задающих шрифт, его начертание и прочие характеристики. Все эти методы признаны устаревшими, на их смену пришли средства CSS.

Каскадные таблицы стилей (CSS) используют, чтобы максимально отделить HTML-код страницы от ее оформления. Иными словами, внутри таблицы описано оформление различных элементов, а в HTML-коде – только применяемый стиль. Это очень удобный метод – вы можете менять оформление страницы, цвет фона, шрифт, не перебирая огромное количество команд HTML-кода, а просто заменив его в таблице стилей.

Элемент STYLE позволяет реализовать возможности CSS в документе без применения внешних источников. Внутри этого элемента можно записывать код форматирования содержимого странички в формате CSS. Чтобы браузер знал формат кода, атрибуту type элемента STYLE присваивается значение text/css, сообщающее браузеру о применении средств CSS. Вот пример задания CSS-стиля:

<style type="text/css">

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}

Здесь запись p.style указывает, что для элемента P, создающего абзац, определяется стиль под названием style, который определяет для текста внутри абзаца цвет шрифта (color: #CC0000), фона (background: #9999CC) и расстояние между словами (word-spacing:2 0px).

Чтобы подключить к элементу какой-либо стиль, нужно использовать атрибут class и в качестве его значения установить название стиля, который необходимо применить к этому элементу:

<p class="style">

Текст со стилем style

</p>

Таким образом, используя язык CSS и элемент STYLE, можно создать стили для конкретного элемента или общий стиль, который будет применим к любому элементу, а далее просто ссылаться на этот стиль в процессе разметки документа.

Более того, с помощью элемента STYLE можно задать разные стили для вывода на экран и для вывода на печать. Это полезно, если в качестве фона вы используете темные тона или рисунок. Совершенно не обязательно оставлять подобное декорирование документа при выводе на печать, тем более что это потребует больше краски от принтера. Для этого нужно использовать атрибут media.

Значения атрибута media таковы:

• print – стили для вывода на печать;

• screen – стили для вывода на экран;

• all – стили для вывода на любое устройство.

На примере кода из листинга 1.6 рассмотрим основы синтаксиса CCS.

Листинг 1.6. Использование стилей

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css" media="screen" >

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}

.style2 {

color:#66FFFF;

background:#990000;

word-spacing:10px;

}

</style>

<style type="text/css" media="print" >

p.style {

color:#000000;

background:#FFFFFF;

word-spacing:20px;

}

.style2 {

color:#000000;

background:#FFFFFF;

word-spacing:10px;

}

</style>

<title>Использование стилей</title>

</head>

<body>

<p class="style">

Текст со стилем style

</p>

<p class="style2">

Текст со стилем style2

</p>

<table border="1" >

<tr>

<td class="style2">

Для ячейки применен стиль style2

</td>

</tr>

</table>

</body>

</html>

В примере создано два стиля: style можно применять только для элемента P (для обозначения этого перед названием стиля стоит название элемента), style2 – для любого объекта. В листинге 1.6 стиль style2 применен еще и для ячейки таблицы.

Результат обработки листинга 1.6 представлен на рис. 1.3.

Рис. 1.3. Использование стилей

Для вывода на печать будет использован черный шрифт с белым фоном. Этим мы сэкономим чернила пользователей.

Совет

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

Есть еще один способ применения к элементу стиля: встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Такой атрибут доступен для всех элементов HTML. В нем в формате CSS через точку с запятой прописываются значения разных свойств элемента. Вот как это выглядит для элемента P:

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

Как видите, CSS-код совпадает с содержимым элемента STYLE из предыдущего примера. В листинге 1.7 представлен пример задания свойств элементов с помощью встраивания CSS-кода в значение атрибута style.

Листинг 1.7. Использование атрибута style

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование стилей</title>

</head>

<body>

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

Текст с атрибутом style="color:#CC0000; background:#9999CC; word-spacing:20px;"

</p>

<p style="color:#66FFFF; background:#990000; word-spacing:10px;">

Текст с атрибутом style="color:#66FFFF; background:#990000; word-spacing:10px;"

</p>

<table border="1" >

<tr>

<td style="color:#66FFFF; background:#990000; word-spacing:10px;">

Описание ячейки таблицы с атрибутом style="color:#66FFFF; background: #990000; word-spacing:10px;"

</td>

</tr>

</table>

</body>

</html>

Здесь применены такие же стили, как и в предыдущем примере, но параметры заданы с помощью атрибута style.

На рис. 1.4 показан результат обработки кода из листинга 1.7.

Рис. 1.4. Установка стилей с помощью атрибута style

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

Еще один способ задать стили для документа – записать их в отдельный файл с разрешением CSS. Синтаксис записи в этот файл такой же, как и при использовании элемента STYLE, однако этот способ более универсален.

Подключить файл со стилями к документу можно двумя способами. Первый представлен в листинге 1.8 и использует элемент STYLE. Внутри этого элемента нужно записать такую строку: @import URL("nyTb к файлу с таблицами");.

Листинг 1.8. Импорт файлов с таблицами стилей

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

@import URL("test.css");

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />