Создание Web-документа с помощью редактора FrontPage Express

1. Запустите программу FrontPage Express.

2. Введите в программе FrontPage Express текст: «Изучаем программу FrontPage.» С помощью панели инструментов форматирования отформатируйте текст: Цвет черный, Шрифт Times New Roman, размер 18 пт, выравнивание по левому краю.

3. В следующей строке напечатайте текст: «Создаем Web-страницу. Эта строка напечатана красным цветом.» Цвет красный, шрифт Times New Roman, размер 14 пт, выравнивание по левому краю.

4. В следующей строке напечатайте текст: «Отформатировали текст. Вставляем таблицу 3 х 3 и заполняем столбцы и строки.» Цвет черный, Шрифт Times New Roman, курсив, размер 12 пт, выравнивание по левому краю.

5. Вставьте таблицу из трех строк и трех столбцов, остальные параметры по умолчанию. Для создания таблицы щелкните на кнопке Вставить таблицу на стандартной панели инструментов.

6. Напечатать текст: «Вставляем рисунок.» Цвет черный, Шрифт Times New Roman, размер 12 пт, выравнивание по центру.

7. Вставьте рисунок с помощью кнопки Вставка ► Рисунок ► Из файла на стандартной панели инструментов. Рисунок возьмите из папки C:\Windows.

8. Сохраните полученный документ в вашей папке под именем web-страница.htm.

9. Запустите обозреватель Internet Explorer.

10.Откройте файл web-страница.htm.

10.Убедитесь, что созданный документ правильно отображается обозревателем. Обратите внимание на наличие отличий вида документа при отображении в обозревателе Internet Explorer и в программе FrontPage Express.

11.Измените ширину окна обозревателя и посмотрите, как при этом меняется вид документа.

12.Вернитесь в программу FrontPage Express и дайте команду Вид ► Показать теги. Объясните роль показанных тегов.

13.Запустите программу Блокнот и откройте файл web-страница.htm.

14.Изучите автоматически сгенерированный код HTML, определите, как с помощью
тегов HTMLреализованы использованные команды форматирования.

Приложения

1.Текст файла абзац.htm

<HTML>

<HEAD>

<TITLE>3аголовок документа</TITLE>

</HEAD>

<BODY>

<H1>

Изучение языка HTML (это заголовок первого уровня).

</H1>

<H2>

Web-страница (это заголовок второго уровня).

</H2>

<P>Создаем текст с абзацем.

<P>Абзац создается тегом <Р>, который ставится в начале абзаца.

<P>Замыкающий тег при этом не ставится.

<P>Еще один текст.

</BODY>

<HR>

</HTML>

2.Текст файла гиперссылка.htm

<HTML>

<HEAD>

<TITLE>3аголовок документа</TITLE>

</HEAD>

<BODY>

Текст до ссылки.

</А>Текст после ссылки.

</BODY>

</HTML>

3.Текст файла картинка.htm

<HTML>

<HEAD>

<TITLE>3аголовок документа</TITLE>

</HEAD>

<BODY>

<P>Работа с рисунками.

<P>Применение различных атрибутов.

Расположение рисунков будет зависеть от атрибутов.

<P>Изменим атрибут.

<P>Еще раз Изменим атрибут.

<P>Используем другую картинку и атрибуты расположения картинки относительно текста.

Изменим положение картинки

</BODY>

</HTML>

4.Текст файла формат.htm

<HTML>

<HEAD>

<TITLE>3аголовок документа</TITLE>

</HEAD>

<BODY>

<P>Этот тег задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

<P>Новый текст, размер уменьшен.

<P><B>Полужирный шрифт.</B>

</FONT>

</BODY>

</HTML>

5.Текст файла таблица.htm

</HEAD>

<BODY>

<P ALIGN="CENTER"><FONT COLOR="RED" SIZE="5">Список оценок по физике</FONT><FONT SIZE="5">

<TR>

<P ALIGN="CENTER">Год рождения</TD>

<TD>

<P ALIGN="CENTER">Группа</TD>

</TR>

<TR>

<P ALIGN="CENTER">Петров И. И.</TD>

<TD>

<P ALIGN="CENTER">Отлично</TD>

</TR>

<TR>

<P ALIGN="CENTER">Иванов П. П.</TD>

<TD>

<P ALIGN="CENTER">Хорошо</TD>

</TR>

</TABLE>

</BODY>

</HTML>

6.Текст файла фрейм.htm

<HTML>

<HEAD>

<TITLE>Работа с фреймами</TITLE>

</HEAD>

</FRAMESET>

</HTML>

7.Web-страница, подготовленная в программе

Изучаем программу FrontPage.

Создаем Web-страницу. Эта строка напечатана красным цветом.

Отформатировали текст. Вставляем таблицу 3 х 3 и заполняем столбцы и строки.

Ф.И.О.	Год рождения	Номер телефона
Петров И. И.		22-15-40
Иванов П. П.		36-18-09

Вставляем рисунок.

Это мой тигр.

Контрольные вопросы

Почему для разработки Web-страниц используется специальный язык разметки гипертекста?

Что такое тег HTML?

С помощью каких известных вам программ можно создавать Web-документы в коде HTML?

С помощью каких известных вам программ можно Web-документы просматривать Web-документы?

Что такое парные и одиночные теги?

В чем разница между открывающим и закрывающим тегами?

Что такое атрибуты тегов? Приведите пример.

Что такое значение атрибутов тегов? Приведите пример.

Что размещают между тегами <HEAD> </HEAD>?

Что размещают между тегами <BODY> </BODY>?

Что размещают между тегами <H1> </H1>?

Что означает тег <P>?

Для чего используется тег <IMG SRC=?