|
|
МИНИСТЕРСТВО СЕЛЬСКОГО ХОЗЯЙСТВА РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное образовательное учреждение высшего пРофессионального образования российский государственный аграрный университет – МСха имени К.А. Тимирязева (ФГОУ ВПО ргау - МСХА имени К.А. Тимирязева)
|
Факультет учетно-финансовый
Кафедра прикладной информатики
Методические указания
К ПРАКТИЧЕСКИМ РАБОТАМ
ПО ДИСЦИПЛИНЕ
«Информационные технологии и информационные системы в бухгалтерском учете»
Курс 2
Семестр 4
Москва 2012
ПРАКТИЧЕСКАЯ РАБОТА № 1
«Знакомство с языком гипертекстовой разметки текста HTML»
Цель работы: ознакомление с основами языка HTML, получение практических навыков по созданию статических HTML-документов.
Общие сведения
World Wide Web, как наиболее быстро растущий сегмент Internet, состоит из большого количества Web-узлов. Каждый узел представляет собой одну или более Web-страниц, написанных на языке HyperText Markup Language (HTML). HTML - это простой язык разметки, используемый для создания гипертекстовых документов. Размеченный текст позволяет представлять почту, документы, новости, результаты обработки запросов к базам данных, меню и графику на Web-узле.
Когда пользователь обращается к HTML-документу, используя программу просмотра (browser), эта программа считывает и интерпретирует каждую метку (тег) в документе и использует эту информацию для отображения документа на экране.
Структура HTML документа
Теги (tags) - это специальные конструкции, которые обозначают начало и конец заголовков, параграфов, списков и ссылок. HTML-компоненты начинаются с открывающего тега (opening tag), далее следует информация, которую нужно отобразить, затем - закрывающий тег (closing tag). Открывающий тег имеет вид <имя тега>, а закрывающий тег - </имя тега>.
HTML-документ разделен на три базовые секции. Наибольшая секция ограничивается тегами <HTML> и </HTML>. Вторая секция имеет ограничения <HEAD> и </HEAD> и содержит имя документа между тегами <TITLE> и </TITLE>. Третья секция содержит тело документа и определяется тегами <BODY> и </BODY>. Между тегами <BODY> и </BODY> включаются весь текст, изображения и другие элементы, которые необходимо отобразить в окне браузера как видимые для пользователя.
Имена тегов могут быть написаны заглавными или прописными буквами, например, <BODY> или <body>.
Пример структуры документа:
<HTML>
<HEAD>
<TITLE>Имя документа во вкладке браузера</TITLE>
</HEAD>
<BODY>
...собственно тело документа
</BODY>
</HTML>
Основные HTML-элементы
Основные элементы HTML-документа позволяют управлять физическими и логическими стилями внутри документа, улучшая визуальное восприятие документа.
К основным элементам относятся:
Headings - набор тегов для заголовков разных уровней важности;
Paragraphs - теги, определяющие параграфы в тексте;
Lists - теги, определяющие списки различного вида (нумерованный, ненумерованный и т. д.);
Tables - теги, определяющие табличное представление информации;
Forms - теги, определяющие поля данных, которые заполняются пользователем.
Address - теги, определяющие адрес владельца страницы.
После заполнения внесенные данные отсылаются на сервер;
Headings (заголовки)
Теги могут быть представлены любым из набора H1 - H6. Цифра обозначает размер шрифта заголовка. Наибольшему размеру соответствует 1. Текст, размещенный между Н1-маркерами, будет иметь самый крупный размер из установленных в документе. Убывающие размеры задаются маркерами Н2 - Н6. Имеется только один атрибут ALIGN, позволяющий произвести выравнивание заголовка.
Paragraphs (параграфы)
Теги <P> и </P> используются для обозначения параграфов. При этом перед строкой начала параграфа формируется пустая строка. Для перевода строки без определения нового параграфа используются теги <BR> и </BR>. Параграф может завершаться </P>. При этом все открытые внутри параграфа теги закрываются. Если используются несколько параграфов подряд, то очередной <Р> автоматически завершает предыдущий параграф и начинает новый. Единственный атрибут ALIGN может использоваться, чтобы определить текстовое выравнивание внутри параграфа.
HTML-документ может содержать дополнительный набор тегов для улучшения представления информации.
Теги <PRE> и </PRE> позволяют использовать в документе предварительно форматированный текст. Текст между тегами отображается с сохранением оригинального формата так, как он выглядит в исходном документе, т. е. с пробелами, новыми строками, табуляцией. Автоматический перенос слов при использовании тега <PRE> отключен.
Теги <HR> и </HR> используются для создания горизонтальных линий, которые выступают как разделители информации. Тег <HR> имеет атрибуты:
ALIGN - определяет размещение линии по отношению к краям документа: align=left, align=center или align=right. По умолчанию линия располагается по центру документа;
SIZE - устанавливает высоту линии в пикселях;
WIDTH - устанавливает ширину линии в пикселях (Width=100) или определяет как процент между текущими левыми и правыми полями (Width=50%). По умолчанию - 100%.
Теги <FONT> и </FONT> используются для увеличения или уменьшения размера шрифта в параграфе. Тег <FONT> имеет атрибут SIZE, который может принимать значения от +1 до +4 и от -1 до -4.
Теги <BLOCKQUOTE> и </BLOCKQUOTE> используются для включения цитаты из другого документа. Цитата вставляется с выровненными полям и заключенной в кавычки.
Физический стиль может использоваться в параграфе для точного определения характеристик текста.
Теги <B> и </B> показывают заключенный между ними текст жирным шрифтом.
Теги <I> и </I> показывают заключенный между ними текст наклонным шрифтом.
Теги <TT> и </TT> показывают заключенный между ними текст фиксированным шрифтом.
Теги <U> и </U> показывают заключенный между ними текст с подчеркиванием.
Теги <S> и </S> показывают заключенный между ними текст с перечеркиванием (горизонтальная черта через символ).
Теги <BIG> и </BIG> показывают заключенный между ними текст шрифтом больше текущего.
Теги <SMALL> и </SMALL> показывают заключенный между ними текст шрифтом меньше текущего.
Теги <SUB> и </SUB> показывают заключенный между ними текст подстрочно, используя уменьшенный по сравнению с текущим шрифт.
Теги <SUP> и </SUP> показывают заключенный между ними текст надстрочно, используя уменьшенный по сравнению с текущим шрифт.
Теги <BLINK> и </BLINK> показывают заключенный между ними текст мерцающим.
Теги <CENTER> и </CENTER> отображают текст центрированным по отношению к краям документа.
Кроме обычного текста в HTML-документах допускается применение специальных кодирующих символов, которые при отображении страницы программой просмотра выводят на экран оригинальные символы. Обозначения записываются только строчными буквами (см. табл.).
|
Символ |
Синтаксис |
Описание |
|
< |
< |
Знак "меньше чем" |
|
> |
> |
Знак "больше чем" |
|
& |
& |
Знак "&" |
|
" |
" |
Знак " - двойные кавычки |
Каждая запись кода символа должна заканчиваться символом ";"
List (списки)
Ненумерованный список определяется тегами <UL> и </UL>. Списки такого типа имеют форму:
<UL>
<LI> ... первый элемент списка
<LI> ... второй элемент списка
...
<LI> ... последний элемент списка
</UL>.
Для обозначения отдельного элемента списка вводится тег <LI>, который имеет атрибут TYPE для показа специального значка "o" перед каждым элементом списка. Разрешенные значения для TYPE - "диск", "квадрат" или "круг": <LI TYPE=disc>, <LI TYPE=square>, <LI TYPE=circle>.
Нумерованный список определяется тегами <OL> и </OL>. Нумерованные списки имеют форму:
<OL>
<LI> ... первый элемент списка
<LI> ... второй элемент списка
...
<LI> ... последний элемент списка
</OL>.
Нумерация может осуществляться с помощью атрибута TYPE арабскими цифрами, большими или маленькими римскими цифрами, заглавными или прописными буквами латинского алфавита: <LI TYPE=1>, <LI TYPE=I>, <LI TYPE=i>, <LI TYPE=A>, <LI TYPE=a> соответственно.
Атрибут START тега <OL> может использоваться для определения начального номера первого элемента списка (по умолчанию устанавливается 1).
Список определений состоит из пар терминов и их определений. Определяется тегами <DL> и </DL>. Список определений содержит элементы <DT> для названий терминов и <DD> для определений терминов. Список определений имеет вид:
<DL>
<DT>термин 1
<DD>определение первого термина
<DT>термин 2
<DD>определение второго термина
</DL>
Address (адрес)
Теги <ADDRESS> и </ADDRESS> определяют для текущего HTML-документа информацию об авторе документа и о контакте с ним.
Данные теги обычно помещаются в конце документа и не имеют атрибутов.
Comments (комментарии)
Для включения комментариев в исходный код HTML-документа используется конструкция <!--Комментарий-->. После начального ограничителя "<!--" весь текст до следующего ограничителя "-->" игнорируется программой просмотра. Комментарии не могут быть вложенными.
Пример HTML-документа
<HTML>
<HEAD>
<TITLE>Пример статической HTML страницы</TITLE>
</HEAD>
<BODY>
<!--Описание комментария-->
<P><H1>Специализация<I>"Финансы и кредит"</I></H1>
<HR ALIGN=center WIDTH=80%>
<P><B>Кафедра Прикладной информатики готовит высококвалифицированных специалистов
<BR>по множеству специализаций</B></P>
<P>В рамках подготовки специалистов по специализации
<BR>"Финансы и кредит" студентам предлагаются следующие урсы:</P>
<UL>
<LI TYPE=disk>Фондовые рынки – настоящее и будущее
<LI TYPE=disk>Сетевой маркетинг
<LI TYPE=disk>Электронная коммерция
</UL>
<HR ALIGN=center WIDTH=80%>
<ADDRESS><FONT SIZE=-3>
Кафедра ПИ ФГБОУ ВПО РГАУ МСХ имени К.А.Тимирязева,
<BR>ст.преп. А.В.Андреев
<BR>телефон 8 (499) 977-86-64</FONT>
</ADDRESS>
</BODY>
</HTML>