1473

применен при выводе размеченного документа на экран монитора.

Сайт (WEB-сайт) – место во Всемирной паутине, где можно найти какую либо информацию. В зависимости от контекста термин сайт относится либо к набору страниц, объединенных тематически, принадлежащих одному автору, организации или пользователю, либо к компьютеру (узлу сети, Web-узлу), на котором хранится определенная информация и к которому открыт доступ через Интернет.

Язык HTML (HyperText Markup Language, HTML) – язык разметки гипертекста. Стандартный язык, используемый во Всемирной паутине для создания и публикации Web документов.

Гипертекстовый документ – это документ, содержащий ссылки на другие документы, позволяющие при помощи нажатия кнопки мыши быстро перемещаться от одного документа к другому.

URL-адрес – Единый указатель ресурсов (англ. URL — Uniform Resource Locator) — единообразный локатор (определитель местонахождения) ресурса. Ранее назывался Universal Resource Locator — универсальный локатор ресурса. URL — это стандартизированный способ записи адреса ресурса в сети Интернет. Например, ссылка на страницу http://en.wikipedia.org/w/index.php?title=TinyURL&diff=283621022&ol did=283308287 может быть сокращена до http://tinyurl.com/mmw6l

WYS/WYG – WYSIWYG (произносится [wɪziwɪɡ], является

аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ, в которых содержание отображается в процессе редактирования и выглядит макcимально близко похожим на конечную продукцию, которая может быть печатным документом, веб–страницей, слайд– презентацией или даже использоваться для освещения театральных событий.

30

Вопросы для самоконтроля

1.Что такое Web-страница?

2.Что такое гипертекст?

3.Для чего нужен браузер?

4.Для чего нужен язык разметки гипертекста?

5.В чем достоинства языка HTML?

6.Что понимают под разметкой и для чего она используется?

7.Дайте определения понятиям тэг, элемент, атрибут.

8.Что такое базовые элементы HTML?

9.Что такое гипертекстовый документ?

10.Каковы основы построения HTML-документа?

11.В чем заключается форматирование Webстраниц?

Задания №1 для самостоятельной работы

1.Создайте HTML-документ, содержащий текст, используя тэги принудительного перевода строки и разделения на абзацы. Выровняйте заголовок по центру, первый абзац по левому краю, второй абзац по правому краю, а остальные по ширине окна браузера;

2.Измените цвет и шрифт заголовка;

3.Добавьте в ваш документ две горизонтальные линии различной толщины с выравниванием по центру и по правому краю;

4.Установите длину горизонтальных линий: линии выровненной по центру - 50%, линии выровненной по правому краю - 75%, закрасьте одну из линий;

5.Зачеркните два любых слова;

6.Выделите два любых слова тэгами <B> и <I>;

7.Подчеркните несколько слов с помощью тэга форматирования;

8.Уменьшите шрифт текста первого абзаца с помощью тэга форматирования;

9.Измените шрифт второго абзаца с помощью тэга <FONT> на

Arial;

10.Измените размер третьего абзаца с помощью тэга <FONT> на

шестой;

11.Измените цвет текста во всем документе, используя глобальную таблицу стилей;

12.Сделайте заголовки в вашем документе различного цвета и поместите их по центру, используя внутреннюю таблицу стилей.

31

13.Добавьте какое-либо стихотворение в конец вашего документа, используя тэг <PRE>.

14.Результат показать преподавателю.

Задание № 2 для самостоятельной работы

1.Создание web-документа.

Создать web-документ произвольной тематики. Объем текста не должен превышать трети экрана монитора.

2.Оформление web-документа. Оформить web-документ различными:

−шрифтами;

−цветом;

−линиями;

−вставкой специальных символов.

3.Создание списков.

По тексту исходного web-документа добавить списки:

−нумерованный;

−маркированный;

−список определений.

4.Создание таблиц.

Создать отдельный web-документ, содержащий таблицу.

5.Работа с изображением.

Висходном web-документе добавить изображения и фоновый рисунок. При необходимости отформатировать их.

6.Организация ссылок.

Между исходным web-документом и файлом, содержащим таблицу создать:

−текстовые ссылки друг на друга;

−ссылки по рисунку;

−в исходном web-документе – ссылки на якоря.

7.Работа с окнами.

Создать web-документ, содержащий несколько окон, и в каждом окне отобразить отдельный web-документ.

8.Результат показать преподавателю.

32

	Приложение 1
	Таблица основных цветов
Название цвета	Шестнадцатеричное значение
Aqua-бирюзовый	#F0F8FF
Black-черный	#000000
Blue-синий	#0000FF
Fuchsia-розовый	#FF00FF
Gray-темно-серый	#808080
Green-темно-зеленый	#008000
Lime-светло-зеленый	#00FF00
Maroon-малиновый	#800000
Navy-темно-синий	#000080
Olive-оливковый	#808000
Purple-сиреневый	#800080
Red-красный	#FF0000
Silver-светло-серый	#C0C0C0
Teal-голубой	#008080
White-белый	#FFFFFF
Yellow-желтый	#FFFF00

Приложение 2

Таблица основных тэгов языка HTML Основные теги

<html></html>	Указывает	программе	просмотра страниц
	что это HTML документ.
<head></head>	Определяет	место,	где	помещается
	различная информация не отображаемая в
	теле документа. Здесь располагается тег
	названия документа и теги для поисковых
	машин.
<body></body>	Определяет видимую часть документа.

33

Теги оглавления
<title></title>	Помещает название документа в оглавление
	программы просмотра страниц
Атрибуты тела документа
<body bgcolor=?>	Устанавливает цвет фона документа,
	используя значение цвета в виде RRGGBB -
	пример: FF0000 - красный цвет.
<body text=?>	Устанавливает цвет текста документа,
	используя значение цвета в виде RRGGBB -
	пример: 000000 - черный цвет.
<body link=?>	Устанавливает цвет гиперссылок, используя
	значение цвета в виде RRGGBB - пример:
	00FF00 - зеленый цвет.
<body vlink=?>	Устанавливает цвет гиперссылок на котох
	вы уже побывали, используя значение цвета
	в виде RRGGBB - пример: 333333 - серый
	цвет.
<body alink=?>	Устанавливает цвет гиперссылок при
	нажатии.

Теги для форматирования текста

<pre></pre>	Обрамляет	предварительно
	отформатированный текст.
<h1></h1>	Создает САМЫЙ БОЛЬШОЙ заголовок
<h6></h6>	Создает самый маленький заголовок
<b></b>	Создает жирый текст
<i></i>	Создает наклонный текст
<tt></tt>	Создает текст - имитирующий стиль
	печатной машинки.
<cite></cite>	Используется для цитат, обычно наклонный
	текст.

34

<em></em>	Используется для выделения из текста слова
	(наклонный или жирный текст)
<strong></strong>	Используется для выделения	наиболее
	выжных частей текста (наклонный или
	жирный текст)
<font size=?></font>	Устанавливает размер текста в пределах от
	1 до 7.
<font color=?></font>	Устанавливает цвет текста, используя
	значение цвета в виде RRGGBB.
Гиперссылки
<a href="URL"></a>	Создает гиперссылку на другие документы
	или часть текущего документа.
<a href="mailto:EMAIL">	Создает гиперссылку вызова	почтовой
</a>	программы для написания письма автору
	документа.

<a name="NAME"></a>

<a href="#NAME"></a>

Форматирование

<p>

<p align=?>

<br>

<blockquote>

</blockquote>

<dl></dl>

<dt>

<dd>

<ol></ol>

Отмечает часть текста как цель для гипперссылок в документе.

Создает гиперссылку на часть текущего документа.

Создает новый параграф

Выравнивает параграф относительно одной из сторон документа, значения: left, right,

или center

Вставляет перевод строки.

Создает отступы с обеих сторон текста.

Создает список определений. Определяет каждый из терминов списка Описывает каждое определение Создает нумерованный список

35

<li>	Определяет каждый элемент списка и
	присваивает номер
<ul></ul>	Создает ненумерованный список
<li>	Предваряет каждый элемент списка и
	добавляет кружок или квадратик.
<div align=?>	Важный	тег	используемый			для
	форматирования		больших	блоков		текста
	HTML документа, также используется в
	таблицах стилей
Графические элементы
<img src="name">	Добавляет изображение в HTML документ
<img src="name" align=?>	Выравнивает изображение к одной из
	сторон документа, принимает значения: left,
	right, center; bottom, top, middle
<img src="name" border=?>	Устанавливает		толщину	рамки		вокруг
	изображения
<hr>	Добавляет	в	HTML		документ
	горизонтальную линию.
<hr size=?>	Устанавливает высоту (толщину) линии
<hr width=?>	Устанавливает ширину линии, можно
	указать ширину в пикселях или процентах.
<hr noshade>	Создает линию без тени.
<hr color=?>	Задает линии определенный цвет. Значение
	RRGGBB.
Таблицы
<table></table>	Создает таблицу.
<tr></tr>	Определяет строку в таблице.
<td></td>	Определяет отдельную ячейку в таблице.
<th></th>	Определяет заголовок таблицы (нормальная

36

	ячейка с отцентрованным жирным текстом)
Атрибуты таблицы
<table border=#>	Задает толщину рамки таблицы.
<table cellspacing=#>	Задает	расстояние			между		ячейками
	таблицы.
<table cellpadding=#>	Задает	расстояние			между	содержимым
	ячейки и ее рамкой.
<table width=#>	Устанавливает ширину таблицы в пикселях
	или процентах от ширины документа.
<tr align=?> или <td	Устанавливает			выравнивание			ячеек	в
align=?>	таблице, принимает значения: left, center,
	или right.
<tr valign=?> или <td	Устанавливает вертикальное					выравнивание
valign=?>	для ячеек таблицы, принимает значения :
	top, middle, или bottom.
<td colspan=#>	Указывает кол-во столбцов которое
	объединено		в	одной		ячейке.		(по
	умолчанию=1)
<td rowspan=#>	Указывает кол-во строк которое объединено
	в одной ячейке. (по умолчанию=1)
<td nowrap>	Не позволяет программе просмотра делать
	перевод строки в ячейке таблицы.
Фреймы (Кадры )
<frameset></frameset>	Предваряет тег <body> в документе,
	содержащем кадры;
<frameset	Определяет строки в таблице кадров, высота
rows="value,value">	которых определена кол-вом пикселей или в
	процентном соотношении к высоте таблицы
	кадров.

37

<frameset	Определяет столбцы в таблице кадров,
cols="value,value">	ширина которых определена кол-вом
	пикселей или в процентном соотношении к
	ширине таблицы кадров.
<frame>	Определяет единичный кадр или область в
	таблице кадров.
<noframes></noframes>	Определяет, что будет показано в окне
	браузера если он не поддерживает кадры.
Атрибуты кадров
<frame src="URL">	Определяет какой из HTML документов
	будет показан в кадре.
<frame name="name">	Указывает Имя кадра или области, что
	позволяет перенаправлять информацию в
	этот кадр или область из других кадров.
<frame marginwidth=#>	Определяет величину отступов по левому и
	правому краям кадра; должно быть равно
	или больше 1.
<frame marginheight=#>	Определяет величину отступов по верхнему
	и нижнему краям кадра; должно быть равно
	или больше 1.
<frame scrolling=VALUE>	Указывает будет-ли выводится линейка
	прокрутки в кадре; значение value может
	быть "yes," "no," или "auto". Значение по
	умолчанию для обычных документов - auto.
<frame noresize>	Препятствует изменению размеров кадра.
Формы

Для форм, выполняющих какие-то функции должны быть запущены соответствующие CGI скрипты на сервере. HTML только создает внешний интерфейс формы.

<form></form>

Создает формы

38

<select multiple	Создает	скролируемое		меню.	Size
name="NAME"	устанавливает кол-во пунктов меню,
size=?></select>	которое будет показано на экране,
	остальные	будут	доступны		при
	использовании прокрутки.
<option>	Указывает	каждый	отдельный		элемент
	меню
<select	Создает ниспадающее меню
name="NAME"></select>
<option>	Указывает	каждый	отдельный		элемент
	меню

<textarea name="NAME" Создает окно для ввода текста. Columns cols=40 rows=8></textarea> указывает ширину окна; rows указывает его

высоту.

<input type="checkbox" name="NAME">

<input type="radio" name="NAME" value="x">

<input type=text name="foo" size=20>

Создает checkbox. За тегом следует текст.

Создает radio кнопку. За тегом следует текст.

Создает строку для ввода текста. Параметром Size указывается длина в символах.

	<input type="submit"	Создает кнопку "Принять"
	value="NAME">
	<input type="image"	Создает кнопку "Принять" - для этого
	border=0 name="NAME"
	src="name.gif">	используется изображение
	<input type="reset">	Создает кнопку "Отмена"

39