Контрольная работа

(создание Web – страниц учебного заведения)

Внимание! Результат выполнения контрольной работы приведен на рисунках в приложении 1

Создайте папку Web на диске D:
Откройте программу Блокнот
Создайте Web – страницу:

· Введите тэги, определяющие структуру любого HTML - документа

· Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>

· Задайте стили текста: используйте тэги <h1> </h1> для определения первого предложения (Добро пожаловать…..)в качестве заголовка

· Увеличьте размер остального текста с помощью тегов <big> </big> или <font size=5> </font>

· Оформите текст полужирным курсивным начертанием, используя теги <b> </b>; <i> </i>

· Выровняйте заголовок по центру с помощью атрибута align=center тега <h1>

· Выровняйте абзац по центру с помощью тэгов <center> </center>

· Сохраните документ под именем reclama.html в папке Web. Обязательно укажите расширение.htm или.html

· Откройте ваш документ с помощью браузера Internet Explorer

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

Вставьте в документ под именем reclama.html рисунок cloud.gif

· Скопируйте файл cloud.gif или любой другой файл с расширением.gif из папки Windows в вашу папку Web

· Для вставки рисунка, используйте одиночный тэг <img> c атрибутом src.

· С помощью атрибута <border>=1 включите отображение рамки вокруг рисунка

Ваша страничка будет выглядеть примерно так, как на рис.2

Создайте новую страницу, на которой вставим нумерованный список:

· Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>

· Определите заголовок списка, используя тэги <h1> </h1>

· Создайте список, используя теги <u1> </u1> <li> </li>

· Сохраните документ под именем spicok.html в папке Web

Ваша страничка будет выглядеть примерно так, как на рис.3.

Создайте гиперссылку для перехода с первой страницы (reclama.html) на вторую (spicok.html)

· Откройте документ reclama.html

· Используйте тег <a> с атрибутом href = “spicok.html” перед фрагментом текста о подготовке учащихся и закрывающий тег </a> после него

Ваша страничка будет выглядеть примерно так, как на рис.4.

Создайте гиперссылку для перехода со второй страницы (spicok.html) на первую (reclama.html)

· Откройте документ spicok.html

· Используйте тег <a> с атрибутом href = “reclama.html” перед фрагментом текста На первую страницу и закрывающий тег </a> после него

Ваша страничка будет выглядеть примерно так, как на рис.5

Создайте новую страницу, на которой вставим таблицу:

· Определите цвет фона и цвет текста с помощью атрибутов bgcolor и te xt открывающего тега <body>

· Создайте таблицу, используя теги <table> /</table><tr> </tr> <td> </td>

· Добавьте в тег <table> атрибут border=1, чтобы показать рамку и ячейки таблицы толщиной в 1 пиксел

· Установите фиксированную ширину таблицы – 140 пиксилей, добавив атрибут width=140 в тег <table>

· Сохраните документ под именем menu.html в папке Web

· Отредактируйте в файле menu.html строки кода содержащие названия пунктов меню Главная страница и Кого мы готовим, вставив вышеуказанные ссылки соответственно на файлы reclama.html и spicok.html

Ваша страничка будет выглядеть примерно так, как на рис.6

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

Создайте страничку с фреймами

· Вместо тэгов <body> </body> используйте пару тэгов <frameset> </frameset> c атрибутами rows или cols, определяющими как делится экран по горизонтали или по вертикали, например <frameset cols=160,*> делит экран на два вертикальных фрейма. Первый имеет фиксированную ширину 160 пикселей, размер второго определяет браузер.

· Для описания каждого фрейма в отдельности используйте тэги <frame> c атрибутом scr: <frame src = ”menu.html”> < frame src = ”reclama.html” name=frame >. При помощи атрибута name второму фрейму присвоено имя. Это имя будет указано в ссылках любого документа в качестве значения атрибута target, для определения в какой именно фрейм следует загрузить документ. Например, для того, чтобы при переходе по ссылке href=”reclama.html” документа menu.html документ отражался не в том же окне, что исходный, а в другом в тэге <a> используется атрибут target:

target=”frame”

· Сохраните документ под именем index.html в папке Web

Ваша страничка будет выглядеть примерно так, как на рис. 7.

· Отредактируйте в файле menu.html тэги: <a href=”reclama.html” target=”frame”> <a href=”spisok.html” target =”frame”>

Приложение1

Рис. 1

Рис. 2

Рис. 3

Рис. 4

Рис.5

Рис. 6

Рис. 7

Приложение2
Краткая справка тегов

Тег	Назначение
<html>и </html>	начало/конец документа
<head>и</head>	пара тегов указывает на начало и конец служебной области документа
<title>и</title>	все, что находится между тегами <title> и </title>, толкуется браузером как название документа (появляется в строке заголовка окна браузера)
<body>и </body>	пара меток указывает на начало и конец тела (основной области) HTML-документа
<H1>и </H1> — <H6>и </H6>	заголовки от первого до шестого уровня
<P>и</P>	начало/конец абзаца
<BR>	конец строки
<HR>	горизонтальная линия
<B>и</B>	полужирный шрифт
<I>и</I>	наклонный текст (курсив)
<TT>и</TT>	шрифт пишущей машинки
<U>и</U>	подчеркнутый шрифт
<SUP>и</SUP>	верхний индекс
<SUB>и </SUB>	нижний индекс
<BIG>и</BIG>	увеличить размер шрифта
<SMALL>и</SMALL>	уменьшить размер шрифта
<PRE>и</PRE>	предварительно отформатированный текст, выводится браузером на экран как есть
<BLOCKQUOTE>и</BLOCKQUOTE>	текст, заключенный между тегами, выводится браузером на экран с увеличенным левым полем.
<FONT>и</FONT>	тег для определения типа, размера и цвета шрифта
Атрибут COLOR тега <FONT>	цвет шрифта для фрагмента текста
<BDO>и</BDO>	изменение направления текста.
<MARGUEE>и</ MARGUEE>	текст представляется в виде бегущей строки
<UL>и</UL>	маркированный список
<OL>и</OL>	нумерованный список
<DL>и</DL>	список определений
<A HREF="[адрес перехода]"> выделенный фрагмент текста </A>	переход от одного фрагмента текста к другому
<IMG SRC="[имя файла]">	вставка графического изображения
<TABLE>и</TABLE>	создание таблицы
Атрибут BORDERтега <TABLE>	Выделение каждой ячейки и таблицы в целом рамкой; задание ширины рамки в пикселях
<CAPTION>и</CAPTION>	задает имя (заголовок) таблицы
<CAPTION ALIGN=TOP>	заголовок помещается над таблицей
<CAPTION ALIGN=BOTTOM>	заголовок помещается под таблицей
<TR>и</TR>	строка таблицы
<TD>и </TD>	ячейка таблицы
Атрибут ALIGNтега <TR>, может принимать значение LEFT, RIGHT, CENTER	горизонтальное выравнивание соответственно в строках или ячейках по левому краю, по правому краю, посередине
Атрибут WIDTH тега <TABLE> или <TD>	ширина таблицы или ячейки в процентах от ширины экрана (таблицы) или в пикселях
Атрибут CELLSPACING тега <TABLE>	ширина рамки вокруг каждой ячейки в пикселях
Атрибут CELLPADDING тега <TABLE>	устанавливает величину пустых полей между содержимым ячейки и ее рамкой в пикселях
Атрибут VALIGNтега <TD>	вертикальное выравнивание текста в ячейках строки
АтрибутCOLSPAN тега <TD>	объединение нескольких соседних ячеек по горизонтали
Атрибут ROWSPANтега <TD>	объединение нескольких соседних ячеек по вертикали
<FORM>и/FORM>	создание формы
<INPUT TYPE=submit>	создание кнопки отправки
<INPUT TYPE= text>	создание текстового поля
<INPUT TYPE= password>	создание поля ввода пароля
<INPUT TYPE= radio>	создание переключателей
<INPUT TYPE= checkbox>	создание флажков
<INPUT TYPE= hidden>	создает скрытый элемент данных, который не виден пользователю при заполнении формы и передается обработчику без изменений.
<INPUT TYPE= reset>	определяет кнопку, при нажатии на которую форма возвращается в исходное состояние
<Frameset> и </Frameset>	задание фреймов
Атрибуты ROWSи COLS тега <Frameset>	Определение раскладки фреймов в окне браузера и размера каждого фрейма в пикселах или процентах от размера окна