Цель работы: познакомиться со структурой html-документа и на основе создать свою страницу; изучить основные тэги форматирования текста и использовать их при создании страницы.
Оборудование и программное обеспечение: ПК, ОС Windows XP, Internet Explorer, текстовый редактор Блокнот.
Контейнер обязательно содержит открывающий и закрывающий теги.
В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <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 SIZE = “7” FACE = “Arial” COLOR = “Blue> ... </FONT> (шрифт размера 7, тип шрифта – Arial, цвет - голубой);
Также можно задавать начертание текста или фрагмента текста:
<B> текст </B> - полужирный шрифт;
<I> текст </I> - начало текста курсивом;
<U> текст </U> - подчёркивание;
Комбинированное выделение осуществляется следующим образом:
<Тэг-1><Тэг-2> фрагмент текста </Тэг-2></Тэг-1>
Например, <B><U> фрагмент текста </U></B> (текст полужирный и подчеркнутый);
При создании html-документов можно задавать и цвет самого фона страницы. Эта команда может задаваться только в начале HTML файла и не может быть изменена в дальнейшем. Ее параметры: BGCOLOR - определяет цвет фона документа, TEXT - задает цвет текста для всей страницы. Цвет также задается с помощью его названия (“red”, “green”, “blue”);
Например, <BODY BGCOLOR = “blue” TEXT = “red”> - задание цвета фона и текста (фон голубого цвета, цвет шрифта - красный)
Списки:
Ненумерованный список располагается внутри контейнера <UL>…</UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: “disc” (диск),
“square” (квадрат), “circle” (окружность). Например,
(маркированный список, маркер в виде окружности)
<UL TYPE = CIRCLE>
<LI> текст </LI>
<LI> текст </LI>
<LI> текст </LI>
</UL>
Ход работы:
Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .htm в папке RABOCHLAB в директории HTMLLAB. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.
Заголовок страницы должен быть выровнен по центру, начертание – полужирный шрифт, тип шрифта - Comic Sans MS, размер – 1, цвет шрифта – голубой, подчеркивание;
Задать цвет фона страницы – бирюзовый цвет;
Текст должен состоять из трех абзацев, один абзац должен быть выровнен по левому краю, второй – по центру, а третий – по правому краю;
Цвет текста в первом абзаце задать белым цветом, тип шрифта - Monotype Corsiva, размер – 7;
Цвет текста во втором абзаце задать розовым цветом, тип шрифта - Arial, размер – 6;
Цвет текста в первом абзаце задать желтым цветом, тип шрифта - Calibri, размер – 5;
В нижнем правом углу создать маркированный список, состоящий из трех компонентов, цвет текста задать зеленым цветом;
Листинг html-программы:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY bgcolor='orange'>
<font face='Comic Sans Ms' color='red'>
<H1 ALIGN = 'CENTER'> <u> Все о компьютере </u> </H1>
</font>
<p align='left'> <font face='Monotype Corsiva' color='white' size=7> На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие. </font></p>
<p align='center'> <font face='Arial' color='lime' size=6> Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. </font> </p>
<p align='right'> <font face='Calibri' color='yellow' size=5> На этом сайте вы можете узнать много новой и полезной информации для вас.</p>
