ИТ: Лабораторная работа 3 - "Шапка" документа , МЕТА-данные. Метки и карты изображений в HTML-документах. ( 2 балла)

Цель работы: формирование умений создания HTML-документов с помощью меток, создания карты изображения, а также использования "шапки" документа и МЕТА-данных.

Литература

Поясняющая информация

"Шапка" документа и МЕТА-данные

Ограничивается тэгами <head> и </head>. Содержит, мета-информацию, то есть дополнительные данные о странице, заголовок страницы, выносимый в заголовок окна браузера (в оконной графической системе) и ссылки.
Заголовок определяется тэгами <title> и </title>, эго присутствие необязательно, но желательно.
Тэги <head> и <title> параметров не имеют. Эти теги могут отсутствовать.

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

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

Прежде чем начать регистрацию вашего сайта в поисковых системах и каталогах, его необходимо к этому подготовить. Иначе эффект от затраченных сил и времени будет минимальным. На данных примерах мы рассмотрим МЕТА-теги. Их роль не заметна при отображении странички. Это лишь команды для web-сервера или броузера, но команды важные, и правильное использование META-тегов дает вам некоторые преимущества.

Поисковые системы при регистрации страницы используют информацию, хранящуюся в Мета дескрипторах, которые помещаются между тегами заголовка <head> и </head> в html страницах вашего сайта. Мета используются хотя и не всеми поисковыми системами, однако без них не обойтись. Элемент META определяет переменную=значение, описывающую некоторое свойство документа: информацию об авторе, список ключевых слов и т.п. Атрибут name - переменная, а content - ее значение. Запомните! Все META-теги не несут визуальной информации и должны располагаться только в секции <head></head> документа.

Необязательно использовать весь набор Мета, но необходимость базовых очевидна. К ним отнесем Title, Keywords, Description, Charset (многие сервера эту информацию сообщают в HTTP заголовке), Author.

Title - заголовок документа.

Хороший осмысленный заголовок может заставить пользователя из множества других выбрать именно вашу ссылку.
пример: <TITLE>Здесь вы пишите заголовок документа. </TITLE>

Description - описание.

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

Для указания краткого описания используется:

Если хотите указать описание на русском, то надо указать атрибут lang

Нужно включить все наиболее часто используемые в вашем сайте термины, фразы и их синонимы в тег "desctiptions".

Keywords - поисковые слова и фразы.

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

Длина содержимого тегов "keywords" - не должна превышать 1000 символов, хотя некоторые поисковики не в силах принят более 255 (поисковые машины отбросят часть описания, превышающего установленные нормы).

Для указания ключевых слов и терминов используется:

Если хотите указать слова на русском, то надо указать атрибут lang

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

Content-Language

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

<META HTTP-EQUIV="Content-Language" CONTENT="ru">

Charset - кодировка

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

Управление индексацией для поисковых серверов. Основные значения : ALL - индексировать все, NONE - не индексировать. Значение по умолчанию (в случае отсутствия данного тэга) - индексация всего:

Указывается промежуток времени, через которое система заново проиндексирует документ, в данном примере это 7 дней.

Иногда приходится менять хостинг. И в этом случае к нему уже нельзя обратиться по старому адресу. Но ведь нам не хочется терять своих посетителей? Поэтому обычно на старом месте размещают одну страничку с информацией о новом адресе сайта. Но куда более логичным будет сделать так, чтобы в дополнение к информации броузер бы сам перешел по новому адресу. И это нетрудно сделать благодаря META-тегу с параметром "refresh".

Вот пример кода:
<meta http-equiv="refresh" content="10; url=http://www.kstu.ru/">;

В данном примере мы передали броузеру указание, чтобы он автоматически перешел на страничку по адресу http://www.kstu.ru/ после десяти секундной задержки. Задержка нужна, чтобы пользователь успел прочитать информацию.

Также можно с помощью этой информации делать автоматическую перезагрузку страницы.

Author - автор.

META-тег с параметром "author" служит для указания автора странички и учитывается некоторыми поисковыми системами. И вообще у каждой странички должен быть автор, так что имеет смысл пользоваться этим тегом. Также можно вписать e-mail и адрес вашего сайта, это полезно в тех случаях, когда документ оказывается вне сайта, легко можно определить, откуда он. Можно использовать Owner, указав в нем отдельно e-mail владельца.

Если хотите указать имя на русском, то надо указать атрибут lang

Похожий META-тег с параметром "generator" автоматически проставляется различными HTML-редакторами и содержит информацию о программе, в которой была сделана страничка. Смысла от этого тега немного, это чистая реклама. Некоторые авторы в его описании дублируют информацию META-тега "author".

Copyright - авторские права.

Для указания авторских прав: <meta name ="copyright" content="имя_организации">

Expires - срок действия или запрет кэширования страничек.

Для определенного круга задач необходимо, чтобы страничка каждый раз загружалась с сервера, а не из кэша web-броузера.

В первую очередь, это необходимо для сайтов, которые поставляют динамически изменяющееся содержание. Например, результат поиска по сайту, курс доллара в реальном режиме, электронный магазин или обычный чат. В этих случаях нельзя быть уверенным, что страничка в кэше соответствует реальной.
Для решения этой задачи вы можете непосредственно запретить броузеру кэшировать ваши странички. И, разумеется, нужно сделать это при помощи META-тега, воспользовавшись его свойством "expires". Оно указывает дату устаревания содержимого странички. Для того, чтобы страничка не кэшировалась, нам достаточно установить прошедшую дату. Например, вот так:

Дата со значением 0 интерпретируется как "сейчас". Браузер каждый раз при запросе будет проверять, изменялся ли этот документ. Это нужно для того, чтобы при просмотре документа, браузер брал свежую версию, а не из кэша. Вместо Tue, 22 Aug 2001 12:12:00 GMT можно использовать значение never - никогда.

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

В целом это должно выглядеть так:

<html>
<head>
<META NAME="ROBOTS" CONTENT="ALL">
<META HTTP-EQUIV="Content-Language" CONTENT="ru">
<META NAME="Description" CONTENT="Здесь вы пишите описание_страницы.">
<META NAME="Keywords" CONTENT="Здесь вы пишите ключевые слова. ">
<META NAME="Author" CONTENT="Ваше имя ">
<META HTTP-EQUIV="Reply-to" CONTENT="Ваш E-mail">
<META NAME="Generator" CONTENT="Программ с помощью которой создан документ">
<META NAME="Creation_Date" CONTENT="число/ месяц /год">
<META NAME="revisit-after" CONTENT="Сколько дней, или недель.">
<TITLE>Здесь вы пишите заголовок документа. </TITLE>
<head>

<link> - он выражает информацию о взаимоотношениях данного документа c другими

Авторы могут использовать элемент LINK для предоставления поисковым машинам различной информации, в том числе:

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

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

Здесь мы используем атрибут hreflang, чтобы сообщить поисковой машине, где найти датскую, португальскую и арабскую версии документа. Обратите внимание на использование атрибута charset для арабского варианта учебника. Отметьте также использование атрибута lang для указания на то, что значение атрибута title элемента LINK, указывающего на французский учебник, - французский.

<LINK title="Учебник на датском" type="text/html" rel="alternate" hreflang="nl"
href="http://someplace.com/manual/dutch.html">;
<LINK title="Учебник на португальском" type="text/html" rel="alternate" hreflang="pt"
href="http://someplace.com/manual/portuguese.html">;
<LINK title="Учебник на арабском" type="text/html" rel="alternate" charset="ISO-8859-6" hreflang="ar"
href="http://someplace.com/manual/arabic.html">;
<LINK lang="fr" title="La documentation en Français" type="text/html" rel="alternate" hreflang="fr"
href="http://someplace.com/manual/french.html">;

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

<LINK media="print" title="Справочник в postscript" type="application/postscript" rel="alternate"
href="http://someplace.com/manual/postscript.ps">;

В следующем примере мы сообщаем поисковой машине, где искать начальную страницу коллекции документов:

<LINK rel="Start" title="Первая страница" type="text/html" href="http://someplace.com/manual/start.html">;

Метки

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

<A name=”Метка”> </A>

Пример меток в тексте:
<A name=”metka1”> </A>
<A name=”metka2”> </A>

Для перехода к метке используется ссылка по следующему шаблону:
Текст подсказки <A href=”#Метка”> Текст для щелчка </A>.

Пример ссылок на метки:
<A href=”#metka1”> Ссылка на первую метку </A>
<A href=”#metka2”> Ссылка на вторую метку </A>

Карты изображений

Спецификация HTML позволяет представлять изображения в виде гипертекстовой ссылки. При щелчке на данном изображении вы переходите к указанному документу. Если вы хотите организовать ссылки на разные документы, то это можно сделать при помощи трех или четырех мелких изображений (иными словами, пиктограмм), каждое из которых предлагает иной выбор.

Но существует и другой метод - карты изображений (Image Map). В этом случае переход по ссылке зависит от того, на какую часть изображения вы указываете при щелчке. Таким образом, одно изображение оказывается вектором с указанием на несколько возможных путей. Применение карт изображений предполагает, что браузер Web каким-то образом взаимодействует с процессом на сервере Web: он должен передавать координаты местоположения курсора при щелчке.

Технология Image Map применяется в самых различных областях. Однако наиболее часто ее применение можно увидеть при создании графических меню, когда создается одно большое изображение с элементами меню, и каждому участку изображения предписывается какое либо действие. Так же применять данную технологию можно при создании простых ГИС-подобных систем с картографическими возможностями.

Чтобы включить поддержку карты для изображения, необходимо ввести дополнительный параметр в тэг IMG:
<IMG SRC="url" USEMAP="url#map_name">
Параметр USEMAP указывает, в каком месте находится карта описываемого изображения. Карта изображения определяет, какому участку изображения, какой URL соответствует. Карта изображения может находиться в том же документе, что и изображение, или в другом документе.
Определение карты изображения имеет следующий синтаксис.
<MAP NAME="map_name">
<AREA [SHAPE=" shape "] COORDS="x,y,..." [HREF=" reference "] [NOHREF]>
</MAP>

Практические задания

Задание 1

Исправьте или дополните все свои страницы МЕТА-информацией.
обязательно примените следующие данные:
<META HTTP-EQUIV="Content-Language" CONTENT="">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
<TITLE> </TITLE>
Сделайте автоматическое обновление первой страницы каждую минуту.
Создайте новую страницу, и сделайте автоматическое перенаправление на www.kstu.ru , с временем ожидания 10 секунд, на странице напишите "Через 10 секунд вы будите автоматически перенаправлены на сайт www.kstu.ru ".
Сделайте ссылки со всех на свою главную страницу с помощью тега <LINK>.
В исходнике главной страницы укажите, в виде комментариев, для чего предназначены используемые мета-данные.

Задание 2

Создйте новую страницу. Внутри страницы организуйте переход на метки, основные разделы текста, а именно:
• Расширенный поиск. Яндекс.
• Поиск по регионам. Яндекс.
• Что такое "Индекс цитирования". Яндекс.
• Что такое "НИНИ-индекс". Яндекс.
• Что такое "Политический НИНИ-индекс". Яндекс.
должны быть в начале страницы в виде гиперссылок на определенную позицию в тексте.
В исходнике страницы укажите, в виде комментариев, для чего предназначены, используемые для меток и ссылок на них, теги и их свойства (атрибуты).

Задание 3

С помощью готового рисунка создать карту изображений, в которой при щелчке по картографической отметке города загружался бы соответствующий WWW-сервер. Рисунок можно взять здесь.
Ссылки для серверов:
www.moskva.ru - Москва
www.kazan.ru - Казань
www.spb.ru – С. – Петербург
www.novosibirsk.ru - Новосибирск
www.norilsk.ru - Норильск
www.omsk.ru - Омск
www.magadan.ru - Магадан
В исходнике страницы укажите, в виде комментариев, для чего предназначены используемые для карт изображений теги и их свойства (атрибуты).

К сдаче лабораторной предоставляются: работающие страницы на сервере с комментариями указанных тегов и их свойств в исходнике.

Last modified: Wednesday, 13 July 2011, 4:23 PM