Как создать свой сайт? Уроки HTML и CSS




Урок 4. HTML фреймы и гиперссылки

1. Организация HTML фреймов

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

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

HTML5 окончательно удалил инструмент фреймов, но, при этом элемент <iframe>, который позволяет вставлять одну страницу в другую, остался в новом стандарте. Это ему удалось по той причине, что он используется на веб-страницах для выполнения ряда интеграционных задач, таких как вставка в страницы окон YouTube, рекламных блоков и поисковых полей Google.

Можно предположить, что тег <iframe> вряд ли исчезнет из языка HTML, как уже было сказано, он используется для вставки окон YouTube, а на сегодня YouTube является одним из способов заработка и бизнеса, который требует также привлечения пользователей для просмотра видеороликов. Для привлечения пользователей и увеличения просмотров видеороликов развиты специальные сервисы, благодаря которым можно получить 1000 просмотров YouTube и создать значительный трафик на свой видеоканал.

Today, YouTube is one of the ways to earn money and business, which also requires attracting users to watch videos. To attract users and increase video views, special services have been developed, thanks to which you can get 10k views on youtube and create significant traffic to your video channel.

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

При использовании простого дизайна с двумя HTML фреймами (рис.1) задействовано три документа:

  • документ, описывающий фреймовую структуру,
  • документ для левого фрейма,
  • документ для правого фрейма.

html фреймы

Рис. 1. Простая фреймовая структура из двух фреймов

Фреймы содержатся в структуре <frameset> и </frameset>, замещающей в странице с фреймами структуру <body> и </body>, т.е. документ, описывающий фреймовую структур не имеет тегов <body> и </body>.

Допускается вложение фреймовых областей.

Атрибуты тега <FRAMESET>

cols

Этот атрибут определяет количество и ширину столбцов фрейма. Ширину столбцов можно задать в пикселях или в процентах.

cols=n – определяет столбец шириной в n пикселей.

cols=n% – выделяет данному столбцу фрейма n%-долю ширины окна броузера.

rows

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

rows=n – определяет строку высотой в пикселей.

rows=n% – выделяет данной строке фрейма n%-долю высоты окна броузера.

frameborder

Этот атрибут определяет отображение рамок фреймовой структуры.

frameborder=yes – отображается трехмерная рамка (значение по умолчанию).

frameborder=no – рамка невидима

Лучше определять строки и столбцы не в пикселах, а используя относительные значения. Символ звездочка (*) используется для указания того, что экран делится на пропорциональные части: COLS="*,*,*" – соответствует COLS="33%,33%,33%".

В значениях COLS (столбец), ROWS (строка) перечень должен быть заключен в кавычки. Если кавычки не используются, между значениями не должно быть пробелов.

Рассмотрим пример кода простой фреймовой структуры, изображенной на рис. 1.

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

  1. Создайте папку frames. Скопируйте в нее файлы с изображениями фонов fon3.jpgfon8.jpgfon10.jpg из папки html_css_4
  2. Откройте файл shablon.html
  3. Измените код как в листинге на рисунке 2. Сохраните документ под именем frames_2.html
  4. Создайте файл, как на рисунке 3. Сохраните документ под именем doc1.html
  5. Создайте файл, как на рисунке 4. Сохраните документ под именем doc2.html
  6. Запустите файл frames_2.html двойным щелчком. В окне браузера Internet Explorer web-страница должна иметь вид, как на рис. 1

 

Рисунок 2. Фреймовая структура из двух столбцов

 

Рисунок 3. Документ doc1.html

 

Рисунок 4. Документ doc2.html

На рис. 1 представлен вид этой HTML-страницы в браузере. Экран по вертикали разбивается на 2 фрейма. Левый HTML фрейм занимает 25% экрана и содержит страницу с названием doc1.html. Правый HTML фрейм займет 75% экрана и содержит страницу doc2.html.

Тег <FRAME>

Тег <frame> определяет отдельный фрейм. Это непарный тег. Тегов <frame> должно быть ровно столько, на сколько областей делится экран. У тега <frame> имеются следующие атрибуты:

src

Этот атрибут указывает URL-адрес содержимого фрейма.

name

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

scrolling

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

scrolling=yes (установка полосы прокрутки)

scrolling=no (отсутствие полосы прокрутки)

scrolling=auto (значение по умолчанию)

noresize

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

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

  1. Откройте файл shablon.html.
  2. Измените текст, как в листинге на рисунке 5.
  3. Сохраните документ в папке frames под именем frames_3.html
  4. В новом документе наберите текст, изображенный в листинге 6. Сохраните документ под именем doc3.html
  5. Запустите файл frames_3.html двойным щелчком. В окне браузера Internet Explorer Web-страница должна иметь вид, как на рис. 7.

Обращаем Ваше внимание на то, что во фреймовой структуре количество открывающих <frameset> должно быть равно количеству закрывающих </frameset>

Рисунок 5. Фреймовая структура из трех фреймов

 

Рисунок 6. Документ doc3.html

html фреймы

Рисунок 7. Фреймовая структура из трех фреймов

Контрольное задание

  • Создайте файл с фреймовой структурой нашего сайта MyHouse.ru, состоящей из трех HTML фреймов (рис. 8). Сохраните его в папке public_html под именем index.html
  • Правому фрейму присвойте имя main.
  • В верхнем фрейме расположите бегущую строку (файл shapka.html)
  • В левом фрейме расположите список проектов (файл menu.html).
  • В правом фрейме – файл main.html.

Рисунок 8. Фреймовая структура сайта MyHouse.ru

2. Организация гиперссылок

Для организации гиперссылок используется тег <а>, у которого есть обязательные атрибуты, иначе гиперссылка работать не будет.

Рассмотрим пока только обязательный атрибут href.

 Структура гиперссылки

 

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

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

 Гиперссылки можно встроить в любое место HTML – документа.

На рис. 9 приведен пример HTML-кода создания гиперссылки и вид в браузере страницы с этим кодом:

 

Подробную информацию об услугах нашего агентства Вы можете получить

<br />

<a href="inform.htm">здесь</a>

 

Рис. 9. Пример создания текстовой гиперссылки

 В этом примере слово “здесь” является элементом привязки (или якорем – anchor), а часть href=”inform.htm” представляет  ссылку на URL и означает, что при щелчке на элементе привязки должен быть загружен файл “inform.htm”, находящийся в том же адресе сети.

Элементы привязки (якорь – anchor)

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

Текстовые ссылки браузер обычно выделяет цветом, отличным от цвета основного текста,  подчеркиванием. Кроме того, курсор мыши на ссылке меняет свое изображение на указатель в виде руки.

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

Рассмотрим пример организации графической гиперссылки (рис. 10): 

У нас в агентстве приветливые и компетентные диспетчеры

<br />

<a href=”inform.htm”><img src=”ris.jpg”></a>

 

Рис. 10. Пример создания графической гиперссылки 

В этом примере рисунок "ris.jpg" является графическим элементом привязки. Браузер выделяет его синей рамкой.

 Виды адресов

Абсолютный адрес – это полный адрес в Internet.

  • <а href="http://www.rambler.ru"> – удаленный переход;
  • <а href="c:\temp\myfile.html"> – использование в ссылке абсолютного адреса на своем сервере (не используется).

Относительный адрес. Правила относительной адресации мы рассмотрели в теме 1. При написании адресов гиперссылок используются те же правила. Рекомендуется применение относительных адресов, поскольку при каждом перемещении каталога не приходится менять все ссылки.

  • <а href="../folder/my.htm"> – переход на другой документ на своем сайте

Гиперссылки можно разделить на 3 категории:

1. Внешняя – ссылка на web-страницу, которая находится по другому адресу Internet (за пределами сайта). Для ее организации используется абсолютный адрес.

Пример: <а href="http://www.rambler.ru">

2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.

Пример: <a href="../../folder_1/folder_2/mysite.htm">Текст гиперссылки</a>

3. Внутристраничная – ссылка на другую позицию внутри той же web-страницы. Например, в верхней части web-страницы можно поместить оглавление, а затем связать его пункты с последующими разделами этой же web-страницы или с конкретными разделами другой web-страницы внутри сайта.

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

  1. Откройте раздел «Организация гиперссылок» в файле справочника Sprav_html.doc. Ознакомьтесь с атрибутами тега <a>. Будьте готовы ответить на вопросы по правилам задания значений этих атрибутов.
  2. В файле menu.html для пункта «Проекты таунхаусов и блокированных домов», сделайте гиперссылку, целевым адресом которой является web-страница townhouse.html таким образом, чтобы web-страница townhouse.html грузилась в правый фрейм. Напомним, для того, чтобы ссылка грузила документ в нужный фрейм в теге <a> необходимо указать атрибут target, который содержит имя фрейма, куда должен быть загружен документ. Например, <a href="townhouse.html" target="main">. Результат на рис. 11.

html фреймы

Рис. 11.

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

1. В папке public_html создайте папку project, а внутри нее папку img_d_152_1d.

2. Оформите web-страницу о проекте d-152-1d, используя материалы (тексты и фотографии) из папки projects/d-152-1d. Для оформления web-страницы должны быть использованы стили в таблице стилей и форматирование средствами атрибутов тегов.

3. Все материалы должны быть использованы. В результате на web-странице у Вас должны быть следующие блоки: Заголовок, Аннотация, Материалы, Цена за проект, Планы, Фасады

4. Сохраните web-страницу под именем projekt_d-152-1d.html в папке projects. Примерный результат на рис. 12.

Рис. 12. Web-страница projekt_d-152-1d.html.

5. На web-странице townhouse.html оформите изображение проекта D-152-1D и фразу «Проект D-152-1D» как гиперссылки на страницу projekt_d-152-1d.html, на которой содержится более полная информация об этом проекте (рис. 13).

6. Проверьте работоспособность гиперссылок.

Рис. 13. Изображение является гиперссылкой

Внутристраничные гиперссылки

Внутристраничная гиперссылка создается в два этапа.

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

1. В оглавлении рядом с названием главы 1 следует создать запись:

<href="#glava1">Перейти к главе 1</a>

2. Внутри web-страницы рядом с заголовком главы 1 создать метку и с помощью атрибута name тега <a> присвоить ей имя. Браузер не выделяет содержимое этого тега как ссылку, так как оно используется в качестве метки. В пределах документа метка должна быть уникальной.

<a name="glava1">Глава 1</a>

Прокомментируем запись <a href="#glava1">Перейти к главе 1</a>.

Атрибуту href тега <a> назначают имя метки и перед именем ставят знак #. Знак # показывает, что ссылка – внутренняя.

Если необходимо организовать гиперссылку на конкретный фрагмент другого HTML-документа (например, на главу 1 в документе "my.htm"), то этот фрагмент предварительно также помечается. Гиперссылка на него организуется следующим образом <a href="my.htm#glava1">. Здесь к имени метки добавляется имя файла.

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

1. Откройте созданную Вами web-страницу projekt_d-152-1d.html.

2. Под заголовком «Проект дома № D-152-1D» добавьте пункты

  • Аннотация
  • Материалы
  • Цена за проект
  • Планы
  • Фасады

3. Создайте внутристраничные гиперссылки из каждого только что созданного пункта на соответствующий раздел web-страницы (рис. 14, а)

4. Внизу страницы создайте гиперссылку Наверх, при нажатии на которую пользователь будет возвращаться в начало страницы (рис. 14, б).

Рис. 14. Внутристраничные гиперссылки

Задание цвета гиперссылок

Принятые в Web по умолчанию цвета для гиперссылок: синий – для еще не посещенных гиперссылок, красный – для активизированных гиперссылок (в момент щелчка), фиолетовый – для уже посещенных.

Если используемые по умолчанию значения этих атрибутов явно не согласуются с дизайном Вашей страницы, то значения можно поменять. Для этого у тега <BODY> есть соответствующие атрибуты. 

link

Цвет гиперссылки (по умолчанию светло-голубой)

vlink

Цвет использованной гиперссылки (по умолчанию темно-фиолетовый)

alink

Цвет активизированной гиперссылки (в момент щелчка)

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

  1. Вверху левого фрейма сделайте логотип графической гиперссылкой таким образом, чтобы при ее активизации в правый фрейм загружалась страница о сайте (файл main.html).
  2. Убедитесь в работоспособности всех гиперссылок. Ваш сайт должен выглядеть примерно так, как показано на рис. 15, при переходе по ссылке «Проекты таунхаусов и блокированных домов» так, как на рис. 16, при щелчке на изображении проекта D-152-1D как на рис. 17.

Рис. 15. Главная страница сайта MyHouse.ru

Рис. 16. Вид web-сайта при активной ссылке «Проекты таунхаусов и блокированных домов»

Рис. 17. Вид web-сайта при активной ссылке «Проект D-152-1D»

Работа со специальными элементами

Работа со специальными элементами определяется с помощью псевдоклассов.

Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в определенный момент.

Например, CSS определяет псевдокласс, который устанавливает, как выглядят гиперссылки в определенные моменты времени:

a:link {color:#ffffff; text-decoration:none} – не посещенные ссылки;

a:visited {color:red; text-decoration:none} – посещенные ссылки;

a:active {color:black; text-decoration:none} – активные ссылки;

a:hover {text-decoration:underline} – ссылка при наведении на нее фокуса.

Можно определить псевдокласс для первого символа элемента. Например, для абзаца:

p:first-letter {font-size:24pt}. Это удобно для задания спецэффектов выделения заглавных букв.

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

1. Для верхнего меню страницы проекта включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 18.

2. Проверьте работоспособность стиля. 

а – не посещенные ссылки

б – ссылка при наведении на нее курсора

Рис. 18. Вид гиперссылки в определенный момент времени

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

1. Для пункта «Проекты таунхаусов и блокированных домов» включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 19.

2. Проверьте работоспособность стиля. Обратите внимание на то, чтобы не изменился цвет фона и параметры других элементов меню. Измениться должен только вид гиперссылки. 

а – не посещенная и посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 19. Вид гиперссылки «Проекты таунхаусов и блокированных домов»

3. Для пункта с названием проекта на странице proekt_townhouse.html включите в файл внешнюю стилевую спецификацию, определяющую вид гиперссылки в определенные моменты. Для этого самостоятельно определите параметры стиля согласно рис. 20.

4. Проверьте работоспособность стиля. 

а – не посещенная ссылка

б – ссылка при наведении на нее курсора

Рис. 20. Вид гиперссылки для названия проектов

 В результате выполнения этой темы, у Вас должны быть созданы следующие файлы:

  • doc1.html
  • doc2.html
  • doc3.html
  • frames_2.html
  • frames_3.html
  • index.html
  • projekt_d-152-1d.html