(создание 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 приложения.
|
|
k
Вставьте в документ под именем reclama.html рисунок cloud.gif
· Скопируйте файл cloud.gif или любой другой файл с расширением.gif из папки Windows в вашу папку Web
· Для вставки рисунка, используйте одиночный тэг <img> c атрибутом src.
· С помощью атрибута <border>=1 включите отображение рамки вокруг рисунка
Ваша страничка будет выглядеть примерно так, как на рис.2
l
Создайте новую страницу, на которой вставим нумерованный список:
· Определите цвет фона и цвет текста с помощью атрибутов bgcolor и text открывающего тега <body>
· Определите заголовок списка, используя тэги <h1> </h1>
· Создайте список, используя теги <u1> </u1> <li> </li>
· Сохраните документ под именем spicok.html в папке Web
Ваша страничка будет выглядеть примерно так, как на рис.3.
m
Создайте гиперссылку для перехода с первой страницы (reclama.html) на вторую (spicok.html)
· Откройте документ reclama.html
· Используйте тег <a> с атрибутом href = “spicok.html” перед фрагментом текста о подготовке учащихся и закрывающий тег </a> после него
Ваша страничка будет выглядеть примерно так, как на рис.4.
n
Создайте гиперссылку для перехода со второй страницы (spicok.html) на первую (reclama.html)
· Откройте документ spicok.html
· Используйте тег <a> с атрибутом href = “reclama.html” перед фрагментом текста На первую страницу и закрывающий тег </a> после него
Ваша страничка будет выглядеть примерно так, как на рис.5
o
Создайте новую страницу, на которой вставим таблицу:
· Определите цвет фона и цвет текста с помощью атрибутов 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
p
Значительно улучшить внешний вид и функциональность сайта можно, используя фреймы. С помощью фреймов экран разделяется на несколько окон, в каждом из которых отображается содержание отдельной страницы.
Создайте страничку с фреймами
· Вместо тэгов <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> | Определение раскладки фреймов в окне браузера и размера каждого фрейма в пикселах или процентах от размера окна |
Литература
|
|
1. Закарян И., Рафалович В. Что такое Internet, WWW и HTML. – М., 1998.
2. В.Дорот, Ф.Новиков. Толковый словарь современной компьютерной лексики. С-Пб.,2001.
3. Информатика. Базовый курс / Под ред.Симоновича. С-Пб., 2001.
4. Айзенменгер Р. HTML 3.2/4.0: Справочник. — М.: БИНОМ, 1998.
5. Браун М., Хоникатт Дж. Использование HTML 4. — М., СПб.: Вильяме, 1999.
6. Воген Т. Мультимедиа: Практическое руководство. — Мн., 1997.
|
|
7. Гончаров А. HTML в примерах.—СПб.: ПИТЕР, 1997.
8. Кирмайер М. Мультимедиа.—-СПб.: ВНV,1994.
9. Коржинский С. Настольная книга Web-мастера.— М.: ЗАО «Кнорус», 2000.
10. Werbach К. Краткое руководство по HTML. /http://werbach.com/barebones.
11. Korpela J. Изучение HTML 3.2 на примерах http://www.hut.fi/~jkorpela/HTML 3.2/all.html.
12. Матросов А.В., Сергеев А.О., Чаунин М.П. HTML 4/0 – CПб. «БХВ – Санкт-Петербург, 1999
13. Хоумер А. Уилмен К. Dynamic HTML: – справочник. – СПб.: Питер Ком, 1999
14. Шарф Д. HTML 3.2: справочник – СПб: Питер, 1998
15. Мулен Р. HTML 4: справочник программиста – СПб.: Питер Ком, 1998
Оглавление
Введение.. 1
1. Основные понятия.. 1
2. Работа с текстом... 3
3. Списки.. 8
4. Гиперссылки в НТМL – документе Добавление графических изображений 10
5. Таблицы... 15
6. Формы... 18
7. Фреймы... 23
Практические задания.. 30
Контрольная работа.. 32
Приложение1.. 32
Приложение2 Краткая справка тегов.. 32
Литература.. 32