Теоретический материал. Лабораторная работа №1

2016-09-17

280

Обсуждений (0)

0.00 из 5.00 0 оценок

12 Следующая ⇒

Лабораторная работа №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

2016-09-17

280

Обсуждений (0)

0.00 из 5.00 0 оценок

12 Следующая ⇒

Обсуждение в статье: Теоретический материал. Лабораторная работа №1

Обсуждений еще не было, будьте первым... ↓↓↓