Электронная коммерция. Учебное пособие по выполнению практических работ
.pdf
1.1. Создание Web-документов на языке HTML
Остальные элементы документа разбиваются на два раздела: раздел головной части документа и раздел самого тела документа.
На экране флаги не отображаются, как не отображаются элементы головной части. Отображается только текст.
Раздел головной части документа начинается и заканчивается флагами <HEAD> и </HEAD>. В головной части всегда встреча- ющимся элементом является название документа, помещенное между флагами <TITLE> и </TITLE>.Основное содержание документа располагается между парными флагами <BODY>.
Например:
<HTML>
<HEAD>
<TITLE> название документа </TITLE> </HEAD>
<BODY>
Текст документа
</BODY>
</HTML>
1.1.2.Функциональные блочные элементы. Флаги форматирования текста (теги)
В большинстве Web-документов основными функциональными элементами являются заголовки и абзацы.
Заголовки
Язык HTML поддерживает 6 уровней заголовков. Они отображаются при помощи парных флагов от <H1>...</H1> до <H6>...</H6>. При отображении документов текст разных уровней отображается шрифтами разных размеров. Уровни должны быть вложенными.
Абзацы
Для создания параграфа или абзаца текста используются парные флаги <P> и </P>. Например:
<P> текст первого абзаца </P> <P> текст второго абзаца </P>.
Флаг <P> может быть не парным, т. е. использование закрывающего флага </P> не обязательно. Нажатие на клавишу ENTER недостаточно для перехода на новую строку. Для этой цели испо-
41
Часть 1. Разработка WEB-документов языком HTML
льзуется непарный флаг <BR>. Пустая строка при этом не вставляется.
В качестве ограничителя абзаца может использоваться горизонтальная линейка. Этот элемент задается непарным флагом <HR>.
Горизонтальная линия используется для разделения текста на логические части. Для задания дополнительных параметров горизонтальной линейки используются следующие атрибуты. <HR SIZE = "число"> — задает толщину линии в пикселях. <HR WIDTH = "число" | проценты> — задает длину линии по горизонтали в пикселях или процентах от ширины экрана. <HR ALIGN = left | center | right> — задает выравнивание линии по левому краю, по центру или по правому краю. <HR NOSHADE> — по умолчанию линия выводится с использованием трехмерного эффекта. При использовании данного атрибута линия выводится одним цветом.
Например, если создается горизонтальная линейка шириной в 10 пикселей, занимающая половину ширины окна и расположенную справа, следует записать <HR ALIGN=RIGT SIZE="10" WIDTH="50%">.
Для создания горизонтальной линейки зеленого цвета шириной в 8 пикселей, занимающей 80 % ширины окна при выравнивании по центру, следует записать <HR ALIGN=CENTER SIZE="8" WIDTH="80 %" COLOR="GREEN">.
Соответственно для задания полосы красного цвета следует записать COLOR= "RED", для задания голубого цвета линии следует записать COLOR= "BLUE" и т. д.
1.1.3. Списки
Ненумерованный список
Для вывода информации в виде ненумерованного списка используются флаги <UL> и </UL>. Каждый элемент списка задается при помощи непарного флага <LI>.
В отображаемом тексте ему предшествует символ . Пример:
<UL>
<LI> Пример 1 <LI> Пример 2 <LI> Пример 3 </UL>
На экране это отобразится так:
42
1.1. Создание Web-документов на языке HTML
Пример 1 Пример 2 Пример 3
Нумерованный список
Для вывода информации в виде нумерованного списка используются флаги <OL> и </OL>. Каждый элемент списка задается при помощи непарного флага <LI>.
Пример:
<OL>
<LI> Пример 1 <LI> Пример 2 <LI> Пример 3 </OL>
На экране это отобразится так:
1.Пример 1
2.Пример 2
3.Пример 3
1.1.4. Таблицы
Таблицы удобны для представления больших объемов данных. Таблица в языке HTML задается при помощи парного флага <TABLE>. Она может содержать заголовок, определяемый парным флагом <CAPTION>, и строки таблицы, которые задаются при помощи парных флагов <TR>. Закрывающий флаг </TR> можно опустить. Каждая строка таблицы содержит ячейки таблицы, которые могут относиться к двум разным типам. Ячейки в заголовках столбцов строк задают парным флагом <TH>, обычные ячейки парным флагом <TD>. Закрывающие флаги </TH> и </TD> можно опустить. Атрибуты элементов, используемых при создании таблиц:
a) ALIGN. Элемент — таблица, заголовок, строка, ячейка. Используются для выравнивания таблицы по горизонтали, раз-
мещения заголовка над или под таблицей;
b)WIDTH. Элемент — строка, ячейка. Задается ширина;
c)HIGHT. Элемент — ячейка. Задается высота;
d)BGCOLOR. Элементы — таблица, ячейка. Задает цвет фона;
e)BORDER. Элемент — таблица. Отображение границ ячеек и внешней рамки таблицы.
43
Часть 1. Разработка WEB-документов языком HTML
1.1.5. Комментарии
Комментарии помещаются между флагами <DL> и </DL>. Термины внутри комментария начинаются флагом <DT>, определения начинаются с флага <DD>.
Синтаксис.
<DL> <DT>...<DD>...
</DL>
Пример:
<DL>
<DT> Байт <DD> Содержит 8 битов.
<DT> Килобайт <DD> Содержит 1024 байта. </DL>
Этот текст будет отображен так:
Байт Содержит 8 битов. Килобайт
Содержит 1024 байта.
1.2. Форматирование текста
Управление форматированием текста не является основной задачей языка HTML. Поэтому текстовые элементы, выполняющие задачи форматирования, рассматриваются как устаревшие. К ним относятся версии, начиная с HTML 4.0. Их использование не рекомендуется.
Парный флаг <Font> управляет параметрами шрифта. Он должен содержать хотя бы один из трех атрибутов: Color=, Face=, Size=. Атрибут Color= задает цвет текста. Например, Color= "Red". Атрибут Size= определяет размер шрифта в относительных единицах от 1 до 7. Например, Size=4. Этот атрибут можно задавать со знаком + или – относительно текущего размера. Например, <Font Size=+2>. Атрибут Face= задает гарнитуру шрифта.
Пример:
<FONT SIZE=4> Шрифт 4-го размера </FONT>
<FONT COLOR = "GREEN"> Этот текст зеленый </FONT> Начертание символов задается при помощи парных флагов:
<B> (полужирный шрифт), <I> (курсив), <U> (подчеркнутый
44
1.2. Форматирование текста
текст), <S> (вычеркнутый текст). Их использование не рекомендуется. Вместо них следует использовать парные флаги <EM> (выделение), <STRONG> (сильное выделение). Для описания компьютерных программ используют парные флаги <CODE> (исходный текст программы), <KBD> (текст, вводимый с клавиатуры), <SAMP> (пример ввода программы), <VAR> (программные переменные).
1.2.1. Гиперссылки
HTML-документ является гипертекстовым. Флаг гиперссылки является одним из наиболее важных флагов языка HTML. Этот флаг помечает текст или графическое изображение как цель перемещения в Интернете. Гиперссылка определяется парным флагом <А> и </А>. Флаг <А> включает в себя несколько атрибутов. Обязательным является наличие одного из следующих атрибутов — Name или HREF. В качестве значения атрибута используется URL-адрес документа, на который указывается ссылка. Им может быть произвольный документ, располагающийся на общедоступном узле сети (Web-узел, архив FTP и пр.). Например, чтобы попасть на сайт файловых архивов, следует записать гиперссылку <A HREF= ftp.caroms.com>. При указании директории /Pub/Gutenberg попадаем в каталог хранения книг в электронном виде. Для попадания на Web-сайт, например сайт провайдера Cityline, следует указать гиперссылку
<A HREF= http://www.cityline.ru>.
Для создания гиперссылки, например, во втором задании на первое Zadanie с именем Zadanie1 в текст второго задания следует вставить строку
<A HREF="Zadanie1.htm"> Zadanie1</A>.
1.2.2. Подготовка и использование графических файлов
Графические иллюстрации являются в большинстве случаев неотъемлемой частью Web-документа. Для использования графиче- ских файлов используются два формата — GIF и JPEG. Формат GIF ориентирован на медленные сети передачи. Он обеспечивает поддержку изображений, использующих до 256 цветов. В настоящее время известны две версии GIF87 и GIF89а. Версия GIF89 обеспечивает хранение анимационных файлов. Файл упакован и может занимать значительно меньше места, чем неупакованный
45
Часть 1. Разработка WEB-документов языком HTML
рисунок, например, в формате .bmp. Формат JPEG является общедоступным и свободно распространяемым форматом. Он лучше подходит для хранения фотографической информации, репродукций картин и т. п.
Формат JPEG абсолютно не подходит для хранения черно-бе- лой информации и информации, состоящей только из правильных геометрических фигур. Для заполнения Web-документов можно выделить следующие типы графической информации:
картинки для обоев документов;
кнопки и заголовки;
картинки или непосредственно графические материалы.
Рисунки хранятся на Web-узлах в отдельных файлах, но отображаются как элементы Web-страниц. Для вставки рисунка используется текстовой элемент, задаваемый непарным флагом <IMG>. Он должен содержать обязательный атрибут, задающий адрес файла с изображением в относительной или абсолютной форме.
Например: <IMG SRC= "Ris1.gif">.
При отображении рисунка браузер по умолчанию использует его реальные размеры. Атрибуты WIDTH= и HIGHT= задают ширину и высоту рисунка в пикселях.
Например:
<IMG SRC= "Ris2.jpg" WIDTH="50" HEIGHT="40">.
Для указания способа взаимодействия рисунка с текстом используется атрибут ALIGN=, который может принимать значения:
BOTTOM — нижняя граница изображения совмещается с основанием текстовой строки;
MIDDLE — середина изображения совмещается с серединой текстовой строки;
TOP — верхняя граница изображения выравнивается по верхнему краю текстовой строки;
LEFT — изображение размещается у левого края страницы;
RIGHT — изображение размещается у правого края страницы, а текст размещается слева от него.
Например:
<IMG SRC = "ris3.gif" ALIGN = BOTTOM>.
46
1.2. Форматирование текста
Фоновый рисунок (обои) задается при помощи атрибута BACKGROUND =, флага <BODY>. Значением этого атрибута должен быть абсолютный или относительный адрес URL для файла с изображением. Например:
<BODY BACKGROUND = "waves.gif" TEXT = "YELLOW">.
Картинки, которые можно использовать в качестве фона, размещены на Web-сервере http://www.design.ru/free/backgrounds/.
Рассмотрим использование рисунков из картинной галереи ClipArt. Для создания файла с рисунком из этой коллекции вызывается программа WORD 2000 или WORD 2002, и после ее открытия выполняются команды Вставка Рисунок Картинки. Рассмотрим более подробно вставку картинки из коллекции ClipArt при использовании программы WORD 2002. В появившейся диалоговой панели Вставка картинки в разделе Поиск клипа â îêíî Èñ-
кать текст вводится тема картинки, например Ëþäè. Нажимается кнопка Найти. Вид диалоговой панели изменяется. На ней появляются образцы картинок на указанную тему. После щелчка левой клавиши мыши по одной из картинок она вставляется в документ Word. Нажатие правой клавиши мыши при наведении курсора на рисунок вызывает появление контекстного меню. Пункт меню Границы и заливка позволяют создать рамку вокруг рисунка, выбрать тип рамки, ее цвет и ширину. Можно также вставить горизонтальную линию выбранного типа. Закрывается диалоговая панель Вставка картинки. Для этого следует щелкнуть по крестику в правом верхнем углу панели. Картинка сохраняется после выполнения команд Файл Сохранить как веб-страницу. В появившейся диалоговой панели Сохранение документа указывается путь к файлу с картинкой. Файл следует сохранить в личной папке студента. Указывается имя файла, например Ris1. Тип файла устанавливается как веб-страница. После нажатия на клавишу Сохранить
âличной папке студента появляется папка с именем Ris1.files. Эта папка содержит файл с именем image002.gif, в котором сохранен рисунок. На этот рисунок следует ссылаться при вставке рисунка
âвеб-страницу. Для этого следует вставить строку
<IMG SRC="RIS1.files/image002.gif" ALIGN="Middle">. Расположение рисунка принято посредине страницы.
47
Часть 1. Разработка WEB-документов языком HTML
Лабораторный практикум по первой части третьей темы
Задание 3.1. Создание простейшей Web-страницы
Цель занятия: научиться создавать простейшую Web-страницу. На выполнение задания 1 отводится 15—30 минут.
Выполнение:
1.Запустите текстовый редактор Блокнот, последовательно выполняя команды Пуск Программы Стандартные Блокнот.
2.Введите текст, согласно следующему ниже Листингу 3.1.
Листинг 3.1. Код первой программы на языке HTML
<HTML>
<HEAD>
<TITLE> Первая Web-страница студента (фамилия) </TITLE>
</HEAD>
<BODY>
Первая Web-страница создана (дата) и будет сохранена в папке (имя) под именем Zadanie1.htm
</BODY>
</HTML>
Для создания фона (обоев) флаг BODY следует записать так:
<BODY bgcolor=blue text=red> èëè
<BODY bgcolor=2.jpg text=yellow>.
В первом случае фон будет голубым, а текст будет красного цвета. Во втором случае фон задается картинкой с именем 2.jpg, а текст будет желтого цвета.
3. Сохраните документ в своей папке под именем Zadanie1.htm и второй раз под именем Zadanie1.txt. Перед сохранением под именем Zadanie1.htm убедитесь, что сброшен флажок Не показывать расширения для зарегистрированных типов файлов. Для этого нужно активизировать команды Пуск Настройка Свойства папки Вид. Если не сбросить флажок, то редактор Блокнот может автоматически добавить в имени задания расширение .txt. На вопрос, нужно ли сменить расширение, следует дать положительный ответ.
48
Лабораторный практикум по первой части третьей темы
4.Дважды щелкните по значку с именем Zadanie1.htm или запустите программу Internet Explorer при помощи команд Пуск Программы Internet Explorer или при помощи значка этой программы, который располагается на рабочем столе. Затем активизируйте команды Файл Открыть. Щелкните левой кнопкой мыши при расположении курсора на кнопке Обзор. Откройте файл Zadanie1.htm, который должен находиться в папке с вашей фамилией.
5.Посмотрите, как отображается этот файл. Посмотрите отображение заголовка документа, расположенное между флагами <TITLE> и </TITLE>, и отображение содержимого основного документа, расположенное между флагами <BODY> и </BODY>.
6.Созданный при помощи программы Internet Explorer документ имеет вид, показанный на приводимом ниже рисунке 3.1.
Первая WEB-страница студента Иванова
Первая WEB-страница создана 15.11.01г. и будет сохранена в папке Иванов под именем Zadanie1.htm
Рис. 3.1. Моя первая Web-страница
Задание 3.2. Изучение приемов форматирования абзацев
Цель занятия: научиться создавать простейшую Web-страницу с применением приемов форматирования абзацев. На выполнение задания 2 отводится 1 час.
1.Скопируйте в свою папку файл с именем Zadanie1.txt.
2.Откройте этот файл и удалите текст между флагами <BODY>
è</BODY>.
3.Заголовок первого уровня заключается между флагами <H1>
è</ H1>, заголовок второго уровня заключается между флагами <H2> и </H2>. Отдельный абзац вводится с флага <p>, как это показано в тексте приводимого ниже задания.
4.После флага <BODY> введите новый текст.
<H1> 1. Дополнительные средства подготовки документов </H1>. Отделите последующий текст зеленой горизонтальной линией
при помощи флага <HR>, записав строку:
<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR="GREEN">. Далее введите: <H2> 1.1. Гиперссылки</H2>.
49
Часть 1. Разработка WEB-документов языком HTML
В WORD 97/2000 автоматически оформляют пути к файлам с их именами, а также адрес Web-страниц и электронной почты в качестве гиперссылок.
Пример создания гипертекстовой ссылки рассмотрен выше. Ниже приведен пример создания гиперссылки на файл Zadanie1.htm, который находится на жестком диске локального компьютера.
5. Отделите этот абзац от остального текста красной горизонтальной линии при помощи флага <HR>, записав строку:
<HR SIZE=5 WIDTH=80% ALIGN=CENTER COLOR= "RED">. 6. Введите еще один абзац текста, начав его с флага <p>. На-
пример:
Построение маркированного и нумерованного списков. 7. Постройте маркированный список. Для этого введите:
<UL>
<LI> Задание 3.1 <LI> Задание 3.2 <LI> Задание 3.3
</UL> стройте нумерованный список. Для этого введите: <OL>
<LI> Задание 3.1 — простая веб-страница
<LI> Задание 3.2 — веб-страница с элементами форматирования <LI> Задание 3.3 — включение таблицы в веб-страницу </OL>
8.Отделите этот абзац полосой желтого или зеленого цвета.
9.Вставьте из коллекции ClipArt рисунок. Порядок действий описан выше в разделе 1.3.2. Расположите рисунок с правой стороны страницы.
10.Вставьте гиперссылку на файл с именем Zadanie1.htm. Для этого после рисунка вставьте строки:
<p> Активизируйте гиперссылку
<A HREF="Zadanie1.htm"> Zadanie1</A>.
11.Сохраните этот документ под именем Zadanie2.htm и второй раз под именем Zadanie2.txt.
12.Запустите обозреватель Internet Explorer (Пуск Программы Internet Explorer). Задайте команду Файл Открыть. При помощи кнопки Обзор откройте файл Zadanie2.htm, либо дважды щелкните по значку с именем Zadanie2.htm.
50