Конспект_лекц_Кишкурно
.pdfрегистрации в Internet каждый пользователь получает почтовый электронный адрес, который образуется присоединением имени пользователя (имя, под которым он зарегистрирован в данной системе) к адресу компьютера (имя домена, на котором находится почтовый ящик).
Группы новостей. В Internet очень популярен сервис UseNet, позволяющий всем пользователям сети участвовать в групповых дискуссиях, так называемых телеконференциях или группах ново-
стей. Группы новостей бывают контролируемые и неконтролируе-
мые. В первом случае сообщение принимает администратор (модератор), который следит за их соответствием тематике и правилам данной группы новостей. Он решает, что заслуживает опубликования, а что нет. Во втором случае со всеми сообщениями может ознакомиться любой пользователь.
Интерактивное общение в Internet. В последнее время все бо-
лее широкое распространение получает интерактивное общение в Internet в реальном режиме времени.
Одним из наиболее популярных сервисов является IRC (Internet Relay Chat – Беседа через Internet) – позволяет обмениваться сообщениями в реальном времени, пересылать файлы, играть, постоянно находясь на связи. Служба ICQ (I seek you – Я тебя ищу) – позволяет обмениваться сообщениями в реальном масштабе времени, а также организовывать чат (chat – англ. «беседа»), передавать файлы и многое другое. В последнее время получила большое распространение программа Skype (Давай поговорим) – программа, позволяющая общаться через сеть интернет со своими коллегами, друзьями, родственниками по всему миру. Программа разработана компанией Skype
Limited.
Всемирная паутина WWW. Все описанные выше сервисы Internet появились раньше WWW и были предназначенны для решения ряда специальных задач. Всемирная паутина – универсальная система Internet. Она способна заменять специальные сервисы Internet и вполне справляется с их функциями. Доступ ко всем этим сервисам можно получить с помощью Web-браузера.
World Wide Web – это гипермедийная служба Internet, содержащая огромное количество гипертекстовых документов, созданных на языке разметки гипертекстовых документов HTML (Hyper Text Markup Language).
141
Гипертекст (Hypertext) – это способ представления информации при помощи связей (гипертекстовых ссылок) между документами.
Гиперссылка – «активная» ссылка на другой документ. Гипертекстовые документы, размещаемые во всемирной паути-
не, называются web-страницами. Несколько web-страниц, объединенных общей темой, дизайном, а также связанных между собой ссылками и обычно находящихся на одном и том же web-сервере, называются web-сайтом. Для загрузки и просмотра web-страниц используются специальные программы – браузеры (Netscape Navigator,
Opera, Lynix, Internet Explorer, Arena, Mosaic и др.).
142
ЛЕКЦИЯ 17
ЯЗЫК ГИПЕРТЕКСТОВОЙ РАЗМЕТКИ HTML
Все страницы в системе WWW созданы с помощью специального языка, который называется языком гипертекстовой разметки документов – html.
Web-страницы могут содержать текстовую информацию, рисунки, гиперссылки на другие страницы, звуки и анимацию, фреймы (для разделения экрана на несколько областей), формы (для анкетирования, проведения опросов, поиска и т. п.), встроенное видео, встроенные программы на языках VBScript, JavaScript и др.
17.1. Создание, сохранение и просмотр документа
Html-документ – это текстовый файл с расширением *.html или *.htm. Документ может быть подготовлен в любом текстовом редакторе, например, в приложении Блокнот.
Информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <head>) называется тэгом.
Тэг – это команда языка html, которую выполняет браузер.
Теги бывают: непарные (<img src="kartinka.jpg"> – вставить рисунок) и парные (контейнеры):
<table> |
открывающий |
... область действия тэга: описание таблицы |
|
</table> |
закрывающий |
Тэги можно вводить как большими, так и маленькими буквами. Многие тэги, помимо имени, могут содержать атрибуты − элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку.
После набора документа а редакторе Блокнот надо сохранить его, выполнив команду Файл / Сохранить как. В появившемся окне следует набрать имя файла с расширением *.html или *.htm, указать место сохранения и нажать кнопку Сохранить.
Чтобы просмотреть результат работы, нужно перейти в браузер (например, Internet Explorer) выполнить команду Файл / Открыть, нажать кнопку Обзор и выбрать созданный файл.
143
17.2. Основные тэги языка
<html> ... </html> − тэг <html> должен открывать html-доку-
мент, а тэг </html> − закрывать.
<head> ... </head> − эта пара тэгов указывает на начало и конец заголовка документа. Помимо наименования документа, сюда может включаться служебная информация.
<title> ... </title> − все, что находится между этими тэгами, толкуется браузером как название документа. Название текущего документа отображается обычно в заголовке окна и печатается в левом верхнем углу каждой страницы при выводе на принтер.
<body> ... </body> − эта пара тэгов указывает на начало и конец тела html-документа.
Оформление текста. <br> − этот тэг используется, если необходимо перейти на новую строку, не прерывая абзаца (равносильно нажатию клавиши «Enter»).
<p> ... </p> − такая пара тэгов описывает выделение текста в абзац.
<h1> ... </h1> − <h6> ... </h6> − тэги вида <hi> (где i − цифра от 1
до 6) описывают заголовки шести различных уровней. Заголовок первого уровня − самый крупный, шестого − самый мелкий.
Тэги <hi> и <p> могут содержать дополнительный атрибут align, который позволяет выравнивать текст по левому, правому краю, по центру и ширине, например:
<h1 align=center> Выравнивание по центру </h1> или <p align=right> Выравнивание по правому краю </p>
Цветовая гамма. Цвета html-документа определяются атрибутами, размещенными внутри тэгов, определяющих: цвет фона документа; цвет текста документа; цвет гиперссылки; цвет ссылки на документ, который уже был просмотрен ранее; либо цвет ссылки, когда на нее указывает курсор и нажата правая кнопка мыши.
Цвет кодируется последовательно тремя парами символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности, заданной каждому из трех основных цветов (красному, зеленому и синему) в диапазоне от нуля (00) до 255 (FF), либо задается с помощью имен red, green, blue, magenta, black.
Оформление страниц. Цвета всего html-документа определяются атрибутами, размещенными внутри тэга <body>: bgcolor − определяет цвет фона документа; text − определяет цвет текста документа; link − определяет цвет гиперссылки; vlink − определяет цвет ссылки на документ, который уже был просмотрен ранее; alink − определяет
144
цвет ссылки, когда на нее указывает курсор и нажата правая кнопка мыши.
Например, цвет фона (зеленый) и текста (белый):
<body text="white" bgcolor=#00ff00>
Привет! </body>
Цвет гиперссылок – желтый и зеленый:
<body link="#ff8c00" vlink=green>
...
</body>
Тэг <body> может включать атрибут background="[имя файла]", который задает изображение, служащее фоном для текста и других изображений.
Фон может быть представлен рисунками в формате *.gif или *.jpg. Браузеры заполняют множественными копиями изображенияфона все окно.
<body background="back.jpg">
Цвет фона и изображение-фон не отображаются при выводе htmlдокумента на печать, поэтому лучше не использовать текст белого цвета.
Рассмотрим некоторые тэги языка html, применяемые при оформлении страниц.
Шрифты, тег font (<font>… </font>).
<font color="значение цвета">текст</font> – задает цвет текста; <font size="значение размера">текст</font> – задает размер шрифта
текста (например, абсолютный размер от 1 до 7);
<font face="имя гарнитуры шрифта">текст</font> – задает определенную гарнитуру шрифта (face="Arial").
Стили оформления. Под физическим стилем понимается прямое указание браузеру на модификацию текущего шрифта.
жирный (bold) |
<B>Вася</B> |
Вася |
курсив (italic) |
<I>Вася</I> |
Вася |
подчеркивание (underline) |
<U>Вася</U> |
Вася |
зачеркивание (strike out) |
<S>Вася</S> |
Вася |
верхний индекс (superscript) |
Вася<SUP>2</SUP> |
Вася2 |
нижний индекс (subscript) |
Вася<SUB>2</SUB> |
Вася2 |
|
|
|
145
Например, все, что находится между тэгами <b> и </b>, будет написано жирным начертанием шрифта. Текст между тэгами <i> и </i> будет написан наклонным начертанием шрифта.
Списки. Текст, расположенный между тэгами <ul> и </ul>, воспринимается как маркированный список. Каждый новый элемент списка следует начинать с тэга <li>, у которого нет парного закрывающего тэга. Например, создание списка:
Вася |
<ul> |
Петя |
<li>Вася |
Коля |
<li>Петя |
|
<li>Коля |
|
</ul> |
Для изменение маркера используют атрибут type <ul type="disk">
...
</ul>
type="disk" – полый кружок (по умолчанию) type="circle" – окружность
type="square" – квадратик
Нумерованные списки располагаются между тэгами <оl> и </оl> и устроены точно так же, как маркированные, только вместо символов, выделяющих новый элемент, используются цифры. Если модифицировать предыдущий текст:
1. |
Вася |
<ol> |
2. |
Петя |
<li>Вася |
3. |
Коля |
<li>Петя |
|
|
<li>Коля |
|
|
</ol> |
Атрибут type может принимать следующие значения: type="A" – заглавные буквы A, B, C...;
type="a" – строчные буквы a, b, c...; type="I" – большие римские числа I, II, III...; type="i" – маленькие римские числа i, ii, iii...; type="1" – арабские числа 1, 2, 3... .
Линия-разделитель. <hr> описывает горизонтальную линию. Тэг может дополнительно включать атрибуты size (определяет толщину
146
линии в пикселях) и/или width (определяет размах линии в процентах от ширины экрана).
Бегущая строка. Тег marquee позволяет задавать бегущую строку текста:
<marquee> – начало бегущей строки </marquee> – конец бегущей строки
Фрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты (табл. 17.1).
|
Таблица 17.1 |
|
|
Атрибут |
Назначение |
|
|
width= |
Ширина области бегущей строки (в пикселях или в % от высо- |
|
ты экрана) |
direction= |
Указание на направление бегущей строки: (right – движение в |
|
правую сторону, left – движение справа налево, down – дви- |
|
жение сверху вниз, up – движение вверх) |
bgcolor= |
Определение цвета фона бегущей строки |
loop= |
Назначение количества прокруток бегущей строки: n – равно |
|
количеству повторов, infinite – бесконечно (по умолчанию) |
scrollamount= |
Скорость движения контента |
hight= |
Высота бегущей строки (в пикселях или в % от высоты эк- |
|
рана) |
Гиперссылки. Практически каждая веб-страница имеет ссылки на другие страницы, что позволяет посетителям перемещаться в пределах одного сайта и переходить на другие. Для того чтобы ссылка работала, в ее теге <А> необходимо указать адрес той страницы, на которую она ссылается. В общем виде запись кода выглядит следующим образом:
<А href="адрес"> текст ссылки</А>
Адрес здесь указывается с помощью атрибута href, однако существует несколько типов указания адреса.
Если нужно создать ссылку на другую веб-страницу в рамках одного сайта, достаточно указать в коде ее относительный адрес. Как правило, это просто название файла, при условии, что искомая вебстраница находится в той же папке, что и текущая веб-страница.
Ссылка, к примеру, на страницу page2.html будет выглядеть следующим образом:
<А href="page2.html">Cтраница2</A>
Такой текст приведет к появлению в документе гиперссылки, т. е. подчеркнутого текста Cтраница2, при нажатии на который в текущее окно будет загружен документ с именем page2.htm.
147
Если в адресе перехода не указано место размещения этого документа, то компьютер будет искать его в текущей папке. Искомая web-страница может находиться во вложенной папке либо в соседней папке.
Атрибуты Гиперссылок. Существует ряд относящихся к ссылкам атрибутов, которые позволяют изменять цвет ссылок, а также устанавливать для них некоторые дополнительные параметры. Атрибут title тега <А> позволяет указывать текст, который будет появляться при наведении указателя мыши на ссылку. Этот атрибут «понимают» все браузеры. По умолчанию в большинстве браузеров текст ссылки отображается голубым цветом, активной ссылки сиреневым. Конечно же, можно задавать цвет и для каждой ссылки отдельно.
17.3. Изображения на web-страницах
Скорость передачи данных является одним из наиболее актуальных вопросов при работе в Интернете. В связи с этим решающее значение имеет размер web-страницы, львиную долю которых занимают как раз изображения.
На скорость загрузки изображений оказывают влияние еще два важных параметра 
их физические размеры (ширина и высота) и разрешение изображения. Чем больше указанные значения, тем больше размер файла и тем дольше такое изображение будет загружаться на web-страницы.
Специально созданные для использования в сети Интернет графические форматы позволяют уменьшить объем файлов изображений. На сегодняшний день в сети наиболее распространенными являются три формата графических файлов: *.jpeg (*.jpg), *.gif и *.png, каждый из которых имеет несколько разновидностей. Для размещения рисунка используется тег <img src>:
<img src="picture1.gif">
Рисунок должен находиться в той же папке, где и исходный файл. Если рисунок находится в другой папке или на другом сервере, то должен прописываться весь путь к файлу рисунка.
<img src="images/flag.jpg">
<img src="http://www.vasya.ru/img/flag.jpg">
Изменение размеров изображения. При отображении рисунка браузер по умолчанию использует его реальные размеры. Если рисунок необходимо отмасштабировать, применяют атрибуты width и
148
height, задающие ширину и высоту рисунка (в пикселях) соответственно. Если эти параметры заданы, то браузер может определить, какое место надо выделить для отображения рисунка, еще до того, как рисунок загружен. Это несколько ускоряет отображение загружаемой страницы, так что удобно задавать эти атрибуты всегда.
<img src="picture2.jpg" width="100" height="40">
Выравнивание изображений. Существует два способа выравнивания изображений на веб-странице: по горизонтали и по вертикали. Для выравнивания изображения по горизонтали используется атрибут align со значениями: align=left – изображение смещается к левому краю рабочей зоны, последующий текст сразу же начинает «обтекать» графику; align=right – то же, что и для left, только изображение смещается к правой части рабочей зоны.
Для выравнивания изображения по вертикали используются три значения атрибута align: top (по верхнему краю текущей текстовой строки, не меняя позиции по горизонтали), middle (центрируется по вертикали на базовой линии текущей текстовой строки, не меняя позицию по горизонтали), bottom (нижний край выравнивается по горизонтали на базовой линии текущей текстовой строки).
17.4. Таблицы на web-страницах
Таблицы удобны для представления больших объемов данных, а многие web-дизайнеры используют их также для точного размещения элементов web-страниц. Таблица в языке html задается при помощи парного тега <table>.
Таблица может иметь заголовок и строки таблицы. Заголовок задается тегами (<caption>...</caption>), хотя он и не является обязательным. Этот тэг также может включать атрибут align. <caption align=top> (заголовок над таблицей) и <caption align=bottom> (за-
головок под таблицей).
Ячейки в заголовках столбцов и строк задают парным тегом <tr>, а обычные ячейки 
парным тегом <td>, закрывающие теги </tr> и </td> можно опускать. Например, «таблица» с одной строки и тремя столбцами может быть задана следующим образом:
<table border="1"> <tr>
<td>таблица из одной строки</td> <td>из трех столбцов</td>
149
<td>без указания ширины таблицы и ячеек.</td>
</tr>
</table>
Каждая ячейка может содержать произвольный текст, а также любые теги html, допустимые в «теле» документа. Атрибуты элементов позволяют оформить таблицу по своему вкусу. В табл. 17.2 приведена краткая сводка допустимых атрибутов.
|
|
Таблица 17.2 |
|
|
|
Атрибут |
Элемент |
Назначение |
|
|
|
align= |
Таблица, заголовок, |
Выравнивание таблицы по горизонтали, |
|
строка, ячейка |
выравнивание данных по горизонтали, раз- |
|
|
мещение заголовка над или под таблицей |
|
|
(left, right, center) |
valign= |
Строка, ячейка |
Выравнивание по вертикали (top, middle, |
|
|
bottom) |
width= |
Таблица, ячейка |
Ширина |
height= |
Ячейка |
Высота |
colspan= |
Ячейка |
Протяженность в несколько столбцов |
rowspan= |
Ячейка |
Протяженность в несколько строк |
bgcolor= |
Таблица, строка, ячейка |
Цвет фона |
border= |
Таблица |
Отображение границ ячеек и внешней рам- |
|
|
ки таблицы |
150