Файл: Учебнометодическое пособие для студентов прикладных и экономических специальностей Киров 2005 ббк 32. 973. 26018. 1я73 В19 Печатается по решению редакционноиздательского совета Вятского государственного гуманитарного университета.pdf

ВЯТСКИЙ ГОСУДАРСТВЕННЫЙ ГУМАНИТАРНЫЙ УНИВЕРСИТЕТ
Ек. А. Васенина
Учебно-методическое пособие для студентов прикладных и экономических специальностей
Киров
2005

ББК 32.973.26-018.1я73
В19
Печатается по решению редакционно-издательского совета Вятского государственного гуманитарного университета
Рецензенты: И. А. Бабушкина, кандидат педагогических наук, доцент
М. В. Петухова, кандидат педагогических наук, доцент
В19 Васенина, Ек. А. Основы языка HTML: Учебно-методическое пособие для студентов прикладных и экономических специальностей
[Текст] / Ек. А. Васенина. – Киров: Изд-во ВятГГУ, 2005. - 106 с.
В пособии изложеныосновные направления использования HTML: форматирование текста, работа с графикой и таблицами, реализация гипертекстовых связей между web-страничками, создание форм, использование фреймов, использование каскадных таблиц стилей, слои и позиционирование. В каждой главе теоретический материал сопровождается упражнениями и заданиями, позволяющими закрепить изученный материал. В конце главы приводится список теоретических вопросов для повторения и одно или несколько контрольных заданий, которые позволяют оценить качество полученных знаний по пройденной главе. Проектное задание в конце пособия дает возможность обобщить и структурировать полученные знания и перенести приобретенные умения в новую, незнакомую среду. Выполнение проектного задания может быть «сквозным», т. е. осуществляться в течение всего курса.
Пособие написано по материалам практических занятий со студентами
Вятского государственного гуманитарного университета.
Издание можно рекомендовать для индивидуального обучения и для использования в качестве учебно-методического пособия в гуманитарных вузах и средних учебных заведениях различного типа.
© Вятский государственный гуманитарный университет (ВятГГУ), 2005
© Васенина Ек. А., 2005

Введение
3
Введение
Вся информация в сети Интернет хранится в виде страниц с гипертекстовыми связями – ссылками на другие страницы. Такие страницы еще называют Интернет-страницами, web-страницами, HTML-страницами или
HTML-документами.
Web-страничка - это обычный текстовый файл в соответствующей кодировке, с расширением *.htm, *.html, *.dhtml, *.shtml
1
и т. д. В нем описывается вся страничка с помощью специального языка - HTML (hypertext
mark-up language – гипертекстовый язык разметки документов). В основе
HTML лежат тэги. Тэги – это управляющие элементы, которые определяют параметры отображения той или иной части HTML-документа: размер, цвет и начертание символов, размеры рисунка, выравнивание абзацев, расположение объектов на странице и т. д.
Для просмотра готовых web-страниц используются специальные программы – браузеры. Браузер (встречаются такие термины, как броузер или браоузер) предназначен для просмотра web-страничек, которые находятся в сети Интернет или на вашем компьютере. Существует большое количество различных браузеров. На момент написания данного пособия самые распространенные и наиболее часто используемые - это Internet Explorer
(компания Microsoft), Mozilla Firefox (компания Mozilla) и Netscape Navigator
(компания Netscape). Браузеры являются бесплатными программами и доступны для скачивания на официальных сайтах компаний Microsoft, Mozilla и
Netscape. Последней версией Internet Explorer'a является 6-я версия
2
(в том числе русская 6-я версия), Mozilla Firefox 1-й версии и Netscape 7-й версии (в том числе русская 7-я версия).
Когда вы в своем браузере загружаете web-страничку, браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку. Различные браузеры могут поддерживать или нет различное форматирование, поэтому внешний вид web-странички зависит от браузера, в котором она просматривается.
Часто, говоря о web-строительстве, мы ведем речь о сайтах и страничках.
Чем же web-сайт отличается от web-странички? Web-страничка (иногда еще говорят, HTML-страничка) - это текстовый файл, написанный на языке HTML в определенной кодировке и с определенным расширением. Когда говорят о web- страничке, подразумевают один, два или три таких файла, которые могут быть связаны друг с другом или нет, иметь ссылки на другие ресурсы Интернета или нет.
А web-сайт содержит много (больше трех) файлов в формате HTML, обязательно связанных между собой гиперссылками. Как правило, все эти файлы оформлены в едином стиле, имеют одно и то же расширение и посвящены одной или нескольким связанным между собой темам.
1
В данном пособии все HTML-документы для определенности имеют расширение *.html.
2
В данном пособии при выполнении упражнений была использована 6-я версия Internet Explorer.

4
Введение
Создание сайта или странички начинается с проектирования. В процессе проектирования разрабатывается техническое задание на создание сайта, где указывается информация, которую требуется учитывать при непосредственном создании сайта: перечисление разделов сайта, макеты страниц, основные параметры форматирования страниц и замечания по содержанию сайта.
Затем начинается техническая реализация сайта: создание HTML- страничек, форматирование и т. д.
Создавать web-странички можно как вручную - путем написания кода на
HTML (в любом текстовом редакторе, чаще всего в стандартном приложении
Windows «Блокнот»), так и с помощью специальных визуальных редакторов
(«Microsoft FrontPage», «Macromedia Dreamweaver»).
Каждый способ имеет ряд плюсов и минусов.
Визуальные редакторы позволяют создавать web-странички без особых знаний HTML. Кроме того, при создании странички более сложной структуры, гораздо удобнее «видеть» ее.
Недостатком работы с программами-редакторами является тот факт, что они создают не такой оптимальный HTML-код, как опытный web-мастер, да и встраивать многие элементы возможно, только непосредственно редактируя код странички.
Создавая странички вручную, вы получаете страничку с меньшим количеством кода. Следовательно, ваша страничка будет быстрее загружаться из Интернета (а это довольно важно для профессиональных и любительских сайтов). Кроме того, создавая страничку через HTML-код, вы сможете использовать многие дополнительные возможности, которые невозможно реализовать с помощью редакторов, например DHTML.
Как было сказано выше, чтобы создавать страничку вручную, нужны знания основ HTML. Поэтому, если вы собираетесь делать более или менее серьезный сайт, то знание HTML просто необходимо.

Глава 1. Структура HTML-документа
5
Глава 1. Структура HTML-документа
Просмотр кода готовой web-страницы
Для того чтобы посмотреть HTML-код страницы, на которой вы сейчас находитесь, нужно в меню браузера выбрать команду
Вид/Просмотр HTML-кода или щелкнуть правой кнопкой мыши по рабочему полю страницы и в контекстном меню выбрать пункт Просмотр HTML-кода
(рис. 1.1).
Рис. 1.1. Просмотр HTML-кода через команду главного меню
Упражнение 1.1
Загрузите любую страницу из Интернета и посмотрите код этой странички.
Структура HTML-документа
HTML-документ (или web-страничка) создается в любом текстовом редакторе и представляет собой простой текстовый документ, в который вставлены флаги разметки – «тэги» (markup tags). Все тэги записываются в угловых скобках - < >. Существуют тэги парные (имеют открывающийся элемент, заключенный в угловых скобках < >, и закрывающийся, заключенный между и >) и непарные.

6
Глава 1. Структура HTML-документа
Любой HTML-документ должен начинаться открывающим тэгом
и заканчиваться закрывающим тэгом . Эти тэги показывают, что находящиеся между ними строки представляют единый
HTML-документ. Без этих тэгов браузер или другая программа просмотра не в состоянии идентифицировать HTML-формат документа и правильно его интерпретировать.
Примечание. Хотя большинство современных браузеров могут
распознать документ и не содержащий тэгов и , все же их
употребление крайне желательно, так как некоторые программы с большой
долей вероятности примут HTML-документ без открывающего и
закрывающего тэгов за обычный текстовый документ. В этом случае в окне
программы просмотра откроется код HTML-документа, который мы обычно
видим, выполнив команду Вид/Просмотра HTML кода.
HTML-документ состоит из двух частей: голова (HEAD) и тело (BODY).
Голова HTML-документа заключается между парными тэгами . В нем указывается заголовок (название) создаваемой web-странички
(при просмотре в окне браузера оно отображается в заголовке окна браузера) и определяется кодировка страницы.
Заголовок странички располагается между парными тэгами . Например,
Кодировка HTML-документа используется для отображения на странице символов кириллицы.
Самые распространенные кодировки – это
«Windows-1251» (стандарт Windows) и «KOI8-r» (стандарт UNIX и некоторых других систем). Соответственно символы кириллицы могут быть закодированы в одном из этих стандартов.
Если кодировку не определить в коде странички, то браузер будет отображать ее в кодировке, установленной по умолчанию.
Для определения кодировки странички браузером между тэгами нужно вставить одну из следующих строчек:
- для Windows-1251 кодировки. В этой кодировке вы можете писать код странички в редакторе «Блокнот», используя как русский, так и английский язык; эта кодировка наиболее предпочтительна.
- для KOI8-r кодировки. Как правило, эта кодировка используется визуальными HTML-редакторами, открыв документ этой кодировки в редакторе «Блокнот», вы увидите лишь непонятные символы, однако

Глава 1. Структура HTML-документа
7 некоторые серверы работают лишь с этой кодировкой. В этом случае вам придется использовать специальные перекодировщики).
Тело HTML-документа находится между парными тэгами и

Содержание странички: текст, рисунки и т. д.
Здравствуйте, это моя первая страничка!

8
Глава 1. Структура HTML-документа
Рис. 1.3. Простейший HTML-документ
Упражнение 1.3
Измените HTML-документ main.html: в заголовок внесите свою фамилию и имя.
Для этого:
• Откройте HTML-код странички:
1-й способ. Через меню браузера – Вид/Просмотра HTML-кода.
2-й способ. Через меню текстового редактора – Файл/Открыть, поле
Тип файла выбрать Все файлы и выбрать нужный HTML- файл.
3-й способ. Через контекстное меню html-файла – щелкнув правой кнопкой мыши по значку файла, вызвать контекстное меню и в пункте Открыть с помощью... выбрать Блокнот.
• В разделе внесите свою фамилию и имя.
• Сохраните изменения.
• Просмотрите страничку в окне браузера.
Вопросы для повторения
1. С помощью какой команды главного меню браузера Internet Explorer можно просмотреть HTML-код web-страницы?
2. Чем HTML-документ отличается от простого текстового документа?
3. На какие 2 части можно логически разделить обычный HTML- документ?
4. Какие тэги задают заголовок HTML-документа? Какая информация может содержаться в заголовке HTML-документа?
5. Какие тэги задают тело HTML-документа? Какая информация содержится в теле HTML-документа?
6. Что такое кодировка?
7. Какое расширение может иметь HTML-документ?

Глава 1. Структура HTML-документа
9
Контрольное задание
Создайте HTML-документ в кодировке KOI8-r с названием странички
«Вторая страничка …(здесь впишите свою фамилию и имя)» и с текстом «Всем привет! Мы изучили структуру HTML-документа! Эта страничка создана в кодировке KOI8-r».

10
Глава 2. Форматирование HTML-документа
Глава 2. Форматирование HTML-документа
К форматированию документа можно отнести изменение внешнего вида документа: форматирование страницы, разбиение текста на абзацы, выделение заголовков, форматирование символов и др.
Настройка внешнего вида страницы
Задавая параметры у тэга , можно изменять внешний вид всей web-странички.
Тэг может иметь следующие параметры:
• bgcolor – задает цвет фона страницы;
• text – задает цвет текста всей страницы по умолчанию;
• link – задает цвет ссылки, еще не посещенной;
• vlink – задает цвет ссылки, уже посещенной;
• alink – задает цвет активной ссылки (в момент нажатия на нее);
• background – задает фоновый рисунок страницы;
• leftmargin , rightmargin, topmargin, bottommargin – задают левое, правое, верхнее и нижнее поля страницы соответственно (в пикселях, px).
Рассмотрим параметры более подробно.
Задание цвета фона и текста странички
Цвет можно задавать тремя способами:
1. Через английский эквивалент названия цвета. Например,
bgcolor=”red”> задает красный цвет фона.
2. Через RGB-формат “#XXXXXX ”, где X - это число от 0 до F (0, 1,
2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F), первая пара цифр отвечает за насыщенность красного цвета, вторая пара – за насыщенность зеленого, третья пара – синего. Например,
bgcolor=”#FF0000”> задает красный цвет фона.
3. Через RGB-формат rgb(Х,Х,Х), где Х – это число от 0 до 255, первая цифра отвечает за насыщенность красного цвета, вторая – за насыщенность зеленого, третья – синего. Например,
bgcolor=rgb(255,0,0)> задает красный цвет фона.
Примечание. Основные оттенки цветов web-палитры можно
посмотреть в Приложении I.

Глава 2. Форматирование HTML-документа
11
Упражнение 2.1
Создайте HTML-документ format.html. В нем задайте желтовато- коричневый цвет фона и темно-зеленый цвет текста.
Для этого:
• В конце пособия откройте web-палитру цветов.
• Найдите в ней соответствующие значения нужных цветов: желтовато- коричневый – #D2B48C, темно-зеленый – darkgreen.
• Для задания цвета фона и текста используйте параметры тэга
- bgcolor и text:
bgcolor=”#D2B48C” text=”darkgreen”>
• В теле странички напишите текст: «В языке HTML значения параметров тэгов, как правило, пишутся в кавычках. Но если в значении параметра нет пробелов, то кавычки можно и опустить. Нет правил без исключений!».
• Просмотрите страничку в окне браузера.
Задание фонового рисунка
Вы также можете повысить интерес к своей страничке, сделав фон страницы не одним цветом, а текстурой. Текстура - это небольшое изображение, которым «мостят» фон, т. е. оно многократно копируется как по вертикали, так и по горизонтали. Для создания текстур обычно применяют специальные графические редакторы, в которых есть инструменты создания текстур - текстуризаторы. Однако можно создать текстуру с помощью простых редакторов и инструментов, соблюдая следующие правила:
1. Рисунок не должен быть очень контрастным, т. е. пестрым.
2. Рисунок либо не должен обрываться на границе, либо его границы должны «сшиваться».
3. Если рисунок яркий, то шрифт документа должен быть темным, и наоборот.
4. Размер «плитки» текстуры выбирайте в пределах от 3х3 до 5х5 см.
Текстурный рисунок должен быть сохранен в формате GIF или JPG, после чего в параметре background тэга нужно указать путь к фоновому рисунку. Например,

Примечание. Данный пример говорит о том, что картинка лежит в
том же каталоге (директории, папке), в которой лежит и наш документ.
Если картинка лежит в поддиректории (например, “images”), то путь к
ней будет выглядеть так:

12
Глава 2. Форматирование HTML-документа
Если картинка лежит на уровень выше, а документ находится в
поддиректории, то путь к ней будет выглядеть так:

Если картинка лежит на другом сайте, то путь прописывается
полностью:

Для вашего удобства размещайте картинку в той же директории, что и
документ, тогда путаницы будет меньше.
Упражнение 2.2
Страничке format.html, созданной в упр. 2.1, задайте фоновый рисунок
(рис. 2.1).
Для этого:
• В графическом редакторе «Paint» создайте простейший фоновый рисунок.
(Например,
).
• Сохраните его в ту папку, где находится ваша страничка под именем fon.jpg.
• В коде странички у тэга добавьте параметр background:
background=”fon.jpg” text=”darkgreen”>
Рис. 2.1. HTML-документ с заданным фоновым рисунком
• Не забудьте про заголовок странички: «Форматирование
HTML-документа».
• Посмотрите результат в окне браузера.
Задание полей странички
Поля страницы (отступы текста от границ окна браузера) задаются через параметры leftmargin, rightmargin, topmargin, bottommargin. Значения этих параметров указываются в пикселях. Например,

Упражнение 2.3
У созданного в предыдущих упражнениях HTML-документа format.html задайте поля: левое – 100 пикселей, правое – 80 пикселей, верхнее и нижнее –
50 пикселей.

Глава 2. Форматирование HTML-документа
13
Для этого:
• У тэга опишите новые параметры (выделено полужирным шрифтом):
leftmargin=”100”
rightmargin=”80” topmargin=”50”>
• Посмотрите результат в окне браузера.
Задание 2.1
Создайте HTML-документ pautina.html с названием «Всемирная паутина: первое знакомство». Отформатируйте документ: цвет фона - голубовато- стальной, цвет текста - блекло-голубой, поля страницы – все по 50 пикселей. В тело странички внесите текст:
«WWW (World Wide Web) – территориально распределенная гипертекстовая система Internet, или «Всемирная паутина». В сети Internet это сервис, предназначенный для доступа к информации, организованной при помощи гипертекстовых связей».
Задание 2.2
Задайте фоновый рисунок у HTML-документа pautina.html.
Форматирование абзаца
Параграфы
Предположим, что вы хотите разбить текст на параграфы. Для этого нужно перед началом параграфа поставить тэг
. Когда браузер обнаружит этот тэг, то он сам вставит перед началом параграфа пустую строку. Тэг параграфа – парный, и у открывающего тэга
существует закрывающий

.
Тэг имеет следующие параметры:
• title – краткое описание параграфа (всплывает в виде подсказки при наведении на текст параграфа);
• align – задает выравнивание абзаца. Параметр align может принимать следующие значения:
− сenter - текст абзаца выравнивается по центру;
− left - по левому краю;
− right - по правому краю;
− justify - по ширине экрана.
Упражнение 2.4
Создайте HTML-документ paragraph.html с названием странички
«Параграфы». В этот документ добавьте текст, используя разбиение на абзацы с различным выравниваем:

14
Глава 2. Форматирование HTML-документа

Этот текст выровнен по левому краю, при этом правый край окажется неровным,
«рваным». Такой текст хотя и выглядит не очень аккуратным, но его все- таки легко читать.


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


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

Просмотрите ее в окне браузера.
Примечание. Обратите внимание на то, что значение у параметра
align указано без кавычек, а у параметра title значение задано в кавычках.
Почему? Подсказка: прочтите текст странички format.html, созданной в
упр. 2.1.
Заголовок
Большинство документов имеют заголовок. Для его создания используют тэги x>x>, где x – число от 1 до 6. Заключив текст между этими тэгами, вы получите заголовок соответствующего уровня.
Упражнение 2.5
Создайте HTML-документ headings.html и добавьте в него примеры встроенных заголовков различного уровня:

Глава 2. Форматирование HTML-документа
15
Рис. 2.2. Встроенные заголовки HTML-документа
Принудительный перенос на новую строку
Браузеры игнорируют множественные пробелы и символы конца строки.
Для принудительного переноса на следующую строку используется тэг <BR>.
С помощью этого тэга также можно вставлять пустые строки.
Упражнение 2.6
Создайте HTML-документ
romans3.html, содержащий текст стихотворения Игоря Северянина «Романс 3».
Для этого:
• Каждое четверостишие начинайте новым абзацем (тэг
).
• Используйте тэг для принудительного переноса строк внутри четверостиший.
• Название стихотворения оформите встроенным заголовком 3-го уровня.
• Подпись автора стихотворения выровняйте по правому краю.

РОМАНС III

За каждую строку, написанную кровью,<BR>
За каждую улыбку обо мне, -<BR>
Тебе ответствую спокойною любовью<BR>
И образ твой храню в душевной глубине.
Не видимся ли миг, не видимся ль столетье –<BR>
Не все ли мне равно, не все ль равно тебе,<BR>
Раз примагничены к бессмертью цветоплетью<BR>
Сердца углубные в медузовой алчбе?..
О, да: нам все равно, что мы с тобой в разлуке,<BR>
Что у тебя есть муж, а у меня – жена.<BR>
Ищи забвения в искусстве и в науке.<BR>
И в сновидениях, и в грезности вина.
Игорь Северянин
• Посмотрите страничку в окне браузера.

16
Глава 2. Форматирование HTML-документа
Текст с отступом
Текст, заключенный между тэгами
<BLOCKQUOTE> и
BLOCKQUOTE>, выводится браузером на экран с увеличенным левым полем.
Упражнение 2.7
Создайте HTML-документ viveskam.html со стихотворением Владимира
Маяковского «Вывескам»:
Вывескам
Читайте железные книги!
Под флейту золоченой буквы
Полезут копченые сиги
И золотокудрые брюквы.
А если веселостью песьей
Закружат созвездия «Магги» -
Бюро похоронных процессий
Свои проведут саркофаги.
Когда же, хмур и плачевен,
Загасил фонарные знаки,
Влюбляйтесь под небом харчевен
В фаянсовых чайников маки!
Для этого:
• Отформатируйте название стихотворения встроенным заголовком, например, 4-го уровня:

Вывескам

• Четверостишия стихотворения оформите с использованием тэга
(как в упр. 2.6).
• Для отступа второго четверостишия заключите его текст между тэгами

и

:
<BLOCKQUOTE>А если веселостью песьей
Закружат созвездия “Магги” -
Бюро похоронных процессий
Свои проведут саркофаги.BLOCKQUOTE>
• Посмотрите результат в окне браузера.
Предварительно форматированный текст
Как уже было сказано ранее, браузеры игнорируют множественные пробелы и символы конца строки. Из этого правила, однако, есть исключение.
Текст, заключенный между метками <PRE> и PRE> (от англ. preformatted - предварительно форматированный), выводится браузером на экран как есть - со всеми пробелами, символами табуляции и конца строки.

Глава 2. Форматирование HTML-документа
17
Упражнение 2.8
Добавьте на вашу страничку стихотворение Маяковского, сохраняя все отступы и переносы, для сохранения отступов и переносов используйте тэг
:
<PRE>
Только солнце усядется, канув за опустевшие фабричные стройки, стонут окраины от хулиганов вроде вот этой милой тройки.
Владимир Маяковский
PRE>
Посмотрите результат в окне браузера.
Примечание.
Обратите
внимание,
что
в
предварительно
форматированном тексте по умолчанию используется шрифт фиксированной
ширины (Courier).
Форматирование символов
Форматирование символов можно условно разделить на логическое и физическое. При логическом форматировании разработчик web-странички структурирует документ, выделяет логические части, одновременно изменяя внешний вид символов. При физическом форматировании разработчик не учитывает контекста и лишь придает некоторым символам конкретный вид.
Применяя тэги логического или физического форматирования, мы в принципе получаем одинаковый результат. Но логическое форматирование и четкое структурирование являются признаками хорошо составленного документа. При использовании логических тэгов в ближайшем будущем станет возможным, например, автоматический поиск цитат в сети Internet.
Логическое форматирование
Для логического форматирования существует группа форматирующих тэгов.
<CITE> - используется для выделения цитат или названий книг и статей, при этом текст обычно выводится курсивом. Например:
Я прочитал <CITE>Войну и мирCITE>

18
Глава 2. Форматирование HTML-документа
<CODE> - применяется для вывода небольшого куска программного кода шрифтом фиксированной длины (для больших листингов используется тэг
). Например,
Одну из первых строчек, которые узнает программист, это:
Print “Hello, World!”
<EM> - используется для выделения важных фрагментов текста. Браузер обычно отображает такой текст курсивом. Например,
Изменение внешнего вида символов и абзацев называется
форматированием
<KBD> - выделяет шрифтом фиксированной ширины текст, который предлагают ввести пользователю с клавиатуры. Например,
Для запуска программы-кодировщика введите в поле слово
Кодировка
<SAMP> - используется для выделения нескольких символов шрифтом фиксированной ширины. Например,
ABC - этими буквами в Америке обозначают алфавит.
<STRONG>STRONG> - используется для выделения важных фрагментов текста полужирным шрифтом.
<VAR><VAR> - используется для отметки имен переменных. Обычно такой текст выделяется курсивом. Например,
Пусть задана функция: y=2x
<ADDRESS>ADDRESS> - используется при выделении почтового адреса курсивом.
- используется для зачеркивания текста.
Упражнение 2.9
Создайте HTML-документ logical.html. Внесите в него тексты приведенных выше примеров и просмотрите страничку в окне браузера.
Физическое форматирование
Для физического форматирования используются следующие тэги:
• <B>B> - полужирный шрифт
• <I>I> - курсив
• <U>U> - подчеркнутый
• <S>S>- выделение перечеркиванием