2 Создание информационных ресурсов с использованием языка html

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

2. Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

<HTML>

<HEAD>

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

</HEAD>

<BODY>

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

</BODY>

</HTML>

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

3. Откройте в меню браузера Файл (File), Открыть (Open), Просмотр(Обзор — Browse) и найдите созданный ранее файл primer.htm, загрузите его. Убедитесь, что название Web-страницы (Учебный файл HTML) отразилось в верхней статусной строке браузера.

4. Внесите изменения в текст, расположив слова "Расписание", "занятий", "на вторник" на разных строках:

Сохраните внесенные изменения, с помощью команд Файл (File), Сохранить (Save). Просмотрите с помощью браузера Microsoft Internet Explorer новую полученную Web-страницу используя клавишу F5 или с помощью кнопки Обновить (Refresh). Предыдущие шаги не вызвали никаких видимых изменений в документе html — при отображении гипертекста браузеры автоматически размещают текст на экране, не принимая во внимание встречающиеся в файле переводы строк и идущих подряд пробелов.

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

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

Теги выделения фрагментов текста позволяют управлять отображением отдельных символов и слов. Существует три тега выделения фрагментов текста: <B> : </B> — для выделения полужирным, <I> : </I> — для выделения курсивом, <U> : </U> — для выделения подчеркиванием.

Внесите изменения в файл primer.htm, выполняя выделение фрагментов текста.

Посмотрите новую полученную Web-страницу. Попробуйте использовать вложение тегов:

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

6. Изменение размера текста

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

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

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

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

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

Просмотрите обновления через браузер. Внесите следующие изменения в файл:

<FONT SIZE="7">Расписание</FONT> занятий на вторник

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

Для изменения цвета шрифта в теге <FONT> можно использовать атрибут COLOR="X". Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие: красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.

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

<U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">Расписание</FONT></B></I></U>занятий на вторник

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

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

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

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

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

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

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

<P ALIGN=CENTER>

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

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

</P>

Просмотрите обновления

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

Цвета фона и текста документа устанавливаются в начале файла HTML в теге <BODY>. Атрибут BGCOLOR= задает цвет фона страницы, TEXT= определяет цвет текста для всей страницы, LINK= и VLINK= определяют цвета соответственно не просмотренных и просмотренных ссылок.

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

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

<P ALIGN=CENTER>

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

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

</P>

2.9 Скопируйте текст из приложения Б в приложении Блокнот и разбейте его на отдельные разделы (введение, приложение и два раздела), расположив их в отдельных файлах. В еще одном файле (menu.htm) создать содержание этого текста, включив в него гиперссылки на все разделы. В начале и конце каждого раздела установите ссылки на следующий, предыдущий разделы и содержание.

Файл vved.htm (введение) в кодах может выглядеть так:

<html>

<head>

<title>Введение</title>

</head>

<body>

<h2>Введение</h2>

<p>

Текст раздела

</p>

<p><a href="part1.htm">Далее </a></p>

</body>

</html>

Файл menu.htm в кодах может выглядеть так:

<html>

<head>

<title>Содержание</title>

</head>

<body>

<h1>Содержание</h1>

<p><a href="vved.htm">Введение</a></p>

<p><a href="part1.htm">Раздел 1</a></p>

<p><a href="part2.htm">Раздел 2</a></p>

<p><ahref="pril.htm">Приложение</a></p>

</body>

</html>

Вызываемые с помощью меню документы находятся в файлах с именами vved.htm, part1.htm, part2.htm, pril.htm.

Откройте файл menu.htm в приложении MS Internet Explorer. Проверить работу всех гиперссылок.

2.10 Создайте страничку, содержащую три фрейма:

Фрейм 1	Фрейм 2
	Фрейм 3

Во Фрейм 1 поместите ссылки на разделы текста (файл menu.htm из первого задания), во Фрейме 2 должен размещаться заголовок (сделать его в новом файле), во Фрейме 3 – текст разделов.

<html><head>

<title>New Page 6</title>

</head>

<frameset cols="200,*">

<frame name="frame1" src="menu.htm">

<frameset rows="20%,*">

<frame name="frame2" src="zagol.htm">

<frame name="frame3" src="vved.htm">

</frameset>

</frameset>

</html>

Для того, чтобы во Фрейме 3 показывались выбранные в содержании разделы, внесите изменения в файл menu.htm. В описание гиперссылок добавьте параметр target со значением имени фрейма следующим образом:

<a href="vved.htm" target="frame3">Введение</a>

2.11 Создайте таблицу и используйте для оформления текста различные шрифты. Измените код HTML таким образом, чтобы заголовки столбцов тоже были выровнены по центру. Для текста в ячейках таблицы используйте разные шрифты (например, Times New Roman, Courier New), разного размера и цвета.