Создание Web - страниц
Ход работы:
Для начала создания своей странички откройте Стандартную программу Windows «Блокнот».
На первом этапе для изучения и освоения элементов работы с текстовой информацией предлагается выполнить следующие задание: в программе «Блокнот» написать текст следующей программы в html-коде:
<HTML>
<HEAD>
<TITLE>элементы для форматирования текста</TITLE></HEAD>
<BODY>
<H2 align=center> Элементы форматирования текста </H2>
<HR>
<P> Текст первого абзаца.
<P> Текст второго абзаца </P>
<P align=center> Центрированный текст абзаца.
<P> <B> Использование элемента В </B>
<P> <BIG> Использование элемента BIG </BIG>
<P> <SMALL> Использование элемента SMALL </SMALL>
<P> <I> Использование элемента I </I>
<P> <STRIKE> Использование элемента STRIKE </STRIKE>
<P> <U> Использование элемента U </U>
<P> <STRONG> Использование элемента STRONG </STRONG>
<P> <CENTER> Использование элемента CENTER </CENTER>
<P><PRE> PRE ссылка работает: <A HREF="https://www.microsoft.com">Щелкни</a></plaintext>
<P><MARQUEE bgcolor="green" height=50 behavior="alternate"> Бегущая строка 1</MARQUEE>
<P><MARQUEE direction="right"> Бегущая строка 2 </MARQUEE>
<HR>
<H3> Задание абсолютных размеров шрифтов </h3>
<P> <FONT size=7> Шрифт размера 7</FONT>
<P> <FONT size=6> Шрифт размера 6</FONT>
<P> <FONT size=5> Шрифт размера 5</FONT>
<P> <FONT size=4> Шрифт размера 4</FONT>
<P> <FONT size=3> Шрифт размера 3</FONT>
<P> <FONT size=2> Шрифт размера 2</FONT>
<P> <FONT size=1> Шрифт размера 1</FONT>
<HR>
<P> <FONT color="green"> Задан зелёный цвет шрифта </FONT>
<P> <FONT size=4 face="Courier"> Шрифт типа Courier </FONT>
<CENTER> <FONT size=6>Примеры таблиц</FONT></CENTER>
<HR color="blue">
<H2>Стандартная таблица</h2>
<TABLE border=4 cellspacing=3>
<CAPTION>Заголовок таблицы</caption>
<TR><TH bgcolor="yellow">Заголовок 1
<TH bgcolor="yellow">Заголовок 2
<TR><TD>Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TD>Ячейка 4
</TABLE >
<HR color="green">
<H2>Здесь больше ячеек-заголовков</h2>
<TABLE border=4 cellspacing=3>
<CAPTION>Заголовок таблицы</caption>
<TR><TH bgcolor="yellow">
<TH bgcolor="yellow">Заголовок 1
<TH bgcolor="yellow">Заголовок 2
<TR><TH bgcolor="yellow">Заголовок 3
<TD>Ячейка 1
<TD>Ячейка 2
<TR><TH bgcolor="yellow">Заголовок 4
<TD>Ячейка 3
<TD>Ячейка 4
</TABLE>
<HR color="blue">
<H2>Объединение ячеек</h2>
<TABLE border=4 cellspacing=0 width=70%>
<TR><TD bgcolor="yellow"><B>Заголовок 1</b>
<TD bgcolor="yellow"><B>Заголовок 2</b>
<TR><TD rowspan=3 bgcolor="lime">Ячейка 1
<TD>Ячейка 2
<TR><TD>Ячейка 3
<TR><TD>Ячейка 4
<TR><TD colspan=2 bgcolor="agua" align="center">Ячейка 5
</TABLE>
<HR color="red">
<H2>Использование маркированного списка</h2>
<UL><LI>Элемент списка 1</UL>
<UL><LI>Элемент списка 2</UL>
<UL><LI>Элемент списка 3</UL>
<UL><LI>Элемент списка 4</UL>
<UL><LI>Элемент списка 5</UL>
</BODY>
</HTML>
После написания программы нужно сохранить её с расширением *.htm, а затем открыть с помощью Internet Explorer. Изучите страничку и используйте полученные навыки при создании собственной страницы.
Задание для самостоятельного выполнения:
Создание Web-страницы на заданную тему
Разработать страничку чемпионата России по футболу
1. Главная страница:
Заголовок: Чемпионат России по футболу
Создать бегущей строкой объявление следующего содержания: «С 17 мая по 26 июня 2011 года в Тольятти пройдет традиционный турнир по мини-футболу среди любительских команд "Большая игра-2011"».
Заголовок: Результаты матчей последнего тура
Содержание:
· Спартак—Торпедо 1:1
· Локомотив—Зенит 2:1
· Шинник—Алания 0:0
· Ростсельмаш—Жемчужина 2:0
· Ротор—Сатурн 0:1
· Динамо—Уралан 3:1
· Черноморец—Локомотив 1:1
· Крылья Советов—ЦСКА 0:1
Турнирная таблица
Место | Команда | Очки |
Спартак | ||
Локомотив | ||
ЦСКА | ||
Торпедо | ||
Динамо | ||
Сатурн | ||
Крылья Советов | ||
Ротор | ||
Черноморец | ||
Жемчужина |
Дополнительные задания:
· Разместить таблицу и, соответственно, заголовок таблицы по центру;
· Изменить цвет ячеек;
· Изменить цвет бегущей строки и шрифта;
· Разместить текст в таблице по центру;
- Изменить цвет и шрифт заголовка таблицы.