Лабораторная работа № 21
Тема. Создание HTML-документа.
Цель работы. Научиться создавать гипертекстовый документ средствами Блокнот с использованием простейших тэгов.
Оборудование. ПК Pentium.
Ход работы
Ознакомиться с теоретической частью.
Выполнить практическое задание.
Ответить на контрольные вопросы.
Оформить отчет.
Теоретическая часть
Стандарт HTML является основой для составления документов, публикующихся в WEB-службе.
Документ, написанный на языке HTML, представляет собой текст, в который вписаны тэги (markup tags) или тэги разметки. Тэги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тэгов формируются связи с другими web-документами и ресурсами Интернета. Текст с тэгами называется исходным кодом (Source). Просмотреть готовый файл, написанный на HTML, можно в программах-браузерах. На экране просмотра тэги не отображаются.
Тэги – определенные последовательности символов, заключенные между знаками < (больше)? который обозначает начало тэга, и > (меньше), означающий конец тэга. Все, что заключено между тэгами, является HTML-документом.
Любой HTML-документ состоит их двух частей. Первая часть – заголовок, который находится между тэгами < HEAD > и < / HEAD >. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тэгами < TITLE > и < / TITLE > и появляется в верхней части окна программы просмотра. Прописные или строчные буквы, используются в написание тэгов, значения не имеет. Компьютер одинаково отреагирует на записи < title > и < TITLE >. Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тэгами < BODY > и < / BODY>.
Форматирующие тэги бывают парными и непарными, открывающими и закрывающими. Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается там, где встречается закрывающий. Признак закрывающего тэга – символ /. Почти все форматирующие тэги всегда следуют парами, и для открывающего тэга должен существовать закрывающий. Непарных тэгов мало, например, для перехода на новую строку используется тэг <br > (Line Break).
Основные тэги приведены в табл.1, основные тэги вставки рисунков, закладок и гиперссылок в табл.2. Таблица основных цветов представлена в табл. 3.
Таблица 1 – Основные тэги HTML-документа. Тэги форматирования шрифта и абзаца
Назначение |
Вид тэгов |
Примечание |
Общая структура документа HTML |
||
Тип документа |
<HTML></HTML> |
Начало и конец документа |
Имя документа |
<HEAD></HEAD> |
Не отображается браузером |
Заголовок |
<TITLE></TITLE> |
Содержимое строки заголовка окна браузера |
Тело документа |
<BODY></BODY> |
Содержимое WEB-страницы |
Структура содержания документа |
||
Внутренние заголовки различного уровня |
<H№> текст </H№> |
Где № – номер уровня заголовка (от 1 до 6). Например, <H1>…</H1> - заголовок 1-го уровня. |
Заголовок с выравниванием |
<H№ ALIGN=”LEFT|CENTER|RIGHT”> текст </H№> |
LEFT - по левому краю, CENTER - по центру, RIGHT - по правому краю. |
Форматирование абзацев |
||
Создание абзаца (параграфа) |
<P> текст </P> |
Абзацы отделяются двойным межстрочным интервалом |
Перевод строки внутри абзаца |
<BR> |
Одиночный тэг |
Выравнивание абзаца |
<P ALIGN=”LEFT”>текст </P> <P ALIGN= ”CENTER”>текст </P> <P ALIGN=”RIGHT”> текст</P> <P ALIGN=”JUSTIFY”> текст </P> |
LEFT - по левому краю CENTER - по центру
RIGHT - по правому краю JUSTIFY – по ширине |
Разделительная горизонтальная линия между абзацами |
<HR SIZE=«?»> |
Одиночный тэг. «?» - толщина линии в пикселях. Толщину линии можно не указывать. |
Форматирование шрифта |
||
Жирный |
<B> текст </B> |
<B>Жирный</B> <I> Курсив </I> <U> Подчеркнутый </U> <S> Перечеркнутый</S>
<SUP> Верхний индекс </SUP> <SUB> Нижний индекс </SUB> |
Курсив |
<I> текст </I> |
|
Подчеркнутый |
<U> текст </U> |
|
Перечеркнутый |
<S> текст </S> |
|
Увеличенный размер |
<BIG> текст </BIG > |
|
Уменьшенный размер |
<SMALL> текст </SMALL> |
|
Верхний индекс |
<SUP> текст </SUP> |
|
Нижний индекс |
<SUB> текст </SUB> |
|
Размер шрифта |
<FONT SIZE=«?»> текст </FONT> |
?- значения от 1 до 7 или относительное изменение (например, +2) |
Базовый размер шрифта |
<BASEFONT SIZE=«?»>
|
Одиночный тэг ? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом |
Гарнитура шрифта |
<FONT FASE=«название1, название2, …»> текст </FONT> |
Текст оформляется первым, установленным на компьютере шрифтом из списка названий |
Цвет шрифта |
<FONT COLOR=”$$$$$$”> текст </FONT> |
Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом # RED –красный, #FF0000 – шестнадцатеричный код – красного цвета |
Создание списков |
||
Нумерованный |
<OL>элементы списка</OL> |
<OL> <LI>Элемент списка 1 </LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL> |
Маркированный |
<UL> элементы списка </UL> |
|
Элемент списка |
<LI> элементы списка </LI> |
|
Таблица 2 – Основные тэги вставки рисунков, закладок и гиперссылок
Название |
Вид тэга |
Пример |
|
Вставка изображений |
|||
Вставка графического файла |
<IMG SRC=”файл” WIDTH=”ширина” HEIGHT=”высота” > |
Пример: <IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл”>
|
|
Выравнивание картинки относительно текста |
<IMG SRC=”файл” ALIGN=”left| right| top| bottom”> |
||
Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок |
<IMG SRC=”файл” ALT=”текст”> |
||
Вставка ссылок |
|||
Ссылки на другую страницу |
<A HREF=” страница”> текст </A> |
<A HREF=”str2.htm”> Ссылка1</A> |
|
Ссылка на закладку в другом документе |
<A HREF=” страница # имя закладки”> текст</A> |
<A HREF=” index.htm #met1”> На главную страницу </A>” |
|
Ссылка на закладку в том же документе |
<A HREF=”#имя закладки ”> текст </A> |
<A HREF=” #metka1”> Ссылка2</A> |
|
Определить закладку |
<A NAME=”имя закладки”>текст</A> |
<A NAME=”metka1”></A> |
|
Цвет фона, текста и ссылок |
|||
Фоновая картинка |
<BODY BACKGROUND=”файл”> |
<BODY BACKGROUND =”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) </BODY> |
|
Цвет фона |
<BODY BGCOLOR=”#$$$$$$”> |
||
Цвет текста |
<BODY TEXT=”#$$$$$$”> |
||
Цвет ссылки |
<BODY LINK=”#$$$$$$”> |
||
Цвет пройденной ссылки |
<BODY VLINK=”#$$$$$$”> |
||
Цвет активной ссылки |
<BODY ALINK=”#$$$$$$”> |
||
Таблица 3 – Таблица основных цветов
-
Цвет
Color's name
Шестнадцатеричный код цвета
Red
Green
Blue
Черный
black
00
00
00
Темно-синий
navy
00
00
80
Голубой
blue
00
00
FF
Зеленый
green
00
80
00
Темно-зеленый
teal
00
80
80
Салатный
lime
00
FF
00
Бледно-голубой
aqua
00
FF
FF
Вишневый
maroon
80
00
00
Фиолетовый
purple
80
00
80
Оливковый
olive
80
80
00
Серый
gray
80
80
80
Светло-серый
silver
C0
C0
C0
Красный
red
FF
00
00
Лиловый
fushsia
FF
00
FF
Желтый
yellow
FF
FF
00
Белый
white
FF
FF
FF