Активизация гиперссылок будет вызывать переход на абзац текста, относящийся к соответствующим башням (начало каждого раздела заранее помечено якорем).
Лабораторная работа № 2
Тема: «Цветовая схема, вставка изображений, гиперссылок и таблиц»
Цель:
1. Получить практические навыки при работе с цветовыми схемами, графическими изображениями Web-документа;
2. научиться создавать различные виды гиперссылок, карты изображений;
3. выработать навык художественно-эстетического вкуса при оформлении
Web-документа
Web-сайты обычно являются мультимедийными и интерактивными, т.е. содержат изображения и гиперссылки. При форматировании текста, вставки изображений и гиперссылок и т.д. используются тэги с атрибутами.
Атрибуты и присвоенные им значения записываются внутри открывающего тэга. В одном тэге можно использовать несколько атрибутов, разделенных между собой пробелами, а одни и те же атрибуты могут использоваться в различных тэгах.
Практическое задание. «Московский Кремль». Создать Web-сайт, рассказывающий о башнях Московского Кремля.
Сайт рекомендуется хранить в отдельной, специально созданной папке Kremlin. Здесь будут находиться как Web-страницы, так и графические файлы. Начальная страница сайта обычно имеет имя index.htm, в этом случае для начала просмотра сайта, в адресе достаточно указать путь к папке, где он хранится.
Начальная страница «Башни Московского Кремля» будет содержит информацию о башнях Московского Кремля: история создания, описания отдельных башен, иллюстрации и т.д. Вторая страница «Кремлевские Куранты» рассказывает о Кремлевских Курантах. Страницы связаны между собой гиперссылками.
Создадим начальную Web-страницу, в процессе работы, над которой, познакомимся с применением атрибутов тэгов для вставки изображений, гиперссылок, таблиц и карт-изображений.
Атрибуты задания цветовой схемы (цвета фона, текста и гиперссылок). Цвет на Web-странице задают либо его названием, либо числовым шести разрядным шестнадцатеричным кодом #RRGGBB (первые два разряда задают интенсивность красного цвета, вторые – зеленого и третьи – синего).
Значение яркости цвета может меняться от минимальной 00 до максимальной FF. В таблице приведены примеры некоторых цветов:
Основную цветовую схему Web-страницы можно задать в тэге <BODY> с помощью атрибутов:
При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным тоном фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующие по яркости: пастельный фон - темный текст, или темный фон - светлый текст. Нежелательны буквы белого цвета - они могут оказаться невидимыми при печати страницы на принтере.
Вставка изображений. Для размещения на Web-страницах используются графические файлы форматов GIF, JPEG и PNG.
Изображения помещаются на Web-страницу тэгом IMG с атрибутом SRC, сообщающим браузеру имя и местоположение графического файла.
<IMG SRC="image_name">
Если рядом с изображением не должно быть текста, его размещают внутри отдельного абзаца. Выравнивание рисунка по горизонтали в этом случае задают в тэге <P>. Размеры изображения (в пикселах) можно задать с помощью атрибутов WIDTH и HEIGHT. К изображению атрибутом ALT можно добавить название, которое появляется на экран или вместо иллюстрации (если по какой - либо причине графика не выводится в окне браузера), или в качестве всплывающий строки, при указании на рисунок мышью.
АтрибутALIGN выравнивает текст по верхнему краю, середине или нижнему краю изображения, справа или слева от него с помощью значений: top, bottom, middle, left или right.
Форматирование текста. Для выделения фрагментов текста используется тэг <FONT>. АтрибутFACEопределяет гарнитуру шрифта, атрибут COLOR – цвет и атрибут SIZE- размер символов.
Выравнивание текста по горизонтали задает атрибут ALIGN. Его возможные значения: left - выравнивание по левому краю center – по центру и right - по правому краю
Различные виды гиперссылок. Связать Web-страницу с другими документами можно с помощью универсального тэга <A>, и его атрибута HREF, указывающим в каком файле хранится вызываемый ресурс.
<A HREF="file_name">Указатель ссылки</A>
file_name – путь к файлу или его URL-адрес в Интернете. Если вызываемый документ размещается в той же папке, что и Web-страница, то можно указывать только имя файла.
Указатель ссылки в окне браузера выделяется подчеркиванием и особым цветом. При указании на него мышью, ее курсор превращается в значок «рука». Щелчок мыши по указателю , вызывает переход на документ, указанный в гиперссылке.
Используем различные значения атрибута HREF для реализации различных реакций браузера:
В качестве указателя ссылки можно использовать не только текст, но и изображение. В этом случае указатель ссылки задается с помощью тэга <IMG>.
Пусть в нашем проекте при щелчке мышью по маленькому рисунку Царской башни, вызывается ее крупная фотография. Такой прием часто используют, для снижения времени загрузки страницы. Посетитель увидит уменьшенные копии рисунков, а при желании, сможет загрузить полномасштабное изображение.
Якоря. Гиперссылки на якоря. Если создаваемая страница очень большая, то в ее тексте можно расставить якоря (иначе их еще называют метки или закладки). Они помечают смысловые разделы и помогают быстро перемещаться по документу.
Переключаться на якорь по гиперссылке можно не только внутри текущей Web-страницы, но и с другой Web-страницы.
Теперь после перехода со страницы «Башни Московского Кремля» на страницу «Кремлевские куранты» можно вернуться обратно на тот же абзац, с которого был осуществлен первый переход.
Ссылки с использованием карт-изображений (Map Image). Для создания гиперссылок можно использовать карты-изображения, на которых выделены области - указатели гиперссылок. С каждой областью изображения связывают переход на определенный объект (внешнюю Web-страницу или внутренний якорь).
В качестве основы для создания карты-изображения можно выбрать любое изображение. Чтобы преобразовать изображение в карту, в тэг <IMG> добавляется атрибут USEMAP, значением которого является ссылка на имя описания конфигурации областей на карте. Для рисования рамки вокруг карты-изображения используется атрибут BORDER, значением которого является толщина рамки в пикселях.
Для описания конфигурации областей карты-изображения используется тэг <MAP>, единственным атрибутом которого является NAME. Значение атрибута NAME должно соответствовать значению атрибута USEMAP, ранее заданному в тэге <IMG>.
Форма и геометрические размеры областей на карте-изображении, а также адрес гиперссылки задаются тэгами <AREA> с атрибутами. Атрибут SHAPE определяет форму области и может принимать значения rect – прямоугольник, circle – круг и poly – многоугольник.
Атрибут COORDS задает координаты каждой области в писселях. Значением атрибута является список координат точек, определяющих область, разделенных запятыми. Для прямоугольника задаются координаты левого верхнего и правого нижнего углов, для круга – координаты центра и радиус, для многоугольника – координаты вершин.
Для задания адреса гиперссылки используется атрибут HREF, а для вывода альтернативного текста атрибут ALT.
Активизация гиперссылок будет вызывать переход на абзац текста, относящийся к соответствующим башням (начало каждого раздела заранее помечено якорем).
Таблицы. Таблицу формируют несколько различных тэгов. Таблица задается контейнером <TABLE></TABLE>, внутри которого содержится описание структуры таблицы и ее содержания.
Любая таблица состоит из строк, которые задаются контейнером <TR></TR> (Table Row), в который помещается описание ячеек.
Формат ячеек и их содержание помещается в контейнер<TD></TD> (Table Data), а заголовки ячеек в контейнер <TH></TH> (Table Header).
Толщина разделительных линии в таблице задается с помощью атрибута BORDER, а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN.
