Основы создания Web-страниц средствами

Лабораторная работа №1

«Создание простейшего HTML-документа. Форматирование текста»

Цель работы

Изучить структуру html-документа, основные тэги форматирования текста и использовать их при создании веб-страницы.

Языка разметки гипертекста HTML

Создание простого документа

Основой разработки веб-страниц является язык HTML (HyperText Markup Language – язык разметки гипертекстов).

Основной структурной единицей языка HTML является тег (от англ. Tag - дескриптор, маркер). Тег всегда заключен между скобками < > и имеет следующий вид:

<ТЕГ атрибут 1=ЗНАЧЕНИЕ ... атрибут N=ЗНАЧЕНИЕ>

Теги бывают одиночными и контейнерными. Контейнером называется пара: открывающий <ТЕГ> и закрывающий </ТЕГ>.

Открывающий тег служит для указания программе-браузеру начала какого-либо объекта или задания свойств объектов помещенных в контейнер. Закрывающий тег служит для указания программе-браузеру о конце объекта или окончания применения свойств, заданных в открывающем теге.

Атрибуты тега задают значения свойств данного объекта или объектов помещенных в контейнер.

Документ HTML начинается открывающим тегом <HTML> и заканчивается закрывающим тегом </HTML>. Между данной парой контейнерных тегов располагаются две другие основные части HTML документа: заголовок, заключенный в контейнер <HEAD>...</HEAD> и тело документа в контейнере <BODY>...</BODY> (содержание страницы). В разделе описания заголовка можно указать заглавие документа, для этого используется тэг <TITLE> ... </TITLE> (имя страницы).

Таким образом, структура простого HTML документа выглядит примерно так:

<HTML> {начало страницы}

<HEAD> {описание страницы, заголовка}

<TITLE> название </TITLE> {имя страницы}

</HEAD> {закрытый тэг описания заголовка}

<BODY> {содержание страницы}

текст

</BODY> {закрытый тэг описания страницы}

</HTML> {конец страницы}

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

<BODY> </BODY> - тег, определяющий границы тела документа.

Атрибуты:

BGCOLOR – определяет цвет фона документа. По умолчанию «White» (#FFFFFF).

TEXT – задает цвет текста для всей страницы. Цвет указывается в формате RGB или константами red, green, blue и т.п. По умолчанию «black» (#000000).

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

Таблица 1

Название	Код	Название	Код
Aqua	#00FFFF	navy	#000080
Black	#000000	olive	#808000
Blue	#0000FF	purple	#800080
Fuchsia	#FF00FF	red	#FF0000
Gray	#808080	silver	#C0C0C0
Green	#008000	teal	#008080
Lime	#00FF00	white	#FFFFFF
Maroon	#800000	yellow	#FFFF00

<P> </P> - абзац

Атрибуты:

ALIGN – выравнивание. Возможные значения: RIGHT-выравнивание текста по правому краю; CENTER - по центру; LEFT - по левому краю; JUSTIFY – по ширине.

<Н1> </Н1>…<Н6> </Н6> - заголовки разного уровня (от первого до шестого).

Пример:

<H2 ALIGN = CENTER> Заголовок второго уровня с выравниванием по центру.

<НR> - горизонтальная линия

Атрибуты:

ALIGN – выравнивание.

WIDTH – длина линии в процентах от окна браузера или пикселях

SIZE – ширина линии в процентах от окна браузера или пикселях

COLOR – цвет линии.

Пример:

Дополнительные возможности по форматированию:

<B> </B> - полужирный текст;

<I> </I> - курсивный текст;

<U> </U> - эффект подчёркивания;

<STRIKE> </ STRIKE >- эффект зачеркивания.

<FONT> </FONT> - используется для указания начертания шрифта в документе.

Атрибуты:

SIZE – размер шрифта.

COLOR – цвет шрифта.

FACE – гарнитура шрифта.

Пример:

<Р> <FONT FACE=”ARIAL” SIZE=4 COLOR=RED> Красная строка набрана шрифтом ARIAL 4 размера </FONT> </Р>

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

В HTML-документе существует четыре основных вида списков:

нумерованный
маркированный
вложенные списки
список определений

Фрагмент текста, представляющий список, заключается в тэги:

<OL> …. </OL> упорядоченный список (ordered list);

<UL> ….</UL> неупорядоченный список (unordered list);

< LI>….</LI> вложенные списки;

<DL>….</DL> список определений.

Список определений служит для создание списков типа «термин» - «описание». Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>.

Каждый элемент списка заключается в тэги <LI> ….</LI> (от английского list item). При выводе на экран элементы списка имеют отступ и начинаются с новой строки.

Тэг <OL> может иметь параметры: <OL TYPE=A|a|I|i|1 START=n>

TYPE= определяет вид нумерации, START= задаёт начальное значение первого элемента списка (независимо от типа указывается цифрой).

TYPE=A – маркеры в виде прописных латинских букв;

TYPE=a – маркеры в виде строчных латинских букв;

TYPE=I – маркеры в виде больших римских цифр;

TYPE=i – маркеры в виде маленьких римских цифр;

TYPE=1 – маркеры в виде арабских цифр (по умолчанию).

Тэг <UL> может иметь параметр:

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square).

Тэг <LI> может иметь параметры:

<OL TYPE=disc|circle|squade>

или <OL TYPE=A|a|I|i|1 VALUE=n>

TYPE Вид маркера (см. <UL>) или счетчика (см.OL)

VALUE=n Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

Порядок выполнения работы

1. Создать, используя только тэги структуры, текстовый html-документ. Сохранить этот документ под любым именем с расширением .html в папке HTML. Открыть документ в окне браузера и посмотреть, как он будет отформатирован.

2. Форматирование текста выполнить согласно номеру своего варианта.

3. Оформить отчет по лабораторной работе, который должен содержать: титульный лист и экранные формы, демонстрирующие выполнение работы.

Таблица 2

№ ва-ри-анта	Форматирование текста документа
Заголовок страницы	Цвет фона	Кол-во абза-цев*	Список

	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	аqua	три	маркированный, три компонента
	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	black	три	маркированный, три компонента
	выровнять по центру, полужирный шрифт, тип – Cooper Std Black	blue	четыре	маркированный, три компонента
	выровнять по центру, жирный шрифт, тип– Times, цвет – синий	fuchsia	два	маркированный, три компонента
	выровнять по центру, жирный шрифт, тип– Times, цвет – синий	gray	два	маркированный, четыре компонента
	выровнять по правому краю, жирный шрифт, тип– Times, цвет – синий	green	два	маркированный, четыре компонента

Окончание таблицы 2

выровнять по центру, жирный шрифт, тип – Arial, цвет - зеленый	lime	четыре	нумерованный, два компонента
выровнять по центру, курсивный шрифт, тип – Arial, цвет - зеленый	maroon	три	нумерованный, два компонента
выровнять по центру, полужирный шрифт, тип – Arial, цвет - зеленый	navy	три	нумерованный, три компонента
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - черный	olive	четыре	нумерованный, два компонента
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - черный	purple	два	нумерованный, четыре компонента
выровнять по центру, курсивный шрифт, тип – Arial, цвет - черный	red	два	нумерованный, четыре компонента
выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание	silver	четыре	маркированный, два компонента
выровнять по центру, курсивный шрифт, тип – Candara, подчеркивание	teal	три	маркированный, три компонента
выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание	white	три	маркированный, три компонента
выровнять по правому краю, курсивный шрифт, тип – Candara, подчеркивание	yellow	три	нумерованный, два компонента
выровнять по правому краю, жирный шрифт, тип – Arial, подчеркивание	navy	три	маркированный, три компонента
выровнять по центру, курсивный шрифт, тип – Arial, цвет - красный	olive	два	нумерованный, три компонента
выровнять по центру, курсивный шрифт, тип – Cooper Std Black	purple	четыре	маркированный, три компонента
выровнять по центру, курсивный шрифт, тип – Tahoma, подчеркивание	green	три	нумерованный, два компонента
выровнять по центру, курсивный шрифт, тип – Arial, цвет - красный	lime	два	маркированный, три компонента
выровнять по центру, курсивный шрифт, тип – Cooper Std Black	maroon	четыре	нумерованный, три компонента
выровнять по центру, курсивный шрифт, тип – Latha, цвет - синий	navy	три	маркированный, три компонента
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - синий	olive	три	нумерованный, два компонента
выровнять по центру, курсивный шрифт, тип – Tahoma, цвет - синий	purple	три	маркированный, три компонента
выровнять по центру, курсивный шрифт, тип – Latha, цвет - синий	red	четыре	нумерованный, три компонента
выровнять по центру, курсивный шрифт, тип – Latha, цвет - красный	silver	четыре	нумерованный, два компонента
выровнять по центру, курсивный шрифт, тип – Latha, цвет - зеленый	green	четыре	нумерованный, два компонента

Примечания *- Цвета текста в абзацах, типы и размер шрифта должны быть различными. Выравнивание абзацев привести по разным краям документа.

Лабораторная работа №2

«Оформление HTML документа. Использование графики. Создание таблиц в HTML»

Цель работы

Изучить основные тэги, предназначенные для создания таблиц в html-документе, вставки изображений в html-документ и для их преобразования.

Оформление HTML-документа

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

Таблицы оформляются тегами <TABLE> и </TABLE>.

Атрибуты:

ALIGN – выравнивание таблицы. Значения: LEFT, RIGHT или CENTER.

WIDTH - ширина таблицы в пикселях

BORDER – ширина обрамления ячеек таблицы в пикселях.

BORDERCOLOR – цвет грани таблицы.

BGCOLOR – фоновый цвет таблицы.

<TR></TR> - строка таблицы. Располагаются между тегами <TABLE> </TABLE> .

Атрибуты:

ALIGN – горизонтальное выравнивание содержимого строки. Значения: LEFT, RIGHT или CENTER.

VALIGN – вертикальное выравнивание содержимого строки. Значения: TOP, BOTTOM и MIDDLE.

<TD> </TD> - ячейка строки.

Атрибуты:

ALIGN, VALIGN – аналогично параметрам тега <TR>

WIDTH, HEIGHT – соответственно ширина и высота в пикселях или процентах.

ROWSPAN – объединение смежных ячеек в одном столбце. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.

COLSPAN – объединение смежных ячеек в одной строке. Этот параметр принимает значения в зависимости от того, сколько ячеек нужно объединить.

BORDERCOLOR – цвет грани ячейки.

BGCOLOR – фоновый цвет ячейки.

Создание гиперссылок

Для записи гипертекстовой ссылки используется тег <А>, который называют «якорь» (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF. Простую ссылку можно записать в виде

<А НREF=»Адрес веб-ресурса»>Описание веб-ресурса</А> - ссылка на веб-ресурс.

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

Например, в папке D:\HTML располагаются страницы с именами page1.html и page2.html. Организуется ссылка из документа page1.html на документ page2.html. Относительная ссылка будет выглядеть так:

<А НREF= page2.html>…</А>.

Абсолютная ссылка будет выглядеть так:

<А НREF= D:\HTML\page2.html>…</А>.

Если page2.html располагается в подкаталоге catalog1 папки HTML, то относительная ссылка на него из документа page1.html выглядит так:

<А НREF= catalog1\page2.html>…</А>.

Относительная ссылка page2.html на документ page1.html выглядит так:

<А НREF= ..\page1.html>…</А>.

Фрагмент «..\» означает обращение к каталогу выше на один уровень.

Описание веб-ресурса – это текст который будет подсвечен как ссылка, который может быть текстом или рисунком. В первом случае указатель содержит текст, во втором – тег <IMG>.

Изображения на Web-странице могут использоваться в качестве гипертекстовых ссылок, как и обычный текст. Читатель щелкает на изображении и отправляется на другую страницу или переходит к другому изображению. Для обозначения изображения как гипертекстовой метки используется тот же тег <A>, что и для текста, но между <A> и </A> вставляется тег изображения < IMG >:

При этом изображение, используемое в качестве гипертекстовой ссылки, обводится дополнительной рамкой.

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВОDY>:

Таблица 3

Атрибуты и значения гипертекстовых ссылок

Атрибут	Значение
ТЕХТ=#000000	Цвет текста (черный)
ALINK=#FF0000	Цвет "активных" гипертекстовых ссылок (красный)
VLINK=#FF00FF	Цвет пройденных гипертекстовых ссылок (пурпурный)
LINK=#0000FF	Цвет «не посещенной» гипертекстовой ссылки (синий)

Оформление документа HTML в текстовом редакторе Блокнот

Для того чтобы создать таблицу HTML в текстовом редакторе Блокнот необходимо выполнить следующие действия:

1. Запустить текстовый редактор Блокнот (Пуск > Программы > Стандартные > Блокнот).

2. Создать типовую структуру HTML - документа и ввести текст, приведенный на рисунке 3.

Основы создания Web-страниц средствами - student2.ru

Рис. 3 Ввод html-кодов для создания таблицы

3. Сохранить этот документ. При сохранении в качестве типа файла укажите «все файлы», в качестве имени файла table.html.

4. Закрыть блокнот. Найти файл table.html и открыть его с помощью интернет-браузера. Результат представлен на рисунке 4.

Основы создания Web-страниц средствами - student2.ru

Рис. 4 Результат исполнения html-кодов создания таблицы

Для того чтобы создать гиперссылку на документы, в которых содержатся рисунки и другие сведения в текстовом редакторе Блокнот необходимо выполнить следующие действия:

1. В папке HTML создать папку images с изображениями. Найти на локальном диске компьютера рисунок и сохранить в папке images.

2. Создать файл galery.html в текстовом редакторе Блокнот. Открыть файл galery.html. Добавить заголовок «Галерея».

3. Вставить картинку из папки images после заголовка «Галерея». Если картинка будет слишком большая, можно уменьшить её, указав параметры WIDTH, HEIGHT с меньшими значениями.

Основы создания Web-страниц средствами - student2.ru

Рис. 5 Ввод html-кодов вставки изображения в документ

4. Открыть файл first.html.

5. Создать гипертекстовые ссылки на документы table.html и galery.html. Результат представлен на рисунке 6.

Основы создания Web-страниц средствами - student2.ru

Рис. 6 Иллюстрация страницы с гиперссылками на таблицу и галерею картинок.

Порядок выполнения работы

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

2. Оформить отчет по лабораторной работе, который должен содержать: титульный лист; экранные формы, демонстрирующие выполнение заданий.

Таблица 4

№ варианта	Таблица (IхJ)*	Выравнивание таблицы	Кол-во картинок

	3х4	по центру
	3х4	по правому краю
	2х5	по левому краю
	4х5	по центру
	5х4	по правому краю
	5х4	по левому краю
	4х3	по центру
	4х3	по правому краю
	3х6	по левому краю
	3х6	по центру
	4х5	по правому краю
	4х5	по левому краю
	5х4	по центру
	5х4	по правому краю
	6х2	по левому краю
	6х3	по правому краю
	2х6	по левому краю
	3х6	по центру
	4х5	по правому краю
	4х5	по левому краю
	3х6	по центру

Окончание таблицы 4

	3х6	по правому краю
	4х5	по левому краю
	4х5	по правому краю
	5х4	по левому краю
	5х4	по центру
	3х4	по правому краю
	3х4	по левому краю

* Обозначения: I – количество строк таблицы; J – количество столбцов таблицы.

Рекомендуемая литература

1. Информационные системы и технологии в экономике и управлении: учеб. пособие для студ. вузов / под ред. В. В. Трофимова ; СПб. гос. ун-т экономики и финансов. - 2-е изд., перераб. и доп. - М. : Высш. образование, 2007. - 480 с.

2. Уткин, В. Б. Информационные системы и технологии в экономике: Учебник для вузов / В. Б. Уткин, К. В. Балдин. – М.: ЮНИТИ–ДАНА, 2003. – 335 с.

3. Матросов А., Сергеев А., Чаунин М. HTML 4.0 - БХВ-Петербург, 2008.

4. Управление информационными ресурсами: Учебник / под ред. А.В.Хорошилова: - М.: Финансы и статистика, 2011.-272с.: ил.

5. Мельников П.П. Технология разработки HTML-документов /Учеб. пособие, 2005 – 112 с.

6. Дунаев В.В. HTML, скрипты и стили. – БХВ-Петербург, 2011.

7. Электронный ресурс: http://www.intuit.ru/department/internet/devcapw/1/

Учебное издание

Павел Васильевич Терелянский

Анастасия Владимировна Костикова

Елизавета Николаевна Позднякова

Алексей ГеннадьевичГагарин

ЛАБОРАТОРНЫХ РАБОТ ПО ДИСЦИПЛИНЕ