Лабораторная работа №9 Создание собственной Web-страницы с помощью языка программирования html

Цель работы: получение более углублённых навыков создания Web-страниц.

Основные сведения.

Теги физического форматирования текста.

Кроме известных уже вам Тегов <B>,<I> и <U>, можно привести ещё несколько примеров:

Теги <STRIKE> и <S> отображают текст, перечёркнутый горизонтальной линии. Отменённый тег.

Пример <STRIKE>зачёркнутого</STRIKE> текста.

Тег <SUB> сдвигает текст ниже уровня строки и выводит его (если возможно) шрифтом меньшего размера. Удобно использовать для математических индексов.

Пример шрифта для <SUB>нижнего</SUB> индекса.

Тег <SUP> сдвигает текст выше уровня строки и выводит его (если возможно) шрифтом большего размера. Удобно использовать для задания степеней чисел в математике.

Пример шрифта для <SUP>верхнего</SUP> индекса.

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

Пример <BLINK>мигающего</BLINK> текста.

Тег <FONT> указывает параметры шрифта. Для тега могут задаваться следующие параметры: FACE, SIZE и COLOR.

Параметр FACE служит для указания типа шрифта, которым программа просмотра будет выводить текст. Можно задавать как один, так и несколько названий шрифтов, разделив их запятыми. Это весьма полезное свойство, так как если на компьютере пользователя нет шрифта, указанного в списке первым, то делается попытка найти следующий шрифт и т.д.

Пример:

Текст, записанный шрифтом по умолчанию.

<BR>

<FONT FACE="Verdana", "Arial", "Helvetica">

Пример задания названия шрифта.

</FONT>

Параметр SIZE служит для указания размеров шрифта в условных единицах от 1 до 7.

Параметр COLOR устанавливает цвет шрифта, который может задаваться с помощью стандартных имён или в формате #RRGGBB.

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

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

<FONT>, а именно: FACE, SIZE и COLOR.

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

Разделение на абзацы и многое другое:

Как вам известно из прошлой лабораторной работы в документе HTML невозможно создать абзац, используя клавишу [Enter].

Для перехода на следующую строку воспользуйтесь командой <BR>

Для создания пустой строки воспользуйтесь командой <P>

Для создания горизонтальной черты воспользуйтесь командой <HR>

Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>

причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.

<P> Новый абзац

<HR> Горизонтальная линия

<BR> Конец строки

Заголовки <H1> Самый большой </H1>

<H6> Самый маленький</H6>

Поговорим теперь о каждом из параметров несколько подробнее.

Тег <P> может задаваться с параметром горизонтального выравнивания ALIGN.

Возможные значения параметра приведены в таблице 1. По умолчанию выполняется выравнивание по левому краю.

Таблица 1

Значения параметра ALIGN

Значение параметра ALIGN	Действие
LEFT CENTER RIGHT JUSTIFY	Выравнивание по левой границе окна браузера Выравнивание по центру окна браузера Выравнивание по правой границе окна браузера Выравнивание по ширине (по двум сторонам)

Пример использования заголовков с различным уровнем выравнивания:

<P>

<H1>Заголовок размера 1</H1>

<H2>Заголовок размера 2</H2>

<H3 ALIGN=CENTER>Заголовок размера 3</H3>

<H4 ALIGN=RIGHT>Заголовок размера 4</H4>

<H5>Заголовок размера 5</H5>

<H6>Заголовок размера 6</H6>

Основной текст документа

Тег <HR> позволяет провести рельефную горизонтальную линии в окне браузера. Этот тег не требует закрывающего тега. И имеет следующие параметры: ALIGN (LEFT,CENTER, RIGHT),

WIDHT-устанавливает длину линии в пикселях или процентах от ширины окна браузера.

SIZE-устанавливает толщину линии в пикселях.

NOSHADE-оттеняет рельефность линии.

COLOR-указывает цвет линии, используя формат RGB или стандартное имя.

Пример:<HR ALIGN=CENTER WIDTH=100% NOSHADE>

<HR ALIGN=CENTER WIDTH=75%>

<HR ALIGN=CENTER WIDTH=50% SIZE=10>

Создание списков

Списки предназначены для представления информации в упорядоченном виде.

В HTML - документах используется 3 вида списков (см. Лаб. раб. №8):

1.Неупорядочные списки (Тег <UL>),

2.Маркированные списки (Тег <OL>),

Элемент списка задается тегом <LI>.

В теге <UL> могут быть указаны два параметра: COMPACT и TYPE.

Параметр COMPACT записывается без значений и применяется для указания браузеру, что данный список следует выводить в компактном виде. Например, может быть уменьшен шрифт или расстояние между строчками списка и т.д.

Параметр TYPE может принимать следующие значения:

TYPE=disc-маркеры отображаются закрашенными кружками;

TYPE=circle-маркеры отображаются не закрашенными кружками;

TYPE=square-маркеры отображаются закрашенными квадратиками;

Параметр TYPE может употребляться для указания вида маркеров отдельных элементов списка:

<P>Маркированный список.

<UL TYPE=circle>

<LI>Первый маркер.

<LI>Второй маркер.

<LI TYPE=square>Третий маркер.

</UL>

В теге <OL> могут быть указаны два параметра: COMPACT,TYPE и START.

Параметр COMPACT имеет тот же смысл, что и у маркированных списков. Параметр TYPE используется для задания вида нумерации списка. Может принимать следующие значения:

TYPE=A-задаёт маркеры в виде прописных латинских букв;

TYPE=a-задаёт маркеры в виде строчных латинских букв;

TYPE=I-задаёт маркеры в виде больших римских цифр;

TYPE=i-задаёт маркеры в виде маленьких римских цифр;

TYPE=1-задаёт маркеры в виде арабских цифр;

Параметр TYPE с теми же значениями может употребляться для указания вида нумерации отдельных элементов списка. Для этого параметр TYPE разрешено указывать в теге элемента списка <LI>.

Параметр START тега <OL> позволяет начать нумерацию списка не с единицы. В качестве значения параметра START всегда должно указываться натуральное число, вне зависимости от вида нумерации списка. Приведём пример:

<OL TYPE=A START=5>

Такая запись определяет нумерацию списка с прописной латинской буквы "E". Для других видов нумерации запись START=5 задаст нумерацию, соответственно, с числа "5", римской цифры "V" и т.д.

Списки определений задаются с помощью тега-контейнера <DL> (Definition List), также называемые словарями определений специальных терминов, являются особенным видом списков. В отличии от других типов списков, каждый элемент списка определений всегда состоит из двух частей. В первой части элемента списка с помощью тега <DT> (Definition Term) помечается определяемый термин, а во второй части тегом <DD> <Definition Description>- абзац с его определением. Для тегов <DT> и <DD> можно не записывать соответствующие закрывающие теги.

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

<DL>

<DT>Термин

<DD>Определение термина

</DL>

Графика.

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

Фоновые изображения для HTML-документа всегда заполняет всё окно просмотра. Если размер изображения меньше размеров окна просмотра, то оно будет размножено по принципу мозаики.

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

Приведём пример записи тега <BODY> с указанием фонового цвета и фонового изображения:

<BODY BACKGROUND=имя файла.gif BGCOLOR=RRGGBB>

Одновременное задание параметров BACKGROUND и BGCOLOR вовсе не обязательно. Любой из них, равно как и оба вместе могут отсутствовать.

Встраивание изображений в HTML-документ.

Для встраивания изображений в HTML-документ следует использовать тег <IMG>, имеющий единственный обязательный параметр SRC, определяющий URL-адрес файла с изображением.

Простейший пример встраивания изображения:

<IMG SRC=имя файла.gif>

Данный тег может иметь ряд параметров, действия которых приведены ниже:

Таблица 2

Значения параметра ALIGN

__________________________________________________

Значение параметра ALIGN	Действие
TOP	Верхняя граница изображения выравнивается по самому высокому элементу текущей строки.
TEXTTOP	Верхняя граница изображения выравнивается по самому высокому текстовому элементу текущей строки.
MIDDLE	Выравнивание середины изображения по базовой линии текущей строки
ABSMIDDLE	Выравнивание середины изображения посередине текущей строки
BASELINE или BOTTOM	Выравнивание нижней границы изображения по базовой линии текущей строки
ABSBOTTOM	Выравнивание нижней границы изображения по нижней границе текущей строки.
LEFT	Изображение прижимается к левому полю окна. Текст обтекает изображение с правой стороны.
RIGHT	Изображение прижимается к правому полю окна. Текст обтекает изображение с левой стороны.

Пример:

<P>Выравнивание<IMG SRC=primer.gif ALIGN=top>по верхнему краю.

<P>Выравнивание<IMG SRC=primer.gif ALIGN=baseline>по базовой линии.

<P>Изображение<IMG SRC=primer.gif ALIGN=left>прижимается к левому полю окна.

<P>Изображение<IMG SRC=primer.gif ALIGN=right>прижимается к правому полю окна.

Задание размеров выводимого изображения создаётся с помощью двух необязательных параметров -WIDHT и HEIGHT. Значения параметров могут указываться как в пикселях, так и в процентах от размеров окна просмотра.

Пример:

<IMG SRC=primer.gif WIDTH=150>

<IMG SRC=primer.gif>

<IMG SRC=primer.gif WIDTH=75>

Для тега <IMG> можно задавать параметры HSPASE и VSPASE, значения которых определяют отступы от изображения, оставляемые пустыми, соответственно по горизонтали и вертикали. Это гарантирует, что между текстом и изображением останется пространство, необходимое для нормального восприятия.

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

<IMG SRC=имя рисунка ALIGN=left HSPASE=20 VSPASE=20 BORDER=10>

(Текст абзаца)

Ещё одним из параметров тега <IMG> является параметр ALT, определяющий альтернативный текст. Его указание даёт возможность пользователем неграфических браузеров или пользователям, работающим в режиме отключения загрузки изображений, получить некоторую текстовую информацию о встроенных изображений.

Пример:

<ING SRC=primer.gif ALT="Картинка">

Графические изображения могут использоваться в качестве гипертекстовых связей. Для обеспечения работы в качестве ссылки на другие ресурсы достаточно включить изображение внутрь тега-контейнера <A>.

Пример:

<A HREF=имя файла.html><IMG SRC=имя файла.gif></A>

Фреймы.

Выбор фреймовой структуры отображения информации на WWW оправдан в следующих случаях:

1.При необходимости организовать управление загрузкой документов в одну из подобластей окна просмотра браузера при работе в другой области.

2.Для расположения в определённом месте окна просмотра информации, которая должна постоянно находиться на экране вне зависимости от содержания других подобластей экрана.

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

Правила описания фреймов:

Контейнер из тегов <FRAMESET> и </FRAMESET> обрамляет каждый блок определений фрейма.

Внутри контейнера <FRAMESET> могут содержаться только теги <FRAME> и вложенные теги <FRAMESET>.

Тег <FRAMESET> имеет два параметра: ROWS(строки) и COLS(столбцы) и записывается в следующем виде:

<FRAMESET ROWS="список значений" COLS="список значений">

Список значений, представляет собой список значений, которые могут задаваться в пикселях, в процентах или в относительных единицах:

Пример:

<FRAMESET ROWS="100,240,140">

<FRAMESET ROWS="25%,50%,25%">

<FRAMESET ROWS="*,2*,3*">

Звёздочка (*) используется для пропорционального деления пространства.

Можно использовать все три варианта задания значений:

<FRAMESET ROWS="100,25%,*,2*">

В этом примере 1-ый столбец будет иметь ширину 100 пикселей. 2-ой столбец займёт 25% от всей ширины окна просмотра, 3-ий столбец-1/3 оставшегося пространства и, наконец, последний столбец- 2.3.

Тег <FRAME> определяет одиночный фрейм. Он должен располагаться внутри тегов <FRAMESET> и </FRAMESET>.

Например:

<FRAMESET ROWS="*,2*">

<FRAME>

<FRAME>

</FRAMESET>

Тег <FRAME> не является контейнером и не имеет завершающего тега. Тег <FRAME> имеет шесть парметров: SCR, NAME, MARGINWIDTH, MARGINHEIGHT, SCROLLING и NORESIZE.

Наиболее важный параметр SRC (сокращение от слова sourse). Значение этого параметра определяет URL-адрес документа, который будет загружен изначально в данный фрейм.

<FRAME SRC="sample.htm">

<FRAME SRC="http://www.bhv.ru/example.gif>

Параметр NAME определяет имя фрейма, которое может использоваться для ссылки к данному фрейму.

<FRAME SRC="sample.htm" NAME="Frame_1">

Такая запись создаёт фрейм с именем "Frame_1", на который может быть выполнена ссылка.

Например:

<A HREF="other.htm" TARGET="Frame_1">Щёлкните здесь для загрузки документа other.htm во фрейм с именем Frame_1</A>

Параметры MARGINWIDTH и MARGINHEIGHT дают возможность устанавливать ширину полей фрейма.

MARGINWIDTH="value",

где "value"- абсолютное значение в пикселях. Например:

<FRAME MARGINWIDTH="5" MARGINHEIGHT="7">

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

Форма записи:

<FRAME SCROLLING="YES|NO|AUTO">

Значение AUTO действует так же, как и в случае отсутсствия параметра SCROLLING.

Значение YES вызывает появление полос прокрутки вне зависимости от необходимости этого, а NO- запрещает их появление.

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

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

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

Приведём пример создания регулярной прямогольной сетки фреймов:

<FRAMESET ROWS="*,2*" COLS="20%,30%">

<FRAME SRC="Forms.htm">

<FREME SCR="Frames.htm">

<FREME SCR="Imagemap.htm">

<FREME SCR="Tables.htm">

</FREMESET>

Взаимодействие между фреймами.

Взаимодействие между фреймами заключается в возможности загрузки документов в выбранный фрейм по командам из другого фрейма. Для этой цели используется параметр TARGET тега <A>.

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

TARGET документ загружается в текущий фрейм или окно. Это умолчание может быть изменено заданием тега <BASE> с нужным значением параметра TARGET.

Имена фреймов должны начинаться с латинской буквы или цифры. Имеется четыре зарезервированных имени, при задании которых выполняются специальные действия. Эти имена начинаются с символа подчёркивания (_):"_blank","_self","_parent","_top".

TARGET="_blank"-обеспечивает загрузку документа в новое окно. Это окно не будет иметь имени, а следовательно, в него невозможно будет загружать другой документ.

TARGET="_self"-загрузка документа будет произведена в текущий фрейм (или окно). Такую запись следует использовать для обхода умолчания, заданного тегом <BASE>/

TARGET="_top"-вызывает загрузку документа в полное окно. Если документ уже располагается в полном окне, то данное значение действует так же, как "self".

TARGET="_parent"-вызывает загрузку документа в область, занимаемую фреймом-родителем текущего фрейма. При отсутствии фрейма-родителя данное значение параметра действует так же, как "_top".

Предупреждение: Зарезервированные имена фреймов "_blank","_self","_parent","_top"

должны записываться строчными латинскими буквами. Заметим, что такая требовательность присуща только Netscape. Браузер Microsoft Internet Explorer правильно распознаёт зарезервированные имена, записанные на любом регистре.

Приведём пример взаимодействия между фреймами и отдельными окнами браузера. Но для этого нужно сначала создать три вспомогательных HTML-кода.

Первый файл с именем frame_a.htm:

<HTML>

<HEAD>

<TITLE>Документ для фрема A</TITLE>

</HEAD>

<BODY>

<A HREF="test.htm" TARGET="B">1. Загрузка документа во фрейм B</A><P>

<A HREF="test.htm" TARGET="C">2. Загрузка документа во фрейм C</A><P>

<A HREF="test.htm" TARGET="D">3. Загрузка документа в окно с именем D</A><P>

<A HREF="test.htm" TARGET="_blank">4. Загрузка документа в новое окно</A><P>

<A HREF="test.htm" TARGET="_top">5. Загрузка документа в полное окно</A><P>

<A HREF="test.htm" TARGET="_self">6. Загрузка документа в текущий фрейм</A><P>

</BODY>

</HTML>

Второй файл test.htm крайне прост:

<HTML>

<HEAD>

<TITLE>Тестовый документ</TITLE>

</HEAD>

<BODY>

Текст тестового документа

</BODY>

</HTML>

И, наконец, третий пустой файл empty.htm:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Дальше необходимо набрать следующий HTML-код и сохранить под каким-либо именем, допустим под L3_a.htm:

<HTML>

<HEAD>

<TITLE>Использование фреймов</TITLE>

</HEAD>

<FRAMESET COLS=2*,*,*>

<FRAME SRC=frame_a.htm NAME="A">

<FRAME SRC=empty.htm NAME="B">

<FRAME SRC=empty.htm NAME="C">

</FRAMESET>

</HTML>

После того как созданы все эти файлы, запускается последний L3_a.htm.

Задание.

Создать собственную Web-страницу, содержащую, например, каталог выпускаемой продукции с описанием каждого вида, с иллюстрациями, с прайс-листом и т.д. Кроме того, страница должна содержать адрес предприятия, контактные телефоны, адрес сайта (можно взять любой существующий сайт, например, Rambler, NSTU и т.д.), фото руководителя (ваше фото). При разработке страницы обязательно применить таблицу, список (например, сотрудников), различные шрифты и цвета, гиперссылки и, желательно, фреймы.