Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
УМК Основы информ. технологий. А.А.Стец.-2012.docx
Скачиваний:
290
Добавлен:
15.02.2016
Размер:
3.98 Mб
Скачать

Лабораторная работа №21 «Структура Web-страницы. Язык html. Основные элементы html-файла»

Цель работы: получить навыки создания и редактирования простейших страниц HTML.

Порядок выполнения работы:

Задание 1.Вызовите текстовый редактор БЛОКНОТ. Наберите следующий ниже текст и сохраните под именемweb1.html.

<HTML>

<HEAD>

<TITLE>Моя персональная страничка (заголовок для броузера)</TITLE>

</HEAD>

<BODY>

ПРИВЕТ! Это моя личная домашняя страничка! Меня зовут (……………………).

</BODY>

</HTML>

1.1 Задайте цвет фона и цвет текстадляWeb-страницы, отличные от установленных по умолчанию.

Загрузите файл web1.html в Internet Explorer. Оцените результат.

1.2 Расположите каждую фразу в теле документа на новой строке.

Загрузите файл web1.html в Internet Explorer. Оцените результат.

1.3 Расположите текст в теле документа по центру.

Загрузите файл web1.html в Internet Explorer. Оцените результат.

1.4 Выделите текст в теле документа стилем заголовок 1-го уровня (тег <H1>).

Загрузите файл web1.html в Internet Explorer. Оцените результат.

Задание 2. Откройте файлweb1.htmlв БЛОКНОТЕ и дополните тело документа нижеуказанным фрагментом. Пропуски в тексте заполните индивидуальной информацией. После редактирования файлweb1.htmlсохраните под именемweb2.html.

<HR>

<H2> Мой город </H2>

<p>Я живу в Минске

<H3ALIGN=Left> Моя работа </H3>

<p ALIGN = Left> Я учусь в ……

<H4 ALIGN = Center> Мои увлечения </H4>

<p ALIGN = Center> Мои увлечения ‑ ……

<H5 ALIGN = Right> Мои коллеги </H5>

<p ALIGN = Right> Мои коллеги ….. </p>

<br>

<HR>

<H6 ALIGN = Center> Design by "…………" </H6>

2.1 Задайте цвет линий, их ширину и высоту, выравнивание по центру Web-страницы.

Загрузите файл web2.html в Internet Explorer. Оцените результат.

2.2 В разделе Мои увлечения добавьте нумерованный список из 5 пунктов. Нумерацию выполнить римскими цифрами.

Загрузите файл web2.htmlвInternetExplorer. Оцените результат.

2.3 В разделе Мои коллеги добавьте маркированный список из 5 пунктов. В качестве маркера использовать незакрашенный круг.

Загрузите файл web2.htmlвInternetExplorer. Оцените результат.

2.4 Дополните описания списков всплывающими подсказками.

Загрузите файл web2.html в Internet Explorer. Оцените результат.

Задание 3. Откройте файлweb2.htmlв БЛОКНОТЕ и отредактируйте тело документа. После редактирования файлweb2.htmlсохраните под именемweb3.html.l

3.1 Задайте для каждого заголовка: цвет шрифта, размер (1..7), гарнитуру по своему выбору.

Загрузите файл web3.html в Internet Explorer. Оцените результат.

3.2 В разделе Мои увлечения нумерованный список из 5 пунктов отформатируйте курсивом (<I>).

Загрузите файл web3.html в Internet Explorer. Оцените результат.

3.3 В разделе Мои коллеги маркированный список из 5 пунктов отформатируйте жирным начертанием (<В>).

Загрузите файл web3.html в Internet Explorer. Оцените результат.

3.4 Раздел Design by выделите подчеркиванием.

Загрузите файл web3.html в Internet Explorer. Оцените результат.

Задание 4.Создайте HTML-документ следующего вида:

Имя файлаweb4.html

Заголовок документа<TITLE> - Советы по изготовлению страничек

Тело документа:

Тиканье, мерцание, перемещение, прокрутка…

Эти новые спецэффекты повсюду на Web.

Полезные советы!

- По возможности избегайте пиктограммы "В процессе производства";

- Не перегружайте страницу большими изображениями;

- Проверяйте орфографические ошибки;

- Проверяйте как можно чаще ссылки на странице.

Загрузите файл web4.html в Internet Explorer. Оцените результат.

4.1Тело документа оформите с помощью контейнера <PRE>.

Загрузите файл web4.html в Internet Explorer. Оцените результат.

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

Сеть Интернет

Гипертекст

Обозреватель

<dl>

<dt>Сеть интернет

<dd>…..

<dt>Гипертекст

<dd> …..

<dt>Обозреватель

<dd> …..

</dl>

Сохраните под именем web5.html.