Материал: Создание простейших web-документов. методические указания к выполнению лабораторной работы. Кострюков С.А., Пешков В.В
Лабораторная работа Создание простейших web-документов
Упражнение 1
Создание простейшей web-страницы
1.Запустите программу Блокнот (Пуск Все программы Стандартные Блокнот).
2.Наберите текст:
3.Сохраните введенный текст в своей рабочей папке, задав имя файла first.htm. Проверьте, не добавил ли Блокнот при сохранении файла к его имени расширение .ТХТ.
4.Откройте файл first.htm в программе Internet Explorer, а затем в каком-либо другом браузере. Для этого откройте свою рабочую папку и кликните на имени файла правой кнопкой мыши. В открывшемся контекстном меню выберите команду
Открыть с помощью Internet Explorer (либо запустите Internet Explorer из меню Пуск и дайте команду Файл Открыть, кликните на кнопке Обзор и найдите в своей рабочей папке файл first.htm).
5.Изучите вид созданной Вами простейшей web-страницы. Где отображается содержимое элементов TITLE и BODY? Обратите внимание на взаимное расположение слов «Содержание»
и«документа», которые были введены в отдельных строках. Что произойдѐт, если уменьшить ширину окна?
21
Упражнение 2 Изучение приемов форматирования абзацев
1.Откройте документ first.htm в программе Блокнот.
2.Удалите всѐ содержимое между тегами <BODY> и </BODY> и установите курсор между ними. Конкретное содержание заголовков и абзацев, которые будут вводиться в следующих пунктах упражнения, может быть произвольным.
3.Задайте заголовок первого уровня, разместив его между тегами <Н1> и </Н1>.
4.Задайте заголовок второго уровня, его следует разместить между тегами <Н2> и </Н2>.
5.Создайте первый абзац текста, набрав его после тега <Р> (3-5 полных строк). Для этого можно, набрав небольшой фрагмент, скопировать его несколько раз. При этом внутри абзаца можно переходить на новую строку в любом месте.
6.После абзаца введите тег горизонтальной линейки <HR>.
7.Создайте еще один абзац, также начиная его с тега <Р>.
8.Сохраните текст, задав имя файла paragraph.htm.
9.Откройте файл paragraph.htm в программе Internet Explorer или другом браузере.
10.Проверьте правильность отображения файла. Имеется ли связь между переходами на новую строку в исходном тексте
ивидом web-страницы в браузере?
Упражнение 3 Создание гиперссылок
1.Откройте файл first.htm в программе Блокнот.
2.Удалите всѐ содержимое между тегами <BODY> и </BODY> и установите курсор между ними.
3.Наберите текст: Текст до гиперссылки
4.Через пробел от него в той же строке задайте тег:
<A HREF=”first.htm”>
5.За ним без пробела в той же строке введите слово:
гиперссылка
6. Далее без пробела в той же строке введите закрывающий тег </А>.
22
7.После него через пробел в той же строке задайте фразу:
текст после гиперссылки.
8.Сохраните текст, задав имя файла link.htm.
9.Откройте файл link.htm в программе Internet Explorer или другом браузере.
10.Проверьте правильность отображения гиперссылки – слово между тегами <А> и </А> выделено как ссылка (подчеркиванием и цветом).
11.Кликните на ссылке и убедитесь, что при этом загружается файл first.htm, на который указывает ссылка.
12.Кликните на кнопке 
Назад на панели инструментов, чтобы вернуться к предыдущей странице. Проверьте и убедитесь, что ссылка теперь отображается другим цветом, т.е. считается просмотренной.
Упражнение 4
Создание изображения и использование его на web-странице
1. Запустите программу Paint (Пуск Все программы Стандартные Paint). Задайте размеры нового рисунка, например, 50 50 пикселов (меню Paint Свойства).
2.Выберите для переднего плана красный цвет и для фона зеленый цвет. Выполните заливку рисунка фоновым цветом.
3.С помощью инструмента Кисть изобразите произвольный красный рисунок на имеющемся зеленом фоне.
4.Сохраните файл под именем pic1.gif (обратите внимание на тип файла в поле ввода под именем – он должен быть GIF, в противном случае вставка рисунка в web-страницу может не произойти).
5.Откройте файл first.htm в программе Блокнот.
6.Удалите всѐ содержимое между тегами <BODY> и </BODY> и установите курсор между ними.
7.Введите произвольный текст протяженностью 5-6 строк (для этого можно, набрав небольшой фрагмент, скопировать его несколько раз) и установите текстовый курсор в его начало.
8.Перед текстовым фрагментом введите тег
<IMG SRC="pic1.gif" ALIGN="BOTTOM">
23
9.Сохраните текст, задав имя файла picture.htm.
10.Откройте файл picture.htm в программе Internet Explorer или другом браузере. Проанализируйте вид получившегося документа.
11.Вернитесь обратно в Блокнот и измените значение ат-
рибута: ALIGN="TOP". Сохраните файл picture.htm.
12.Вернитесь в браузер и щелкните на кнопке Обновить.
Как изменился вид страницы в результате изменения атрибутов? 13. Повторите шаги 11-12, изменяя значение атрибута на
ALIGN="MIDDLE", ALIGN="BOTTOM", ALIGN="LEFT".
14. Вернитесь обратно в Блокнот и добавьте в конец тега
<IMG> атрибуты: HSPACE=40 VSPACE=20. Сохраните файл picture.htm.
15. Вернитесь в браузер и кликните на кнопке Обновить. Изучите результат применения указанных атрибутов при отображении страницы.
Упражнение 5 Приемы форматирования текста
1.Откройте документ first.htm в программе Блокнот.
2.Удалите всѐ содержимое между тегами <BODY> и </BODY> и установите курсор между ними. Конкретное содержание текста, который будет вводиться в следующих пунктах этого упражнения, может быть произвольным.
3.Для задания шрифта по умолчанию введите тег:
<BASEFONT SIZE="6" COLOR="BLUE">
Он определяет, что вывод текста по умолчанию будет производиться увеличенным шрифтом и синим цветом. Увидеть результат действия этого тега можно лишь в программе Internet Explorer, другие браузеры его не поддерживают.
4.Начиная с тега <Р>, введите произвольный абзац текста, который будет выводиться заданным по умолчанию шрифтом.
5.Введите следующие теги:
<P> <FONT SIZE="-2" FACE="ARIAL" COLOR="GREEN">.
6. Введите очередной абзац текста, закончив его тегом
</FONT>.
24
7.В следующем абзаце произвольно используйте парные теги: <В> (полужирный шрифт), <I> (курсив), <U> (подчеркивание), <S> (вычеркивание), <SUB> (нижний индекс), <SUP>
(верхний индекс), в том числе, когда теги вложены друг в друга. С их помощью наберите формулы: H2SO4, x2 + y2 = r2.
8.В следующем абзаце текста произвольно используйте парные теги: <ЕМ> (выделение), <STRONG> (сильное выделение), <CODE> (текст программы), <KBD> (ввод с клавиатуры), <SAMP> (пример вывода), <VAR> (переменная в программе).
9.Сохраните полученный текст под именем format.htm.
10.Откройте файл format.htm в программе Internet Explorer или другом браузере. Изучите, как использованные теги влияют на внешний вид текста.
11.Вернитесь обратно в Блокнот и удалите тег BASEFONT. Вместо него между тегами <HEAD> и </HEAD> вставьте раздел стиля, например:
<HEAD>
<TITLE>Заголовок документа</TITLE>
<STYLE> BODY{color:blue;font-size:20px;font-family:Calibri;}
</STYLE>
</HEAD>
12.Сохраните файл и обновите web-страницу в браузере.
Проверьте правильность отображения текста.
Упражнение 6 Приемы создания списков
1.Откройте файл first.htm в программе Блокнот.
2.Удалите всѐ содержимое между тегами <BODY> и </BODY> и установите курсор между ними.
3.Введите заголовок первого уровня <Н1>Тропические фрукты</Н1>.
4.Задайте упорядоченный (нумерованный) список, вста-
вив в текст тег <OL ТУРЕ="I">, который начинает его.
5. Вставьте в текст элементы списка (виды фруктов), начиная каждый из них с тега <LI>.
25