Лабораторный практикум по третьей теме, часть 1.

Задание III.1. «Создание простейшей WEB – страницы»

Цель занятия: Научиться создавать простейшую WEB – страницу. На выполнение Задания 1 отводится 15-30 минут.

Выполнение:

1. Запустите текстовый редактор Блокнот, последовательно выполняя команды Пуск ► Программы ► Стандартные ► Блокнот.

2. Введите текст, согласно следующему ниже Листингу III.1.

Листинг III.1 Код первой программы на языке HTML

< HTML>

< HEAD>

< TITLE> Первая WEB - страница студента (фамилия)

< /TITLE>

< /HEAD>

< BODY>

Первая WEB – страница создана (дата) и будет сохранена в папке (имя) под именем Zadanie1.htm

< /BODY>

< /HTML>

Для создания фона (обоев) флаг BODY следует записать так

< BODY bgcolor=blue text=red>,

или

< BODY bgcolor=2.jpg text=yellow >.

В первом случае фон будет голубым, а текст будет красного цвета. Во втором случае фон задается картинкой с именем 2. jpg, а текст будет желтого цвета.

3. Сохраните документ в своей папке под именем Zadanie1.htm и второй раз под именем Zadanie1.txt. Перед сохранением под именем Zadanie1.htm убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов. Для этого нужно активизировать команды Пуск ► Настройка ► Свойства папки ► Вид. Если не сбросить флажок, то редактор Блокнот может автоматически добавить в имени задание расширение.txt. На вопрос, нужно ли сменить расширение, следует дать положительный ответ.

4. а) Дважды щелкните по значку с именем Zadanie1.htm или:

б) Запустите программу Internet Explorer при помощи команд Пуск ► Программы ► Internet Explorer или при помощи значка этой программы, который располагается на рабочем столе. Затем активизируйте команды Файл ► Открыть. Щелкните левой кнопкой мышки при расположение курсора на кнопке Обзор. Откройте файл Zadanie1.htm, который должен находиться в папке с Вашей фамилией.

5. Посмотрите, как отображается этот файл. Посмотрите отображение содержимого названного документа, расположенное между флагами

< TITLE> и < /TITLE>, где отображается содержимое основного документа, расположенное между флагами < BODY> и < /BODY>.

7. Созданный при помощи программы Internet Explorer документ имеет вид, показанный на приводимом ниже рисунке III.1.

Рис. III.1 Моя первая WEB-страница

Задание 2. «Изучение приемов форматирования абзацев»

Цель занятия: Научиться создавать простейшую WEB – страницу с применением приемов форматирования абзацев. На выполнение задания 2 отводится 1час.

1. Скопируйте в свою папку файл с именем Zadanie1.txt.

2. Откройте этот файл и удалите текст между флагами < BODY> и

< /BODY>.

3. Заголовок первого уровня заключается между флагами < H1> и < /H1>, заголовок второго уровня заключается между флагами < H2> и < /H2>. Отдельный абзац вводится с флага < p >, как это показано в тексте приводимого ниже задания.

4. После флага < BODY> введите новый текст.

< H1> 1. Дополнительные средства подготовки документов < /H1>

Отделите последующий текст зеленой горизонтальной линией при помощи флага < HR>, записав строку

< HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR=“GREEN”>

Далее введите:

< H2 > 1.1. Гиперссылки< / H2 >

В WORD 97/2000 автоматически оформляют пути к файлам с их именами, а также адрес Web – страниц и электронной почты в качестве гиперссылок.

< p > Пример создания гипертекстовой ссылки рассмотрен выше. Ниже приведен пример создания гиперссылки на файл Zadanie1.htm, который находится на жестком диске локального компьютера.

5. Отделите этот абзац от остального текста красной горизонтальной линии при помощи флага < HR >, записав строку

< HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= “RED”>

6. Введите еще один абзац текста, начав его с флага < p>. Например:

Построение маркированного и нумерованного списков.

7. Постройте маркированный список. Для этого введите:

< UL>

< LI> Задание III.1

< LI> Задание III.2

< LI> Задание III.3

< /UL> стройте нумерованный список. Для этого введите:

< OL>

< LI> Задание III.1 -простая ВЕБ-страница

< LI> Задание III.2 -ВЕБ-страница с элементами форматирования

< LI> Задание III.3 - включение таблицы в ВЕБ-страницу

< /OL>

8.Отделите этот абзац полосой желтого или зеленого цвета.

9. Вставьте из коллекции ClipArt рисунок. Порядок действий описан выше в разделе 1.3.2. Расположите рисунок с правой стороны страницы.

10. Вставьте гиперссылку на файл с именем Zadanie1.htm. Для этого после рисунка вставьте строки

< p> Активизируйте гиперссылку

< A HREF=”Zadanie1.htm”> Zadanie1< /A>

11. Сохраните этот документ под именем Zadanie2.htm и второй раз под именем Zadanie2.txt.

12. a) Запустите обозреватель Internet Explorer (Пуск ► Программы ► Internet Explorer). Задайте команду Файл > Открыть. При помощи кнопки Обзор откройте файл Zadanie2.htm, либо:

б) Дважды щелкните по значку с именем Zadanie2.htm.

12. Посмотрите отображение этого файла. Установите связь между элементами кода HTML и фрагментами документа, отображаемого на экране. Текст Zadanie1 будет выделен как гиперссылка. Активизация этого текста вызывает появление файла Zadanie1.

Вид созданного документа показан на рисунке III.2.

Рис. III.2 Создание WEB-страницы с элементами форматирования

Задание III.3. «Создание таблиц»

Цель занятия: Научиться создавать простейшую WEB-страницу с включением таблицы. На выполнение задания отводится 30-45 минут.

Выполнение:

Скопируйте в свою папку файл с именем Zadanie1.txt.

2. Удалите в скопированном файле весь текст, находящийся между флага-

ми < BODY> и < /BODY>. Последующий текст будет вводиться после флага < BODY>. В данном упражнении используется список номеров телефонов.

3. Введите флаг < TABLE BORDER= “10” WIDTH= “100%”> .

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

5. Первая строка таблицы содержит заголовки столбцов. Введите:

< TR BGCOLOR= “YELLOW” ALIGN= “CENTER”>

< TH> СЛУЖБА < TH> Номер телефона.

6. Введите:

< TR> < TD> Курс валют ЦБ РФ < /TD> < TD> 587219 < /TD>

< TR> < TD> Медицинский центр РАМН < /TD> < TD> 9648401< /TD>

< TR> < TD> Образование в Москве < /TD> < TD> 9650009 < /TD>

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

8. Сохраните документ под именем Zadanie3.htm и второй раз под именем Zadanie3.txt.

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

Explorer )

10. Дайте команду Файл ► Открыть. Щелкните по кнопке Обзор и открой-

те файл Zadanie3.htm, либо дважды щелкните левой клавишей мыши при расположении указателя курсора на значке с именем Zadanie3.htm.

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

Explorer.

Вид созданного документа показан на рисунке III.3.

Рис. III.3 Создание таблицы

Задание III.4. «Создание прайс-листа средствами

Языка HTML»

Средствами языка HTML создайте прайс-лист. Образец прайс-листа показан на рисунке III.4.

Рис. III.4 Прайс-лист

Для этого прайс-листа ниже показан Листинг III.2 с кодом программы на языке HTML.

Листинг III.2 Код программы прайс-листа на языке HTML

< HTML>

< HEAD>

< TITLE> прейскурант компании ООО" Ф-Центр" < /TITLE>

< /HEAD>

< BODY>

< H1> ООО" Ф-Центр" < /H1>

< HR>

< H2> Москва, ВВЦ, павильон №74, тел. 785-1-785

< P> наш адрес в Интернет e-mail: [email protected]

< /H2>

< HR SIZE=10 WIDHT=80% ALIGN=CENTER COLOR=" GREEN" >

< TABLE BORDER=10 WIDHT=100%>

< CAPTION=" TOP" > компьютер < /CAPTION>

< TR BGCOLOR=" YELLOW" ALIGN=CENTER>

< TH> модель < TH> конфигурация < TH> цена

< TR> < TD> M700< /TD>

< TD> AMD DURON-700/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 9294 < /TD>

< TR> < TD> M1400 < /TD>

< TD> AMD ATHLON-1400/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 11815 < /TD>

< TR> < TD> M2 735 CEL < /TD>

< TD> CELERON-733/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 10105 < /TD>

< TR> < TD> M2 1000 CEN < /TD>

< TD> CELERON-1000/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 10340 < /TD>

< TR> < TD> M3 866 < /TD>

< TD> PENTIUM 3 866/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 11906 < /TD>

< TR> < TD> M 4 P4 1, 8 GHZ < /TD>

< TD> PENTIUM 4 1, 8 GHZ/DIMM 128/10WD/MIDI ATX A312 < /TD>

< TD> 18227 < /TD>

< /TITLE>

< /BODY>

< /HTML>

Вставьте в прайс-лист рисунок на соответствующую тему из коллекции Интернет.

Варианты задания.

Вариант1.

Дисководы

Наименование	Модель	Цена, руб
CD DRIVE	IDE 40X TEAC “CD54CE”
CD DRIVE	IDE 52X SAMSUNG “152”
DVD ROM DRIVE	16(40) XLG “8160B”
DVD ROM DRIVE	16(40) PANASONIC “SR-8587”

Вариант 2

Видеокарты

Наименование	Модель	Цена, руб
SVGA AGP	32 Mb “GeForce 2 MX”
SVGA AGP	64 Mb “GeForce2 Ti”
SVGA AGP	16 Mb STB “VOODOO-3” SDRAM
SVGA AGP	64 Mb SUMA PLATINUM GeForce Ti DDR

Вариант 3

Дисководы FD

Наименование	Модель	Цена, руб
FDD 3, 5”	SAMSUNG
FDD 3, 5”	MITSUMI
FDD 3, 5”	PANASONIC
FDD 3, 5”	SONY

Вариант 4

Материнские платы

Наименование	Цена, руб	Гарантия
ASUS P4B266-C ATX		6 мес
ChainTech CT-9BJD ATX		6 мес
EPOX EP-4BEA2 ATX		6 мес
Gigabyte GA-8GE667 ATX		6 мес

Вариант 5

Процессоры

Наименование	Цена, руб	Гарантия
Celeron 850 MHz FPGA		1 год
Celeron 1200 MHz FPGA		1 год
Pentium III 1200 256 K 133 MHz		1 год
Pentium IV 1500		1 год

Задание III.5. «Создание Web-документа при помощи редактора FrontPage2003»

Цель занятия : Научиться создавать простейшие Web-документы используя редактор FrontPage 2003 . На выполнение задания отводится 30 минут.

Предыдущая 1 2 3 4 567 8 9 10 11 Следующая