Лабораторная работа № 9.
Создание web-страниц с помощью языка разметки HTML

Время выполнения

4 часа

Цель работы

Познакомиться с основами языка разметки HTML и научиться создавать собственные web-страницы с применением форматирования на основе HTML.

Задачи лабораторной работы

После выполнения работы студент должен:
  1. знать понятия: "HTML", "браузер", "гиперссылка", "тег";
  2. уметь применять основные теги для оформления web-страниц;
  3. знать назначение &-последовательностей, комментариев в языке HTML;
  4. научиться создавать и оформлять web-страницы.

Перечень обеспечивающих средств

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

Общие теоретические сведения

Внимательно ознакомьтесь с теоретическим материалом. Дальнейшие задания лабораторной работы будут ссылаться на представленный материал.

1. Понятие об HTML

Гипертекстовые документы создаются на специальном языке, который называется HTML (Hyper Text Markup Language – язык разметки гипертекста). Разработка этого стандарта позволила снять две существенные проблемы, которые возникали у пользователей больших сетей.

Первая из них – время доставки информации, оно существенно зависит от объема передаваемого файла. В стандарте HTML вводится иерархическая структура документов: вся информация по некоторой теме разбивается на небольшие смысловые блоки и посылается пользователю только по мере возникновения необходимости в ней. Это существенно сокращает время ожидания ответа на возникший вопрос и делает работу в сети более комфортной и дешевой. Для организации такого режима работы в языке HTML введено средство гиперссылка (см. п. 10).

Вторая проблема – распознавание пришедшей по запросу информации. Способы кодировки одних и тех же сведений в разных текстовых редакторах часто бывают разными. И если компьютер-получатель оснащен не тем текстовым редактором, на котором создавался документ, он не всегда может интерпретировать пришедшую на него информацию. Чтобы преодолеть это, в языке HTML установлены специальные правила.
  1. Весь документ набирается только текстовыми символами (их коды понятны всем редакторам), т. е. его можно набрать в любом текстовом редакторе (например, "Блокнот", "WordPad").
  2. Символы и конструкции, которые непонятны браузеру (программе, позволяющей просматривать web-страницы), игнорируются (а текстовые редакторы обычно прекращают интерпретировать документ, если встречают в нем непонятные коды).
  3. В текст документа можно добавлять разнообразные команды, которые указывают, как следует изображать на экране тот или иной фрагмент текста. Эти команды называют тегами. Они так же, как и документ, набираются текстовыми символами, но отделяются от него угловыми скобками: < >.
  4. Файлы c HTML-кодом должны помечаться расширением .html или .htm.

2. Структура тегов

Каждый тег обязательно содержит пару угловых скобок < >, между которыми находится ключевое слово, обозначающее основную функцию тега. Например, ключевое слово HR в теге <HR> означает, что тег вставляет в документ серую горизонтальную линию (Horizontal Row) по всей ширине страницы и толщиной в один пиксел.

Действие тега детализируется с помощью атрибутов. Например, применительно к тегу <HR> можно уточнить, какой длины, толщины и цвета должна быть линия. Каждому ключевому слову сопоставляется свой собственный набор атрибутов и стандартные значения для них.

Атрибуты размещают после ключевого слова и перечисляют в произвольном порядке через пробел. После каждого атрибута ставят знак = и нужное значение. Например, тег <HR WIDTH=50% SIZE=4> означает, что в документ следует вставить горизонтальную линию, которая должна доходить только до середины строки и иметь ширину четыре пиксела. Значения атрибутов в некоторых случаях полагается заключать в двойные кавычки.

Атрибуты, соответствующие одним и тем же свойствам, в разных тегах часто, но не всегда, обозначаются одинаковыми словами. Например, выравнивание текста в пределах строки, ячейки таблицы или около картинки задается одинаковым словом ALIGN. А свойство «цвет шрифта» для документа в целом задается атрибутом TEXT, но для отдельно взятого фрагмента документа – атрибутом COLOR. Соответствующие теги, задающие темно-синий цвет шрифта, выглядят так: 
<BODY TEXT=NAVY>, <FONT COLOR=NAVY>.

Многие теги являются парными. Открывающий тег включает какое-нибудь действие, закрывающий прекращает его. В этом случае ключевое слово у обоих тегов одинаковое, но в открывающем теге дополнительно перечисляются все необходимые атрибуты, а в закрывающем атрибутов нет, и перед ключевым словом ставится знак /. Парные теги называются контейнерами. Например, контейнер <B>Я изучаю язык HTML</B> означает, что текст Я изучаю язык HTML следует изобразить жирным шрифтом, а дальнейшие символы – так, как до него.

Замечания:
  1. в ключевых словах и атрибутах строчные и прописные регистры букв не различаются; 
  2. URL файлов-ссылок заключаются в двойные кавычки, и регистры букв в них учитываются; 
  3. в последовательности пробелов, идущих подряд, учитывается только первый, остальные игнорируются; 
  4. признак начала новой строки игнорируется. Поэтому при составлении кода можно клавишей <Enter> разрывать его на строки так, как код удобно просматривать и редактировать. На виде документа в окне браузера это не отражается. Если нужно сохранить при просмотре через браузер введенные в код HTML пробелы и разрывы строк, следует воспользоваться тегами компоновки текста (см. п. 6). 
Списки основных тегов, их функций и атрибутов приведены в табл. 1, 2, 3. Пояснения по основным группам тегов – в п.п. 4-10.
Таблица 1. Основные теги форматирования и компоновки текста
 Теги  Действие
<B>…</B>
<I>…</I>
<BIG>…</BIG>
<SMALL>…</SMALL>
<SUB>…</SUB>
<SUP>…</SUP>
<H1>…</Н1>
<H2>…</Н2>, … <H5>…</Н5>
<H6>…</Н6>
<BR>
<P>…</P>
<HR>
<PRE>…</PRE>
<OL>…</OL>
<UL>…</UL>
<LI>
<TABLE>…</TABLE>
<CAPTION>…</ CAPTION>
<TR>…</TR>
<TH>…</TH>
<TD>…</TD>
Полужирный шрифт
Курсив
Более крупный шрифт
Более мелкий шрифт
Нижний индекс
Верхний индекс
Самый крупный размер заголовка 
Промежуточные размеры заголовков
Самый мелкий размер заголовка
Переход на новую строку
Новый абзац
Горизонтальная линия
Компоновка текста, как в коде
Нумерованный список
Маркированный список
Элемент списка
Таблица
Заголовок таблицы
Строка таблицы
Ячейка заголовка
Ячейка данных

Таблица 2. Теги внесения ссылок на дополнительную информацию
 Теги  Действие
<A HREF="URL файла-ссылки">…</A>
<A NAME="#имя метки">…</A>
<IMG SRC="URL файла-изображения">
Ссылка на текстовый файл или рисунок
Установка метки внутри файла
Вставка изображений

Таблица 3. Основные атрибуты тегов
 Атрибут  Возможные значения  Действие атрибута  В каких тегах используется
COLOR= GRAY (серый), AQUA (аквамарин), BLACK (черный), BLUE (синий), FUCHSIA (яркий пурпурно-красный), GREEN (зеленый), LIME (зеленоватый), MAROON (темно-бордовый), NAVY (темно-синий), OLIVE (оливковый), PURPLE (пурпурный), RED (красный), SILVER (серебристый), TEAL, YELLOW (желтый), WHITE (белый). Возможны также те же слова с приставками LIGHT и DARK, например LIGHTGREEN (светло-зеленый), DARKBLUE (темно-голубой) Задает цвет линий и шрифта в тексте или таблице <HR>, <FONT>
BGCOLOR= Задает цвет фона <TABLE>, <TR>, <TH>, <BODY>
BORDERCOLOR= Задает цвет внешнего контура таблицы <TABLE>
TEXT=  Задает цвет шрифта в документе в целом <BODY>
LINK=, VLINK=, ALINK= Цвета соответственно непосещенных, посещенных и активных ссылок <BODY>
BACKGROUND= "URL" файла с изображением для фона Создает фон-картинку <TABLE>, <TH>, <TD>, <BODY>
BORDER= Целое число без размерности Задает толщину окантовки для изображения или таблицы <IMG>, <TABLE>
ALIGN= LEFT, CENTER, RIGHT Горизонтальное выравнивание текстового фрагмента или таблицы в целом <P>, <H1>, <H2>, …, <H6>, <TABLE>, <HR>, <TH>, <TD>
ALIGN= BOTTOM, ТОP Размещение заголовка над или под таблицей <CAPTION>
ALIGN= BOTTOM, LEFT, RIGHT, ТОP, MIDDLE Размещение текстового пояснения к картинке <IMG>
VALIGN= MIDDLE, TOP, BOTTOM Вертикальное выравнивание фрагмента <TABLE>, <TH>, <TD>
WIDTH= Целое число без размерности или со знаком % Длина/высота фрагмента в пикселах или в процентах от ширины/высоты окна. Для всех ячеек, находящихся в строке/столбце, используется максимальное значение из заданных в ее/его ячейках <TABLE>, <HR>, <TH>, <TD>, <IMG>
HEIGHT=
SIZE= Целое число без размерности (по умолчанию 1) Толщина линии, размер шрифта <HR>, <FONT>
TYPE= 1, A, a, i, I Тип нумерации элементов упорядоченного списка <OL>
START=Номер первого элемента в выбранном типе нумерации

Примечание.
Первое из перечисленных значений атрибутов тегов – значение по умолчанию.

3. &-последовательности, комментарии

Иногда в документе приходится использовать такие знаки, которые имеют в языке HTML специальный смысл. Например, двойные кавычки " " выделяют значение атрибута, и если их использовать вне тега, браузер не поймет конструкцию и пропустит ее. Чтобы этого не произошло, для отображения служебных символов используют специальные последовательности знаков, начинающиеся с символа & и заканчивающиеся знаком ; (точка с запятой) – так называемые &-последовательности. Основные из них:
  • последовательность &lt; (от английского "less than") – вместо символа < (меньше);
  • последовательность &gt; (от "greater than") – вместо символа > (больше); 
  • последовательность &quot; (от "quotations mark") – вместо символа " (двойные кавычки); 
  • последовательность &amp; (от "ampersand") – вместо символа &;
  • последовательность &nbsp; (от nonbreaking space – неразрывный пробел) – вместо пробела, который не следует игнорировать при выдаче документа в окно браузера. Эта &-последовательность как бы вставляет в текст невидимую глазу букву, которую браузер воспринимает как реальную и оставляет для нее место на экране. Она используется для заполнения пустых ячеек таблицы, пустых абзацев, для склеивания слов (если набрать TOP&nbsp;100, то у вас никогда не получится, что TOP останется в одной строке, а 100 перенесется на следующую, например, при изменении шрифта или размера окна браузера).
Внимание: &-последовательности должны набираться только в нижнем регистре, точка с запятой в конце последовательности обязательна. Пример: чтобы пользователь увидел на экране слова крейсер "Аврора", в HTML-документе должен быть следующий код: 
крейсер &quot;Аврора&quot;

Чтобы код HTML было легче понимать и править, полезно вводить в него комментарии, которые были бы видны только при работе с кодом, но не отражались бы в окне браузера при просмотре документа. Для этой цели используют специальный контейнер, написанный не по стандартным правилам. Он выглядит так:
<!-- … -->

Примеры:
<!-- Это мой комментарий -->
<!-- А этот комментарий занимает в тексте несколько строк -->

Внимание:
в текст комментария не допускается вставлять два и более дефисов подряд: -- или ----- (разные браузеры по-разному реагируют на это).

4. Структура документа HTML

Каждый HTML-документ состоит из трех главных частей.
  1. Объявление HTML-кода – контейнер <HTML> …</HTML>
  2. Заголовок документа – контейнер <HEAD> … </HEAD>
  3. Тело документа – контейнер <BODY> … </BODY>
Заголовок и тело документа вкладываются внутрь объявления HTML по следующей схеме: 
<HTML>
<HEAD>
…..........
</HEAD>
<BODY>
…..........
</BODY>
</HTML>

В заголовок помещаются теги, определяющие информацию о документе в целом. Наиболее употребительный из них – контейнер <TITLE>:
<TITLE> Краткая расшифровка содержания документа (не более 64 символов) </TITLE>. 

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

В разделе «тело документа» размещается содержание документа, которое выдается в рабочее окно браузера. Атрибуты тега <BODY> задают следующие свойства:
  • TEXT – цвет текста там, где он не указан специальными средствами. По умолчанию черный.
  • BGCOLOR – цвет фона. По умолчанию белый.
  • BACKGROUND – фоновое изображение (аналогично рисунку на Рабочем столе). Значением является URL файла–изображения.
  • LINK,VLINK, ALINK – соответственно цвета непосещенных, посещенных и активных в данный момент гиперссылок. 
Примеры: 
<BODY TEXT=SILVER BGCOLOR=NAVY>
<BODY TEXT=SILVER BACKGROUND="море.jpg"> 
Первый тег задает для базового оформления документа светло-серый шрифт на темно-синем фоне. Все отступления от этого стандарта в дальнейшем надо будет оговаривать дополнительными тегами внутри документа. Второй в качестве фона использует изображение, находящееся в файле море.jpg, расположенном в том же каталоге, что и вызывающий его документ (подробнее см. п. 8). Цвет шрифта так же, как и в первом примере, – светло-серый.
Основные теги, определяющие вид документа в окне браузера, рассмотрены ниже и приведены в виде справочника в табл. 1, 2, 3.

5. Теги форматирования шрифта

В HTML существуют два подхода к шрифтовому оформлению текста – так называемые физические и логические стили. Здесь рассматриваются только физические стили. Под ними подразумевают прямое указание браузеру на изменение текущего шрифта. Теги физических стилей – контейнерные. Например, между тегами <B> и </B> будет жирный шрифт (Bold), а между <I> и </I> – курсив (наклонный – Italic). Основные контейнеры физических стилей:
<B> … </B> – жирный шрифт; 
<I> … </I> – курсив; 
<U>… </U> – подчеркнутый текст; 
 <STRIKE>… </STRIKE>,
<S> … </S> – перечеркнутый шрифт;
<BIG> … </BIG> – шрифт большего размера; 
<SMALL> … </SMALL> – шрифт меньшего размера;
<SUB> … </SUB> – подстрочный индекс;
<SUР> … </SUР> – надстрочный индекс;
<FONT> … </FONT> – изменение типа, цвета и размера шрифта.

В теге <FONT> допускаются атрибуты:
  • SIZE – размер букв, возможные значения: 1, 2, 3, …, 7. По умолчанию 3;
  • COLOR – цвет шрифта. Можно указывать шестнадцатеричными кодами или английскими словами. По умолчанию BLACK;
  • FACE – изменение типа шрифта, возможные значения: ARIAL, COURIER и т. д. По умолчанию VERDANA.
Теги могут комбинироваться, но при этом надо следить, чтобы контейнеры имели вложенную структуру (контейнер, открытый позже, должен быть закрыт до того, как будет закрыт внешний). Например, для комбинации жирного и наклонного шрифтов можно использовать такой код: 
<B> <I> пример </I> </B>

В окне браузера мы получим: 
пример

Помимо перечисленных выше тегов существуют шесть контейнерных тегов, удобных для оформления заголовков: <H1>...</H1>, <H2>...</H2>, …, <H6>…</H6>. Заголовки отличаются от текста и между собой толщиной и высотой букв (в заголовке <H1> самые крупные символы, в <H6> – самые мелкие), а также увеличением интервала по вертикали между заголовком и прочей информацией. Атрибут ALIGN управляет выравниванием заголовков по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT.

Пример:
<H4 ALIGN=CENTER> 6. Теги выделения смысловых частей текста </H4> 
Результат действия тега похож на заголовок следующего параграфа.

6. Теги выделения смысловых частей текста

Абзацы в тексте выделяются контейнером <P>…</P>. Атрибут ALIGN задает выравнивание по горизонтали. По умолчанию он принимает значение LEFT. Другие возможные значения: CENTER, RIGHT. При просмотре браузером абзацы отделяются друг от друга пустой строкой. Закрывающий тег </P> необязателен. Его можно использовать только тогда, когда было заказано нестандартное выравнивание текста.

Примеры:
<P> Этот абзац расположен слева </P>
<P ALIGN=CENTER> Этот абзац по центру </P>
<P ALIGN=RIGHT> А вот этот абзац справа </P>
Приведенный выше код при просмотре выглядит так:

Этот абзац расположен слева
Этот абзац по центру
А вот этот абзац справа

Чтобы перейти на новую строку, не вставляя пустую строку в текст, применяется тег <BR>. Закрывающего тега у него нет.

Иногда полезно разделять смысловые части документа горизонтальной чертой. Это делается с помощью одиночного тега <HR>. Его атрибуты: 
SIZE – толщина линии в пикселах. По умолчанию 1 пиксел.
WIDTH – длина линии в пикселах или процентах от ширины экрана. По умолчанию 100%.
ALIGN – выравнивание линии, возможные значения: LEFT, CENTER, RIGHT. По умолчанию LEFT.
COLOR – цвет линии. По умолчанию GRAY.
NOSHADE – линия рисуется без тени. По умолчанию тень есть. 

Пример.
Код, в котором использованы теги <BR> и <HR>: 
<B> Жизненная позиция </B>
<HR NOSHADE WIDTH=250>
Хорошо на свете жить, <BR>
Информатику учить! <BR>
<HR SIZE=4 WIDTH=50% ALIGN=CENTER>

В окне браузера этот код изображается так:
Жизненная позиция
Хорошо на свете жить,
Информатику учить!

7. Оформление списков

Списки облегчают нахождение нужной информации при перечислении сведений, объединенных общим смыслом: пункты меню, списки товаров, перечень сотрудников и т. п. В HTML предусмотрено несколько вариантов оформления списков, которые чаще всего используются в документации. Здесь будут рассмотрены только маркированные и нумерованные списки.

Для того чтобы оформить фрагмент документа в виде маркированного списка, его помещают в контейнер <UL>… </UL> (Unordered List). Для нумерованного – в контейнер <OL> … </OL> (Оrdered List). Затем текст в контейнере разбивается на отдельные пункты списка тегами <LI> (List Item – элемент списка). Закрывающий тег </LI> в конце каждого пункта ставить необязательно. В маркированном списке все пункты автоматически помечаются одинаковыми маркерами, в нумерованном – элементы нумерует сам браузер.

Примеры кода: 
<UL>Список дисциплин:                                    <OL>Список дисциплин:
 <LI>Информатика                                               <LI>Информатика
 <LI>Физика                                                         <LI>Физика
 <LI>История                                                       <LI>История
</UL>                                                          </OL>
Это дает на экране следующие списки:
Список дисциплин:                                            Список дисциплин:
  • Информатика                                              1. Информатика
  • Физика                                                        2. Физика
  • История                                                    3. История
Можно организовать многоуровневые списки (разумно ограничиться тремя уровнями вложения). Для этого после каждого <LI> следует разместить контейнеры <UL>… </UL> или <OL> … </OL> с разбивкой информации этого пункта на дополнительные подпункты.

В теге <OL> могут использоваться следующие атрибуты: 
TYPE – определяет стиль оформления меток для элементов списка, подробнее ниже;
START – (только для нумерованного списка <OL>) определяет значение первого элемента списка, задается всегда числом (по умолчанию 1). В зависимости от значения атрибута TYPE этому числу сопоставляются разные символы, подробнее ниже;
VALUE – (только для метки <LI> списка <OL>) устанавливает номер текущего элемента списка. Как и в предыдущем случае, метка пункта может быть нечисловой, хотя значение атрибута – всегда число.

Для нумерованного списка в зависимости от стиля нумерации значением атрибута TYPE могут быть: 
1 – арабские цифры (1,2,3,...)
a – строчные буквы (a, b, c,…)
A – прописные буквы (A,B,C,...)
i – римские цифры строчные (i,ii,iii,...)
I – римские цифры прописные (I,II,III,...)
По умолчанию значения TYPE устанавливаются в зависимости от степени вложенности списка.
Число, указанное в атрибуте START, показывает порядковый номер элемента в ряду знаков, заданных в TYPE. С этого элемента следует начинать нумерацию пунктов списка.

8. Создание таблиц 

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

Простая таблица
 Ячейка 1  Ячейка 2
 Ячейка 3  Ячейка 4

<TABLE BORDER=1 WIDTH=200 ALIGN=CENTER>
<CAPTION> Простая таблица </CAPTION>
<TR>
 <TD>Ячейка 1</TD>
 <TD>Ячейка 2</TD>
</TR>
<TR>
 <TD>Ячейка 3</TD>
 <TD>Ячейка 4</TD>
</TR>
</TABLE>

Как видно из примера, начало и конец таблицы оформляются тегами <TABLE> и </TABLE>. Все остальные теги, создающие структуру таблицы и ее содержание, вкладываются в этот контейнер. Для того, чтобы создать рамку вокруг таблицы, можно задать атрибут BORDER=n, где n – толщина рамки в пикселах. По умолчанию таблицы не имеют рамок, т.е. n = 0. Атрибут WIDTH=n%, где n – целое число, позволяет занять таблицей нужный процент от ширины экрана. Если знак процента опущен, то считается, что n задает размер таблицы в пикселах.

Сразу после тега <TABLE> можно вставить контейнер, создающий заголовок таблицы: <CAPTION> текст заголовка </CAPTION>. Заголовок по умолчанию располагается над таблицей слева. Другое выравнивание задается атрибутом ALIGN: 
LEFT – значение по умолчанию, заголовок над таблицей слева; 
TOP –заголовок над таблицей по центру; 
RIGHT – заголовок над таблицей справа; 
BOTTOM – заголовок под таблицей по центру.

Если таблица имеет сложную структуру и какие-то ячейки занимают несколько столбцов или строк, следует в тегах <TH> или <TD> добавить атрибуты соответственно COLSPAN=n или ROWSPAN=n, где n – количество столбцов (строк), на которые растянута данная ячейка. Например, COLSPAN=3 означает, что ячейка по ширине будет простираться на 3 колонки, ROWSPAN=2 означает, что ячейка по высоте занимает две строки таблицы.

Пример. Фрагмент кода, создающего показанную таблицу:
 1  2
 3  4  5  6
 7  8
 9  10  11  12

<TABLE ВORDER=1>
 <TR>
 <TH> 1 </TH> <TH COLSPAN=3> 2 </TH>
 </TR>
 <TR> 
 <TH ROWSPAN=2> 3 </TH> <TH> 4 </TH>
 <TH> 5 </TH> <TH > 6 </TH>
 </TR>
 <TR>
 <TH> 7 </TH> <TH COLSPAN=2> 8 </TH> 
 </TR>
 <TR>
 <TH> 9 </TH> <TH> 10 </TH> <TH> 11 </TH>
 <TH> 12 </TH>
 </TR>
</TABLE>

Таблица создается по строкам. Для каждой строки создается контейнер <TR>…</TR>, определяющий, какие ячейки и информация должны находиться в этой строке. Атрибут ALIGN со значениями LEFT, CENTER или RIGHT задает горизонтальное выравнивание во всех ячейках строки. Атрибут VALIGN со значениями TOP, MIDDLE или BOTTOM – вертикальное выравнивание (по умолчанию MIDDLE – по центру).
Для оформления ячеек используются два вида контейнеров: <TH>…</TH> (Table Head) и <TD>…</TD> (Table Data). Первый свою информацию выравнивает по центру и изображает жирным шрифтом, второй выравнивает по левому краю и использует обычный шрифт. Обычно <TH>…</TH> используют для ячеек с заголовками строк или столбцов, а <TD>…</TD> – для ячеек с данными таблицы. Можно также оставить ячейку пустой, но, чтобы она была отображена на экране, следует внести в нее &-последовательность &nbsp; (см. п. 3).

Для оформления данных, скомпонованных в виде таблицы, в теги <TABLE>, <TR>, <TH>, <TD> добавляют атрибуты.

Основные атрибуты тега <TABLE>: 
WIDTH – определяет ширину таблицы в пикселах или процентах, по умолчанию ширина таблицы определяется содержимым ячеек; 
ALIGN – определяет расположение таблицы в документе. По умолчанию таблица прижата к левому краю страницы. Допустимые значения атрибута: LEFT , CENTER и RIGHT; 
BORDER – устанавливает толщину рамки в пикселах. По умолчанию – 0 (таблица рисуется без рамки); 
BORDERCOLOR – устанавливает цвет рамки, по умолчанию черный. Цвет можно задавать английским словом или шестнадцатеричным числом; 
CELLSPACING – определяет расстояние между рамками ячеек таблицы в пикселах; 
CELLPADDING – определяет промежуток в пикселах между рамкой ячейки и текстом внутри нее; 
BGCOLOR – устанавливает цвет фона для всей таблицы. По умолчанию белый. Цвет можно задавать английским словом или шестнадцатеричным числом; 
 BACKGROUND – заполняет фон таблицы изображением (см. п. 9). Значением атрибута является URL нужного файла.

Тег <TR>, открывающий строку таблицы, может иметь такие атрибуты: 
ALIGN – устанавливает горизонтальное выравнивание текста во всех ячейках строки. Может принимать значения LEFT (по умолчанию), CENTER и RIGHT; 
VALIGN – устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения: TOP (выравнивание по верхнему краю), MIDDLE (выравнивание по центру – это значение принимается по умолчанию), BOTTOM (по нижнему краю); 
BGCOLOR – устанавливает цвет фона для строки. 
Ячейки таблицы начинаются тегами <TН> или <TD>. Для них предусмотрены следующие атрибуты: 
ALIGN – устанавливает горизонтальное выравнивание текста в ячейке. Может принимать значение LEFT, CENTER и RIGHT;
VALIGN – устанавливает вертикальное выравнивание текста в ячейке. Допустимые значения: TOP, CENTER (это значение принимается по умолчанию), BOTTOM; 
WIDTH – определяет ширину ячейки в пикселах;
HEIGHT – определяет высоту ячейки в пикселах; 
NOWRAP – присутствие этого атрибута показывает, что текст должен размещаться в одну строку; 
BGCOLOR – устанавливает цвет фона ячейки; 
BACKGROUND – заполняет фон ячейки изображением. Значением атрибута является URL нужного файла.

9. Использование изображений

Внесение в документ изображений, как правило, существенно улучшает его внешний вид и делает его привлекательным для просмотра. Файлы рисунков можно использовать как фон для основной информации или же включать в документ как самостоятельные объекты. В Интернете обычно используют изображения в формате GIF и JPEG (файлы с расширениями .gif и .jpg). Современные браузеры понимают и другие форматы графических файлов (например, .png, .svg). Все они хорошо сжимают изображение, но в то же время прилично сохраняют его цветовую гамму и детали.
Чтобы использовать рисунок в качестве фона, применяют атрибут BACKGROUND. Его можно указывать в теге <BODY> (см. п. 3) и табличных тегах <TABLE>, <TR>, <TH>, <TD> (см. п. 8). Если размер рисунка больше размера площади, которую следует закрыть фоном, то берется левая верхняя часть изображения, если меньше – рисунок повторяется, пока вся отведенная под фон площадь не будет закрыта. 
Рисунок в качестве самостоятельного объекта (логотип фирмы, фотография и т. п.) вставляется тегом <IMG> (IMaGe – изображение). Обязательный атрибут – SRC (SouRCe – источник). Значением этого атрибута является URL файла с изображением. 
URL обязательно надо выделять двойными кавычками и следить, чтобы пробелы и регистры букв в названиях папок и файлов в точности соответствовали оригиналу.

Примеры. 
<IMG SRC="picture.gif"> – рисунок picture.gif находится в том же каталоге, что и текущий документ;
<IMG SRC="images/picture.gif"> – из текущего каталога перейти в подкаталог images и взять файл picture.gif оттуда;
<IMG SRC="../images/picture.gif"> – подняться в родительский каталог, оттуда перейти в каталог images и взять там рисунок picture.gif;
<IMG SRC="http://www.fortunecity.com/business/artics/practic/myphoto.gif"> – указание полного пути к файлу. Обычно применяется, если рисунок находится на другом сервере или используется файл с другого сайта.

Остальные атрибуты тега <IMG>, перечисленные ниже, оговаривают размеры и положение рисунка на странице, а также то, где должен располагаться поясняющий текст: 
BORDER=n – рамка вокруг рисунка, где n – ее толщина в пикселах; 
WIDTH=n – задается ширина изображения в пикселах или в процентах от ширины экрана браузера (тогда после n следует знак %);
HEIGHT=n – высота изображения в пикселах или в процентах от высоты экрана;
HSPACE=n – отступ слева и справа от картинки шириной в n пикселов (т.е. свободное пространство между рисунком и текстом или чем-то иным);
VSPACE=n – вертикальный отступ от картинки в пикселах;
ALIGN=BOTTOM – по умолчанию. Сопровождающий текст выравнивается по нижнему краю рисунка справа от него. Другие значения атрибута ALIGN, приводящие к выравниванию текста справа от рисунка по его высоте: TOP – по верхнему краю рисунка, CENTER или MIDDLE – по центру рисунка. Чтобы текст обтекал рисунок, используются значения LEFT или RIGHT. Рисунок прижимается соответственно к левому или правому краю экрана, а остальное пространство рядом с ним занимает текст;
ALT="какой-то текст" – альтернативный текст. Текст, который появляется вместо картинки, если по какой-либо причине загрузка изображения не состоялась.

Пример:
<IMG SRC="picture.gif" ALT="Здесь должен быть рисунок"> – рисунок picture.gif находится в том же каталоге, что и текущий документ. В том случае, если его не удается найти или открыть, в рамку, отведенную под рисунок, будет выдан текст: Здесь должен быть рисунок

10. Теги гиперссылок 

Ссылки – инструмент, позволяющий связывать между собой различные документы или обеспечивать быстрый переход от одной части документа к другой. Браузер обычно выделяет ссылку цветом и подчеркиванием. Курсор при наведении его на ссылку приобретает вид указательного пальца. По двойному щелчку на ссылке браузер включает поисковые средства и раскрывает заказанный документ либо поверх старого, либо в специально оговоренном окне. 
Ссылки создаются с помощью контейнера <A >…</A> (Add – добавлять). Обязательный атрибут – HREF (Hiper REFerence – гиперссылка). При минимальном наборе атрибутов структура ссылки выглядит так:
<A HREF="URL вызываемого файла"> якорь ссылки </A>

Примеры.
 <A HREF="filename.html"> нужный документ </A> – по двойному щелчку на тексте нужный документ браузер раскроет документ filename.html, находящийся в том же каталоге, что и текущий документ;
<A HREF="folder/filename.html"> нужный документ </A> – по двойному щелчку на тексте нужный документ браузер раскроет документ filename.html в подкаталоге folder текущего каталога;
<A HREF="../folder/filename.html"> нужный документ </A> – по двойному щелчку на тексте нужный документ браузер из каталога, в котором расположен вызывающий документ, поднимется в родительский каталог, затем перейдет в его подкаталог folder и раскроет находящийся там документ filename.html.
<A HREF="http://www.fortunecity.com/business/fax/339/index.html"> нужный документ </A> – ссылка с указанием полного адреса файла на другом компьютере. По двойному щелчку на тексте нужный документ установится связь с нужным компьютером и раскроется документ index.html, находящийся там по адресу /business/fax/339/.

Другие атрибуты тега <A>: 
TITLE ="поясняющий текст"– всплывающая подсказка с пояснением к ссылке; 
TARGET="имя окна" – указывает, в каком окне следует раскрывать вызванный документ (подробнее см. п. 11).

Пример (прокомментируйте сами):
<A HREF="май/ОтчетПродажиМай.html" TITLE="Майский отчет по продажам" > просмотр отчета </A> 
Замечание. Якорем ссылки может быть любой объект, видимый в окне браузера, например, рисунок. Для этого разместите <IMG SRC="..."> между тегами <A HREF="..."> и </A>. Вокруг рисунка появится рамка, которая показывает, что он является ссылкой. Ширина рамки задается атрибутом BORDER в теге <IMG...>. Если рамка портит внешний вид документа, то укажите в атрибутах рисунка BORDER=0. То, что это гиперссылка, будет видно только по форме курсора, наведенного на рисунок.
Ресурсом, который вызывается по гиперссылке, может быть любой файл, доступный через Интернет.

Примеры:
<A HREF="ftp://servername/directory/file.exe"> нужная программа </A>
Такая ссылка по щелчку на словах нужная программа запустит протокол передачи файлов (ftp) и произведет выгрузку файла file.exe из каталога directory сервера servername на жесткий диск пользователя.
Пишите письма <A HREF="mailto://username@mail.ru" TITLE="Ссылка на почтовый ящик Администратора сайта"> автору </A>

В окне браузера появится текст:
Пишите письма автору

Если навести курсор на слово автору, то появится всплывающая подсказка Ссылка на почтовый ящик Администратора сайта. По двойному щелчку на слове автору будет запущена почтовая программа в режиме создания сообщений, и в поле Кому автоматически будет введен адрес username@mail.ru

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

Пример:
<A NAME="п. 10"> </A> или <A NAME="п. 10"> 10. </A>
В первом случае после метки должен идти заголовок параграфа вместе с номером, во втором – просто заголовок, т. е. при организации метки поясняющий текст в контейнере <A>…</A> необязателен. Если он вставлен, то он не подчеркивается и выглядит как обычный текст. Теперь Содержание можно оформить как список гиперссылок. Символ # означает, что дальше идет метка внутри документа. Пункт Содержания со ссылкой на п. 10 должен выглядеть так:
<LI><A HREF="#п.10"> 10. Теги гиперссылок </A>
На эту же метку можно будет перейти и из любого другого места методических указаний. Например, ссылку со стр. 1 (п. 1) следует оформить так: 
<A HREF="#п.10"> (см. п. 10) </A>
Если гиперссылка указывает на внешний документ, то по умолчанию в окно браузера выдается его начало. Если же нужная в нем информация расположена дальше и обозначена меткой, то можно сразу же открыть документ на этом месте, указав после имени файла метку (так же, как мы открываем книгу с закладкой).

Пример:
http://www.sarf.spb.ru/study.htm#begin

Обратите внимание, что браузеры чувствительны к регистру ссылок. Если Вы вместо "http://webs.web.com" наберете "http://webs.Web.com", то получите нерабочую ссылку. Та же ситуация и с расширениями: если у Вас ссылка на файл "index.htm", а там находится "index.html", то результат тот же – нерабочая ссылка.
С дополнительным материалом по теме можно ознакомиться в литературе [3, 5].

Задания

Содержание отчета
После выполнения работы составить отчет, включающий исходный код html-страниц, описание основных использованных тегов и снимки экрана (скриншоты).

Технология выполнения работы

В данной работе с помощью языка разметки HTML должны быть созданы 5 web-страниц, оформленных с помощью основных html-тегов.

Вопросы для защиты работы

  1. Дайте определение понятиям "HTML", "гиперссылка", "браузер", "тег".
  2. Общая структура тегов.
  3. В каких случаях используются &-последовательности и комментарии?
  4. Расскажите об общей структуре html-документа.
  5. Перечислите теги форматирования шрифта.
  6. Как оформляются смысловые части текста и списки?
  7. Создание таблиц с помощью языка HTML.
  8. Приведите примеры использования графических изображений в html-документе.
  9. Как создать гиперссылку?
Comments