Контент-менеджмент (стр. 6 )

Пример. Если необходимо вставить рассмотренный в предыдущих примерах рисунок и обвести его рамкой толщиной 5 пикселей, в HTML-коде пишется следующее: <IMG SRC="logotip. gif" WIDTH=300 HEIGHT=150 ALT="Наш логотип" BORDER=5> Последовательность параметров WIDTH, HEIGHT, ALT и BORDER не принципиальна.

Важно предусмотреть расположение изображения по отношению к основному тексту. При помощи табличных тэгов можно разграничить пространство так, чтобы изображение располагалось в одной ячейке, а текст — в другой. Но язык HTML позволяет выполнять функцию обтекания изображения текстом. Для этого предусмотрен параметр ALIGN, который выставляется в тэге <IMG SRC=…>.

Если выставить ALIGN=LEFT, изображение окажется слева от текста; текст будет справа и под изображением (если объем текста больше высоты изображения).

Если выставить ALIGN=RIGHT, изображение окажется справа от текста; текст будет слева и под изображением (если объем текста больше высоты изображения).

Если выставить ALIGN=CENTER, изображение окажется в центре  текста; текст будет обтекать изображение с двух сторон и спускаться вниз (если объем текста больше высоты изображения).

А если выставить ALIGN=TOP или ALIGN=BOTTOM, то последующий текст расположится в верхней или соответственно нижней части изображения.

Пример. Если необходимо вставить фотографию сотрудника (файл ivanov. gif, размером 300х450) слева от текста с биографией этого сотрудника, то в HTML-коде  это запишется следующим образом: <IMG SRC="ivanov. gif" WIDTH=300 HEIGHT=450 ALT="Сотрудник " ALIGN=LEFT> родился в 1959 году. Окончил Московский государственный университет, и т. д. Сам текст можно отформатировать с помощью тэгов, рассмотренных в разделе «Форматирование текста», а можно выделить отдельные фрагменты текста с помощью тэгов, рассмотренных в разделе «Форматирование шрифта».

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

HSPACE=i — горизонтальный отступ изображения от текста;

VSPACE=i — вертикальный отступ изображения от текста;

(i — количество пикселей отступа).

Пример. Если необходимо вставить фотографию сотрудника (файл ivanov. gif, размером 300х450) справа от текста с биографией этого сотрудника, с отступами в 10 и 15 пикселей по горизонтали и вертикали соответственно, то в HTML-коде  это запишется следующим образом: <IMG SRC="ivanov. gif" WIDTH=300 HEIGHT=450 ALT="Сотрудник " ALIGN=RIGHT HSPACE=10 VSPACE=15> родился в 1959 г. Окончил Московский Государственный Университет, и т. д.

Упражнение. Откройте сохраненный в блокноте файл со структурой HTML-документа, тэгами таблицы и внесенным отформатированным текстом. Добавьте согласно продуманному плану в пустые области графические изображения. Должна получиться оформленная страница сайта. Придумайте структуру еще одной страницы, тематически дополняющую данную. Cоздайте эту страницу согласно задуманному. Сохраните оба файла для последующей работы.

1.7. Гиперссылки в HTML-документе

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

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

       В гиперссылке перехода с одного HTML-документа на другой в рамках одного сайта используются следующие тэги:

<A HREF="ИМЯ ФАЙЛА">название гиперссылки</A>

       В кавычках указывается имя того документа, на который надо перейти. Название гиперссылки дается, исходя  из общего информативного смысла документа, на который осуществляется переход. Пользователь видит только название гиперссылки — ту надпись, которая помещена между тэгами <A HREF=…> и </A>. При этом документ, с которого осуществляется переход, и документ, на который осуществляется переход, необходимо сохранить в одной папке, иначе придется прописывать путь к документу, на который осуществляется переход.

Примеры. Если созданы два HTML-документа, один из которых является главной страницей сайта и называется, например, main. htm, а второй — страницей с контактными данными о владельцах сайта и называется contacts. htm, то для перехода с главной страницы на страницу с контактными данными необходимо в документе main. htm поставить следующие тэги: <A HREF="contacts. htm">Наши контакты</A> Пользователь, кликнув мышкой по надписи «Наши контакты», попадет на страницу с контактными данными.   Для перехода со страницы с контактными данными на главную страницу необходимо в документе contacts. htm поставить следующие тэги: <A HREF="main. htm">На главную страницу</A> Пользователь, кликнув мышкой по надписи «На главную страницу», попадет на главную страницу.

В гиперссылке перехода с одного HTML-документа на другой, уже имеющийся в Интернете, вместо имени файла указывается его URL (Universal Resource Location — универсальный локатор ресурса — адрес документа в Интернете с указанием протокола).

Пример. Если требуется в HTML-документе main. htm сделать гиперссылку на поисковик yandex. ru, то в документе main. htm необходимо поставить следующие тэги: <A HREF="http://www. yandex. ru">Перейти на Yandex</A> Пользователь, кликнув мышкой по надписи «Перейти на Yandex», попадет на поисковик yandex. ru.

Для перехода в рамках одного HTML-документа с одного места на другое необходимо сделать две операции:

1) поставить метку в том месте HTML-документа, куда надо осуществить переход;
2) поставить гиперссылку на эту метку в том месте, откуда будет осуществлен переход.

Метка записывается в формате:

<A NAME="МЕТКА">

В кавычках пишется любое имя, состоящее из букв латинского алфавита и/или цифр. Закрывающего тэга у метки нет.

Гиперссылка в данном случае будет иметь вид:

<A HREF="#МЕТКА">Перейти на метку </A>

Пример. Если требуется в статье: Главной характерной чертой гипертекста, по определению Теодора Нельсона[1],…… сделать гиперссылку на сноску: [1] Теодор Нельсон – математик и философ, ввел в употребление само слово "Гипертекст". то ставится метка: <A NAME="SNOSKA1">[1] Теодор Нельсон – математик и философ, ввел в употребление само слово "Гипертекст". и гиперссылка: Главной характерной чертой гипертекста, по определению Теодора Нельсона<A HREF="# SNOSKA1"> [1]</A>,…… Пользователь, кликнув мышкой по сноске [1] в статье, попадет на саму сноску внизу статьи.

Для перехода с одного HTML-документа на определенное место в другом необходимо проделать аналогичные операции:

1) поставить метку в том месте HTML-документа, куда надо осуществить переход;
2) поставить гиперссылку на эту метку в том месте, откуда будет осуществлен переход.

Метка записывается в прежнем формате:

<A NAME="МЕТКА">

А гиперссылка будет иметь вид:

<A HREF="ИМЯ ФАЙЛА#МЕТКА">Перейти на метку </A>

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

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

<A HREF="ИМЯ ФАЙЛА"><IMG SRC="ИМЯ ФАЙЛА С ГРАФИЧЕСКИМ ИЗОБРАЖЕНИЕМ"> </A>

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

Упражнение. Откройте сохраненные в блокноте файлы с оформленными страницами сайта. Поставьте гиперссылки с первого файла на второй и наоборот.