72720

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА HTML

Лабораторная работа

Информатика, кибернетика и программирование

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

Русский

2014-11-27

470 KB

30 чел.

СОЗДАНИЕ WEB-СТРАНИЦ С ПОМОЩЬЮ ЯЗЫКА HTML

HTML-формат

Основным форматом Web-документов, составляющих содержимое узлов Web, является Hypertext Markup Language (HTML — язык разметки гипертекста). HTML представляет собой совокупность достаточно простых команд, которые вставляются в исходный текст документа (ASCII-файл) и позволяют управлять представлением этого документа на экране дисплея. Таким образом, текст, подготовленный в любом текстовом редакторе и сохраненный в обычном ASCII-формате, становится Web-страницей (HTML-документом) после добавления в него ряда команд языка HTML.

Работа с тэгами

Команды HTML задаются с помощью специальных элементов, называемых тэгами (tag). Тэги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами — браузерами, или обозревателями (от англ. browse — просматривать), такими, как Microsoft Internet Explorer или Netscape Navigator.

Тэг имеет вид строки символов, заключенной между символами «<» и «>». Например, <BR> — это тэг переноса строки.

Существуют два типа тэгов:

• одноэлементный тэг, который достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

• парный тэг, который влияет на текст, заключенный между точкой, где употреблен тэг, и точкой, в которой указан признак завершения команды. Признак завершения команды — это тот же самый тэг, только начинающийся с символа «/». Например, <BODY> и </BODY> — признаки начала и окончания текста документа.

Как работают браузеры

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

Файлы HTML — это обычные текстовые файлы, имеющие расширение НТМ. Будем использовать для создания и редактирования файлов HTML стандартную программу Блокнот (Notepad), выходящую в комплект Windows, а для просмотра результата создания Web-страниц — браузер Microsoft Internet Explorer.

Определение HTML-файла

Первый тэг, который должен находиться в любом HTML-документе, — это <HTML> ... </HTML>. Этот тэг указывает на то, что данный документ действительно содержит в себе HTML-текст. Все, что вы напишете в своем документе, должно находиться внутри данного тэга:

<HTML>

текст документа

</HTML>

Вы указали, что ваш документ действительно содержит команды HTML, вы должны разбить документ на две части — заголовок и собственно текст.

Определение заголовка

Определение заголовка должно содержаться внутри тэга <HEAD> ... </HEAD>:

<HTML>

<HEAD>

описание заголовка

</HEAD>

текст документа

</HTML>

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE>. Когда браузер встречает этот тэг, он отображает все, что находится внутри него, как заглавие. Пример того, как используется данный тэг:

<HTML>

<HEAD>

<TITLE> Это заглавие документа </TITLE>

</HEAD>

текст документа

</HTML>

Определение тела документа

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга <BODY> ...</BODY>. Теперь наш документ выглядит примерно так:

<HTML>

<HEAD>

<TITLE> Это заглавие документа </TITLE>

</HEAD>

<BODY>

текст документа

</BODY>

</HTML>

Несмотря на то что присутствие этих трех тэгов предусмотрено стандартом, большинство браузеров может отобразить документ даже при их отсутствии.

Однако следует приучить себя всегда указывать эти тэги — и вам не придется беспокоиться по поводу редактирования документа, если в будущем эти тэги станут необходимы.

Задание 1. Создание простейших файлов HTML.

1. Создайте папку KURS, в которой мы будем сохранять сконструированные Web-страницы.

2. Запустите программу Блокнот (Notepad).

3. Наберите в окне редактора простейший текст файла HTML:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание занятий на вторник

</BODY>

</HTML>

4. Сохраните файл под именем RASP.HTM.

5. Для просмотра созданной Web-стравдщы загрузите браузер Microsoft Internet Explorer.

6. Выполните команду Файл (File), Открыть (Open), Просмотр (Обзор, Browse), найдите в папке KURS файл RASP.HTM и загрузите его. Убедитесь, что название Web-страницы («Учебный файл HTML») отразилось в верхней, статусной, строке браузера.

На экране вы увидите результат своей работы, изображенный на рис. 1.

Рис. 1

Управление расположением текста на экране

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

Задание 2. Управление расположением текста на экране.

1. При необходимости выполните пункты 5 — 6 задания 1.

2. Откройте первоисточник Web-страницы, выполнив команду Вид (View), Источник (В виде HTML). Откроется окно программы Блокнот, в котором ваша Web-страница будет представлена в командах HTML.

3. Внесите изменения в текст файла HTML, расположив слова «Расписание», «занятий», «на вторник» на разных строках:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание

занятий

на вторник

</BODY>

</HTML>

4. Сохраните текст со внесенными изменениями в файле RASP.HTM с помощью команды Файл (File), Сохранить (Save). Закройте программу Блокнот.

5. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу, используя клавишу F5 или команду Вид (View), Обновить (Refresh). Изменилось ли изображение текста на экране?

Примечание. В дальнейшем после внесения изменений в Web-страницу всегда выполняйте пункты 4 — 5 задания 2.

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

Тэг перевода строки <BR> отделяет строку от последующего текста или графики. Тэг абзаца <Р> тоже отделяет строку, но еще добавляет пустую строку, которая зрительно выделяет абзац. Оба тэга являются одноэлементными.

Задание 3. Использование тэгов перевода строки и абзаца.

1. Внесите изменения в текст файла HTML:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

Расписание<Р>

занятий<ВЕ>

на вторник

</BODY>

</HTML>

2. Сохраните текст со внесенными изменениями в файле RASP.HTM.

3. Просмотрите с помощью браузера Microsoft Internet Explorer полученную Web-страницу. Как изменилось изображение текста на экране? Новая страница будет выглядеть так, как показано на рис. 2.

Рис. 2

Выделение фрагментов текста

Тэги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существуют три тэга выделения фрагментов текста:

<В> ... </В> — выделение полужирным,

<I> ... </I> — выделение курсивом,

<U> ...</U> — выделение подчеркиванием.

Задание 4. Выделение фрагментов текста.

1. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<B> Расписание </В><I>занятий</I> <U> на вторник</U>

</BODY>

</HTML>

2. Просмотрите полученную Web-страницу.

Возможно использование комбинированных выделений:

<I><В>Расписание </В></I> <I>занятий</I> <U> на вторник</U>

Но при этом необходимо помнить следующее правило записи комбинированных тэгов:

<Тэг-1> <Тэг-2> ... </Тэг-2> </Тэг-1> — правильная запись;

<Тэг-1> <Тэг-2> ... </Тэг-1> </Тэг-2> — ошибочная запись.

Задание размера символов

Существуют два способа управления размером текста, изображаемого браузером!

• использование стилей заголовка,

• задание размера шрифта основного документа или размера текущего шрифта.

Использование стилей заголовка

Используется шесть тэгов заголовков (от <Н1> до <Н6>). Каждому тэгу соответствует конкретный стиль, заданный параметрами настройки браузера.

Задание 5. Использование стилей заголовка.

1. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<H1> Расписание </Н1><I>занятий</I> <U> на вторник</U>

</BODY>

</HTML>

2. Просмотрите полученную Web-страницу.

На экране вы увидите то, что показано на рис. 3.

Рис. 3

Задание размера текущего шрифта

Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

Задание 6. Установка размера текущего шрифта.

1. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<FONT SIZE="7"> Расписание </FONT>

занятий на вторник

</BODY>

</HTML>

2. Самостоятельно измените размер шрифта для текста «занятий на вторник», используя тэг <FONT>.

3. Измените оформление текста HTML-документа, используя тэги выделения фрагментов текста и тэги перевода строки и абзаца.

Гарнитура и цвет шрифта

Тэг <FONT> предоставляет возможности управления размером, гарнитурой и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать: <FONT FACE="ARIAL">.

Для изменения цвета шрифта можно использовать в тэге <FONT> атрибут COLOR="X".

Вместо “Х” надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную (RRed), зеленую (GGreen), синюю (В — Blue), каждая из которых имеет значение от О до FF. В этом случае мы имеем дело с так называемым форматом RGB.

Примеры записи цвета в формате RGB приведены в табл. 1.

Таблица 1 Запись цвета в формате RGB      

Цвет

RRGGBB

Цвет

RRGGBB

Black— черный

000000

Purple — фиолетовый

FF00FF

While—белый

FFFFFP

Yellow — желтый

FFFF00

Red — красный

FF0000

Brown—коричневый

996633

Green—зеленый

00FF00

Orange — оранжевый

FF8000

Azure — бирюзовый

00FFFF

Violet—лиловый

8000FF

Blue —синий

0000FF

Gray—серый

А0А0A0

Задание 7. Установка гарнитуры и цвета шрифта. 1. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<U><I><B> <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">

Расписание </FONT></B></I></U>

занятий на вторник

</BODY>

</HTML>

2. Самостоятельно измените размер, цвет, гарнитуру, стиль текста документа.

Выравнивание текста по горизонтали

С помощью тэгов HTML можно управлять горизонтальным выравниванием текста. Если способ выравнивания не оговорен, все элементы в документе будут выравниваться по левому краю и иметь неровное правое поле (см. рис. 2).

Современные браузеры воспринимают атрибут выравнивания текста ALIGN=:

ALIGN=CENTER — выравнивание по центру;

ALIGN=RIGHT — выравнивание по правому краю;

ALIGN=LEFT — выравнивание по левому краю.

Задание 8. Выравнивание текста по горизонтали. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY>

<P  ALIGN=CENTER>

<FONT COLOR= "#008080" SIZE="7"<B> Расписание </B></FONT><BR>

<FONT SIZE="6"><I>занятий на вторник</1х/ГОКГТ>

</P>

</BODY>

</HTML>

На экране вы увидите то, что показано на рис. 4.

Рис. 4

Задание цвета фона и текста

При изображении фона и текста браузеры используют цвета, установленные по умолчанию, — они заданы параметрами настройки браузера. Если вы хотите задать другие цвета, то это надо сделать в начале файла HTML в тэге <BODY>. Атрибут BGCOLOR= определяет цвет фона страницы, ТЕХТ= задает цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно непросмотренных и просмотренных ссылок (последние два параметра будут рассмотрены позже).

Задание 9. Установка цвета фона и текста.

Внесите изменения в файл RASP.HTM:               

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFCC" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B> Расписание </B></FONT><BR>

<FONT SIZE="6"><I>занятий на вторник </I></FONT>

</P>

</BODY>

</HTML>

Размещение графики на Web-странице

Тэг <IMG> позволяет вставить в документ изображение. Оно появится в том месте документа, где находится этот тэг. Данный тэг является одиночным. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG. При выполнении следующего задания будем считать, что графический файл WAGON.GIF хранится в рабочем каталоге KURS, где находится и наша Web-страница.

Задание 10. Размещение графики на Web-странице. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B> Расписание </B></FONT><BR>

<FONT SIZE="6"> <I>занятий на вторник </I></FONT><BR><BR>

<IMG SRC="WAGON.GIF">

</P>

</BODY>

</HTML>

На экране вы увидите то, что показано на рис. 5.

Рис. 5


Тэг <IMG> имеет немало атрибутов, описанных в табл. 2, которые можно задавать дополнительно. Они могут располагаться в любом месте тэга после кода IMG.

Таблица 2 Атрибуты изображения

Атрибут

Формат

Описание

ALT

<IMG SRC = "WAGON.GIF"  ALT = "картина">

Задает текст, заменяющий изображение в том случае, если броузер не воспринимает это изображение

BORDER

<IMG SRO="WAGON.G1F" BORDER="3">

Задает толщину рамки вокруг изображения. Измеряется в пикселях

ALIGN

<IMG SRC="WAGON.G1F" AL1GN=TOP>

Задает выравнивание изображения относительно текста: относительно текста выровнена верхняя часть изображения - ТОР, нижняя - BOTTOM, средняя - MIDDLE

HEIGHT

<IMG SRC="WAGON.G1F" HEIGHT=111>

Задает вертикальный размер изображения внутри окна броузера

WIDTH

<IMG SRC="WAGON.GIF" WIDTH=220 >

Задает горизонтальный размер изображения внутри окна броузера

VSPACE

<IMG SRC='"WAGON.GIF" VSPACE="8">

Задает добавление верхнего и нижнего пустых полей

HSPACE

<IMG SRC="WAGON.GIF" HSPACE="8">

Задает добавление левого и правого пустых полей

Задание 11. Установка атрибутов изображения.

Самостоятельно внесите изменения в файл RASP.HTM: опробуйте использование таких атрибутов графики, как ALT, BORDER, HEIGHT, WIDTH.

Примечание. Всегда обращайте внимание на размер (объем в байтах) графического файла, так как это влияет на время загрузки Web-страницы.

Фоновая графика

Фоновое изображение — это графический файл с изображением небольшой прямоугольной плашки. При просмотре в браузере эта плашка многократно повторяется, заполняя все окно, независимо от его размеров.

Графика, используемая в качестве фоновой, задается в тэге <BODY>.

Задание 12. Установка фонового изображения на Web-странице. Внесите изменения в файл RASP.HTM:

<HTML>

<HEAD>

<TITLE> Учебный файл HTML </TITLE>

</HEAD>

<BODY BACKGROUND="BGR.GIF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B> Расписание </B></FONT><BR>

<FONT SIZE="6"> <I>занятий на вторник</I></FОNТ><ВР><ВР>

</P>

</BODY>

</HTML>

На экране вы увидите то, что показано на рис. 6. Графический файл BGR.GIF выглядит так, как показано на рис. 7.

Таблицы

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

Таблица состоит из трех основных частей:

• названия таблицы;

• заголовков столбцов;

• ячеек.

Таблица заполняется по строкам (слева направо — по строке, затем переход на следующую строку). Каждая ячейка должна быть заполнена. Для создания пустых ячеек используются пробелы.

Тэги оформления таблиц и их атрибуты описаны в табл. 3 — 5.

Таблица 3 Тэги оформления таблиц

Тег

Формат

Описание

TABLE

<TABLE>TeKCT</TABLE>

Объявление таблицы

TR

R>текст</ТR>

Тэг строки

TD

D>текст</TD>

Тэг данных

Таблица 4 Атрибуты тэга <ТАВLЕ>

Атрибут

Формат

Описание

BORDER

<TABLEBORDERS >

Устанавливает рамку вокруг таблицы

WIDTH

<TABLEW1DTH=60%>

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

BGCOLOR

<TABLE BGCOLOR =  "#RRGGBB">

Задает цвет фона таблицы

Таблица 5 Атрибуты тэгов <TD> и <TR>

Атрибут

Формат

Описание

ALIGN

<TR AL1GN=RIGHT>

Устанавливает выравнивание по горизонтали (RIGHT. LEFT, CENTER)

VALIGN

<TR VALIGN=TOP>

Устанавливает выравнивание по вертикали (TOP, MIDDLE, BOTTOM, BASELINE)

HGCOLOR

<TR BGCOLOR = "#CCCCFF">

Задает цвет фона

Задание 13. Создание таблицы.

1. Запустите программу Блокнот.

2. Наберите следующий текст в окне редактора:

<HTML>

<HEAD>

<TITLE> Расписание занятий 5 классов </TITLE>

</HEAD>

<BODY BGCOLOR="FFFFFF">

<P ALIGN=CENTER>

<FONT COLOR="RED" SIZE="6" FACE="ARIAL">

<B> 5 класс </B></FONT><BR></P>

<FONT CDLOR=”BLUE” SIZE="4" FACE="COURIER"><B> Понедельник </B><:/FONT><BR>

<TABLE BORDER="1" WIDTH=100% BGCOLOR="99CCCC">

<TR BGCOLOR="CCCCFF" ALIGN=CENTER>

<TD>ypoк</TD> <TD>5 A</TD> <TD>5 Б</TD> <TD>5 B</TD>

</TR>

<TR>

<TD>1</TD> <ТD>Русский язык</ТD> <ТD>Литература</ТD> <ТD>История</ТD>

</TR>

<TR>

<TD>2</TD> <TD>Anreбpa</TD> <ТD>Информатика</ТD> <ТD>Англ.язык</ТD>

</TR>

<TR>

<TD>3</TD> <ТD>История</ТD> <ТD>Информатика</ТD> <TD> Алгебра </TD>

</TR>

</TABLE>

</BODY>

</HTML>

3. Сохраните файл под именем 5.НТМ.

4. Для просмотра созданной Web-страницы загрузите браузер Microsoft Internet Explorer.

На экране вы увидите то, что показано на рис. 8.

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

Дополните полученную Web-страницу по аналогии расписанием на последующие дни: вторник, среду, четверг, пятницу, субботу.

Рис. 8

Построение гипертекстовых связей

Важнейшим свойством языка HTML является возможность включения в документ ссылок на другие документы. Возможны ссылки:

• на удаленный HTML-файл,

• на некоторую точку в текущем HTML-документе,

• на любой файл, не являющийся HTML-документом.

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

Ссылки в пределах одного документа

Такие ссылки требуют наличия двух частей: метки и самой ссылки. Метка определяет точку, на которую происходит переход по ссылке. Ссылка использует имя метки. Ссылки выделяются цветом или подчеркиванием, в зависимости от того, как настроен браузер. Для изменения цвета ссылки используется атрибуты LINK= и VLINK= тэга <BODY>.

Опишем ссылку:

<А НКЕГ="#ПН">Понедельник</А>

Перед именем метки (ПН), указывающей, куда надо переходить по ссылке, ставится символ #. Между символами “>” и “>” располагается текст («Понедельник»), на котором должен быть произведен щелчок для перехода по ссылке.

Определим метку:

NАМЕ="ПН">Понедельник</А>

Задание 15. Создание ссылки в пределах одного документа.

1. Дополните файл 5.НТМ описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы:

<TABLE WIDTH=100%>

<TR >

D>Понедельник</ТD>

<TD>Bторник</TD>

D>Среда</ТD>

<TD>Четвеpг</TD>

D>Пятница</ТD>

<TD>Cyббoтa</TD>

</TR>

</TABLE>

<BR>

2. Вставьте в файл 5.НТМ метку, указывающую на понедельник:

<FONT COLOR="BLUE" SIZE="4" FACE="COURIER"><B>

<A NAME="ПH">Понедельник </A></B></FONT><BR>

3. Вставьте в таблицу с названиями дней недели ссылку для выбранной метки:

<TABLE WIDTH=100%>

<TR >

<TD> <A HREF="#IIH >Понедельник</А> </TD>

D>Вторник</ТD>

D>Среда</ТD>                                     

4. Сохраните файл.

5. Просмотрите полученную Web-страницу.

На экране вы увидите то, что изображено на рис. 9.

Рис. 9

Ссылки на другой HTML-документ

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

Опишем ссылку:

HREF="5.HTM">5 класс</А>

После имени файла (5.НТМ), между символами «>» и «>» располагается текст («5 класс»), на котором должен быть произведен щелчок для перехода к

этому файлу.

Задание 16. Создание ссылки на другой HTML-документ.

1. Загрузите в браузер файл RASP.HTM.

2. Внесите изменения в файл:

<HTML>

<HEAD>   

<TITLE> Учебный файл HTML </TITLE>                 

</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#330066">

<P ALIGN=CENTER>

<FONT COLOR="#008080" SIZE="7"><B> Расписание </B></FONT><BR>

<FONT SIZE="6"> <I>занятий на вторник</1></FONT><ВR><ВR>

<IMG SRC="WAGON.GIF">

</P>

<CENTER>

<TABLE WIDTH=60%>

<TR>< TD> <A HREF="5.HTM">5 класс</А> </TD><TD>6 класс</ТD> </TR>

<TR><TD>7 Kлacc</TD><TD>8 класс</ТD> </TR>

<TR><TD>9 Kлacc</TD><TD>10 класс</ТD> </TR>

<TR><TD>11 Kлacc</TD><TD> </TD></TR>

</TABLE>

</CENTER>

</BODY>

</HTML> 

3. Сохраните файл.

4. Просмотрите полученную Web-страницу.

На экране вы увидите то, что изображено на рис. 10.

Рис. 10

Подведите курсор к ссылке 5 класс, и по щелчку мыши вы перейдете на другую Web-страницу (файл 5.НТМ).

Задание 17. Создание графической ссылки на другой HTML-документ.

1. Внесите изменения в файл 5.НТМ так, чтобы в конце страницы была ссылка на головную страницу Расписание занятий 5. классов (файл RASP.HTM). В качестве ссылки используйте графический файл следующим образом:

</TR>

</TABLE><BR>

<CENTER>

<А HREF="RASP.HTM"><IMG SRC="HOME.GIF" BORDER="0" ></A>

</CENTER>

</BODY>

</HTML>

2. Просмотрите полученную Web-страницу.

На экране вы увидите то, что показано на рис. 11.

Рис. 11

В качестве ссылки выступает рисунок (стрелка, направленная вправо и вверх), находящийся в файле HOME.GIF.

Итоговое задание

Теперь, когда вы получили общее представление о создании Web-страниц и узнали основные команды HTML, наступило время подвести итог, выполнив самостоятельную работу.

Задание 18. Самостоятельное итоговое задание.

Разработайте Web-страницы, рассказывающие о вашей группе. На головной странице поместите рассказ о группе, кураторе. Рассказ об одногруппниках разместите на отдельных Web-страницах. Укажите ссылки на страницы одногруппников с головной страницы. Не забудьте установить ссылки возврата с Web-страниц одногруппников на головную страницу.

Как подготовить хорошую Web-страницу

1. Следует обратить внимание на простоту и логичность расположения информации на ваших страницах.

2. Один из способов сделать информацию более легкой для восприятия — это оставить на странице достаточно свободного места, не содержащего ни текста, ни рисунков. Страница, содержащая много информации, только отпугнет посетителя.

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

3. Не размещайте одно изображение сразу за другим. Попробуйте распределить их по документу, оставив достаточно свободного пространства.

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

5. Если Web-страница имеет большой объем, то, возможно, вам следует вставить ссылки, позволяющие пользователю быстро перемещаться между частями одного документа. Иногда имеет смысл вместо одного длинного документа подготовить одну страницу, содержащую перечень тем, каждую из которых раскрыть на отдельной Web-странице, и установить ссылки на соответствующие страницы.

6. Использование графики может дополнительно привлечь пользователей. Но необходимо помнить о времени загрузки вашей страницы, которое определяется количеством и объемом графической информации. Красивая картинка не произведет никакого впечатления, если, для того чтобы ее увидеть, придется ждать 5 минут, пока они загрузится.

Тестирование

Перед тем как выставлять на сервер свои Web-страницы, необходимо их протестировать. Созданные документы должны пройти «локальную проверку» в пределах вашего жесткого диска. При проверке используйте разные браузеры. Вы увидите отличия, которые могут оказаться достаточно существенными.

В рамках тестирования необходимо сделать следующее:

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

2. Проверить навигацию. Убедитесь в том, что на каждой странице присутствуют необходимые средства навигации, все ссылки работают правильно.

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

4. Проверить, допустимо ли время загрузки.

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

Заключение

Команды HTML, с которыми вы только что познакомились, — это лишь «верхушка айсберга» богатейших возможностей языка HTML.

Создавать Web-страницы можно не только с помощью обычного текстового редактора, вставляя достаточно простые команды в текст документа. Существует множество HTML-редакторов, позволяющих достаточно легко создавать Web-страницы. Приведу лишь несколько: Corel Web Desinger, Frontpage, Home Site, HotDog Webmaster, Hot Metal, Microsoft Word. Какой выбрать — вы должны решить сами.

Литература

1. Фролов А. В., Фролов Г. В. Глобальные сети компьютеров. М.: Диалог-МИФИ, 1996.

2. Пайк М. Internet в подлиннике. СПб.: BHV-Санкт-Петербург, 1996.

3. Перри П. Дж. Секреты World Wide Web. Киев: Диалектика, 1996.

4. Шарф Д. HTML 3.2: Справочник. СПб: Питер, 1998.

5. Вуд Л. Web-графика: Справочник. СПб: Питер, 1998.


 

А также другие работы, которые могут Вас заинтересовать

82490. Объект и предмет экономической теории. Методология экономической науки 35.64 KB
  Методология экономической науки. Первый раздел имеет методологическое фундаментальное значение так как служит основным средством исследования двух следующих разделов микроэкономики и макроэкономики. Это привело к появлению множества методов исследования экономической теории: Метод научной абстракции Отвлечение в процессе познания от внешних явлений не экономических сторон выделение более глубокой сущности предмета или экономического явления Метод функционального анализа Используется зависимость функцияаргумент для проведения...
82491. Основные направления и школы в экономической теории. Экономические законы и категории 34.86 KB
  Экономические законы и категории. Экономические законы и категории. Различают специфические общие и особенные экономические законы. Специфические экономические законы действуют в пределах исторически определенных форм хозяйствования.
82492. Рынок и условия его возникновения: типы рынков, экономические и неэкономические блага, типы хозяйственных систем, виды и формы собственности 36.72 KB
  Рынок – это такая экономическая система которая базируется на частной собственности на средства производства и на принципах самостоятельно независимого принятия решений отдельных хозяйствующих субъектов фирмами или частными лицами. экономическая обособленность производителей в форме частной собственности. виды и формы собственности Собственность можно классифицировать различным образом например: 1 По форме присвоения различных форм собственности индивидуальная коллективная и государственная собственность.
82493. Теория собственности: понятие, виды, формы. Права собственности. Приватизация, ее особенности в России 34.53 KB
  Права собственности. Теория собственности: понятие виды формы Собственность – это система экономических отношений между людьми выражающаяся во владении пользовании и распоряжении средствами производства и соответствующей им формы присвоения средств и результатов производства. Собственность можно классифицировать различным образом например: 1 По форме присвоения различных форм собственности индивидуальная коллективная и государственная собственность.
82494. Ограниченность ресурсов и кривая производственных возможностей 43.7 KB
  В широком смысле ограничены прежде всего способности человека взять имеющиеся в природе в изобилии свободные материальные ресурсы при том что в перспективном плане строго дефицитными могут быть лишь невоспроизводимые условия время и лучшие естественные ресурсы. Виды экономических ресурсов природные ресурсы земля недра водные лесные и биологические климатические и рекреационные ресурсы сокращенно земля; трудовые ресурсы люди с их способностью производить товары и услуги сокращенно труд; капитал в форме денег и ценных...
82495. Цена, спрос и предложение. Равновесие по Маршаллу и по Вальрасу. Паутинообразная модель 71.61 KB
  Цена́ количество денег в обмен на которые продавец готов передать продать единицу товара. Цена является коэффициентом обмена конкретного товара на деньги. Спрос на какойлибо товар или услугу это желание и возможность потребителя купить определенное количество товара или услуги по определенной цене в определенный период времени. Объем спроса это то количество товара или услуги которое потребители согласны купить по определенной цене в течении определенного периода времени.
82497. Теория потребительского поведения. Кардинализм и ординализм 37.73 KB
  максимизировать совокупную полезность. Потребительский выбор – это выбор максимизирующий совокупную полезность в условиях ограниченности ресурсов дохода. Рациональное потребительское потребление предполагает что потребитель максимизирует совокупную полезность в условиях существующего у него бюджетного ограничения. Потребитель находится в состоянии равновесия если он не может увеличить совокупную полезность при данной величине своего дохода и существующих ценах увеличивая или уменьшая покупку одного или другого товара.
82498. Механизм рынка совершенной конкуренции. Равновесие фирмы в краткосрочном периоде 38.41 KB
  Совершенная конкуренция – когда на рынке: мнво покупателей и продавцов высокая мобильность факторов производства отсутствие барьеров на пути вступления на рынок или выхода из него доходность продаваемой продукции равный доступ всех участников рыночных отношений к инфи Совершенно конкурентные фирмы не имеют контроля над ценами т. объем их производства по сравнению с размерами рынка ничтожно мал будет ли она производить продукции больше или меньше – цены не изменятся. В одной и той же отрасли действуют разные фирмы с разным...