Теоретический материал. Лабораторная работа №1
Лабораторная работа №1.
Тема:Текстовое оформление страниц. Вставка изображений. Создание списков.
Цель работы: научиться создавать HTML-документы, оформлять текст и определять размеры рисунков, находящихся на HTML-странице, научиться создавать в HTML-документах списки различных форматов.
Теоретический материал
Стандартным языком, предназначенным для создания гипертекстовых документов в среде Web является HTML (HyperText Markup Language) [1].
HTML-документы могут быть созданы при помощи любого текстового редактора или специализированных HTML-редакторов и конвертеров.
Выбор редактора, который будет использоваться для создания HTML-документов, зависит исключительно от понятия удобства и личных пристрастий каждого автора. Основу языка разметки составляют теги.
Как устроен HTML-документ
HTML-документ - это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<h1>
Это простейший пример HTML-документа.
</h1>
</body>
</html>
В таблицах 1 и 2 представлены основные теги для создания HTML-документа и работы текстом.
Таблица 1. Обязательные теги HTML-документа
| Теги | Описание |
| <html> ... </html> | Эти теги открывают и завершают HTML-документ. |
| <head> ... </head> | Эта пара тегов указывает на начало и конец заголовка документа. |
| <title> ... </title> | Все, что находится между тегами <title> и </title>, толкуется браузером как название документа. |
| <body> ... </body> | Эта пара тегов указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа. |
Таблица 2. Теги для форматирования текста
| Теги | Описание |
| <h1> ... </h1> - <h6> ... </h6> | Теги вида <hi> (где i - цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня - самый крупный, шестого уровня, естественно - самый мелкий. |
| <p> ... </p> | Такая пара тегов описывает абзац. Все, что заключено между <p> и </p>, воспринимается как один абзац. |
| <font>…</font> | Теги для определения параметра шрифта с атрибутами fase, size, color. |
| <b>…</b> | Пара тегов, определяющих полужирное начертание текста. |
| <i>…</i> | Пара тегов, определяющих курсивное начертание текста. |
| <u>…</u> | Пара тегов, определяющих подчеркнутое начертание текста. |
| <sub>…</sub> | Пара тегов, задающих нижний индекс текста. |
| <suр>…</sup> | Пара тегов, задающих верхний индекс текста. |
| <strike>…</strike> | Пара тегов, для формирования зачеркнутого текста. |
| <small>…</small> | Пара тегов, которая выводит текст шрифтом меньшего размера. |
| <big>…</big> | Пара тегов, которая выводит текст шрифтом большего размера. |
Метки <hi> и <p> могут содержать дополнительный атрибут align, например:
<h1 align=center> Выравнивание заголовка по центру</h1>;
<p align=right> Образец абзаца с выравниванием по правому краю</p>;
<p align=left> Образец абзаца с выравниванием по левому краю</p>;
<p align=justify> Образец абзаца с выравниванием по ширине</p>.
Для вставки изображения используется тег <img>, имеющий единственный параметр src, который определяет адрес файла с рисунком.
Например: <img src= “/images/imag.jpg”>
По умолчанию, когда изображение вставляется в строку текста, строка выравнивается по низу изображения. Изменить эту установку можно при помощи атрибута align тэга <img>.
В таблице 3 описаны значения атрибута align.
Таблица 3. Значения атрибута align
| Значение | Описание |
| top | Выравнивает текст по верху изображения. |
| middle | Выравнивает текст по середине изображения. |
| botton | Выравнивает текст по низу изображения. |
По умолчанию программа просмотра выводит изображение в текущей строке. Текст не «обтекает» его. Однако при помощи атрибута aling тэга <img> изображение можно сделать «плавающим», т. е. заставить текст расположиться вокруг изображения. В таблице 4 приведены значения атрибута align, позиционирующие обтекаемое текстом изображение относительно краев окна браузера.
Таблица 4. Значения атрибута align
| Значение | Описание |
| left | Обтекаемое текстом изображение прижато к левой стороне окна браузера. |
| right | Обтекаемое текстом изображение прижато к правой стороне окна браузера. |
Для указания размеров изображения (в пикселях) служат атрибуты height и width тэга <img>.
Помещение изображения в рамку предполагает применение атрибута border тэга <img>. По умолчанию программа просмотра использует рамку, которая указана в соответствующей ссылке.
Для отделения изображения от текста используются атрибуты vspace и hspace для указания расстояния (по вертикали и горизонтали) между кромкой текста и краями иллюстрации.
Например: <img src="work.gif" vspace=20 hspace=20 align=left>
Наряду с использованием изображений в качестве иллюстраций к тексту или элементов оформления Web-страницы, в HTML предусмотрена возможность создания карт изображений (imagemap), отдельные области которого могут являться гиперссылками на другие разделы или страницы Web-сайта. В общем виде это соответствует использованию изображения в качестве гиперссылки с тем отличием, что на одной карте изображений можно создать несколько несовпадающих областей, и соответственно, гиперссылок.
Цвета водятся с помощью смешения источников RED (красного), GREEN (зеленого), и BLUE (синего) цвета. Цвета определяют с помощью шестнадцатеричной записи комбинации значений красного, зеленого и синего цветов (RGB). Наименьшее значение, которое можно задать одному из источников равно 0 (hex #00). Максимальное значение равно 255 (hex #FF).
В таблице 5 приведены некоторые оттенки цветов и соотвествующие шестнадцатеричные значения.
Цветовое оформление теста указывается в теге <font>. Например, <font color="#CC0000">Добро пожаловать! :)</font>.
Таблица 5. Отдельные оттенки цвета и
соответствующие шестнадцатеричные значения
| Цвет | Шестнадцатеричные значения |
| Черный | #000000 |
| Ярко-желтый | #FFFF00 |
| Ярко-малиновый | #FF00FF |
| Темно-синий | #0000АА |
| Темно-серый | #808080 |
| Синий | #0000CC |
| Фиолетовый | #880088 |
| Серый | #999999 |
| Белый | #FFFFFF |