Материал: Создание простейших web-документов. методические указания к выполнению лабораторной работы. Кострюков С.А., Пешков В.В
6. Завершите список при помощи тега </OL>.
7. Сохраните документ, задав имя файла list.htm.
8.Откройте файл list.htm в программе Internet Explorer или другом браузере.
9.Проверьте правильность отображения нумерованного списка в браузере. Особое внимание обратите на способ нумерации, который задается атрибутом TYPE=. Измените нумерацию с римской на арабскую.
10.Вернитесь обратно в Блокнот и установите курсор после окончания списка. Добавьте тег горизонтальной линейки
<HR>.
11.Введите заголовок <Н1>Птицы России</Н1>.
12.Задайте неупорядоченный (маркированный) список, введя тег <UL TYPE="SQUARE">, который начинает его.
13.Вставьте в текст элементы списка (виды птиц), начиная каждый из них с тега <LI>.
14.При помощи тега </UL> завершите список. Сохраните документ list.htm.
15.Вернитесь в браузер и щелкните на кнопке Обновить. Проверьте правильность отображения списка.
16.Измените вид маркера, заданный при помощи атрибу-
та TYPE=, например, TYPE="CIRCLE".
17.Вернитесь обратно в Блокнот и установите курсор после окончания списка. Добавьте тег горизонтальной линейки
<HR>.
18. Вставьте в текст тег <DL>, начинающий список определений.
19. Вставьте в список 3-4 определяемых слова, ставя перед каждым из них тег <DT> (например, Вектор, Матрица, Производная, и т.д.). После каждого из слов можно поставить тире.
20. Вставьте после каждого из слов соответствующие определения, начиная их тегом <DD>.
21. Завершите список определений тегом </DL>. Сохраните документ.
26
22. Вернитесь в браузер и кликните на кнопке Обновить. Проверьте правильность отображения списка определений на web-странице.
Упражнение 7 Создание таблиц
1.Запустите программу Блокнот и откройте в ней файл first.htm.
2.Удалите всѐ содержимое между тегами <BODY> и </BODY>, затем установите курсор между ними.
3.Введите тег
<TABLE BORDER="10" WIDTH="100%">
4. Затем введите строку:
<CAPTION АLIGN="ТОР">Список телефонов</САРТION>
5. В первой строке таблицы обычно располагаются заголовки столбцов. Задайте еѐ, например, так:
<TR BGCOLOR="YELLOW" ALIGN="CENTER">
<ТН>Фамилия<ТН>Номер телефона
6. Задайте последующие строки таблицы. Каждая из их начинается тегом <TR> и состоит из нескольких ячеек. Каждая ячейка, в свою очередь, начинается тегом <TD>:
<TR><TD>Иванов И.И.<TD>212-34-56 <TR><TD>Петров П.П.<TD>256-34-12
7.Аналогично задайте ещѐ 2-3 строки таблицы.
8.Завершающую строку таблицы можно задать в виде:
<TR><TD ALIGN="CENTER" COLSPAN="2">Ha первом этаже здания имеется бесплатный телефон-автомат.
9.Таблица завершается тегом </TABLE>. Затем командой Сохранить как сохраните документ под именем table.htm.
10.Откройте файл table.htm в программе Internet Explorer или другом браузере. Изучите, как в браузере отображается созданная таблица. Особое внимание обратите на влияние еѐ атрибутов на внешний вид таблицы.
11.Измените ширину окна браузера. Как при этом меняется внешний вид таблицы?
27
Упражнение 8 Использование фреймов
1.Запустите программу Блокнот.
2.Введите следующий текст:
3.Сохраните документ под именем frames.htm.
4.Откройте файл frames.htm в программе Internet Explorer или другом браузере. Как выглядят созданные ранее документы в отдельных фреймах?
5.Изучите, как ведет себя отображаемая браузером webстраница, если изменить ширину окна браузера.
6.Методом перетаскивания мышью определите, можно ли изменять положение границ фреймов.
7.Кликните на ссылке, которая содержится в одном из фреймов, и проверьте, будет ли в нѐм отображѐн новый документ.
8.Кликните на кнопке Назад на панели инструментов. Убедитесь, что при возвращении к предыдущему документу структура фреймов не нарушается.
9.Вернитесь обратно в программу Блокнот и измените параметры и структуру фреймов, изменив, например, их количество и относительные размеры. Сохраните документ.
10.Вернитесь в браузер и кликните на кнопке Обновить. Проверьте, соответствует ли текущий вид web-страницы Вашему замыслу. Если нет, перейдите обратно в Блокнот и исправьте ошибки.
28
Упражнение 9
Создание web-документа с помощью редактора
Microsoft Office SharePoint Designer 2007
1.Запустите программу SharePoint Designer.
2.В автоматически созданной пустой web-странице наберите произвольный текст. Он должен включать заголовок, 2-3 абзаца с отступами первой строки, список (маркированный или нумерованный), гиперссылки, таблицу и иллюстрации.
3.С помощью кнопок панели инструментов отформатируйте текст. Используйте полужирный, курсив, подчѐркнутый
идругие атрибуты, а также различные шрифты, цвет и размер символов.
4.Чтобы создать таблицу, кликните на кнопке Вставить
таблицу 
.
5.Чтобы добавить иллюстрацию, используйте кнопку 
Вставить рисунок из файла. Иллюстрации возьмите по Вашему выбору.
6.Сохраните файл под именем wysiwyg.htm. Подтвердите, если нужно, сохранение изображений, для которых требуется преобразование формата.
7.Откройте файл wysiwyg.htm в программе Internet Explorer или другом браузере. Обратите внимание на различия во внешнем виде документа при просмотре в браузере и в про-
грамме SharePoint Designer.
8.С помощью мыши измените ширину окна браузера. Как при этом изменяется вид созданного Вами документа?
9.Перейдите обратно в программу SharePoint Designer и кликните на кнопке HTML-код.
10.Изучив код HTML, автоматически сгенерированный программой, установите, как использованные команды форматирования реализованы с помощью тегов HTML.
11.Закройте программу SharePoint Designer.
29
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
1.Информатика. Базовый курс: Учеб. пособие для втузов
/Под ред. С.В. Симоновича. – 3-е изд. Стандарт третьего поколения. – СПб.: Питер, 2016. – 637 с
2.Бурковский А. В. Информатика. Практикум: Учеб. пособие / А. В. Бурковский. – Воронеж: ГОУВПО «Воронежский государственный технический университет», 2006. – 133 с.
3.Ковентри П. Microsoft Office SharePoint Designer 2007 /
П. Ковентри. – М.: Эком, 2008. – 544 с.
30