ЛАБОРАТОРНАЯ РАБОТА

ЛАБОРАТОРНАЯ РАБОТА №20

Тема работы: Редактирование страницы HTML.

Цель работы: Ознакомиться с элементами языка HTML, которые могут использоваться для форматирования текста документа. Научиться создавать списки средствами языка HTML и определять способ их нумерации (маркировки). Ознакомиться с приемами создания таблиц средствами языка HTML для представления данных, создавать таблицы и изменять их вид при помощи атрибутов тегов HTML. Научиться отображать в рамках одной Web-страницы несколько документов при помощи фреймов.

Теоретическая часть:

Парный тег позволяет управлять параметрами шрифта. Он должен обязательно содержать хотя бы один из атрибутов: COLOR=”шестнадцатеричный код цвета”, FACE=гарнитура шрифта, SIZE=размер от 1 до 7.

Элементы стиля

..... Курсив(Italic)

... Усиление(BOLD)

<TT>...</TT> Телетайп

... Подчеркивание

<S>...</S> Перечеркнутый текст

<BIG>...</BIG> Увеличенный текст

... Уменьшенный фонт

... Подстрочные символы

... Надстрочные символы

Существуют списки трех видов: упорядоченные (нумерованные), неупорядоченные (ненумерованные), списки определений. Они создаются при помощи парных тегов: <OL> для упорядоченного списка, <UL> для неупорядоченного, <LI> для элементов списка, <DL> для списка определений, <DD> для определений, <DT> для определяемых терминов.

Таблицы используют для представления больших объемов текста, а также для точного размещения элементов страниц. Таблица в языке HTML задается при помощи парного тега <TABLE>. Она может содержать заголовок таблицы, определяемый тегом <CAPTION>, и строки таблицы, задаваемые при помощи парных тегов <TR>. Каждая строка таблицы содержит ячейки таблицы, которые могут относится к двум разным типам: <TH> ячейки в заголовках таблиц, <TD> обычные ячейки.

Язык HTML позволяет в рамках одной WEB-страницы отобразить несколько документов. Для этого страница должна быть разбита на несколько областей – фреймов. Тело документа <BODY> заменяется описанием фреймов, задаваемых парным тегом <FRAMESET>. Атрибуты: COLS= разбиение окна вертикально, ROWS= разбиение окна горизонтально.

Ход работы:

Приемы форматирования текста

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.him в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>, а его конкретное содержание может быть любым.

3. Введите тег <BASEFONT SIZE="5" COLOR="BROWN">. Он задает вывод текста по умолчанию увеличенным шрифтом и коричневым цветом.

4. Введите произвольный абзац текста, который будет выводиться шрифтом, заданным по умолчанию. Начните этот абзац с тега <Р>.

5. Введите теги: <Р> .

6. Введите очередной абзац текста, закончив его тегом .

7. В следующем абзаце используйте по своему усмотрению парные теги: <В> (полужирный шрифт), (курсив), (подчеркивание), <S> (вычеркивание), (нижний индекс), (верхний индекс).

8. В следующем абзаце используйте по своему усмотрению парные теги: <ЕМ> (выделение), (сильное выделение), <CODE> (текст программы), <KBD> (клавиатурный ввод), <SAMP> (пример вывода), <VAR> (компьютерная переменная).

9. Сохраните полученный документ под именем format.htm.

10. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

11. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл format.htm.

12. Изучите, как использованные элементы HTML влияют на способ отображения текста.

13. Вернитесь в программу Блокнот и измените документ так, чтобы элементы, задающие форматирование, были вложены друг в друга. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы.

Приемы создания списков.

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

3. Вставьте в документ тег <OL TYPE="I">, который начинает упорядоченный (нумерованный) список.

4. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

5. Завершите список при помощи тега </OL>.

6. Сохраните полученный документ под именем list.htm.

7. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

8. Дайте команду файл > Открыть. Щелкните на кнопке Обзор и откройте файл list.htm.

9. Изучите, как упорядоченный список отображается в программе Internet Explorer, обращая особое внимание на способ нумерации, заданный при помощи атрибута TYPE=.

10. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

11. Вставьте в документ тег <UL TYPE="SQUARE">, который начинает неупорядоченный (маркированный) список.

12. Вставьте в документ элементы списка, предваряя каждый из них тегом <LI>.

13. Завершите список при помощи тега </UL>. Сохраните документ под тем же именем.

14. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как изменился вид страницы, обратив внимание на способ маркировки, заданный при помощи атрибута TYPE=.

15. Вернитесь в программу Блокнот и установите текстовый курсор после окончания введенного списка.

16. Вставьте в документ тег <DL>, который начинает список определений.

17. Вставьте в список определяемые слова, предваряя соответствующие абзацы тегом <DT>.

18. Вставьте в список соответствующие определения, предваряя их тегом <DD>.

19. Завершите список при помощи тега </DL>. Сохраните документ под тем же именем.

20. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Посмотрите, как выглядит при отображении Web-страницы список определений.

Создание таблиц.

1. Если это упражнение выполняется не сразу после предыдущего, откройте документ first.htm в программе Блокнот.

2. Удалите весь текст, находящийся между тегами <BODY> и </BODY>. Текст, который будет вводиться в последующих пунктах этого упражнения, необходимо поместить после тега <BODY>. В данном упражнении используется список номеров телефонов.

3. Введите тег <TABLE BORDER="10" WIDTH="100%">.

4. Введите строку: <CAPTION ALIGN="TOP"> Список телефонов</ CAPTION>.

5. Первая строка таблицы должна содержать заголовки столбцов. Определите ее следующим образом:

<TR BGCOLOR="YELLOW" ALIGN="CENTER"> <ТН>Фамилия<ТН>Номер телефона

6. Определите последующие строки таблицы, предваряя каждую из их тегом <TR> и помещая содержимое каждой ячейки после тега <TD>.

7. Последнюю строку таблицы задайте следующим образом:

<TRXTD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.

8. Завершите таблицу тегом </TABLE>.

9. Сохраните документ под именем table.htm.

10. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

11. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл table.htm.

12. Изучите, как созданная таблица отображается в программе Internet Explorer, обращая особое внимание на влияние заданных атрибутов.

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

Создание описания фреймов

1. Запустите текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Введите следующий документ:

<ТIТLЕ> Описание фреймов </ТIТLЕ> </HEAD>

</FRAMESET> </HTML>

3. Сохраните этот документ под именем frames.htm.

4. Запустите обозреватель Internet Explorer (Пуск > Программы > Internet Explorer).

5. Дайте команду Файл > Открыть. Щелкните на кнопке Обзор и откройте файл frames.htm.

6. Изучите представление нескольких созданных ранее документов, в отдельных фреймах.

7. Посмотрите, что происходит при изменении ширины окна обозревателя.

8. Проверьте, можно ли изменить положение границ фреймов методом перетаскивания при помощи мыши.

9. Щелкните на ссылке, имеющейся в одном из фреймов, и посмотрите, как будет отображен новый документ.

10. Щелкните на кнопке Назад на панели инструментов и убедитесь, что возврат к предыдущему документу на нарушает структуру фреймов.

11. Вернитесь в программу Блокнот и измените структуру и параметры фреймов по своему усмотрению. Сохраните документ под тем же именем.

12. Вернитесь в программу Internet Explorer и щелкните на кнопке Обновить на панели инструментов. Убедитесь, что измененный вид Web-страницы соответствует замыслу. Если это не так, вернитесь в программу Блокнот, найдите и исправьте ошибки.

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

1. Теги для форматирования текста, создания списков, создания таблиц.

2. Теги описания фреймов, назначение фреймов.

Отчет должен содержать:

1. Тему, цель работы, ответы на контрольные вопросы и на вопросы хода выполнения работы.

2. Описание выполненных действий по пунктам.