Гипертекстовая система WorldWideWeb.

39

Лабораторная работа №1

Тема: «Создание простейшего HTML-документа.

Форматирование текста».

Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.

Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.

Теоретический материал:

Структура html-документа:

HTML-код страницы помещается внутрь контейнера HTML ... HTML, заголовок страницы в контейнер HEAD Заголовок HEAD.

Контейнер обязательно содержит открывающий и закрывающий теги.

В разделе описания заголовка можно указать заглавие документа, для этого используется тэг TITLE ... TITLE (имя страницы).

Весь остальной HTML-документ, включая весь текст, содержится внутри тэга BODY содержание BODY (содержание страницы).

HTML {начало страницы}

HEAD {описание страницы, заголовка}

TITLE название TITLE {имя страницы}

HEAD {закрытый тэг описания заголовка}

BODY {содержание страницы}

текст

BODY {закрытый тэг описания страницы}

HTML {конец страницы}

Основные тэги форматирования html-документа:

Заголовок страницы задается с помощью тегов, где размер шрифта заголовка устанавливается с помощью Н1 (самый крупный) и до Н6 (самый мелкий)

Заголовок страницы целесообразно выделить самым крупным шрифтом: H1 заголовок страницы H1 (например, H1 Все о компьютере H1)

H1 заголовок страницы H6 - в данном случае заголовок будет записан самым мелким шрифтом;

Если необходимо выровнять этот заголовок по правому краю, то это записывается следующим образом: H1 ALIGN = “RIGHT” Все о компьютере H1

ALIGN = “RIGHT” {выравнивание текста по правому краю}

ALIGN = “CENTER” {выравнивание текста по центру}

ALIGN = “LEFT” {выравнивание текста по левому краю}

Для задания параметров форматирования используется контейнер FONT...FONT, при этом используя различные атрибуты:

Атрибут FACE позволяет задать гарнитуру шрифта;

Атрибут SIZE – размер шрифта (может принимать иметь значение в диапазоне от 1 до 7);

Атрибут COLOR – цвет шрифта (можно задавать названием цвета (например, “red”, “green”, “blue” и так далее));

Например, ... FONT (шрифт размера 7, тип шрифта – Arial, цвет - голубой);

Также можно задавать начертание текста или фрагмента текста:

B текст B - полужирный шрифт;

I текст I - начало текста курсивом;

U текст U - подчёркивание;

Комбинированное выделение осуществляется следующим образом:

фрагмент текста

Например, BU фрагмент текста UB (текст полужирный и подчеркнутый);

При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);

Например, BODY BGCOLOR = “blue” TEXT = “red” - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)

Списки:

Ненумерованный список располагается внутри контейнера UL…UL, а каждый элемент списка определяется также тэгом LI. С помощью атрибута TYPE тэга UL можно задать вид маркера списка: “disc” (диск),

“square” (квадрат), “circle” (окружность). Например,

(маркированный список, маркер в виде окружности)

• текст

LI текст LI

LI текст LI

UL

Ход работы:

1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

2. Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;

3. Задать цвет фона страницы – бирюзовый цвет;

4. Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;

5. Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;

6. Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;

7. Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;

8. В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;





Листинг html-программы:

HTML

HEAD

Компьютер

Все о компьютере

На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.

Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

На этом сайте вы можете узнать много новой и полезной информации для вас.

li b Компьютер b li

• Терминологический словарь
• Цены на товары