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

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

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

Цель работы

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

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

Языка разметки гипертекста 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 – цвет линии.

Пример:

<HR ALIGN = CENTER WIDTH=50% SIZE=6 COLOR= RED>

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

<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 TYPE=disc|circle|square>

Тип тэга <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 >:

<A HREF=«адрес файла/ изображения»><IMG SRC =«image.gif»> </A>

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

Содержание контейнера гипертекстовой ссылки, заключенное между тегом начала и тегом конца, выделяется в тексте цветом, определенным для контекстных гипертекстовых ссылок. В атрибутах тега <ВО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/

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

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

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

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

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

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

«ИНФОРМАЦИОННЫЕ СИСТЕМЫ И ТЕХНОЛОГИИ»

Методические указания

По выполнению лабораторных работ

по дисциплине «информационные системы и технологии»

Темплан 2011 г. (учебно-методическая литература). Поз. № 204.

Подписано в печать 14.12.2011 г. Формат Основы создания Web-страниц средствами - student2.ru 1/16. Бумага офсетная.

Гарнитура Times. Печать офсетная. Усл. печ. л.0,93

Тираж 10 экз. Заказ 835

Волгоградский государственный технический университет.

400131, г. Волгоград, пр. им. В. И. Ленина, 28, корп. 1.

Отпечатано в типографии ИУЛН ВолгГТУ

400131, г. Волгоград, пр. им. В. И. Ленина, 28, корп. 7.

 
 
 

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

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

Цель работы

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

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

Наши рекомендации