| Основы HTML Историю возникновения языка HTML пропускаем, поскольку ее можно найти в любой книге по HTML. Слово HTML представляет собой сокращение от HyperText Markup Language - язык разметки гипертекста. В основном, HTML-документ является простым текстовым файлом, который содержит текст и ничего больше. Так что создавать веб-страницы можно в любом текстовом редакторе. Когда веб-страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для вставки изображений, изменения вида текста, создание ссылок на другие веб-страницы и др. Для обозначения тегов используется символ <тег>. Теги бывают двух видов: парные, которые выделяют блок текста, также называются еще контейнером (Пример. 1) и одиночные. Контейнер требует закрывающего тега, обозначаемого </тег>. Теги нечувствительны к регистру, поэтому запись <B> и <b> эквивалентна.
Поскольку одновременно можно использовать любое разумное сочетание тегов, следует помнить об их вложенности (Пример. 2). Один контейнер должен находиться внутри другого, и никак не пересекаться (Пример. 3).
Структура документаВсе нормальные веб-страницы состоят из двух разделов - заголовка (HEAD) и тела документа (BODY). Раздел заголовка может содержать текст и теги, но содержимое этого раздела не показывается напрямую на странице. Тело документа предназначено для размещения тегов и содержательной части.
|
Пример 1. Изменение цвета фона
|
Цвет можно указывать в шестнадцатеричном значении или по его имени.
Несмотря на то, что для фона можно указывать любой цвет, в большинстве сайтов используется преимущественно белый фон и черные буквы, как наиболее устоявшийся вариант.
Фоновый рисунок
В качестве фона можно использовать любое подходящее для этого изображение. Фон не должен отвлекать внимание от текста, при этом должен хорошо сочетаться с цветовой гаммой веб-страницы и быть маленьким по размеру, чтобы быстро загружаться. Если после перечисленного вы все еще хотите добавить фоновый рисунок на страницу, следует воспользоваться параметром background тега BODY.
Пример 2. Добавление фонового рисунка
|
Если изображение меньше размера экрана монитора, оно будет размножено по горизонтали и вертикали.
Поскольку фоновый рисунок загружается медленнее, чем цвет фона, может получиться, что текст не будет читаться некоторое время, пока не произойдет загрузка рисунков. То же самое может случиться и при отключенных в браузере рисунках. Поэтому рекомендуется всегда задавать цвет фона наряду с фоновым рисунком (Пример 3).
Пример 3. Использование фонового рисунка и цвета фона
|
Фиксированный фон
По умолчанию, при использовании полосы прокрутки, фоновый рисунок перемещается вместе с содержимым веб-страницы. Internet Explorer позволяет сделать фон неподвижным с помощью параметра bgproperties="fixed" тега BODY.
Пример 4. Задание фиксированного фона
|
При указании параметра bgproperties="fixed", как показано в Примере 4, фоновый рисунок на веб-странице будет оставаться неподвижным, а текст, рисунки и другие элементы станут перемещаться вместе с полосой прокрутки.
Данная возможность не работает в Internet Explorer 3, Netscape Communicator 4.x и Opera 3.x.
Метатеги
Метатеги используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные метатеги позволяют подняться к верхним строчкам поисковых серверов. На самом деле это не так, на одних метатегах высоко не поднимешься, но и неудачно выполненное содержимое метатегов может ухудшить рейтинг сайта.
Два метатега предназначены специально для поисковых серверов: Description (описание) и Keywords (ключевые слова). Некоторые вебмастера добавляли в раздел keywords ключевые слова, которые не имеют никакого отношения к теме сайта, но зато пользовались определенным успехом среди посетителей поисковиков. Однако, через некоторое время, поисковые системы научились бороться с таким явлением и проверяют содержимое веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы относящиеся к метатегам:
- Не включайте ключевые слова, которые не содержатся на ваших страницах;
- Не повторяйте ключевые слова;
- Используйте метатеги по их прямому назначению;
- Делайте описание и список ключевых слов различными для каждой страницы сайта с учетом содержимого.
Description
Большинство поисковых серверов отображают содержимое поля Description при выводе результатов поиска.
Если этого тега нет на странице, то поисковый движок просто перечислит первые встречающиеся слова на странице, которые, как правило, оказываются не очень-то и в тему.
Пример 1. Использование Description
|
Keywords
Этот метатег был предназначен для описания ключевых слов встречающихся на странице. Но в результате действия людей, желающих попасть в верхние строчки поисковых систем любыми средствами, теперь дискредитирован. Поэтому многие поисковики просто пропускают этот параметр.
Пример 2. Использование Keywords
|
Ключевые слова можно перечислять через пробел или запятую. Поисковые системы сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток времени используется инструкцияHTTP-EQUIV="REFRESH" (Пример 3).
Пример 3. Автозагрузка страницы
|
Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу, указанную в параметре URL.
Этот метатег позволяет создавать перенаправление (редирект) на другой сайт. Если параметр URL не указан, произойдет автоматическое обновление страницы через количество секунд, заданных в content.
Запрет кэширования страницы
Просмотренные веб-страницы и файлы помещаются браузером в специальное место на локальном диске компьютера. Это ускоряет отображение часто посещаемых или ранее просмотренных веб-страниц, поскольку в следующие посещения браузер может открыть их с жесткого диска, а не из Интернета. В некоторых случаях, например, для часто обновляемых страниц, кэширование можно запретить.
Пример 4. Запрет кэширования<head>
<META http-equiv="pragma" content="no-cache">
