Лабораторная работа Создание HTML документа

Лабораторная работа №1. Создание простейшего HTML-документа. Форматирование шрифта и абзаца
Цель работы: Научиться создавать простейший гипертекстовый документ средствами текстового редактора Блокнот.
Научиться использовать теги форматирования шрифта и абзаца.
Задание на выполнение
Создать файл с гипертекстовым документом:
Запустить редактор Блокнот, ввести текст:
Приветствую Вас на моей первой web-страничке!
Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .htm, например 1_name.htm (где name – ваше имя)
Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.
Ввести теги, определяющие структуру html-документа:
С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами <TITLE> </TITLE>) указать свою фамилию.
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей первой web-страничке!
</BODY>
</HTML>
Сохранить документ под тем же именем, обновить его отображение в броузере (выполнить Вид/Обновить или нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.
Отредактировать документ:
Вызвать меню браузера Вид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!» текст подписи:
Студент группы NNN Фамилия Имя
Сохранить документ (но не закрывать) и обновить его просмотр в браузере.
Используя одиночный тег <BR>, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в браузере новый вариант.
Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.
Оформить фрагменты текста с помощью стилей Заголовков:
Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега <H1> …</H1>. Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.
Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, Мелкий и Самый мелкий).
Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки - на Заголовок 5 уровня, последней строки - на Заголовок 3-го уровня.
Выполнить форматирование шрифта:
После строки Фамилия Имя добавить еще одну строку текста
Нас утро встречает прохладой
Оформить фразу по приведенному ниже образцу.

В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим.
Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги <FONT SIZE=«+2»> и <I>
Просмотреть полученный документ в браузере.
Выполнить форматирование абзацев:
Создать новый документ 2_name.htm, сохранить его в той же рабочей папке.
Ввести текст (использовать копирование текста из документа 1_name.htm):
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей второй web-страничке! <BR> Монолог Гамлета
</BODY>
</HTML>
Выровнять текст по центру.
Ввести текст:
Быть иль не быть - вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы - иль против моря невзгод вооружиться, в бой вступить. И все покончить разом...
Оформить выравнивание абзаца по ширине.
Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>.
Скопировать монолог и разбить его на абзацы. Выровнять по центру.
Быть иль не быть - вот в чем вопрос.Что благороднее: сносить ударыНеистовой судьбы - иль против моряНевзгод вооружиться, в бой вступитьИ все покончить разом...
Сохранить документ.
Просмотреть документ в окне броузера, изменяя размер окна.
Выполнить оформление списков:
Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска.
Ввести текст:
<HTML>
<HEAD> <TITLE> Фамилия </TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей третьей web-страничке!
</BODY>
</HTML>
Дополнить текст документа (между тегами <BODY>…</BODY>) следующим текстом:Я знаю как оформлять:Шрифты,Заголовки,Абзацы
Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов:
<OL>
<LI> Шрифты, </LI>
<LI> Заголовки, </LI>
<LI> Абзацы </LI>
</OL>
Поменять оформление списка на список маркированный. Использовать теги <UL>, </UL>
Создать «смешанный» список:
Я знаю как оформлять:
Шрифты
Размер
Цвет
Гарнитуру
Индексы
Заголовки
От 1-го до 6-го уровня
Абзацы
Выравнивание
Разрыв строк внутри абзаца
С использованием переформатирования.
Предъявить результаты работы преподавателю.
Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца
Назначение Вид тегов Примечание
Общая структура документа HTML
Тип документа <HTML></HTML> Начало и конец документа
Имя документа <HEAD></HEAD> Не отображается броузером
Заголовок <TITLE></TITLE> Содержимое строки заголовка окна броузера
Тело документа <BODY></BODY> Содержимое WEB-страницы
Структура содержания документа
Внутренние заголовки различного уровня <H№> текст </H№> Где № – номер уровня заголовка (от 1 до 6). Например, <H1>…</H1> - заголовок 1-го уровня.
Заголовок с выравниванием <H№ ALIGN=”LEFT| CENTER| RIGHT”> текст </H№> LEFT - по левому краю,
CENTER - по центру,
RIGHT - по правому краю.
Форматирование абзацев
Создание абзаца (параграфа) <P> текст </P> Абзацы отделяются двойным межстрочным интервалом
Перевод строки внутри абзаца <BR> Одиночный тег
Выравнивание абзаца <P ALIGN=”LEFT”>текст </P>
<P ALIGN= ”CENTER”>текст </P>
<P ALIGN=”RIGHT”> текст</P>
<P ALIGN=”JUSTIFY”> текст </P> LEFT - по левому краю
CENTER - по центру
RIGHT - по правому краю
JUSTIFY – по ширине
Разделительная горизонтальная линия между абзацами <HR SIZE=«?»> Одиночный тег. «?» - толщина линии в пикселях. Толщину линии можно не указывать.
Форматирование шрифта
Жирный <B> текст </B> <B>Жирный</B>
<I> Курсив </I>
<U> Подчеркнутый </U>
<S> Перечеркнутый</S>
<SUP> Верхний индекс </SUP>
<SUB> Нижний индекс </SUB>
Курсив <I> текст </I> Подчеркнутый <U> текст </U> Перечеркнутый <S> текст </S> Увеличенный размер <BIG> текст </BIG > Уменьшенный размер <SMALL> текст </SMALL> Верхний индекс <SUP> текст </SUP> Нижний индекс <SUB> текст </SUB> Размер шрифта <FONT SIZE=«?»> текст </FONT> ?- значения от 1 до 7 или относительное изменение (например, +2)
Базовый размер шрифта <BASEFONT SIZE=«?»>
Одиночный тег
? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом
Гарнитура шрифта <FONT FASE=«название1, название2, …»> текст </FONT> Текст оформляется первым, установленным на компьютере шрифтом из списка названий
Цвет шрифта <FONT COLOR=”$$$$$$”> текст
</FONT> Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом #
RED –красный, #FF0000 – шестнадцатеричный код – красного цвета
Создание списков
Нумерованный <OL>элементы списка</OL> <OL>
<LI>Элемент списка 1 </LI>
<LI>Элемент списка 2</LI>
<LI>Элемент списка 3</LI>
</OL>
Маркированный <UL> элементы списка </UL> Элемент списка <LI> элементы списка </LI> Таблица основных цветов
Цвет Color's name Шестнадцатеричный код цвета
Red Green Blue
Черный black 00 00 00
Темно-синий navy 00 00 80
Голубой blue 00 00 FF
Зеленый green 00 80 00
Темно-зеленый teal 00 80 80
Салатный lime 00 FF 00
Бледно-голубой aqua 00 FF FF
Вишневый maroon 80 00 00
Фиолетовый purple 80 00 80
Оливковый olive 80 80 00
Серый gray 80 80 80
Светло-серый silver C0 C0 C0
Красный red FF 00 00
Лиловый fushsia FF 00 FF
Желтый yellow FF FF 00
Белый white FF FF FF
Лабораторная работа №2. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок
Цель работы:
Научиться выполнять вставку рисунков в HTML-документ
Научиться создавать закладки и гиперссылки
Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).
Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.
Вставка рисунков в документ.
Открыть в Блокноте документ 2_name.htm.
Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.
Сохранить документ под именем 4_name.htm.
Просмотреть в броузере полученный результат.
Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в броузере.
Вставить рисунок Arrows2.wmf в конец документа 4_name.htm перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.
Просмотреть в броузере полученный результат.
Создание гиперссылок и закладок.
В документе 3_name.htm закрепить гиперрсылки за следующими элементами списка:
За словом Шрифт – гиперссылка на документ 1_name.htm.
За словом Заголовки – на документ 1_name.htm.
За словом Абзацы - на документ 2_name.htm.
Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».
Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning» в документе 1_name.htm.
Создать закладку в начале текущего документа 3_name.htm.. Присвоить ей имя «Hello».
Изменить вторую гиперссылку (на слове Заголовки), определив для неё переход в начало текущего документа на установленную закладку «Hello».
Создать закладку в документе 2_name.htm перед фрагментом монолога. Присвоить ей имя «Mono».
Установить на слово переформатирования гиперссылку на закладку «Mono».
Проверить правильность переходов по всем гиперссылкам.
Закрепить гиперссылки за графическими файлами:
Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.
Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.
Предъявить результат преподавателю.
Основные теги вставки рисунков, закладок и гиперссылок
Вставка изображений
Вставка графического файла <IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” > Пример:
<IMG SRC=”grafica.gif”
WIDTH=”550”HEIGHT=”240”
ALIGN=” right”
ALT=”Графический файл”>
Выравнивание картинки относительно текста <IMG SRC=”файл” ALIGN=”left|right|top|bottom”> Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок <IMG SRC=”файл” ALT=”текст”> Вставка ссылок
Ссылки на другую страницу <A HREF=” страница”>
текст </A> <A HREF=”str2.htm”>
Ссылка1</A>
Ссылка на закладку в другом документе <A HREF=” страница # имя закладки”> текст</A> <A HREF=” index.htm #met1”> На главную страницу </A>”
Ссылка на закладку в том же документе <A HREF=”#имя закладки ”> текст </A> <A HREF=” #metka1”>
Ссылка2</A>
Определить закладку <A NAME=”имя закладки”>текст</A> <A NAME=”metka1”></A>
Цвет фона, текста и ссылок
Фоновая картинка <BODY BACKGROUND=”файл рисунка”> <BODY BACKGROUND =”grafica.gif”
TEXT=”black” (черный)
LINK=”#FF0000” (красный)
VLINK=”#FFFF00” (желтый)
ALINK=”#FFFFFF” (белый)
</BODY>
Цвет фона <BODY BGCOLOR=”#$$$$$$”> Цвет текста <BODY TEXT=”#$$$$$$”> Цвет ссылки <BODY LINK=”#$$$$$$”> Цвет пройденной ссылки <BODY VLINK=”#$$$$$$”> Цвет активной ссылки <BODY ALINK=”#$$$$$$”>
Лабораторная работа № 3. Создание и форматирование таблиц
Цель работы:
Научиться использовать таблицы для оформления WEB-страниц
Создать таблицу по приведенному образцу, сохранить документ под именем tabl_name.htm. Сверху над таблицей разместить заголовок Таблица №1
При отображении таблицы в броузере должны удовлетворяться следующие условия:
таблица должна быть выравнена по центру и быть правильной (симметричной) формы;
в центральной ячейке поместить символ * (звездочка), остальные ячейки должны быть пустыми.
Примечание. Для отображения пустых ячеек в них нужно поместить символьный примитив пробела  
В этом же документе создать копию таблицы №1, ввести заголовок Таблица №2 и модифицировать ее:
В центральной ячейке разместить рисунок Arrows3.wmf
«Раскрасить» все остальные ячейки в различные цвета.
Создать еще одну копию таблицы – Таблица №3 и отредактировать теги таблицы так, чтобы она соответствовала приведенному ниже образцу.

Примечание. Для объединения ячеек в тегах <TD> необходимо использовать параметры colspan= и rowspan=
Создать новый HTML-документ - rasp_name.htm с расписанием занятий.
Документ должен начинаться заголовком Расписание занятий гр. NNN на весенний семестр 2005 г.
Первая строка таблицы должна быть оформлена как заголовки полей (с использованием тегов <TH>).
Таблица по ширине должна занимать полный размер окна. Ширину отдельных столбцов задать в относительных единицах (в %), с тем, чтобы при изменении ширины окна пропорции таблицы сохранялись.
День недели Время Предмет Преподаватель Аудитория
Понедельник 8:30-10:05 Математика (лек) доц. Иванов А.А. 320
10:15-11:50 Математика (пр) преп. Петрова И.А. 302
12:30-14:05 Физика (лаб) доц. Сидоров О.И. 307
Вторник 8:30-10:05 История (лек) проф. Громова О.А. 310
10:15-11:50 История (сем) преп. Попов М.А. 302
12:30-14:05 Физика (лаб) доц. Сидоров О.И. 307
... ... ... ... ...
Просмотреть созданный документ в броузере при различных размерах окна и различных настройках размера шрифта.
Сохранить файл с расписанием под именем rasp_menu_name.htm и модифицировать его.
После заголовка создать таблицу, состоящую их одной строки меню с названиями дней недели.

В таблице с расписанием установить закладки на названия дней недели.
В таблице меню создать гиперссылки на соответствующие дни недели.
Выполнить цветовое оформление каждой ячейки меню.
Проверить правильность выполнения переходов по гиперссылкам.
Создать группу web-страниц, объединенных меню:
На рабочем диске создать папку My_raspisanie для размещения файлов расписания.
Поместить расписание на каждый день недели и таблицу с меню в отдельные файлы. Имена файлов: menu.htm – для главной страницы, названия дней недели – для остальных. Все документы разместить в папке My_raspisanie.
Отредактировать гиперссылки меню так, чтобы по ним выполнялись переходы на соответствующий документ.
В конце каждого файла с расписанием на день организовать гиперссылку для возврата в главный документ с меню.
Оформить фон каждого дня недели собственным цветом, совпадающим с цветом ячейки таблицы меню.
Предъявить результат преподавателю.
Теги оформления таблиц
Определить таблицу <TABLE></TABLE> Пример
<TABLE border=”1” align =«CENTER» width=«50%» >
<TR>
<TH >Товар</TH>
<TH>Цена</TH>
</TR>
<TR>
<TD>Радиотелефон</TD>
<TD>2000 </TD>
</TR>
</TABLE>
Товар Цена
Радиотелефон 2000
Окантовка таблицы <TABLE BORDER =”?” </TABLE> Строка таблицы <TR> </TR> Выравнивание <TR ALIGN=left | right | center | middle | bottom > Ячейка таблицы <TD></TD> Выравнивание по горизонтали <TD ALIGN=LEFT | RIGHT | CENTER> Выравнивание по вертикали <TD VALIGN = TOP|MIDDLE| BOTTOM> Установка ширины ячейки (в пикселях или %) <TD WIDTH=«?»> Заливка цветом ячейки <TD BGCOLOR = «# цвет»> </TD> <TD BGCOLOR = «#FF0000»> </TD> красный цвет
Заголовок столбца или строки <TH>текст </TH> Текст в ячейке выравнивается по центру, устанавливается жирный шрифт