Гипертекстовый учебник на HTML

Скачать материалы к учебному курсу:
Скачать Notepad++ Portable
Скачать папку web

Урок 2. Создание простого сайта

Задание:

Изучить основные команды, используемые при создании HTML-страниц.
Выполнить, приведенные в тексте урока упражнения.
Выполнить контрольное задание.
Сдать урок преподавателю устно, отвечая на вопросы и демонстрируя все действия на компьютере.

В этом уроке мы создадим небольшой сайт, как показано на рисунке ниже,
внизу страницы разместим видеофайл об университете

1. Понятие фреймов. Двухфреймовая структура HTML_документа

В этом уроке Вам предстоит оформить сайт РГППУ при помощи фреймовой структуры.

Что такое фрейм?

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

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

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

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

Фреймовая структура дает возможность на все время закрепить навигацию на экране в поле зрения посетителя сайта (в нашем случае это навигационная панель со ссылками на разделы сайта РГППУ).

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

Фреймы содержатся в структуре <FRAMESET> и </FRAMESET>, замещающей в странице с фреймами структуру <BODY> и </BODY>. Допускается вложение фреймовых областей.

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

COLS

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

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

ROWS

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

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

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

FRAMEBORDER

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

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

FRAMEBORDER=NO – рамка невидима

Фреймовая структура из двух столбцов (листинг 1)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Простая фреймовая структура</title>
</head>
<frameset cols="25%,75%">
<frame name="first" src="doc1.html">
<frame name="second" src="doc2.html">
</frameset>
</html>

Для того, чтобы осуществить эту структуру, нам необходимо создать файлы doc1.html и doc2.html.

Листинг 2. Документ doc1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Документ для левого фрейма</title>
</head>
<body background="library/fons/fon8.jpg">
<h3>Документ для левого фрейма</h3>
</body>
</html>

Листинг 3. Документ doc2.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Документ для правого фрейма</title>
</head>
<body background="library/fons/fon10.jpg">
<h1>Документ для правого фрейма</h1>
</body>
</html>

Упражнение 1

Откройте программу Блокнот.
Наберите текст, изображенный в листинге 1.
Сохраните документ в папке web под именем frames_2.html
В новом документе наберите текст, изображенный в листинге 2. Сохраните документ в папке web под именем doc1.html
В новом документе наберите текст, изображенный в листинге 3. Сохраните документ в папке web под именем doc2.html
Запустите файл frames_2.html двойным щелчком. В окне браузера web-страница должна иметь следующий вид (рис. 1).

Рис. 1.

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

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

Тег <FRAME>

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

SRC	Этот атрибут указывает URL-адрес содержимого фрейма.
NAME	С помощью этого атрибута фрейму присваивается имя, которое можно использовать для ссылки на фрейм, обычно из других фреймов той же структуры. В гипертекстовой ссылке при этом используется атрибут TARGET, который ссылается на имя фрейма. Имена фреймов могут состоять из букв и цифр. В качестве первого символа имени нельзя использовать символ подчеркивания ( _ ).
SCROLLING	Этот атрибут используется для управления полосами прокрутки фрейма, когда это важно для определения внешнего вида страницы. Его значения: SCROLLING="yes" (установка полосы прокрутки) SCROLLING="no" (отсутствие полосы прокрутки) SCROLLING="auto" (значение по умолчанию).
NORESIZE	Этот атрибут запрещает пользователю изменение размеров фреймов, чтобы предотвратить искажение дизайна страницы. Для сохранения размеров всех фреймов достаточно использовать этот атрибут в одном фрейме.
FRAMEBORDER	Этот атрибут определяет отображение рамки фрейма: FRAMEBORDER="yes" - отображается трехмерная рамка (значение по умолчанию) FRAMEBORDER="no" - рамка невидима.

2. Трехфреймовая структура HTML-документа

Фреймовая структура из трех фреймов (листинг 4)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Фреймовая структура из трех фреймов</title>
</head>
<frameset rows="15%,85%">
<frame name="three" src="doc3.html" scrolling="no" noresize">
<frameset cols="25%,75%">
<frame name="first" src="doc1.html" frameborder="no">
<frame name="second" src="doc2.html" frameborder="no">
</frameset>
</frameset>
</html>

Листинг 5. Документ doc3.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Документ для верхнего фрейма</title>
</head>
<body background="library/fons/fon3.jpg">
<h2>Документ для верхнего фрейма</h2>
</body>
</html>

Упражнение 2

Откройте программу Блокнот.
Наберите текст, изображенный в листинге 4.
Сохраните документ в папке web под именем frames_3.html
В новом документе наберите текст, изображенный в листинге 5. Сохраните документ в Вашей папке под именем doc3.html
Запустите файл frames_3.html двойным щелчком. В окне браузера web-страница должна иметь примерно следующий вид (рис. 2).

Рис. 2.

3. Бегущая строка

Эффект «бегущей строки» - популярное украшений web-страниц.

Текст, выделенный тегами <MARQUEE> и </MARQUEE> изображается браузером в виде бегущей строки.

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

ALIGN	Атрибут определяет выравнивание бегущей строки. ALIGN="top" – выравнивает верхнюю границу поля по самому верхнему краю самого высокого элемента в текущей текстовой строке ALIGN="middle" – центрирует поле по осевой линии текущей текстовой строки. ALIGN="bottom" – выравнивает нижнюю границу поля по нижней линии текущей текстовой строки.
DIRECTION	Атрибут определяет направление движения строки. DIRECTION="left" - строка появляется справа и движется влево (установка по умолчанию) DIRECTION="right" - строка входит в поде, слева и движется вправо.
BGCOLOR	Атрибут задает цвет фона бегущей строки
BEHAVIOR	Атрибут определяет поведение бегущей строки. BEHAVIOR="scroll" - это установка, используемая по умолчанию. При этом строка "вбегает" со стороны, определенной атрибутом direction в пустое поле и выходит из него на противоположной стороне. BEHAVIOR-SLIDE – текст не "выбегает" с другой, стороны поля, а останавливается. BEHAVIOR="alternate" - текст появляется в окне, "добегает" до противоположного конца окна, останавливается и начинает движение в противоположном направлении.
HEIGHT	Атрибут задает высоту поля бегущей строки. Задается в пикселях или в процентах относительно высоты окна браузера.
WIDTH	Атрибут задает ширину поля бегущей строки. Задается в пикселях или в процентах относительно ширины окна браузера. По умолчанию поле бегущей строки занимает всю ширину окна и имеет такую высоту, которая позволяет бегущей строке свободно разместиться в нем. Ширину поля лучше выбирать значительно короче, чем длина бегущей строки. Так подчеркивается сам эффект движения, привлекая внимание к бегущему шрифту.
HSPACE	Атрибут задает расстояние до текста по горизонтали в пикселях
VSPACE	Атрибут задает расстояние до текста по вертикали в пикселях. Атрибуты HSPACE и VSPACE создают свободное пространство между бегущей строкой и окружающими ее HTML- элементами.
LOOP	Атрибут определяет повторение бегущей строки. Броузер обычно выводит бегущую строку на экран только один раз. LOOP="N" – определяет N-кратное прохождение строки по экрану. LOOP="infinite" – повторяет бегущую строку до тех пор, пока отображение документа не будет прервано (например, загружается другая WEB-страница.
SCROLLAMOUNT и SCROLLDELAY	Эти атрибуты определяют, как быстро и насколько плавно бежит бегущая строка. SCROLLAMOUNT="N" - задает количество пикселей, на которое бегущая строка перемещается за один шаг. Малое значение (например N=1) соответствует строке, бегущей плавно. Если данное значение велико, строка делает большие скачки. SCROLLDELAY="N" - задает количество миллисекунд, которое ожидает Internet Explorer после каждого выполненного шага, прежде чем строка побежит дальше. Чем меньше это значение, тем чаще обновляется бегущая строка, тем "мягче" она бежит. Если это значение велико, анимационный эффект теряется.

Организация бегущей строки. Листинг 6

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Бегущая строка</title>
</head>
<body background="library/fons/fon3.jpg">
<marquee align="middle"
direction="left"
bgcolor="yellow"
behavior="scroll"
height="25"
width="100%"
loop="infinite"
scrollamount="7"
scrolldelay="0,02">
<font face="arial" size="4" color="navy"><b>РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ПРОФЕССИОНАЛЬНО-ПЕДАГОГИЧЕСКИЙ УНИВЕРСИТЕТ</b></font>
</marquee>
</body>
</html>

Упражнение 3

Откройте программу Блокнот.
Наберите текст, изображенный в листинге 6.
Сохраните документ в Вашей папке под именем stroka.html
Запустите файл stroka.html двойным щелчком.

4. Списки

Средствами HTML можно создавать любые списки: нумерованные с разными схемами нумерации и маркированные с разными типами маркеров.

Маркированные списки

Тег <U1>.. .</U1> формирует маркированный список.

Отдельный элемент списка в списке <U1> формируется с помощью тега <LI>.

У тегов <U1> и <LI> есть атрибут TYPE, который задает тип маркеров списка.

Его допустимые значения:

TYPE="disc" (закрашенный круг);

TYPE="circle" (окружность);

TYPE="square" (квадрат).

Нумерованные списки

Тег <OL>...</OL> формирует нумерованный список. Когда браузер встречает тег нумерованного списка, он нумерует элементы списка последовательно, начиная с единицы (по умолчанию). Отдельный элемент списка создается тегом <LI>.

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

START

Атрибут задает число, с которого начинается список.

START="N", где N – число, с которого начинается нумерация списка.

TYPE

Атрибут задает способ нумерации элементов списка.

TYPE="1" – нумерация выполняется арабскими цифрами.

TYPE="a" – нумерация выполняется строчными буквами (a,b,c,…).

TYPE="A" – нумерация выполняется прописными буквами (A,B,C…)

TYPE="I" – нумерация выполняется римскими цифрами (I,II,III,…).

Изменение стиля номеров позволяет задавать различия между нумерованными списками документа.

Создание списков. Листинг 7

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<title>Маркированный список</title>
</head>
<body background="library/fons/fon8.jpg">
<p align="left"><font size="4" face="arial"><i>
В настоящее время в структуре РГППУ 3 института</i></font>
<ul type="square"><font size="4" face="arial" color="maroon">
<li>Институт психолого-педагогического образования (ППО)</li>
<li>Институт гуманитарного и социально-экономического образования (ГСЭО)</li>
<li>Институт инженерно-педагогического образования (ИПО)</li>
</ul>
</body>
</html>

Упражнение 4

Откройте программу Блокнот.
Наберите текст, изображенный в листинге 7.
Сохраните документ в Вашей папке под именем spisok.html
Запустите файл spisok.html двойным щелчком. Результат изображен на рис. 3.
Откройте html-код файла frames_2.html, исправьте src="doc1.html" на src="spisok.html".
Сохраните исправленный файл под именем institut.html.
Запустите вновь созданный файл. Результат на рис. 4

Рис. 3.

Рис. 4

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

Для организации гиперссылки следует сообщить браузеру, какой элемент в HTML-файле служит привязкой, а также указать адрес документа или ресурса Internet, на который указывает ссылка. Все это делается в теге <А>...</А>. Между <А> и </А> могут находиться только текст и графика. Текст, располагающийся между <А> и </А> изображается браузером в цвете.

Графические элементы привязки создаются аналогично. Вместо текстового элемента привязки с помощью тега <IMG> создается графический и располагается между тегами <А> и </А>. Когда пользователь щелкает на любом участке изображения, браузер открывает web-страницу, ссылка на которую дана в теге <А>.

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

HREF	Этот атрибут определяет целевой адрес гиперссылки.
TITLE	Этот атрибут определяет имя цели гиперсвязи. С его помощью можно задать текст, который браузер отображает в строке состояния в процессе загрузки указанного в связи объекта. Это позволяет получить информацию о загружаемом документе до того, как закончится загрузка.
TARGET	Определяет по имени фрейм, в котором откроется содержание ссылки

Примеры:

<А HREF="HTTP://WWW.RAMBLER.RU"> - удаленный переход;
<А HREF="#MYLABEL"> - переход на конкретный фрагмент текущего документа. Предварительно этот фрагмент должен быть помечен меткой с помощью тега <А NAME = "MYLABEL">;
<А HREF="MY.HTM"> - переход на другой документ на своем компьютере;
<А HREF="C:\TEMP\MYFILE.HTM"> - использование в ссылке абсолютного адреса на своем компьютере.

Абсолютный адрес - это полный Internet - адрес со всей информацией, требующейся клиенту для того, чтобы отыскать сервер (HTTP ://WWW.RAMBLER.RU).

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

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

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

У тега <BODY> есть три атрибута, используя которые можно изменить цвет гиперссылки.

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

Упражнение 5

Введем ссылки в документ spisok.html

1. Откройте документ spisok.html в виде HTML-кода.

2. Для тега <body> задайте цвет гиперссылок:

3. Организуйте гиперссылки для пунктов Институт психолого-педагогического образования (ППО) и Институт гуманитарного и социально-экономического образования (ГСЭО)

Для этого просмотрите в браузере файлы psihology.html и gumanitar.html из папки web.
В документе spisok.html в соответствующих строках введите записи:

<li><a href="psihology.html" target="second"> Институт психолого-педагогического образования (ППО) </a>

<li><a href="gumanitar.html" target="second">Институт гуманитарного и социально-экономического образования (ГСЭО)</a>

В данных записях атрибут гиперссылки target="second" означает, что файлы psihology.html и gumanitar.html будут открываться во фрейме для второго документа, который имеет имя name="second" (см. html-код файла frames_2.html из листинга 1.

4. Запустите файл istitut.html в браузере. Щелкайте по гиперссылкам, чтобы проверить их работу. Содержание гиперссылки должно отображаться в правом фрейме. Результат на рис. 5

Рис. 5. Содержание активной ссылки из левого фрейма отображается в правом фрейме

5. Добавление видое на web-страницу

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

Мы рассмотрим, как подгрузить на наш сайт видеофайл с ресурса http://www.youtube.com.

В качестве примера мы выбрали видео под названием «Финал сезона Открытой Лиги КВН РГППУ. Игра целиком». Финал проходил 15.05.2015 г.

1. Для начала просмотрите этот ролик по адресу http://www.youtube.com/watch?v=-F_TgCoEDF4

2. Приступим к размещению этого ролика на нашей web-страничке под названием rgppu.html.

Для этого нам необходим HTML-код ролика. Чтобы получить код, на странице http://www.youtube.com/watch?v=-F_TgCoEDF4 щелкаем по ссылке Поделиться, далее по ссылке HTML-код (на рисунке 6 обозначено зеленым цветом).

Рис. 6

После этого появится код ссылки (рис. 7).

Рис. 7

3. Скопируйте код и вставьте в конец кода страницы rgppu.html. Добавьте впереди тег абзаца с выравниванием по центру. В результате код вставки видео будет следующим

4. Сохраните изменения. Просмотрите результат.

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

Задание: организовать сайт РГППУ. Фоны, шрифты и цвета Вы можете использовать по своему желанию

Создайте фреймовую структуру сайта, состоящую из трех фреймов (аналогичную рис. 2). Новый файл с трехфреймовой структурой назовите index.html. Как правило, у любого сайта главная страница имеет имя index.

Примечание: для указания размеров фреймов во фреймовой структуре можно использовать значения в пикселях, а не в процентах, например <frameset rows ="50,*">. Цифра 50 означает, что верхняя строка будет высотой 50 пикселей, а звездочка означает, что высота нижней строки будет рассчитана браузером автоматически в зависимости от высоты экрана пользователя.

В верхнем фрейме расположите бегущую строку.
В левом фрейме расположите список институтов РГППУ.
Создайте web-страничку для третьего института инженерно-педагогического образования (ИПО). Информацию об институте можно найти в файле inzhener.txt в папке web.
Для всех институтов организуйте гиперссылки, аналогично упражнению 5. В правом фрейме должна отображаться информация выбранной ссылки.
Ниже списка институтов расположите ссылку На главную страницу, при выборе которой в правом фрейме будет грузиться файл rgppu.html.

Ваш сайт должен выглядеть примерно так, как показано на рис. 8.

Рис. 8