Second_magistr / ВЕБ-програм / методичка
.pdfHTML и VBScript |
3 |
Введение
С точки зрения пользователя, компьютерная сеть Internet представляет собой набор организованных информационных ресурсов – связанных между собой Web-страниц, ящиков электронной почты e-mail, ресурсов мультимедиа и др. Доступ к определенным ресурсам осуществляется по их сетевым адресам с помощью специальных программ. Компьютер, настроенный на работу в качестве сервера Internet, предоставляет хранящуюся на нем информацию всем, кто обращается к нему по сети.
Для адресации отдельных компьютеров в Internet могут использоваться как IP-адреса, так и доменные имена. На самом деле доменное имя представляет собой ряд имен, разделенных точками. Это имя, как правило, содержит обозначение крупного раздела Internet, которому принадлежит данный ресурс (страна, область деятельности и т.д.), и хост-имя, которое часто употребляется для обозначения владельца сайта.
На самом деле, можно считать, что Internet объединяет внутри себя несколько сетей, каждая из которых используется для своей собственной цели. Например, используя одну и ту же линию соединения, можно: 1) получить или послать письмо электронной почтой, 2) выйти на какую-либо Web-страницу, 3) загрузить файл с сервера и др. Каждое из этих действий предполагает использование своей системы правил (протокола) обмена информацией с сервером Internet. Наиболее часто используемые протоколы:
•http – доступ к ресурсам HTML, то есть Web-страницам
(hypertext transfer protocol);
•ftp – доступ к файлам на Web-сервере (file transfer protocol);
•mailto – отправка сообщений по электронной почте;
•news – доступ к новостям USENET;
•file – доступ к файлу на локальном диске.
Полная ссылка на ресурс Internet включает в себя не только его местоположение, но и схему доступа в форме “протокол://адрес_ссылки”. Полный Internet-адрес иногда называют URL – Uniform Resource Locator.
4
Большая часть ресурсов Internet — это Web-страницы, орга-
низованные в виде документов HTML (HyperText Markup Language
– язык разметки гипертекста). Просмотр HTML-документов в Интернет производится с помощью специальных программ – Web-
браузеров (browsers).
Для создания и редактирования HTML-документа не требуется каких-либо специальных программ. Язык HTML ориентирован на обычный ASCII-текст, в который вводятся некоторые дополнительные команды, которые управляют его отображением в окне браузера.
ЛАБОРАТОРНАЯ РАБОТА № 1
Структура HTML-документа. Элементы форматирования текста
Для создания и редактирования документа HTML можно использовать любой текстовый редактор, к примеру, Блокнот (Notepad), входящий в набор стандартных программ Windows.
Откройте Блокнот через меню Пуск/ Программы/ Стандартные/ Блокнот и наберите в окне редактора следующий текст
<HTML>
<HEAD>
<TITLE>Структура Web-страницы</title> </head>
<BODY bgcolor=“yellow”> <H1>The first Web-page</h1>
<P>Once a race of hyperintellegent pan-dimensional beings build themselves a gigantic supercomputer called Deep Thought to calculate once and for all the Answer to the Ultimate Question of Life, the Universe, and Everything. <P>For seven and a half million years, Deep Thought computed and calculated, and in the end announced
that the answer was in fact Forty-Two –– and so another, even bigger, computer had to be built to find out what the actual question was.
<P><I>Douglas Adams, “The restaurant at the End of the Universe”</i>
HTML и VBScript |
5 |
</body>
</html>
Запишите документ в свой рабочий каталог под именем struct.htm (меню Файл/ Сохранить как). После этого запустите Internet Explorer и откройте для просмотра только что записанный файл (меню Файл/ Открыть/ Обзор). Вид документа в окне обзора показан на рис. 1.1. Фон страницы должен быть желтым.
Рис. 1.1. Web-страница struct.htm в окне Internet Explorer
Обратите внимание на то, как ведет себя текст внутри окна при изменении размеров окна. Потяните мышью за край окна, или нажмите на соответствующую кнопку в верхнем правом углу – вы увидите, что текст подстраивается под размеры окна таким образом, чтобы по возможности полностью в нем помещаться.
6
Исходный текст файла struct.htm показывает общую структуру любого HTML-документа. Видно, что документ состоит из некоторого набора служебных элементов (так называемых тегов – tags), которые записываются в угловых скобках. Причем имеется стартовый тег (обычно записывается прописными буквами, к примеру, <HEAD>), и соответствующий ему конечный тег (строчными буквами и с обязательным символом слэша – </head>). Пространство между стартовым и конечным тегом определяет область действия данного элемента. Некоторые элементы имеют только стартовый тег и не имеют конечного (например, команда выделения нового абзаца <P>), но таких элементов немного.
Документ в формате HTML обязательно содержит теги <HTML> – </html>, которые создают внешнее обрамление для остальных элементов. Для формирования структуры страницы используются теги <HEAD> и <BODY>, которые задают соответственно область заголовка и тело документа. В области заголовка определяется элемент <TITLE>, текст внутри этого элемента задает имя, под которым страница появится в окне браузера (см. рис. 1.1).
В теле HTML-документа также содержатся несколько элементов <P>, которые разделяют текст на абзацы. Этот элемент не имеет конечного тега, начало нового абзаца автоматически закрывает предыдущий абзац. В тексте также используется элемент <I>, который позволяет отобразить часть текста курсивом.
Следующее, на что следует обратить внимание, – это то, как записан стартовый тег <BODY>. Внутри тега задана строка bgcolor=“yellow”. Эта запись определяет атрибут тега <BODY>, в данном случае – цвет фона Web-страницы (background color). Изменяя атрибут тега, вы можете управлять его свойствами, к примеру менять параметры шрифта, его размеры, цвет, выбрать в качестве фона какое-либо изображение и т.д.
Большинство атрибутов необязательны, то есть вы можете их не указывать. В этом случае браузер будет использовать те параметры, которые определены по умолчанию. К примеру, если удалить запись bgcolor=“yellow” из текста приведенного выше примера, и загрузить файл в окно браузера заново, то цвет фона страницы станет серым (цвет по умолчанию).
Рассмотрим еще один пример:
HTML и VBScript |
7 |
<HTML>
<HEAD>
<TITLE>Элементы форматирования текста</title> </head>
<BODY>
<HR>
<P> Текст абзаца
<P align=“center”> Центрированный текст абзаца <P> <B> Использование элемента B </b>
<P> <BIG> Использование элемента BIG </big> <P> Обычный текст и <SUB> элемент SUB </sub> <P> Обычный текст и <SUP> элемент SUP </sup>
<P> <CENTER> Использование элемента CENTER </center> <P> Элемент BR обеспечивает разрыв <BR> строки
<P>
<P><MARQUEE bgcolor= "green" height=50 behavior="alternate" >
Бегущая строка #1</marquee>
<P><MARQUEE direction="right">Бегущая строка #2</marquee> <HR>
<H3>Использование шрифтов различных размеров </h3> <P><FONT size=7> Шрифт размера 7</font>
<P><FONT size=6> Шрифт размера 6</font> <P><FONT size=5> Шрифт размера 5</font> <P><FONT size=4> Шрифт размера 4</font> <P><FONT size=3> Шрифт размера 3</font> <P><FONT size=2> Шрифт размера 2</font> <P><FONT size=1> Шрифт размера 1</font> <HR>
<P><FONT size=5 color="green" face="Courier">
Зеленый текст шрифтом Courier</font>
</body>
</html>
Запишите документ под именем format.htm. Перейдите в окно IE и загрузите его для просмотра. Этот пример показывает некоторые приемы форматирования текста Web-страницы. Все они связаны с использованием определенных тегов. Далее мы рассмотрим их по порядку.
<BODY> </body>
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Внутри стартового тега BODY можно расположить атрибуты, которые будут влиять на установки для всей страницы в целом.
8
Один из самых полезных для дизайна – атрибут background, он определяет фон страницы. В качестве фона можно использовать любое графическое изображение в формате GIF или JPEG:
background=“Путь к файлу фона”
Пример: background=“file://D:\HTML\picture.gif”
Если графический файл находится в том же каталоге, что и HTMLдокумент, то полный путь и протокол доступа можно не указывать,
а записать только имя файла (background=“picture.gif”).
Более простое оформление фона страницы сводится к заданию его цвета. Цвет может быть задан по имени (“black”, “green”, “olive” и др.), или с использованием шестнадцатеричных чисел, которые определяют интенсивности красной, зеленой и синей компонент цвета (RGBкомпоненты).
bgcolor=“#RRGGBB”
Пример: bgcolor=“#00FFFF” (цвет “aqua” – аквамарин).
Для цвета текста используется атрибут text:
text=“#RRGGBB”
Пример: text=“#800080” (“purple” – пурпурный).
Для цвета гиперссылок используется атрибут link:
link=“#RRGGBB”
Пример: link=“#000080” (“navy” – ультрамарин).
Таким образом, стартовый тег BODY может выглядеть так:
<BODY background=“file://D:\HTML\ground.gif” text=“white” link=“#000080”>
<H1> </h1>
Элемент заголовка внутри текста (header). В HTML существует 6 уровней заголовков, которые обозначаются как H1..H6. Заголовок уровня 1 – самый крупный, уровня 6 – самый мелкий.
Для заголовков можно использовать атрибут align, задающий выравнивание влево, по центру или вправо
align=“left”
align=“center”
align=“right”
Пример: <H1 align=“center”> Расписание занятий </h1>.
<HR>
Рисует простую горизонтальную линию (horizontal rule). Часто встречающийся элемент, позволяет делить страницу на части. Не
HTML и VBScript |
9 |
имеет конечного тега, допускает ряд атрибутов, позволяющих задать толщину линии size, длину width, цвет color, выравнивание align. К примеру, описание
<HR>
задает белую линию толщиной в один пиксел и длиной от одного края страницы до другого. Другой пример:
<HR size=3 width=200 color=red align=“center”>
– определяет линию красного цвета толщиной в 3 пиксела и длиной 200 пикселов, выровненную по центру страницы.
<P> </p>
Элемент абзаца (paragraph), разбивает текст на отдельные блоки, каждый из которых начинается с новой строки. Вместе с этим элементом также можно использовать атрибут align, который выравнивает текст абзаца к левой границе окна “left”, по центру “center”, или к правой границе “right”.
<BR>
Элемент, обеспечивающий принудительный переход на новую строку (break). Он имеет только стартовый тег. В месте его размещения строка заканчивается, а оставшаяся часть текста печатается с новой строки.
<NOBR> </nobr>
Этот элемент по своему действию противоположен предыдущему. Текст, записанный между тегами <NOBR> и </nobr>, будет выведен в одну строку. Длинная строка может не уместиться на экране, тогда для ее просмотра используется полоса прокрутки.
<CENTER> </center>
Элемент для центрирования текста, а точнее, любого содержимого. Не является общеупотребительным. В тех случаях, когда это возможно, вместо него используют атрибут align=“center”.
<B> </b>
Выделение текста полужирным (bold) шрифтом.
<I> </i>
Выделение текста курсивом (italic).
10
<BIG> </big>
Увеличенный размер шрифта.
<SMALL> </small>
Уменьшенный размер шрифта.
<U> </u>
Подчеркнутое начертание текста.
<TT> </tt>
Элемент, обозначающий текст телетайпа (teletype). Его особенность заключается в использовании моноширинного шрифта (то есть шрифта, в котором все буквы имеют одну и ту же ширину).
<FONT> </font>
Определение типа, размера, и цвета шрифта. Все эти характеристики определяются с помощью соответствующих атрибутов. Абсолютный размер шрифта задается при помощи size
size=2
Этот атрибут может принимать значения от 1 (самый мелкий размер) до 7 (самый крупный).
Для элемента FONT можно использовать атрибут цвета color, который так же, как и bgcolor элемента BODY, может быть задан либо по названию, либо по значениям RGB-компонент:
color=“blue”
Атрибут задает тип шрифта. К примеру, запись
<FONT face=“Times New Roman” size=2 color=“grey”>
задает шрифт Times New Roman размером 2, серого цвета. Следует однако помнить, что при использовании атрибута
face может возникнуть следующая проблема. Web-страницы должны одинаково просматриваться на любых компьютерах, но нет гарантии, что на каждом из них окажется нужный шрифт. Если в системе не установлен шрифт с точно таким же названием, то браузер будет использовать стандартный шрифт по умолчанию. Поэтому, если вы собираетесь разместить страничку в Internet, следует избегать использования экзотических шрифтов.
ЗАДАНИЕ :
HTML и VBScript |
11 |
Создайте Web-страничку с произвольным текстом. Разбейте текст на абзацы, выделите заголовки, при необходимости используйте шрифты различного размера и начертания, а также специальные команды форматирования. Подберите в качестве фона какое-либо графическое изображение, либо просто выберите цветной фон. Основное требование при выборе цветов — текст на странице должен быть контрастным и хорошо читаемым.
ЛАБОРАТОРНАЯ РАБОТА № 2
Cписки и таблицы
Многие современные текстовые редакторы предоставляют пользователю возможность организовать т.н. списки (lists). Список отличается от обычного текста прежде всего тем, что пользователю не нужно заботиться о нумерации его пунктов – эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения.
В HTML также есть инструменты для создания списков. Имеется несколько разновидностей списков.
<UL> <LI> </ul>
Самый простой – ненумерованный список (unordered list). Рассмотрим его использование на примере
<UL>
<LI> Элемент 1 <LI> Элемент 2 <LI> Элемент 3 </ul>
Элемент UL является обрамлением списка и позволяет отделить один список от другого. Эле-
•Элемент 1
•Элемент 2
•Элемент 3
Рис. 2.1. Ненумерованный список
12
мент LI обозначает каждый из пунктов.
Вставьте этот листинг в тело HTML-документа и запишите в файл ulist.htm. На рис. 2.1 показано, как будет выглядеть ненумерованный список в окне Web-браузера.
<OL> <LI> </ol>
Нумерованный список (ordered list). Очень похож на предыдущий, за исключением того, что в окне браузера все его элементы будут пронумерованы в порядке возрастания:
<OL type=“1”> <LI> Borland <LI> Microsoft <LI> Sun
</ol>
На рис. 2.2 показан нумерованный список. Вы можете выбрать способ нумерации с помощью атрибута type
(type=“1” – 1,2,3..; “I” – I,II,III..; “a” – a,b,c,.. и др.).
Для создания сложного иерархического списка используют принцип вложения. При этом внутрь некоторого элемента списка помещают еще один список. Вложенный список будет располагаться с небольшим отступом вправо относительно списка верхнего уровня. Пример:
<UL>
<LI> Outer element 1 <OL>
<LI> inner 11 <LI> inner 12 </ol>
<LI> Outer element 2 <OL>
<LI> inner 21 <LI> inner 22