Создание HTML-документов

Цель: Получение практических навыков работы по созданию HTML-документов с использованием списков и таблиц.

Оборудование: ПК Pentium

 

Практическая часть

 

Работа со списками

1. С помощью приложения «Блокнот»  создать новый HTML-файл, в тело которого поместить маркированный список. Затем дважды скопировать список, изменить вид маркера всего списка, изменить вид отдельного маркера. Сохранить результаты в виде файла с именем LISTTAB и расширением .htm или .html, отобразить Web-страницу в Internet Explorer.

Открываем приложение Блокнот через  меню Пуск или же создаём документ правой кнопкой мыши.

Все следующие действия и код показаны на рисунке 1.1.

 

 

Рисунок 1.1 – Код для маркированного списка

 

 

 

2. Создать нумерованный список, скопировать его четыре раза, в каждой копии изменить вид нумерации, задать начало нумерации не с 1, изменить порядок нумерации внутри нумерованного списка. Сохранить результаты в файл в папку Вашей группы, отобразить Web-страницу в Internet Explorer.

Код документа показан на рисунке 1.2.

 

 

Рисунок 1.2 – Код для нумерованного списка

 

3. Создать список определений из трех элементов, связанных с животными, цветами и т.п., сохранить результаты в файл в папку Вашей группы, отобразить Web-страницу в Internet Explorer.

Код списка показан на рисунке 1.3.

 

 

Рисунок 1.3 – Код для списка определений

 

 

2. Работа с таблицами

1. Создать заготовку таблицы, состоящей из четырех столбцов. Заголовок таблицы - «Ассортимент товаров», заголовок первого столбца - «Товары», второго - «Цена», третьего - «Количество товара», четвертого — «Единица измерения». Заполнить таблицу данными, введя 4-5 строк о товарах.

Код для этого пункта показан  на рисунке 2.1.

 

 

Рисунок 2.1 – Код таблицы с заполненными строками

 

2. Отработать изменение толщины рамок таблицы — атрибут BORDER, изменение цвета рамки — атрибут BORDERCOLOR, изменение расстояния между рамкой и ячейкой (другими ячейками) - атрибут CELLSPACING.

Примерные атрибуты выглядят так:

BORDER=5 BGCOLOR=#800080 CELLSPACING=3>.

3. Изменить ширину таблицы (атрибут WIDTH). Задать значение атрибута в пикселях или в %.

В данном случае использовалась ширина: WIDTH=90%.

4. Выровнять содержимое ячеек левой колонки по левой стороне, чисел - по правой части ячейки, содержимое правой колонки - по центру.

Для этого использовались команды  ALIGN=left, ALIGN=right, ALIGN=center.

5. Выровнять по вертикали текст в отдельно взятой записи таблицы.

Предварительно ввести в одну из ячеек этой строки текст, состоящий  из нескольких текстовых строк.

 

 

6. Изменить цветовой фон таблицы, строки, ячейки.

Эти изменения проводятся при помощи команды BGCOLOR.

7. Создать отдельную таблицу (путем копирования исходной таблицы), в которой объединить ячейки в строке (COLSPAN) и столбце (ROWSPAN).

Выравниваем текст с помощью  команды ROWSPAN по вертикали и COLSPAN по горизонтали.

3. В странице вашего сайта, где находятся гиперссылки, создать гиперссылку на станицу со списками и таблицами.

На главной странице просто вводим адрес страницы, где находятся  списки и страницы.

Выводы: в ходе лабораторной работы получили практические навыки работы по созданию HTML-документов с использованием списков и таблиц.