Описание работы
1. Открываем текстовый редактор Блокнот в нем набираем в нем структуру HTML-документа:
<HTML>
<HEAD>
<TITLE>Студенческая жизнь</TITLE>
</HEAD>
<BODY>Первая домашняя страничка</BODY>
</HTML>
2. Сохраняем файл на диске С в папке под своей фамилией, задав ему имя index.htm.
3. Вводим атрибуты для тега <BODY> цвет фона - светлосерый, а цвет текста – темносиний (BGCOLOR=”silver” TEXT=”navy”).
4. Текст Первая домашняя страничка делаем заголовком первого уровня (тег <H1></H1>). Вводим фамилию, имя и отчество и оформляем этот текст выделением жирным шрифтом, и выравниваем текст по центру и с переводом строки (теги <P></P>,<B></B>,<BR>). Пропускаем несколько строк после текста с фамилией тегом <BR> и вводим текст:
· Немного о себе
· Мои любимые предметы
· Мое хобби
6. Сохраняем исходный текст файла.
Через несколько строк от списка используем разделитель, после которого вводим координаты (почтовый адрес, и телефон).
7. В нашем тексте, оформленного в виде списка для каждого пункта создаем гиперссылку на соответствующие страницы, находящиеся в соответствующих файлах (page1.htm, page2.htm, page3.htm). Для этого используем тег <A></A>. <A HREF=”#имя закладки>.
8. Открываем текст первой нашей страницы (page1.htm) и после заголовка в тексте в начало первого абзаца вставляем картинку, используя тег <IMG> с атрибутом SRC для указания адреса нахождения нашего графического файла. Изменяем выравнивание второго рисунка на правую сторону страницы. Для этого воспользуйтесь атрибутом ALIGN=”right”. Используем атрибут ALT для ввода подписи к картинке в сплывающей подсказке и поместите картинку в рамку (атрибут BORDER).
9. Для создания простой таблицы используем теги <TABLE>, <TR>, <TD>.
Создаем на отдельной WEb-странице (pade4.htm) таблицу приведенную ниже, используя как пример таблицу из лекции.
|
1 |
2 |
|
3 |
4 |
|
5 |
6 |
Задаем в теге <TABLE> атрибуты BORDER=1 ALIGN=”center”. Задаем ширину таблицы тегом <WIDTH=”60%”> а затем задаем расстояние текста от границы ячейки CELLPADDING=20 и расстояние между ячейками CELLSPACING=10. Задаем цвет фона таблицы светлозеленый BGCOLOR="lime" и цвет рамки – красный BORDERCOLOR="red". Размещаем текст в ячейке в центре для каждой строки таблицы, для этого используем атрибут тега <TR> (строка) ALIGN=”center”.
10. Для создания таблицы, ячейка которой занимает несколько строк или столбцов используем атрибуты COLSPAN и ROWSPAN тега ячейки <TD>.
Вписывая следующие:
<TABLE BORDER=1 CELLSPACING=0 WIDTH=30% HEIGHT=100 ALIGN=CENTER>
<TR ALIGN=CENTER>
<TD ROWSPAN=2 Bgcolor=#00cc00>1</TD>
<TD COLSPAN=2 Bgcolor=#009999>2</TD>
</TR>
<TR ALIGN=CENTER>
<TD Bgcolor=#cc00cc>3</TD>
<TD Bgcolor=#cc33ff>4</TD>
</TR> </TABLE><br>
Задаем разные цвета ячейкам. Сохраните данную таблицу в файле page5.htm
|
1 |
2 |
|
|
3 |
4 |
|
11. Для создания таблицы, которая имеет название (заголовок) и название столбцов используем теги <CAPTION> и <TH>.
Создаем таблицу, приведенную ниже на отдельной Web-странице (файл page6.htm).
Средняя температура каждого дня в октябре 2004 года
|
Число месяца |
Средняя температура |
|
1 |
6 |
|
2 |
9 |
|
3 |
11 |
Для этого вписываем следующие
<TH>Число месяца
<TH>Средняя температура
<tr ALIGN=CENTER>
<td>1</td>
<td>6</td>
</tr>
<tr ALIGN=CENTER>
<td>2</td>
<td>9</td>
</tr>
<tr ALIGN=CENTER>
<td>3</td>
<td>11</td>
</tr>
</table>
12. Набираем в Блокноте структуру гипертекстовой программы
Используем для разметки Web-страницы фреймы (кадры). Организация фреймов на странице может быть как простая, так и сложная.
Делаем следующую страничку:
<HTML> <HEAD>
<TITLE>Фреймы</TITLE>
</HEAD>
<FRAMESET ROWS="*,*,*" BORDER=0 FRAMEBORDER=0 FRAMESPACING=0>
<FRAME SRC="page1.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" NORESIZE>
<FRAME SRC="page2.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" NORESIZE>
<FRAME SRC="page3.html" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="auto" NORESIZE>
</FRAMESET> </HTML>
Уважаемый посетитель!
Чтобы распечатать файл, скачайте его (в формате Word).
Ссылка на скачивание - внизу страницы.