Метод указ_ИНТЕРНЕТ_ТЕХНОЛОГИИ

МИНИСТЕРСТВО ТРАНСПОРТА РОССИЙСКОЙ ФЕДЕРАЦИИ
ФЕДЕРАЛЬНОЕ АГЕНТСТВО ЖЕЛЕЗНОДОРОЖНОГО ТРАНСПОРТА
САМАРСКАЯ ГОСУДАРСТВЕННАЯ АКАДЕМИЯ ПУТЕЙ СООБЩЕНИЯ
Кафедра автоматизированные системы обработки информации и управления
Язык HTML
Методические указания и контрольные задания
для студентов специальности 230201
«Информационные системы и технологии»
заочного обучения
Составители: Авсиевич А.В.
Авсиевич Е.Н.
Самара 2005
УДК 681.324
Мультимедиа технологии: Методические указания и контрольные задания для
студентов специальности 230201 «Информационные системы и технологии» заочной
формы обучения/Составители А.В. Авсиевич, Е.Н. Авсиевич. – Самара: СамГАПС, 2005.
- 24 с.
Утверждены на заседании кафедры 21.12.2005 , протокол № .14
Печатается по решению редакционно-издательского совета академии.
Методические указания включают в себя контрольную работу по курсу
«Мультимедиа технологии» с заданием, рассчитанным на получение навыков создания
Web - документов с использованием гипертекстового языка html.
Составители: Авсиевич Александр Викторович
Авсиевич Елена Николаевна
Рецензенты: Профессор кафедры ПМиВТ, доцент, к.т.н. Овсяников А.С., СГАСУ;
доц. кафедры «Информатика» к.п.н., Додонов М.В., СамГАПС.
Редактор: И.А. Шимина
Компьютерная верстка:
Подписано в печать 14.04.05 Формат 6090 1/16
Бумага писчая. Печать оперативная. Усл. п.л.
Тираж 100 экз. Заказ № 53
© Самарская государственная академия путей сообщения, 2005
1. ОСНОВНЫЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
1.1. Введение в язык HTML
Самой известной частью Интернета является всемирная паутина в английском
варианте Word Wide Web (WWW), которая состоит из Web-сайтов и отдельных Webстраниц.
Создание Web-страниц производится на HTML (гипертекстовый язык
разметок). Данный язык довольно прост, использовать его может каждый пользователь,
который хоть немного имеет опыт работы с Интернет.
Всемирная паутина состоит из огромного числа взаимосвязанных документов.
Взаимосвязь достигается за счет вставки в Web-страницу гиперссылок, которые
обеспечивают соединения с другими Web-страницами. Гиперссылки позволяют
связывать друг с другом документы различных форматов и используют для поиска
документа его уникальный адрес(URL – Universal Resource Locator) во всемирной
паутине.
В файле описания Web-страницы на языке HTML основная информация
чередуется с инструкциями по ее отображению и представляет собой обычный
текстовый файл чтение, которого осуществляется с помощью программ-браузеров.
Чтение HTML файла без использования браузеров затруднено из-за присутствия
служебной информации, а также не возможно увидеть графическое изображение, так как
на него имеется только ссылка.
При создании Web – сайта будем использовать текстовый редактор Notepad и
браузер Internet Explorer, которые присутствует в каждой операционной среде Windows.
1.2. Структура HTML - документа
Элементы языка HTML называют тегами. Для того, чтобы браузер их отличал от
обычного текста, они заключаются в угловые скобки < … >. Текст, не находящийся
между знаками <…>, весь виден при просмотре в браузере. Тег обозначает начало
действия какой-либо инструкции отображения. Если инструкция применяется ко всему
документу, то такой тег не имеет своего закрывающего двойника. Большинство тегов
парные, и второй тег прекращает действие первого. Закрывающий тег отличается от
открывающего тем, что в закрывающем теге присутствует косая черта после первой
угловой скобки.
Некоторые теги имеют параметры, которые уточняют правило отображения
содержимого и размещаются только в открывающем теге.
Наименование тегов и их параметров разрешается набирать в любом регистре
заглавными или строчными символами. Встроенные в каждый браузер анализаторы
HTML, не обращают внимания на регистр символов, которыми набраны все служебные
конструкции HTML-документа.
При написании HTML-документов, для удобства разработчика и внутреннего
документирования структуры текста применяются комментарии, содержимое которых не
обрабатывается браузером, и не отображаются. Комментарии располагаются между
фрагментами <--…-->. Пример создания комментария: <--Это комментарий-->.
Любая Web-страница структурно разбивается на две части: заголовок и тело. В
заголовке указывается служебная информация обо всей Web-странице, а в теле
описывается ее содержимое вместе с правилами его отображения. При этом заголовок
Web-страницы ограничивается тегами <head> и </head>, а тело документа обозначается
тегами <body> и </body>. Структура любой Web-страницы выглядит следующим
образом:
<html>
<head>
заголовок документа
</head>
<body>
тело документа
</body>
</html>
Ниже подробнее изучим элементы разметки HTML – документа.
1.3. Создание HTML – документа
В данной главе рассмотрим процесс создания Web-страницы с использованием
языка HTML. Для этого создадим на диске отдельную директорию (папку) для будущей
страницы, например, D:\WEB\. Откроем текстовый редактор Notepad, который есть в
каждой операционной системе windows и перепишем следующий текст:
<html>
<head>
<title> Пробная Web-странца </title>
</head>
<body>
Здравствуйте, это моя первая страница. <br> Добро пожаловать! :)
</body>
</html>.
Сохраним
этот
документ,
присвоив
ему
имя
*.html
(например:
D:\WEB\index.html), и откроем его в Internet Explore (IE).
Если требуется что-то изменить в созданном HTML документе (в блокноте), то,
чтобы посмотреть как это выглядит в Internet Explorer, надо не забывать нажимать в IE
кнопку "ОБНОВИТЬ", и если изменений нет, то значит, что где-то допущена неточность
или не сохранен документ.
1.4. Основные элементы языка HTML
1.4.1. Служебные элементы языка HTML
Тэг <html>...</html> является основным и может использоваться в текстовом
документе только один раз. Все что внутри него относится к "программе" на языке
HTML. Документ должен начинаться с <html> и заканчиваться </html>. Если есть
открывающий тэг, то обязательно должен быть и закрывающий.
Тег <head>…</head> определяет заголовок документа. Все элементы языка HTML
расположенные между тегами <head>…</head> относятся к служебной информации.
Рассмотрим теги, которые должны находится только внутри заголовка документа
(внутри раздела <head>) и сообщают браузеру служебную информацию.
Тег <title>...<title> сообщает название документа браузеру, которое браузер
отображают в названии окна. Например: <title> Мой первый сайт</title>.
Тег <meta>...</meta> определяет метаданные, то есть неотображаемую
информацию о документе, которая используется для идентификации документа и
указания режима отображения Web-страницы. Тег имеет набор свойств задание, которых
производится в виде имя/значение. В качестве свойств могут выступать: имя автора,
список ключевых слов, дата окончания существования (в Кешах прокси серверов) и еще
очень многое в зависимости от разновидности браузеров.
Свойства задаются через параметр NAME, либо через параметр HTTP-EQUIV, а
далее в CONTENT раскрывается их содержание.
Наиболее часто встречающиеся информация, которая передается через метаданные
это: имя автора, информация для поисковых машин, вид кодировки текста и т.д.
Рассмотрим некоторые из них.
Имя автора задать можно через свойство "Author" в следующем виде: <meta
name="Author" content="Bill Gates">.
Свойство "generator" отображает название редакторов Html документов и
выглядит так: <meta name="generator" content="Microsoft FrontPage Express
2.0">.
Для поисковых машин используются свойства "keywords" и "description".
Свойство "keywords" - содержит список ключевых слов Web-страницы и выглядит
следующим образом: <meta name="keywords" content="студент, экзамен,
сессия">. А свойство "description" предназначено для хранения краткой аннотации
Web-страницы и применяется в следующем виде: <meta name="description"
content="Сайт
предназначен
для
студентов
государственной академии путей сообщения ">.
заочников
Самарской
Рассмотрим некоторые свойства, задаваемые через параметр HTTP-EQUIV .
Свойство "Content-Type" описывает тип содержания документа и кодировку, в
которой он сделан и выглядит так:
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">, где text/html – определяет тип
содержания документа, Charset – описывает вид кодировки символов (например:
windows-1251, koi8-r, ISO-8859-1 и т.д).
Программа на языке html может работать и без раздела <head>, но хороший стиль
написания HTML-документа подразумевает его использование, для сообщения хотя бы
браузеру своего названия и кодировки текста.
Тэг <body>...</body> определяет тело документа и может содержать очень много
параметров. Все элементы языка HTML, расположенные между тегами <body>...</body>,
определяют непосредственное содержание документа.
Рассмотрим параметры тега <body>…</body>:
bgcolor - устанавливает цвет фона документа;
text - устанавливает цвет отображаемых символов;
link – устанавливает цвет, которым будут отображаться ссылки на другие
документы;
vlink – устанавливает цвет, которым выделяются уже посещенные ссылки;
alink – устанавливает цвет для того, чтобы помечать ссылки во время нажатия на
них мышкой;
background - задает фоновое изображение.
Значение цвета в этих параметрах задается в следующем формате: #RRGGBB, где
R (red - красный), G (green - зеленый), B (blue - синий)- это составляющие компоненты
цвета в шестнадцатеричной форме. Например, если надо получить зеленый цвет, для
которого составляющие красного и синего нулевые, то код цвета запишется так #00FF00.
Таким образом можно получить все 16 млн. цветов.
1.4.2. Элементы оформления HTML-документа
Тэг <font>…</font> - задает цвет текста в конкретной части документа, размер
шрифта и вид шрифта и имеет следующие параметры:
face - задает название шрифта, которым требуется отобразить текст в документе;
size - задает высоту символов, которая может находиться в пределах от 1 до 7;
color - задает цвет отображаемых символов, который задается в 16-ичном виде,
описанном раньше.
Приведем пример использования тега <font>…</font>.
<html>
<body>
<p>А это шрифт : <font face="Arial" color=#00FF00 size=4>Arial</font>
<font size=7 color=#FF0000 >Size 7</font>
<font size=3 color=#0000FF >Size 3</font>
<font size=+2>Size +2</font>
<font size=-1>Size -1</font>
</body>
</html>
В этом примере отобразятся надписи различного цвета, высоты и шрифта. В двух
предпоследних строчках используется в размере знак. Таким образом, указываются
относительные размеры шрифта, например, если размер вашего шрифта был 5, то при
записи +1 размер шрифта станет 6, и также с минусами. Но если был шрифт 3, и указано
+5 или -4, то размер не будет 8 или -1, а будет максимальный и минимальный.
Тег <basefont> применяется для установки базового шрифта на странице.
Параметры у него аналогичны <font> например: <basefont size=4 color=red
face="Arial">. Тег <basefont> не должен иметь закрывающую скобку. Его лучше
располагать в начале документа, но если нужно действие на определенном участке
текста, то можно использовать внутри него. Так как этот тег определяет базовый шрифт,
то в примере размер шрифта будет откладываться от 4. По умолчанию, если не
используется <basefont>, базовый шрифт имеет размер 3.
Рассмотрим ряд примеров применения приведенных выше параметров в HTML –
документе. Окрасим слова "Добро Пожаловать" в первом примере красным цветом.
<html>
<head>
<title>Первый пример </title>
</head>
<body>
Здравствуйте, это моя первая страница. <br>
<font color="#CC0000"> Добро пожаловать! :) </font>
</body>
</html>.
В следующем примере зададим цвет текста документа в открывающем теге
<body>: <body text= "#336699">. Это значит, что весь текст страницы будет синим, кроме
текста, для которого мы специально прописали <font>…</font> (если цвет в <body> не
задавать, то по умолчанию он будет черным).
<html>
<head>
<title> Второй пример </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Установим цвета фона в тэге <body>: <body bgcolor="#000000">. Для наглядности
здесь прописан черный цвет (если цвет в <body> не указывать, то по умолчанию он будет
белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого,
поэтому лучше уж прописывайте цвет фона в body). По экспериментируете с цветами в
данном примере.
<html>
<head>
<title> Третий пример </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>.
Тег <p>...</p> происходит от начальной буквы слова paragraph (параграф или
абзац). Все содержимое этого элемента, помещенное внутри <p>...</p>, отделяется от
другого содержимого страницы несколькими пустыми строками.
Абзацы можно выравнивать по левому или правому краю, а также по центру. За
это отвечает параметр align, который может принимать значения left - по левому краю(<p
align="left">текст</p>), right - по правому краю (<p align="right">текст</p>) и
center -по центру (<p align="center">текст</p>). Кроме этих выравниваний
существует еще одно, которое поддерживает пока только IE, это justify - выравнивание
по ширине страницы. По умолчанию все абзацы выравниваются по левому краю, если
конечно этот параграф не является вложенным в другой блок, выравнивание которого
другое.
Теперь введем параграфы и посмотрим наглядно, что получится (в пример
подставлен параграф с параметром центрирования текста (center), попробуйте
подставить в параграф другие параметры со значениями Left или Right).
<html>
<head>
<title>Чтвертый пример </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
</body>
</html>.
Теги <h1>...</h1>, <h2>...</h2>, <h3>...</h3>, <h4>...</h4>, <h5>...</h5>,
<h6>...</h6>. Определяют заголовки разных размеров и имеют огромное значение при
создании html – документа. Различаются они размером букв при этом <h1> - самые
большие, а <h6> - самые мелкие. Заголовки, как и абзацы, можно выравнивать через
параметр align. В нижеследующем примере подставлен заголовок третьего уровня
<H3>…</H3>.
<html>
<head>
<title>Пятый пример</title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать в Интернете страницы с разными
целями их применения.
</p>
</body>
</html>
Теги <big>...</big> и <small>...</small> предназначены для сокращения записи
тегов типа <font size=+1>...</font>, который заменяется тегом <big> увеличивающим
размер текста на единицу. Аналогично тег <small> уменьшает текст на единицу
относительно текущего размера.
Тег <sub>...</sub> и <sup>...</sup>. Элементы создания записей формул, в
которых требуется написание индексов и степеней. Тег <sub>...</sub> определяет
нижний индекс, а тег <sup>...</sup> - верхний. Приведем пример записи формул C2H5OH
или 32=9.
<html>
<head>
<title>Шестой пример</title>
</head>
<body text="#336699" bgcolor="#000000">
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9
</body>
</html>
Тег <b>...</b> является сокращением от bold, отображает шрифт жирным
шрифтом. Наряду с тегом <b> в редакторе Front Page используется тег <strong>, который
выполняет те же функции. Запись тега <b>...</b> производится следующим образом:
<p>А это <b>жирный шрифт</b></p>.
Тег <i>...</i> отображает текст наклонным и происходит от слова Italic (наклонный
шрифт). Пример применения тега <i>...</i>: <p>А это <i>наклонный шрифт</i> и
<b><i>жирный наклонный текст</i></b>.
Тег <u>...</u> выводит подчеркнутый текст, находящийся между тегами
<u>...</u>. Пример применения тега<u>…</u>: <p><u>Подчеркнуть текст</u>.
Тег <s>...</s> отображает текст зачеркнутым шрифтом. Пример использования
тега <s>...</s>: <p><s>Зачеркнутый текст</s>.
Тег <tt>...</tt> выводит текст, находящийся между тегами с постоянной шириной
символа (имитация телетайпного текста). Пример: <p>Текст из <tt>ТЕЛЕТАЙПА</tt>.
Тег <pre>...</pre> отображает с постоянной шириной символы, не пропускает
пробелы, табуляции и переносы строк, тем самым оставляет первоначальное состояние
текста.
Пример применения тега <pre>...</pre>.
<pre>
1
2
это будет
</pre>.
3
хорошо
4
5
выглядеть
Тег <div>...</div> создает новый раздел в документе и чаще всего применяется для
задания выравнивания текста из больших кусков. Для этого используется параметр align,
который задает выравнивание внутри раздела.
Пример применения <div>...</div>.
<div align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>.
При отсутствии данного элемента пришлось писать в каждом абзаце <p
align=right>...., что естественно трудоемко.
Тег <blockquote>...</blockquote> используется для приведения цитат, и
выделяется увеличенным отступом с двух сторон.
Пример отображения цитат.
<blockquote>
Пришел, увидел, победил
br (Ю. Цезарь)
</blockquote>
Тег <hr> вычерчивает горизонтальные линии и имеет следующие параметры:
align - определяет выравнивание линии в документе и имеет свои обычные
значения. По умолчанию линия отображается шириной во все страницу, и поэтому ее
выравнивание не будет заметно;
noshade - этот атрибут используется для вывода линии в виде полосы одного цвета.
По умолчанию она отображается в виде канавки;
size - устанавливает высоту линии в пикселях;
width - устанавливает ширину линии в пикселях или в процентах от ширины
внешнего элемента.
Пример использования тега <hr>.
<hr width=80% align=left>
<hr width=50% align=center size=10>
<hr width=150 align=right noshade>
Тег <br> произошел от слова break line и служит для переноса строки в языке
Html. Помогает начать новую строку, не прибегая к тегу <p>, который дает большой
отступ от предыдущей строки.
Пример работы тега <br>: <p>Пораз-<br>рываем стро-<br>ку.
Тег <nobr>…</nobr> сообщает браузеру о том, что текст, который находится
внутри него ни в коем случае нельзя переносить, даже если в окно на каждую строку
может уместится не больше одного слова.
В конце рассмотрения данного раздела приведем полный текст HTML-документа,
который демонстрирует все элементы текстового оформления.
<html>
<head>
<title> Седьмой пример </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя первая страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
Знание языка html позволяет создавать Интернет страницы с разными
целями их
применения.
</p>
C<sub>2</sub>H<sub>5</sub>OH или 3<sup>2</sup>=9.
<p>А это <b>жирный шрифт</b></p>
<p><u>Подчеркнуть текст</u>
<p><s>Зачеркнутый текст</s>
<pre>
1
2
3
4
5
это будет классно выглядеть
</pre>
<div align=right>
<p>Абзац справа 1
<p>Абзац справа 2
<p>Абзац справа 3
</div>
<blockquote>
Пример цитаты
<hr width=80% align=left>
<hr width=50% align=center size=10>
<hr width=150 align=right noshade>
</blockquote>
<p>Пораз-<br>рываем стро-<br>ку
</body>
</html>
1.4.3. Вставка графики в html-документ
В HTML–документах можно применять графику различных форматов. Самые
распространенные форматы GIF и JPG.
Формат GIF позволяет создавать анимированные картинки. Этот формат является
сжатым, и допустимое количество цветов в нем 256. Сжатие происходит без потерь, то
есть изображение записывается без каких-либо преобразований.
Формат JPG также является сжатым, и применяется для изображений требующих
большое количество цветов вплоть до 16 млн. Сжатие происходит после оптимизации и
поэтому имеются потери в качестве. Размер файла сильно зависит от требуемого
качества изображения, которое может иметь 7 уровней качества (от очень плохого до
наилучшего).
В Интернете сейчас начинают применять новый стандарт PNG, но он пока мало
распространен. Он позволяет создавать изображения в 16 млн. цветов без потери в
качестве. Но из-за этого занимает намного больше места, чем JPG.
Рассмотрим элементы, позволяющие использовать графику при создании страниц.
Здесь можно высказать предостережения против большого количества применения
графики, так как это резко увеличивает размер сайта и ухудшает скорость загрузки.
Рассмотрим элементы, с помощью которых будем вставлять и обрабатывать
графику в html-документ.
Тег <img> вставляет изображение в документ. Он имеет следующий набор
параметров:
Src – указывает источник изображения. Им служит, как правило, путь
относительно текущего документа, но можно использовать вместо пути его URL в
Интернете. Закрывающая скобка запрещена;
alt - задает текст, который будет изображаться вместо картинки, если она не
загрузилась или не отображается. Этот текст также появляется во всплывающей
подсказке. Как правило, в тексте указывается краткое описание изображения или ссылки,
а также иногда содержит в себе название файла с его размером;
lowsrc - источник изображения низкого качества или размера для быстрой
предварительной загрузки;
Align - задает выравнивание изображения относительно текущей строки:
 align=top - выравнивает верхний край изображения по верхнему краю
текущей строки;
 align=middle - выравнивает центр изображения по базовой линии текущей
строки;
 align=bottom - установка по умолчанию. Выравнивает нижний край
изображения по базовой линии текущей строки;
 align=left - выравнивает изображение по левому полю;
 align=right - выравнивает изображение по правому полю;
width и height - эти атрибуты задают горизонтальный и вертикальный размер
картинки, чтобы еще до начала загрузки изображения браузер выделил ему требуемое
место;
border - задает толщину рамки, которой будет обрисовываться изображение. Если
изображение не является ссылкой, то оно по умолчанию не окружается рамкой. Если же
это изображение-ссылка, то толщина рамки будет равна 2. Рамка иногда может портить
стиль страницы, тогда используйте border=0;
Vspace- используется для указания ширины пространства сверху и снизу от
изображения в пикселах. Как правило, по умолчанию равно 0. Но может быть и иным;
usemap и ismap - устанавливают на картинку карты ссылок.
Приведем пример применения некоторых параметров тега <img>:
<html>
<base href="http://www.mjk.msk.ru/~dron/images">
<p><img src="prob.gif">
<p><img src="../banner.gif">
<p><img src="http://www.rambler.ru/dronban.jpg">
<img src="pic1.gif" alt="Рисунок 1. Пример вращения твердого тела.">
<img src="b.jpg" alt="b.jpg (1340b)">
</html>
В примере специально указан тег <base href=...>, который означает, что первая
картинка будет загружаться из http://www.mjk.msk.ru/~dron/images/prob.gif. Вторая уже
будет загружаться из каталога высшего уровня, т.е. в данном случае прямо из
http://www.mjk.msk.ru/~dron/. Последняя картинка демонстрирует возможность загрузки
картинок с других сайтов, и загрузится с сайта http://www.rambler.ru/.
Большинство параметров в HTML не требуют заключения в кавычки, но параметр
alt лучше ограничивать, т.к. он может содержать пробелы и разделительные знаки,
которые браузер не сможет обработать.
В названиях файлов изображений используйте только прописные буквы алфавита.
Связано это с тем, что большинство хостирующих организаций используют Unixсистемы, а в таких системах имена prob.gif и Prob.GIF различны. Несоблюдения такого
простого правила часто приводит к тому, что из странички вызывается файл с именем
p1.gif, а на самом деле там лежит что-нибудь вроде P1.Gif. Кстати это же относится и к
названиям самих страниц. Старайтесь также не использовать длинных названий типа
this_is_my_house_image1.gif, когда можно воспользоваться простым именем pic1.gif или
p1.gif.
Изображения на страничках имеют очень большое значение для современного
Интернета. Без них немыслим хороший дизайн и оформление. Но надо ограничиваться
разумными рамками использования изображений, потому что каждое изображение
увеличивает размер страницы и время полной загрузки. Любое изображение занимает на
порядок больше места, чем та же самая страница, которая его использует. Поэтому более
80% всего размера сайта принадлежит именно графике.
Графическое изображение можно сделать фоном документа с помощь его
прописки в открывающемся тэге <body>, например: <body text="#336699"
bgcolor="#000000" background="ваш_фон.jpg">. Параметр Background указывает на то,
где лежит фоновая картинка, в данном примере он указывает на то, что а фоновая
картинка лежит в той же директории (папке), что и документ.
Совместное использование параметров bgcolor и background может применятся на
случай, когда фоновая картинка не загрузится, тогда вступит в силу фоновое
изображение.
1.4.4. Создание ссылок
В этом разделе рассмотрим создания ссылок на различные документы. Для начала
создадим в одной директории два файла exam1.html и exam2.html.
exam1.html (название файла)
<html>
<body text=black bgcolor=white link=red vlink=green>
<p>Первый документ
</body>
</html>
exam2.html (название файла)
<html>
<body text=black bgcolor=hite link=blue vlink=yellow>
<p>Второй документ
</body>
</html>
Тег <a> используется для связи страниц между собой, то есть из одного файла
создает удаленную ссылку на другой. У него существует несколько параметров :
href - задает ссылку на другой документ. В него можно записывать относительный
путь или конкретный URL;
name - задает название для закладки;
target="_blank" - указывает, что документ, на который дается ссылка, откроется в
новом окне браузера.
Для связывания первого файла exam1.html со вторым требуется вставить в него
следующую строку: <a href=exam2.html>Второй документ</a>. После этого можно в
любой момент из первого документа попасть во второй. Для создания ссылки на другой
сайт или ресурс, вы должны указать, например: <a href=http://www.microsoft.ru>
Сайт Майкрософт</a>.
В Интернете существуют ссылки не только на документы с расширением *.html, но
и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:). Ссылки на такие
документы создаются аналогично принципу рассмотренному ранее, например: <a
href="http://www.melody.ru /music.mp3"> скачать песню </a>.
Если адрес указан таким способом: <a href="http://www.melody.ru/">
музыкальный сайт </a>, то это означает, что в указанном каталоге есть файл вроде
index.html, который загрузится по умолчанию.
Для открытия любого файлового документа в новом окне используем параметр
target, например: <a href="big.jpg" target="_blank"> <img src="small.jpg">
</a>.
При разработке сайтов, которые содержат большое количество графики, иногда
требуется резать графические рисунки на кнопки для создания ссылок. Для выполнения
этой задачи используется способ создания "карты" на изображении (от англ. map-карта).
Чтобы создать "карту" в языке html существует тег <map>.
Тег <map>...</map> задает разбиение изображения на "горячие" области, т.е.
области при нажатии на которые можно загрузить другой файл HTML. Закрывающая
скобка также должна обязательно присутствовать. Внутри <map>...</map> должны
следовать элементы, описывающие "горячие" области, которые задаются элементом
<area>.
Параметр у этого тега только один - это name, который должен быть обязательно и
задает имя карты разбиения.
Тег <area> задает "горячие" области. Он не содержит закрывающей скобки и
имеет следующие параметры:
href - задает адрес страницы, которая будет загружаться этой областью;
shape - задает форму "горячей" области и может принимать значения circle окружность, rect - прямоугольник, poly - полигон любой формы;
coords - задает координаты области. Все координаты отсчитываются от левого
верхнего угла изображения. Они могут задаваться либо в пикселах, либо в процентах от
размеров изображения, т.е. X от ширины, а Y от высоты. Так как существуют разные
формы областей, то способы их задания также различны.
Для окружности : coords="Х центра, Y центра, радиус".
Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y".
Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......" ;
nohref – атрибут предназначен для запрета области, на которую нельзя нажимать.
alt - этот атрибут, как и у изображений, сообщает текст браузеру, который будет
выводиться при наведении мыши на "горячую" область.
Следование областей может быть произвольным, но если какие-то части областей
пересекаются, то на область пересечения будет относиться к области, которая идет в
списке первой. Это касается областей с атрибутом nohref и поэтому это свойство можно
использовать того, чтобы выколоть в области" дырку". Для надо первой прописать
область с атрибутом nohref, а затем нормальную.
Пример тега <area>:
<area shape=rect coords=5,5,15,15 nohref>
<area href=main.html shape=rect coords=0,0,20,20 alt="Main Page">
Для того чтобы назначить изображению карту, надо использовать параметр
usemap и в нем указать значение name в теге <map>. Пример: <img src=example.gif
usemap="#example">. При указании имени важно учитывать регистр.
Приведем пример возможности применения способа карт для разбивания
изображения.
<map name="prob">
<area href=koi.html shape="circle" coords="60,18,12">
<area href=win.html shape="poly"
coords="62,37,68,30,86,30,92,37,87,46,69,46">
<area href=iso.html shape="circle" coords="78,63,12">
<area href=main.html shape="rect" coords="19,73,60,92">
</map>
<p><img src=step13.gif usemap="#prob" alt="Menu">.
1.4.5. Списки
Списки это один из самых используемых элементов в оформлении HTML –
документов. В HTML существует три вида списков ненумерованные, нумерованные и
списки определений.
Ненумерованные списки (маркеры). Называется так потому, что каждый
элемент списка выделяется не своим порядковым номером, а просто жирной точкой или
квадратом.
Ограничивающими скобками для ненумерованного списка являются <ul>...</ul>,
внутри которых он собственно и размещается. Каждый элемент списка, дабы его
отделить от остальных, ограничивается скобками <li>...</li>. Для краткости
закрывающую метку можно не использовать.
Пример:
<ul>
<li>Первый элемент списка
<li>Второй элемент списка</li>
</ul>.
В теге <li>...</li> можно задать разное начертание маркера с помощью параметра
type, который может принимать значение disc – черная точка, square - квадрат и circle круг.
Пример создания ненумерованного списка:
<ul type=square>
<li>1 element
<li type=disc>2 element
<li type=circle>3 element
<li>4 element
</ul>.
Нумерованные списки. Эти списки позволяют пронумеровать каждый элемент,
причем это может делаться арабскими и римскими цифрами, а также буквами.
Ограничивающие скобки для таких списков <ol>...</ol>. Параметр type задает тип
нумерации:
type=1 задает тип нумерации арабскими цифрами 1,2,3,...
type=a задает тип нумерации латинскими буквами a,b,c,...
type=A задает тип нумерации латинскими заглавными буквами A,B,C,...
type=i задает тип нумерации римскими цифрами в нижнем регистре i,ii,iii,iv,...
type=I соответственно римскими цифрами в верхнем регистре I,II,III,IV,...
Пример создания нумерованного списка:
<ol type=1>
<li>1 element
<li type=a>2 element
<li type=A>3 element
<li type=i>4 element
<li type=I>5 element
<li>4 element
</ol>.
Списки могут иметь более сложную структуру, т.е. быть вложенными. В таких
случаях браузеры сами меняют тип нумерации списков, чтобы они различались.
Списки определений. Эти списки отличаются от двух предыдущих по своей
структуре и организации. Используются для описания определений и терминов.
Ограничивающими скобками списка определения являются теги <dl>...</dl>. Для
определения термина используется тег <dt>, а для его определения тег <dd>.
Пример применения списка определения:
<dl>
<dt>Teрмин 1<dd>Определение первого термина.
<dt>Teрмин 2<dd>Определение второго термина.
</dl>
В оформлении документов списки играют большую роль, так как в большинстве
случаев на странице приходится очень много всего перечислять (ссылки, краткие
оглавления, какие-то разновидности предметов и т.д.).
Текст HTML – документа с демонстрацией применения списков приведен ниже.
<html>
<head>
<title>Первый пример</title>
</head>
<body text="#FFFFFF" bgcolor="#000000">
<p> Ненумерованные списки </p>
<ul type=square>
<li>1 element
<li type=disc>2 element
<li type=circle>3 element
<li>4 element
</ul>
<p> Нумерованные списки </p>
<ol type=1>
<li>1 element
<li type=a>2 element
<li type=A>3 element
<li type=i>4 element
<li type=I>5 element
<li>4 element
</ol>
<p> Списки определений</p>
<dl>
<dt>Teрмин 1<dd>Определение первого термина.
<dt>Teрмин 2<dd>Определение второго термина.
</dl>
</body>
</html>
1.4.6. Таблицы
Таблицы являются неотъемлемой частью HTML – документа, они используются не
только по своей основной функции, но и для оформления web-страниц, компоновки
разрезанной графики и т.д.
Рассмотрим элементы создания и оформления таблиц.
Тег <table>…</table> применяется для создания таблиц. Вся таблица должна
находиться внутри него. Закрывающая скобка </table> указывается обязательно.
Параметры данного тега задают вид таблицы, ее цвет, толщину рамки и многое другое. В
теге <table> могут быть следующие параметры:
align - задает выравнивание таблицы. Если таблица находится в выровненных
участках текста, т.е. где указаны <div> или <center>, то выравнивание можно не
указывать. По умолчанию таблица выравнивается по левому краю;
width - задает ширину таблицы. Как правило, браузер подбирает размер таблицы
таким образом, чтобы там все хорошо уместилось, но если нужен конкретный размер, то
можно указать его в пикселах или в процентах от свободного пространства;
border - используется для указания ширины границы таблицы в пикселах. По
умолчанию имеет размер равный 0, и при этом границы таблицы не отображаются;
cellspacing - каждую ячейку браузер обводит своей собственной рамкой, и этот
параметр задает ширину пространства между ними;
cellpadding - этот параметр тоже задает ширину пространства, но только уже
между рамкой ячейки таблицы и ее содержанием внутри;
bgcolor - задает цвет фона таблицы;
background - изображение, которое будет отображаться в виде фона таблицы.
Тег <caption>...</caption> располагается после тега <table> и выводит заголовок
таблицы, который будет отображаться над ней.
Тег <tr>…<\tr> создает новый ряд ячеек. Закрывающую скобку можно не
указывать. Тег <tr> имеет следущий ряд параметров:
align - задает выравнивание внутри всех ячеек таблицы. Значения параметра
аналогичны выравниванию текста;
valign – выравнивание по вертикали. Может принимать следующие значения: top выравнивание по верху, middle - по центру и bottom - по низу;
bgcolor и background - задают цвет или изображение фона одной строки таблицы.
Тег <td>…<\td> или <th>…<\th> предназначен для создания новой ячейки.
Количество ячеек (т.е. элементов <td> и <th>) должно быть одинаково в каждом ряду
таблицы, т.е. внутри каждого тега <tr>.
Ячейки таблицы более богаты своими параметрами, в них входят все параметры
строк таблицы, описанные выше, и еще ряд следующих:
rowspan - объединяет указанное количество ячеек в одну по вертикали;
colspan - объединяет ячейки по горизонтали;
width и height - задают рекомендуемые размеры ячейки по горизонтали и
вертикали.
Приведем пример простейшей таблицы:
<table border=1>
<tr><td>Первая ячейка<td>Вторая ячейка
<tr><td>новый<td>ряд
</table>
Подробно, на примерах, рассмотрим применение разных методов создания и
способов оформления таблиц.
Начнем с примера объединения ячеек таблицы на примере:
<table border=2>
<tr><td>1<td>2<td>3<td>4<td>5
<tr><td colspan=2 rowspan=2>6<td colspan=2>7<td rowspan=2>8
<tr><td>9<td>10
<tr><td>11<td>12<td>13<td>14<td>15
</table>
Результат выглядит следующим образом:
5
1 2 3 4
7
6
1
8
9
0
1 1 1 1 1
1 2 3 4 5
Как видно в первой строке 5 элементов <td>. Во второй строке элементов <td> уже
всего 3, но если просуммировать все значения colspan, то снова получится 5. По
умолчанию для каждой ячейки параметр colspan равен 1.
Третья строчка формируется из количества ячеек предыдущей строки. В примере
есть 2 ячейки, параметр rowspan в которых не равен 1, причем первая расширяется на 2
ячейки. Значит, в этой строчке остаются незаполненными всего 5-3=2 ячейки. Что и
соответствует действительности.
Приведем еще один пример работы с таблицами с заданием разного фона. Фон
задается параметром bgcolor="цвет фона". Фон можно задать для таблицы в целом, для
ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого
столбца.
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Результат будет выглядеть следующим образом:
Чтобы задать высоту и ширину ячейкам таблицы воспользуемся параметрами
height и width, которые можно задать для всей таблицы, для одного ряда, для ячейки
(столбца). Высота и ширина могут задаваться как в пикселах, так и процентах. В нашем
случае мы зададим ширину и высоту в пикселах для столбцов (ячеек).
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> 1x1 </td>
<td width="50" bgcolor="#336699"> 1x2 </td>
<td width="50" bgcolor="#FFCC33"> 1x3 </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> 2x1 </td>
<td width="50" bgcolor="#FFCC33"> 2x2 </td>
<td width="50" bgcolor="#336699"> 2x3 </td>
</tr>
</table>
Получим:
Теперь выровним содержимое внутри таблицы:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center>
</td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center>
</td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
Результат будет таким:
В каждой ячейке (столбце) могут находиться и картинки, и текст, и даже таблицы
(в этом случае они называются вложенными таблицми). И тэги, которые мы применяем
для форматирования текста - все те же.
Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и
тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке.
Вернемся к нашему примеру, и поговорим о вертикальном выравнивании
содержимого таблицы. Вертикальное выравнивание задается следующим атрибутом valign="middle" (top, bottom) - содержимое конкретной ячейки будет находиться в
середине ячейки (наверху или внизу):
Вот наглядный пример, а теперь как это пишется:
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33" valign="top">
<center>1x1</center> </td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
<td
width="50"
bgcolor="#FFCC33"
valign="bottom">
<center>1x3</center>
</td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699" valign="bottom">
<center>2x1</center> </td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699" valign="top"> <center>2x3</center>
</td>
</tr>
</table>
Теперь перейдем к следующей ступеньке, чтобы узнать о других атрибутах,
облегчающих нашу трудную жизнь.
Приведем примеры работы параметров colspan и rowspan
В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1.
Код будет выглядеть следующим образом:
<table>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center>
</td>
<td width="50" bgcolor="#336699"> <center>1x2</center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center>
</td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
<td width="50" bgcolor="#336699"> <center>2x3</center> </td>
</tr>
</table>
Применение параметра rowspan. Принцип действия его тот же:
Попробуйте сами написать код для такой таблицы (подсказка, тут должна
исчезнуть ячейка 2х3).
Попробуем изменить расстояние пространства между ячейками таблицы, это
достигается с помощью атрибута cellspacing, равного нулю. Посмотрим пример.
<table cellspacing=0>
<tr>
<td height="35" bgcolor="#FFCC33" colspan="2"> <center>1x1</center>
</td>
<td width="50" bgcolor="#336699" rowspan="2"> <center>1x2</center>
</td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center>2x1</center>
</td>
<td width="50" bgcolor="#FFCC33"> <center>2x2</center> </td>
</tr>
</table>
Попробуйте изменить параметры cellspacing и посмотреть, что из этого получится.
1.4.7. Фреймы
Фреймы (от слова frame - кадр, окно) были придуманы достаточно давно и уже
завоевали большую популярность. Они помогают разделить рабочее пространство окна
браузера на любое количество частей разных размеров. В каждую такую часть потом
можно загрузить собственную страницу.
Для создания фреймов создается отдельный файл, который при загрузке сделает
разбиение окна, и подскажет браузеру, где взять содержимое каждой ячейки.
Разбиение задается с помощью тега <frameset>, используемого вместо <body>. У
него есть следующие атрибуты:
rows - задает разбиение на "строки", т.е. разбивает окно на горизонтальные
области;
cols - задает разбиение на "колонны", т.е. разбивает окно на вертикальные области;
frameborder - имеет значение yes или no. Устанавливает признак окантовки
фрейма;
border - задает ширину окантовки фрейма в пикселах;
bordercolor - задает цвет окантовки фрейма. Цвет задается в шестнадцатеричном
виде.
Рассмотрим подробнее процесс разбиения с помощью cols и rows.
Для начала пример:
<frameset cols=100,10%,*>
....
</frameset>
Разбить окно можно на очень большое количество областей. После знака "="
указываются все размеры этих областей через запятую. Размер области может задаваться
тремя способами: непосредственный размер в пикселах, размер в процентах от размера
окна и произвольный. Все способы разбиения приведены в примере. В данном случае
окно разделится на 3 вертикальные части, первая будет 100 пикселов в ширину, вторая
10% от размера окна, а размер последней будет зависеть от размеров предыдущих, т.е. ей
останется все остающееся до полного размера окна.
Для указания страниц, которые будут загружаться во все области, предназначен тег
<frame>, который должен находиться внутри раздела <frameset>. У него также есть свои
параметры:
name - в этом параметре указывается имя области, по которому потом можно будет
к ней обращаться. Это имя должно быть уникальным и не должно повторяться;
crs - источник этой области, т.е. имя файла или URL документа, который будет
сюда загружен;
marginwidth и marginheight - задают вертикальный и горизонтальный размеры
границы фрейма в пикселах.
frameborder - устанавливает признак отображения границы фрейма. Имеет
значение yes или no;
scrolling - имеет значения yes, no или auto. Отвечает за использование полосы
прокрутки, если содержимое Web-страницы полностью не помещается на экран
монитора. При использовании значения yes скроллинг будет присутствовать всегда, при
auto - скроллинг будет появляться, только когда он нужен, а при no скроллинг никогда не
появится;
noresize - запрещает изменение размера фрейма. По умолчанию размер каждой
области можно менять тасканием за границы мышкой;
bordercolor - задает цвет окантовки фрейма.
До сих пор существуют браузеры, которые не поддерживают фреймы, к ним
относятся текстовые или совсем старые. Специально для таких браузеров существует тег
<noframes>...</noframes>, внутри которого размещается содержимое страницы, не
использующей фреймы.
Пример:
<html>
<frameset col=100,* border=0>
<frame name="menu" src="menu.html" noresize scrolling=no>
<frame name="mainframe" src="title.html" scrolling=auto>
</frameset>
<noframes>
<p>Sorry, your browser don't support frames mode.
<br>Change Browser and come again !!!
</noframes>
</html>
В этом примере мы разбиваем окно на 2 вертикальные части, и загружаем в них два
соответствующих файла.
Теги <frameset> могут быть вложенными. Таким образом разбивать страницы
можно как угодно.
Пример:
<html>
<frameset cols=100,* marginwidth=0 marginheight=0>
<frameset rows=100,* border=0>
<frame name=left_up src=leftup.html noresize scrolling=no>
<frame name=left_down src=leftdown.html scrolling=yes>
</frameset>
<frame name=right src=right.html scrolling=auto>
</frameset>
<noframes>
HE-HE-HE !!! You have COOL Browser !!!
</noframes>
</html>
В этом примере будут создаваться две колонки, и при этом левая колонка
разобьется еще на две части.
Фреймы несколько усложняют работу с ссылками, но не на много. В каждом
фрейме может содержаться своя страница, и на каждой из них могут быть различные
ссылки. Если нажать на любую из них, то этот документ будет загружаться в этом же
фрейме, но что делать если ее надо загрузить в другом (например, соседнем) фрейме.
Итак, чтобы загрузить страничку в определенном фрейме надо при описании ссылки
воспользоваться атрибутом target, в котором необходимо указать имя требуемого
фрейма.
Пример:
<a href="left.html" target="left1">А эта ссылка загрузится во фрейме
с именем left1 !!!</a>.
Для того чтобы обеспечить большую гибкость при работе с фреймами существуют
несколько зарезервированных браузером имен, которые можно использовать. Это имена
_blank, _top, _self, _parent.
_top, _parent - эти имена используется для загрузки страницы в этом же окне, но
при этом все предыдущие фреймы удаляются;
_self - это имя для загрузки страницы в этом же фрейме, но его можно по
умолчанию не указывать;
_blank - для загрузки страницы создается новое окно.
Фреймы очень помогают при создании хорошей навигации, т.к. не приходится
много раз переписывать один и тот же код с кнопками и другими элементами. А также не
придется сто раз загружать тоже самое. Для этого делаете один фрейм с ссылками
(кнопками), а другие для оформления и загрузки страниц. Это намного проще.
Расположить фреймы можно по разному, вот для примера четыре варианта из
множества возможных:
Сначала создадим такой вариант:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
/frameset>
</head>
</html>.
В предыдущем примере заменим параметр rows, на cols и получим следующее
расположение фреймов:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,150,*">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
</html>
Пример фрейма следующего вида:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset rows="100,*">
<frame src="logo.html">
<???>
</frameset>
</head>
</html>
Пример создания фрейма следующего вида:
<html>
<head>
<title>Хождение по фреймам</title>
<frameset cols="100,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
</html>.
2. ЗАДАНИЕ НА КОНТРОЛЬНУЮ РАБОТУ
Создать средствами языка HTML Web-сайт с фреймами на произвольную тему.
Web-сайт должен содержать не менее трех фреймов, в которые загружаются отдельный
Web-страницы.
Web-страница должна содержать оформленный текст, таблицы и рисунки.
Количество таблиц на сайте должно быть не менее двух. Каждая страница должна
содержать не менее двух рисунков.
В документе обязательно должны присутствовать ссылки на мультимедийные
ресурс, то есть на звуковые или видео материалы, а также элементы созданные в пакете
Macromedia Flash.
3. СПИСОК РЕКОМЕНДУЕМОЙ ЛИТЕРАТУРЫ
1.
2.
3.
4.
Шапощников И.В. Самоучитель HTML 4. – СПб.: БВХ-Петербург, 2001. –
288 с.
Уроки Web-мастера. Технология и инструменты: Практическое пособие. –
2-е изд. – СПб.: КОРОНА принт, 2004. – 448 с., илл.
Авсиевич А.В. Мультимедиа технологии (Macromedia
Flash).
Методические указания к выполнению лабораторного практикума для
студентов специальности 071900 дневной и заочной форм обучения. –
Самара: СамГАПС, 2004. – 80 с.
Гудман Д. JavaScript и DHTML. Сборник рецептов. Для профессионалов. –
СПб.: Питер, 2004. – 523 с.: ил.