ОСНОВНЫЕ СВЕДЕНИЯ О ЯЗЫКЕ HTML

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

Создание web - страниц

Методические указания к выполнению лабораторных работ

по дисциплине «Сети ЭВМ и коммуникации»

 

 

Саратов 2013
Задание для лабораторных работ

По дисциплине «Сети ЭВМ и коммуникации»

Часть 1. Создание web-страниц с использованием HTML

1. Web- страница с графическими картинками, разными типами фона, шрифтов и гипертекстовыми ссылками.

2. Страница с видеофрагментом (файл .avi или анимированный .gif) и бегущей строкой.

3. Страница с закладками и таблицей.

4. Страница с интерактивными графическими изображениями:

· типа "ссылка-картинка", т.е. вставка графической картинки в гипертекстовую ссылку;

· сегментированные графические картинки-ссылки (типа MAP).

5. Документ HTML с фреймами 2-х типов:

· разделение страницы;

· плавающий фрейм.

6. Документ HTML с формами:

· кнопки;

· пароль;

· окно для ввода текста;

· выпадающее меню;

· переключатели типа "RADIO";

· флажки.

Часть 2. Создание web-страниц с использованием Java Script

1.(8) В документе расположено 4 изображения. Два текстовых поля дают возможность вести номера изображений, которые нужно поменять местами. Написать сценарий, осуществляющий такой обмен.

 

2.(9) Для объекта student определено 5 свойств: имя и 4 оценки, полученные на экзаменах. Найти средний балл студента и определить размер стипендии: Ср.Б.=5 – повышенная, 5< Ср.Б. <4 – обычная. Если есть оценки 3 и 2 – стипендия отсутствует.

 

3.(10) По заполненной экзаменационной ведомости (таблица: фамилия студента – оценка на экзамене) создать сводку результатов проведения экзамена (присутствовало - … чел., оценки: отл.- … чел., хор. - … чел., удовл. - …чел., неуд. – …чел., не явились – …чел.)

 

4.(11) В строку ввода текста вводится словосочетание. Определить, является ли данное выражение палиндромом (перевертышем, читающимся как слева направо, так и справа налево, например: ШАЛАШ; В РЕЗЕРВ; А РОЗА УПАЛА НА ЛАПУ АЗОРА и т.п.)

 

5. (12) а) Создать страницу с таймером, фиксирующим время пребывания на странице.

б) Создать страницу с интерактивной анкетой, где присутствуют следующие элементы:

· запрос имени и выдача диалогового окна с этим именем

· разные варианты ответов на вопрос с разными баллами за ответ

· суммирование баллов и разные варианты ответов при разных суммах через диалоговое окно.

Часть 3. Создание интерактивного web-приложения на основе технологии «клиент-сервер» с использованием графического интерфейса

Разработать интерактивную сетевую игру типа «крестики-нолики», «шашки», «морской бой», «питон» с графическим интерфейсом, установкой соединения «клиент-сервер» и обменом сообщениями между двумя узлами сети.

 

 

ЛИТЕРАТУРА

1. Пластун И.Л. Создание web-страниц. Методическое пособие.-Саратов: Изд-во СГТУ,1999, -30с.

2. Гончаров А. HTML в примерах. -СПб.: Питер. 1997. -192с.

3. Дмитриева М.В. JavaScript. Быстрый старт. – СПб: БХВ-Петербург, 2002. –336с.

4. Федоров А.Г. JavaScript для всех. -М.: КомпьютерПресс, 1998. -384с.

5. Мазуркевич А.М. PHP: настольная книга программиста / А.М.Мазуркевич, Д.С.Еловой . –Минск.: Новое знание, 2003, -480с.

6. Котеров Д.В. PHP 5. / Д.В.Котеров, А.Ф.Костарев. –СПб: БХВ-Петербург, 2006, -1120с.

ВВЕДЕНИЕ

 

Данные методические указания предназначены студентам очной и заочной форм обучения специальности 220400 при изучении дисциплины "Архитектура ВС и сетей". Они также могут быть полезны аспирантам гуманитарного профиля, изучающим дисциплину "Основы современных информационных технологий",а также всем пользователям ПК и сети Internet, желающим повысить свой уровень знаний в области сетевых технологий и освоить процесс создания собственных Web- страниц. Методические указания содержат основные сведения о языке разметки гипертекста HTML и программном обеспечении, которое используется для создания WEB- страниц и работы в сети Internet.

Цель методических указаний - помочь пользователям в подготовке документов HTML с целью размещения своей информации (например, рекламной) на сервере поставщика услуг Internet.

В настоящее время глобальная сеть Internet объединяет миллионы компьютеров, расположенных по всему миру. Большинство таких компьютеров - это рабочие станции конечных пользователей, подключенные к сети Internet через модем и обычную телефонную линию. Другие компьютеры выполняют функцию серверов и служат хранилищами информации в сети. Сервер может быть подключен к Internet через модем, адаптер высокоскоростного канала связи ISDN, оптоволоконную линию связи или спутниковую линию.

В сети Internet имеются серверы, предоставляющие различные услуги. Это серверы FTP, Gopher, почтовые серверы (серверы e-mail), серверы новостей (серверы News), серверы WWW (называемые также Web- серверы). Последние могут хранить любые файлы (как серверы FTP) и текстовые документы (как серверы Gopher) и в настоящее время являются наиболее популярными поставщиками Internet- услуг.

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

Страницы сервера WWW также содержат ссылки на другие страницы, которые могут располагаться на любом другом сервере, подключенном к сети Internet. В том числе возможны ссылки на серверы FTP, Gopher и конференции сервера новостей, электронные почтовые адреса.

Пользователь устанавливает соединение с сервером WWW через сеть Internet с помощью специальной программы просмотра Web- страниц. Среди наиболее известных программ просмотра Web- страниц можно выделить браузеры Netscape Navigator и Microsoft Internet Explorer. При этом сама страница в Internet создается с помощью популярного языка гипертекстовой разметки документов HTML. На личных страничках в Internet можно рекламировать и продавать товары и услуги, искать и предлагать работу, обучать и учиться, можно заявить о себе всему миру.

Конечные пользователи обычно подключаются к одному из серверов, расположенных в том городе, в котором находятся они сами (к так называемому Internet- провайдеру). При этом соединение через телефонную сеть получается локальным, а не междугородным, что стоит существенно дешевле. При установке соединения пользователь указывает адрес сервера WWW. Дополнительно он может указать путь к файлу страницы WWW (адрес Web- страницы), которая должна быть отражена сразу после подключения к серверу.

Типичный адрес для WWW имеет вид:

 

http:// WWW. название. домен / имя файла,

 

где название- это часть адреса, который часто употребляется для обозначения владельца сайта (набора Web- страниц),

домен- обозначение крупного "раздела" Internet: страны, области деятельности и т.д.

Полученный документ HTML интерпретируется браузером и отображается в его окне. Затем связь с сервером разрывается. Если на странице есть графические изображения, браузер повторно устанавливает соединение с сервером, получая от него файлы графических изображений. При получении каждого такого файла соединение сначала устанавливается, а затем разрывается.

 

ПРОСМОТР WEB-СТРАНИЦ

 

Как уже было сказано выше, наиболее популярными программами просмотра web-страниц являются браузеры Netscape Navigator и Microsoft Internet Explorer. Браузер - внешне очень простая программа. Для успешной работы с ней
достаточно нескольких навигационных кнопок, вынесенных на основную панель инструментов.

В данных методических указаниях детально не рассматриваются вопросы подключения к Internet, поскольку для изучения языка гипертекстовой разметки HTML и создания web-страниц достаточно функционирования программы в локальном режиме.

Для того, чтобы открыть локальный файл в Internet Explorer, достаточно ввести в поле Адрес(или в поле Netsite в Netscape Navigator) ссылку на файл. Простейший вариант - указать путь и имя файла, находящегося на вашем компьютере: C:\HTML1\page1.htmили file://C:\HTML1\page1.htm,при этом подключение к сети Internet осуществлять не нужно. Если же ваш компьютер подключен к Internet, то в том же поле Адресдля выхода на какой-нибудь сервер и просмотра web-страницы, находящейся на нем, нужно набрать адрес этого сервера, например, http://www.ru.msn.com/ или просто www.ru.msn.com и при удачном соединении соответствующая web-страница отобразится в окне браузера.

Другой способ открытия web- документа - c использованием команды Файл>Открыть в меню над панелью инструментов. При этом активизируется диалоговое окно, где доступ к папкам осуществляется после нажатия кнопки Обзор.

На панели инструментов над строкой адреса расположен ряд кнопок для работы с web-документами:

назад (или back) - переход на страницу, которая была открыта раньше текущей;

вперед (forward) - движение по цепочке просмотренных документов вперед, если были выполнены переходы назад;

стоп(stop) - останов загрузки текущего документа;

обновить(reload) - повторная загрузка текущей страницы или продолжение загрузки, если она была прервана. Для разработчика web- документов это - главный инструмент. Если вы что-то изменили в своем файле, то увидеть как он теперь будет выглядеть, можно только перезагрузив документ.

основная страница(home) - переход к основной странице провайдера или фирмы, от имени которой вы работаете в сети или любой другой страницы, адрес которой указан в качестве основного в команде меню Вид>Параметры(его можно изменить);

поиск -поиск информации в Internet с помощью того или иного поискового сервера;
избранное- каталог необходимых вам web-страниц, куда можно добавить страницу или загрузить документ из этого списка;

печать (print) - вывод на печать текущего документа;

шрифт - изменение размера шрифта на текущей странице. Изменение размера происходит циклически (после каждого нажатия кнопки программа перебирает доступные базовые размеры шрифта).

Для сохранения просмотренных документов используется команда меню Файл>Сохранить как файл, позволяющая скопировать текущую web- страницу в выбранную вами папку. При этом копируется только текст документа. Для сохранения рисунков надо щелкнуть на каждом правой кнопкой мыши и выбрать команду Сохранить рисунок как...

Для просмотра и редактирования текста web-документа используются команды меню Вид>Источник или Правка>Текущая страница. При этом подключаются вешние текстовые редакторы Windows: WordPad или Блокнот, а в случае правки - MS Word. Редактирование страниц в случае Вид>Источник более удобно, поскольку позволяет сразу увидеть результат изменений. После модификации страницы ее надо сохранить в текстовом редакторе, а затем в браузере нажать кнопку Обновить.

ОСНОВНЫЕ СВЕДЕНИЯ О ЯЗЫКЕ HTML

 

Команды языка HTML, называемые тегами (или управляющими кодами), представляют собой зарезервированные последовательности символов, начинающиеся с <(знака меньше) и заканчивающиеся > (знаком больше). В большинстве случаев теги используются симметричными парами. При этом завершающий тег отличается от открывающего символом / (знак дроби). Например, если у нас есть гипотетический атрибут форматирования текста, управляемый кодом <Х>, и мы хотим применить его к словам "Это мой текст", HTML - последовательность кодов и собственно текста будет выглядеть так:

 

<Х>Это мой текст</Х>

 

HTML команды можно разбить на следующие группы:

· команды структурыопределяют документ HTML в целом и указывают начала и концы его логических частей;

· команды форматирования текста отмечают концы абзацев, принудительные переводы строки, заголовки, сдвинутый или предварительно сформатированный текст и т.п.;

· команды форматирования заголовковобеспечивают оформление заголовков и подзаголовков шести различных уровней;

· команды форматирования символов;

· команды форматирования списков;

· команды вставки графики;

· команды связей.

Многие команды HTML, помимо своего названия, содержат в открывающем теге так называемые атрибуты тега - специальные параметры, определяющие тот или иной вариант представления текста. Обычно они записываются только в открывающем теге сразу после названия команды. Например:

<X A1=’’B1’’ A2=’’B2’’ A3=’’B3’’... AN=’’BN’’> Текст </X>, где X - тег команды HTML, A1,A2,... AN - атрибуты тега, B1, B2, ... BN - значения атрибутов.

 

3. СТРУКТУРА ДОКУМЕНТА HTML

Структура документа HTML имеет вид:

<HTML>

<HEAD>

. . .(заголовок документа)

</HEAD>

<BODY>

. . . (тело документа)

</BODY>

</HTML>

 

Документ HTML содержит операторы, которые могут занимать одну или несколько строк.

В начале и конце всего документа помещаются теги соответственно <HTML> и </HTML>.Они обозначают текст как действительный документ на языке разметки гипертекста. Эти коды ограничивают ту часть документа, которую должна обработать и отобразить программа просмотра Web.
Между кодами <HEAD> и </HEAD> помещается раздел заголовка документа. Как и HTML, HEAD служит только для формирования общей структуры документа. Заголовок может содержать другие операторы и занимать несколько строк. Например, помощью тегов <TITLE> и </TITLE> задается заголовок страницы, который отображается в заголовке главного окна браузера. Каждый документ HTML должен иметь строку заголовка. Эта строка идентифицирует документ и отображается браузером не только в заголовке главного окна, но и в других местах, например, в списке посещенных страниц.

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

 

<BODY>

Добро пожаловать в мир серверов WWW!

</BODY>

 

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

Внутри стартового тега элемента BODY можно расположить ряд атрибутов, обеспечивающих установки для всей страницы целиком. Рассмотрим их по порядку.

Один из самых полезных для дизайна - атрибут, определяющий фон страницы:

 

background = "Путь к файлу фона",

 

Например, <BODY background = "C:\dir1\fon.jpg">,

 

Необходимо отметить, что web-браузеры могут воспринимать графические изображения только в виде файлов в формате .gif или .jpg.

Более простое оформление фона сводится к заданию его цвета:

bgcolor = "#RRGGBB"

 

Например, <BODY bgcolor = "# 0000FF"> - синий фон.
Цвет фона задается тремя двухразрядными шестнадцатеричными числами, которые определяют интенсивность красного (RR), зеленого (GG) и синего (BB) цветов соответственно.

Для задания цвета основного текста используется атрибут

 

text = "#RRGGBB",

а для задания цвета текста гиперссылок применяют атрибут

 

link = "#RRGGBB"

 

Цвет текста использованных гиперссылок задается атрибутом

 

vlink = "#RRGGBB".

 

 

Например,

<BODY bgcolor="#0000FF" text="#FFFFFF" link ="#FF0000" vlink ="#808080".> -синий фон с красными гипертекстовыми ссылками, белым текстом и серыми использованными ссылками.

Гипертекст, расположенный внутри элемента BODY, может иметь произвольную структуру. Ее определяют, в первую очередь, назначение Web- страницы и фантазия разработчика.

ФОРМАТИРОВАНИЕ ТЕКСТА

 

Для форматирования текста существует большое количество элементов.

Тегами, задающими абзац, являются

<Р> и </Р>

Элемент абзаца позволяет использовать только начальный тег, так как следующий элемент Р обозначает конец предыдущего и начало следующего абзаца. Конечный тег удобно использовать в тех случаях, когда по смыслу необходимо обозначить конец абзаца.

Вместе с элементом <Р> можно использовать атрибут выравнивания alignсо значениями:

"left" - выравнивание по левому краю;

"center" - выравнивание по центру;

"right" - выравнивание по правому краю.
Для центрирования абзаца следует использовать такую конструкцию:

 

< Р align = "center" > Текст абзаца.</P>

Элемент, обеспечивающий принудительный переход на новую строку, имеет вид:

< BR>

Он имеет только стартовый тег. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.

Теги форматирования символов текста приведены в табл. 1.

Таблица 1

Тег	Описание
< B>, < /B>	Выделение жирным цветом
< I>, < /I>	Выделение курсивом
< U>, < /U>	Выделение подчеркиванием
< STRIKE>, < /STRIKE>	Выделение перечеркиванием
< TT>, < /TT>	Оформление шрифтом с фиксированной шириной букв
< BIG>, < /BIG>	Текст с крупным размером букв
<SMALL>, < /SMALL>	Текст с малым размером букв
<BLINK>, < /BLINK>	Мигающий текст
<SUB>, < /SUB>	Подстрочный индекс
<SUP>, < /SUP>	надстрочный индекс

 

Теги <H1> .. </H1>, <H2> .. </H2>,...,<H6> .. </H6>задают заголовки различных уровней. Существует шесть уровней заголовков, обозначающихся H1...H6 и имеющих свои стандартные размеры и конфигурации шрифтов. Заголовок уровня 1 самый крупный, а уровня 6 - самый мелкий. Для заголовков внутри тега <Hn> можно использовать атрибут align, задающий выравнивание:

align=’’left’’ - влево;

align=’’center’’ - по центру;

align=’’right’’ - вправо.

Например: <H1 align=’’center’’>Текст заголовка</H1>

<H4> Заголовок четвертого уровня </H4>
Элемент, определяющий базовый (основной) размер шрифта на странице (он является необязательным), имеет вид:

< BASEFONT>.

Внутри элемента необходимо указать атрибут:

 

size = Базовый размер шрифта

 

Величина атрибута может лежать в пределах от 1 до 7. По умолчанию используется величина 3. Установка, выполняемая этим элементом, имеет значение для элемента FONT.

Тег < FONT>является основным оператором работы с текстом в HTML:

 

< FONT>Текст < /FONT>.

 

Тег FONT используется только с атрибутами. Атрибуты данного элемента определяют тип (face), размер (size) и цвет (color) шрифта. При этом допускается задавать размер шрифта в абсолютных величинах : size = X , где Х - целое число от 0 до 7 (по умолчанию Х=3), или относительно базового: size = + Y или size = - Y

В сумме относительный и базовый размеры должны соответствовать одному из абсолютных размеров шрифта (от 1 до 7). Размер шрифтов соответствует шрифтам Microsoft Word следующим образом:

Х=1 - 9 пикселов

Х=2 - 10

Х=3 - 12

Х=4 - 14

Х=5 - 18

Х=6 - 24

Х=7 - 36 пикселов.

 

Цвет шрифта задается атрибутом color=’’цвет’’ или color=’’#RRGGBB’’, где названия цветов или их кодировка шестнадцатиричными числами дается в соответствии со стандартами HTML и совпадает со значениями атрибута color или bgcolor во всех других тегах (см. п.5 данного пособия).

Тип шрифта определяется атрибутом face=’’Название шрифта’’ , где шрифты указываются в соответствии с названиями шрифтов Microsoft Word.
Например:

<FONT face=’’Arial Cyr’’ color=’’blue’’ size=5> Текст </FONT> - слово «Текст» отобразится шрифтом Arial Cyr синего цвета размером 18 пикселей.

 

 

УПРАВЛЕНИЕ ЦВЕТОМ

 

Атрибуты color и bgcolorявляется общим для многих тегов HTML. Они могут определять цвет фона или шрифта в том или ином элементе web-станицы. Значение атрибута color (bgcolor)может задаваться либо названием цвета: color=’’цвет’’,либо тремя шестнадцатиричными числами, кодирующими интенсивность красного, зеленого и синего цветов: color=’’#RRGGBB’’.

Соответствие названий цветов и их кодов приведены в табл. 2:

Таблица 2

Русское название	Английское название	RGB-код
аквамарин	aqua	#00FFFF
белый	white	#FFFFFF
желтый	yellow	#FFFF00
зеленый	green	#008000
каштановый	maroon	#800000
красный	red	#FF0000
оливковый	olive	#808000
светло-зеленый	lime	#00FF00
серебристый	silver	#C0C0C0
серый	gray	#808080
сизый	teal	#008080
синий	blue	#0000FF
ультрамарин	navy	#000080
фиолетовый	purple	#800080
фуксиновый	fuchsia	#FF00FF
черный	black	#000000