МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Волгоградский государственный технический университет
КАФЕДРА «ИНФОРМАЦИОННЫЕ СИСТЕМЫ В ЭКОНОМИКЕ»
П.В. Терелянский, А.В. Костикова,
Е.Н. Позднякова, А.Г. Гагарин
Гипертекстовая технология
обработки данных
Методические указания
по выполнению лабораторных работ
по дисциплине «Информационные системы и технологии»
Волгоград
2
011
УДК 681.3 (075)
Рецензент
д-р. экон. наук, доцент Е.Г. Гущина
Печатается по решению редакционно-издательского совета
Волгоградского государственного технического университета
Гипертекстовая технология обработки данных: Методические указания по выполнению лабораторных работ по дисциплине «Информационные системы и технологии» / сост. П.В. Терелянский, А.В. Костикова, Е.Н. Позднякова, А.Г. Гагарин. – Волгоград : ИУЛН ВолгГТУ, 2011. – 16 с.
Методические указания содержат теоретические основы и практические рекомендации по освоению и созданию Web-страниц средствами языка разметки гипертекста HTML.
Рекомендуется студентам, обучающимся по направлению 230700.62 «Прикладная информатика».
Волгоградский государственный
технический университет, 2011
П.В. Терелянский, А.В. Костикова,
Е.Н. Позднякова, А.Г.Гагарин
Введение
Целью проведения лабораторных работ по дисциплине «Информационные системы и технологии» является выработка у студентов навыков создания и редактирования HTML-документов.
Представленные в методических указаниях задания являются основой для разработки и проектирования сайтов.
Лабораторная работа №1
«Создание простейшего HTML-документа. Форматирование текста»
Цель работы
Изучить структуру html-документа, основные тэги форматирования текста и использовать их при создании веб-страницы.
Основы создания Web-страниц средствами
языка разметки гипертекста HTML
1.2.1 Создание простого документа
Основой разработки веб-страниц является язык 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> {конец страницы}
1.2.2 Форматирование текста
<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> </Р>