Основные теги языка HTML

ЛАБОРАТОРНАЯ РАБОТА № 1

Тема: «Основы языка гипертекстовой разметки электронных web-документов»

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

Задание на лабораторную работу: изучить теоретические аспекты HTML и практические приемы создания электронных документов.

Содержание отчета

1. Тема, цель работы и индивидуальное задание.

2. Краткое описание этапов работы.

3. Распечатки разработанных текстовых и графических файлов.

4. Распечатку htm-кода разработанной веб-страницы.

5. Экранную копию веб-браузера с загруженной страницей.

Контрольные вопросы

1. Что такое HTML?

2. Какова структура HTML-кода веб-страниц?

3. Что означает тег «BODY»?

4. В каких случаях теги могут быть открывающими и закрывающими, а в каких случаях они не являются ни теми, ни другими?

5. Для чего нужны атрибуты тегов?

6. Как организовать гиперссылку в веб-документе?

7. Как организовать маркированный список веб-документе?

Методические указания для выполнения лабораторной работы

Основные теги языка HTML

Рис.1. Пример незаполненной web-страницы.

На Рис.1 можно видеть пустую web-страницу, у которой заполнен лишь заголовок окна, имеющий название «ПРИМЕР_1». Такую страницу можно получить с помощью запуска следующего html-файла:

<HTML>

<HEAD>

<TITLE> ПРИМЕР_1 </TITLE>

</HEAD>

</HTML>

На Рис.2. изображена web-страница, содержащая текст «Моя первая web-страница» с заголовком «ПРИМЕР_2».

Рис.2. Пример web-страницы с текстом.

Такую страницу можно получить с помощью запуска следующего html-файла:

<HTML>

<HEAD>

<TITLE> ПРИМЕР_2 </TITLE>

</HEAD>

<BODY>Моя первая web-страница </BODY>

</HTML>

На Рис.3. изображена web-страница, содержащая текст «Моя первая web-страница с цветным фоном и шрифтом», который набран красным цветом на желтом фоне с заголовком «ПРИМЕР_3».

Рис.3. Пример web-страницы с текстом и фоном.

Такую страницу можно получить с помощью запуска следующего html-файла:

<HTML>

<HEAD>

<TITLE> ПРИМЕР_3 </TITLE>

</HEAD>

Моя первая web-страница c цветным шрифтом и фоном </BODY>

</HTML>

В таблице 1 представлены коды, с помощью которых можно работать с цветом. Экспериментируя с разными комбинациями символов, можно добиться различных оттенков. Для корректного отображения кодов цвета в разных браузерах, необходимо перед шестизначным цифровым кодом ставить знак #.

Таблица 1.

Цвет	Код
Белый	FFFFFF
Желтый	FFFF00
Синий	0000FF
Зеленый	00FF00
Фиолетовый	FF00FF
Красный	FF0000
Черный

Кроме кодовых сочетаний цвет может определяться символьной константой. В Таблице 2 приведены некоторые стандартные значения таких констант.

Таблица 2. Стандартные константы HTML для работы с цветом

Имя константы	Цвет
aqua
azure
bisque
black
blue
brown
chocolate
coral
crimson
cyan
fuchsia
gold

Имя константы	Цвет
gray
green
indigo
ivory
khaki
lime
linen
magenta
maroon
moccasin
navy
olive

Имя константы	Цвет
orange
orchid
peru
pink
purple
red
salmon
silver
tomato
white
yellow

На Рис.4. изображена web-страница, содержащая текст различного размера, расположенный по центру окна и ссылки на файлы различных форматов; заголовок окна - «ПРИМЕР_4».

Рис.4. Пример web-страницы с текстом, фоном и гиперссылками.

Такую страницу можно получить с помощью запуска следующего html-файла:

<HTML>

<HEAD>

<TITLE> ПРИМЕР_4 </TITLE>

</HEAD>

<H1><CENTER>Моя первая web-страница c цветным шрифтом и фоном и ссылками</CENTER></H1>

<CENTER><H1> СОДЕРЖАНИЕ: </H1>

<H2><A HREF=adress.html>Почтoвый адрес</A> </H2>

<H2><A HREF=группа.doc>Группа </A></H2>

<H2><A HREF=Ris.bmp>Фамильный герб </A></H2>

</CENTER>

</BODY>

</HTML>

Далее в таблице 3 приведен список основных тэгов языка HTML.

Таблица 3.

Тэг	Результат его выполнения
<HTML>…</HTML>	Определяет начало и конец HTML файла.
<HEAD>…</HEAD>	Определяет начало и конец заголовка HTML файла.
<TITLE>…</TITLE>	Название Web страницы
<BODY>…</BODY>	Определяет начало и конец основной части HTML файла
<!...->	Комментарий
<BR>	Новая строка
<P>	Пустая строка
<H1>…</H1>	Самые большие буквы
<H6>…</H6>	Самые маленькие буквы
<PRE>…</PRE>	Выделение отформатированного текста
<B>… </B>	Жирный шрифт
<HR>	Горизонтальная линия
<UL>…</UL>	Начало и конец неупорядоченного списка
<OL>…</OL>	Начало и конец упорядоченного списка
<LI>	Перечисление злементов списка
<TABLE>…</TABLE>	Выделение таблицы
<CAPTION	> Название таблицы
<TR>…</TR>	Начало и конец описания строки таблицы
<TH>…</TH>	Жирный текст в таблице
<TD>…</TD>	Обычный текст в таблице
<FONT SIZE=x>	изменение размеров шрифта
<I>… </I>	Курсив
<TT>…</TT>	Машинописный шрифт
<A HREF=»URL адрес»> Выделяемый текст </A>	Связь с другой страницей на каком-либо сервере
<A NAME=»имя отметки»> Выделяемый текст </A>	Указывает на переход в текущей странице
<A HREF=»# имя отметки»> Выделяемый текст </A>	Локализирует место перехода
<A HREF=»URL адрес # имя отметки»> Выделяемый текст </A>	Указывает на переход на определенное место в каком-либо NTML документе

Для того чтобы разместить создаваемую страницу на каком-либо фоне, кроме однотонного цветового поля, необходимо сначала разработать этот фон и сохранить его в графическом файле, который и задать затем при написании HTML-документа. На Рис.5 приведен пример подобной ситуации.

Рис.5. Пример web-страницы с текстом и тематическим фоном.

Такую страницу можно получить с помощью запуска следующего html-файла:

HTML><HEAD><TITLE>Электронный учебник</TITLE>

<BODY text=red background=fon.jpg>

<H1><CENTER>Белгородский университет потребительской кооперации</CENTER></H1>

<H1><CENTER>Кафедра информационных систем и технологий</CENTER></H1>

</BODY></HTML>

Параметр background=fon.jpg определяет, что графический файл fon.jpg будет тем фоном, на котором будет воспроизведено содержимое электронного документа.

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