Создание Web-страницы сайта

Страницы работы

Содержание работы

Описание работы

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>

Похожие материалы

Информация о работе