 |
Возможностей веб-документов
|
|
|
|
Задание 3.1. Исследовать структуру веб-документов.
3.1.1. Современный этап развития Интернета начался в начале 1990-х годов с появлением протокола обмена информацией НТТР (Hyper Text Transfer Protocol - протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (WWW) - обширная сеть серверов НТТР, передающих файлы через Интернет.
Основную часть этих файлов составляют Web-страницы - специальные файлы, написанные языком HTML (Hyper Text Markup Language, язык разметки гипертекста). Web-страница является отдельным Web-документом (или html-документом) службы WWW и может содержать текст, графику, звуковое сопровождение, анимацию и другие мультимедийные объекты, а также гипертекстовые ссылки. Web-страницы публикуются в Интернете путем размещения Web-файлов на серверах НТТР (Web-узлах).
3.1.2. Для создания html-документов может быть использован любой текстовый редактор. Текст документов такого типа размечается с помощью html-тэгов (tag, признак). В html-документе определяются синтаксис и расположение тэгов, в соответствии с которыми Web-браузер будет отображать информацию, но текст самих тэгов будет скрыт. Файлам html-документов присваивается тип .htm. Все тэги ограничиваются символами " < " и " > ". Значительная часть тэгов составляют пары - стартовый (открывающий) и конечный (закрывающий); например,
<p>Информационная система</p>
Здесь стартовым тэгом является < p >, а конечным - тэг </p >, отличающийся от стартового добавлением символа " / " (прямой слеш).
3.1.3. Тэги могут иметь атрибуты и значения атрибутов. Атрибуты добавляют для расширения или модификации действий тэга. Наборы допустимых атрибутов для тэга описываются в спецификации языка HTML; некоторыми из таких атрибутов являются следующие:
|
|
|
src - атрибут, значения которого являются размеры изображения;
width и height - задают ширину и высоту изображения;
alt - альтернативный текст, который выводится, если браузер не в состоянии вывести изображения.
Правила записи атрибутов и значений следующие:
1) атрибуты указываются после имени тэга и пробела;
2) атрибуты отделяют один от другого пробелами;
3) порядок следования атрибутов произвольный;
4) атрибуты не нужно во второй раз описывать в конечном тэге;
5) значение атрибутов записывают в кавычках "." после символа " = ";
6) названия тэгов не должны содержать пропуски.
Следующий пример иллюстрирует использование атрибутов:
<h1 align="center">Моя первая Web-страница </h1>
Этим тэгом определен заголовок, который на экране будет расположен по центру.
Для языка HTML безразлично, в каком регистре записаны названия тэгов и их атрибуты; например,
<h1 align="center">Моя первая Web-страница</h1>
<H1 ALIGN="center">Моя первая Web-страница</H1>
Результаты выполнения приведенных тэгов будут идентичны, причем в данном примере обе записи корректны. Кроме того, в одном документе можно использовать для записи тэгов и верхний и нижний регистры. Однако во избежание ошибок и ускорения работы с текстом с помощью клавиатуры рекомендуется использовать нижний регистр.
3.1.4. Отображение html-документа в окне Web-браузера выполняется в соответствии со структурой html-тэгов. В каждом html-документе должны присутствовать три главные части: объявление HTML, заголовок и тело документа.
1) Объявление HTML обеспечивает пара < html > и </html >. Они сообщают Web-браузеру, что между ними находится документ в формате HTML, причем первым тэгом в самом начале документа должен быть тэг < html >, а последним (в самом конце документа) - </html>.
2) Заголовок определяет пара тэгов < head > и </head >. Между этими тэгами располагается информация о документе (название, ключевые слова для поиска, описание).
|
|
|
Самой важной информацией является название документа, которое находится на экране в первой (верхней) строке окна браузера. Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных.
Название html-документа в виде текстовой строки располагается между тэгами < title > и </ title >; это единственный обязательный элемент заглавной части документа. Название документа является ссылкой на страницу сайта. В окне браузера в поле поиска вводятся ключевые слова искомой темы. Поисковая система в соответствии с запросом выводит некоторое количество ссылок на разные документы. Одной из таких ссылок становится текст, расположенный между тэгами <title> и </title>.
3) Главная часть документа (тело html-документа) следует после заголовка и находится между тэгами < body > и </ body. Первый из них должен быть расположен после тэга </head>, а второй - перед тэгом </html>. Тело html-документа составляет информативную часть документа, которая должна быть отформатирована средствами языка HTML.
3.1.5. Рекомендуется изучить приведенные в табл. 3.1 основные тэги, их правописание и назначения.
3.1.6. Внимательно проанализировать и изучить текст html-документа, представленный на рис. 3.1.
Таблица 3.1. Основные тэги языка HTML
| Тэги | Назначение |
| <html> и </html> | Начало / Конец документа. |
| <head> и </head> | Указывают начало и конец служебной области html-документа. |
| <title> и </title> | Всю информацию, расположенную между ними, браузер воспринимает как название html-документа. Эта информация выводится в строке заголовка окна браузера. |
| <body> и </body> | Указывают начало и конец тела (основной области) html-документа. |
| <body bgcolor=?> | Указывает цвет фона html-документа, используя значение цветов в виде сочетания символов RRGGBB. |
| <body text=?> | Устанавливает цвет текста html-документа, используя значение цветов в виде сочетания символов RRGGBB. |
| <hr> | Вывод на экран горизонтальной линии. |
| <body link=?> | Устанавливает цвет гиперссылок, используя значение цветов в виде сочетания символов RRGGBB. |
| от <h1> и </h1> до <h6> и </h6> | Заголовки от первого до шестого уровней. |
| <p> и </p> | Начало / Конец абзаца. |
| <p align=?> | Выравнивает параграф относительно одной из сторон html-документа: left, right, или сеnter. |
| <br> | Конец строки. |
| <marquee> и </marquee> | Указывают вывести текст в виде подвижной строки. |
| <img src="[имя файла]"> | Вставка графического изображения. |
| <center> и </center> | Указание разместить текст, расположенный между тэгами, по центру. |
|
|
|
Строка
<html>...................................................................................................... 1
<head>............................................................................................ 2
<title>................................................................................... 3
Страница Иванова И. И........................................ 4
</title>.................................................................................. 5
</head>........................................................................................... 6
<body bgcolor=blue text=red link=white>.................................. 7
<center>................................................................................ 8
<h1> Web-страница Иванова И. И................................ 9
</h1>.................................................................................... 10
</center>.............................................................................. 11
<p align=center>.................................................................. 12
студента группы ТС21 факультета транспортных<br> 13
систем Харьковского национального <br>.................. 14
автомобильно-дорожного университета <br>.............. 15
<br>..................................................................................... 16
<img width=50% height=250 src=.................................. 17
http://www.khadi.kharkov.ua/media%5Ckhadi.jpg>......... 18
<marquee height=20 width=90% bgcolor=#ffff00> 19
Желаю успехов в учебе!!!................................. 20
</marquee>.............................................................. 21
</p>.................................................................................... 22
</body>........................................................................................ 23
</html>.................................................................................................. 24
Рис. 3.1. Структурированное представление html-документа.
3.2.2. Сохранить созданный текст в папке автора с помощью команды Файл ž Сохранить как. Имя сохраняемого текстового файла должно состоять из фамилии автора, нижней черточки, символов Веб и номера модификации задания; например, Иванов_Веб_1 (первый вариант исследования). При сохранении тип .txt файлу программа Блокнот присвоит самостоятельно.
|
|
|
Свернуть все открытые программы на Панель задач.
3.2.3. Открыть браузер Opera с помощью ярлыка на Рабочем столе чем столе. Для открытия в среде браузера созданного html-документа нажать на панели инструментов браузера кнопку Открыть.
На экран выводится окно Открыть; в поле Папка должно находиться имя папки пользователя, а в информационном поле - перечень содержания этой папки. Для достижения такого состояния в поле Папка повторными нажатиями кнопки списка (расположена в поле справа) достичь вывода перечня дисков и папок компьютера. Открыть диск С: нажатием ЛК мыши - выводится список содержания диска С:.
Пометить папку группы (например, ТД21) и открыть ее двойным нажатием ЛК мыши; аналогично открыть папку пользователя.
3.2.4. В данном случае в окне Открыть по умолчанию предусматривается открытие файла html-документа, поскольку в поле Тип файлов указан тип html-файлы. Но html-документ, изображенный на рис. 3.1, сохранен как текстовый файл Иванов_Веб_1.txt. Для вызова этого файла в окне Открыть следует нажать кнопку списка в поле Тип файлов и дважды нажать ЛК мыши на типе Все файлы [*.*] - в информационном поле выводится имя созданного текстового файла.
Указать имя созданного файла и дважды нажать ЛК мыши - в окне браузера Opera выводится текст созданного html-документа.
3.2.5. Для сохранения текста в качестве веб-страницы следует на панели Стандартная браузера Opera нажать кнопку Сохранить - выводится окно Сохранить как. В поле Папка должно находиться имя папки пользователя. Для этого в поле Тип файлов нажать кнопку списка и в списке типов файлов нажатием ЛК мыши пометить тип .html-файл, а затем нажать кнопку Сохранить.
В результате выполненных действий созданный документ будет сохранен как веб-страница с типом файла .htm; этот файл может быть воспроизведен любым браузером.
Завершить создание веб-страницы пользователя закрытием браузера с помощью команды ФайлžВыход.
Задание 3.3. Исследовать методы изменения информации в html-документе.
В html-документе (рис. 3.1) можно редактировать и форматировать текст, изменять и добавлять рисунки, звуки, цвета, мультимедийные эффекты. Каждое изменение html-документа следует хранить в папке пользователя с очередным порядковым номером (см. п. п. 3.2.5 и 3.2.6).
Изменения в html-документе выполняются следующим образом.
1) В среде Total Commander в папке пользователя указать файл html-документа (например, файл Иванов_Веб_1.htm) и дважды нажать ЛК мыши. Через несколько секунд на экран выводится окно браузера Opera, а еще через несколько секунд - результат распознавания браузером html-документа.
|
|
|
2) Открыть веб-страницу с помощью команду ВидžИсходный код - в поле браузера выводится текст веб-документа. Выполнить в html-файле необходимые изменения, варианты которых рассматриваются в следующих заданиях данной работы.
3) После завершения редактирования элементов html-документа следует на панели Стандартная браузера Opera нажать кнопку Сохранить - выводится окно Сохранить как. В поле Имя файла заменить цифру на очередное значение (например, Иванов_Веб_2.htm) для сохранения очередной модификации этого файла, а затем нажать кнопку Сохранить.
4) Завершить работу в окне браузера командой ФайлžВыход.
5) Проверить результат модификации (очередную веб-страницу); для этого в среде Total Commander в папке пользователя указать новую модификацию html-файла и дважды нажать ЛК мыши - на экран выводится результат распознавания обозначенного файла.
Задание 3.4. Исследовать способы использования графических изображений.
3.4.1. При использовании графических изображений следует помнить, что в Интернете важны не художественное качество картинки, а скорость ее загрузки, то есть минимизация размера картинки. Для расположения картинок на веб-страницах в основном используются два графических формата (типы): .gif и .jpg. На рис. 3.2 приведены URL -адреса картинок обоих типов. Для удобства выбора пользователями вариантов справа в адресах указаны их порядковые номера. Основное отличие между ними в том, что они применяются для хранения разных видов графики.
Формат .gif преимущественно используется для сохранения рисованных изображений, векторной графики, картинок без полутонов, градиентов (переходов от цвета к цвету) и большого количества мелких деталей различных цветов. Формат .gif применяется для фотоизображений и полутоновой графики, живописи, градиентов и изображений с множеством мелких разноцветных деталей. Это объясняется тем, что формат .gif позволяет хранить изображения, которые содержат не более 256 цветов.
Цвета могут быть любыми и в любой комбинации, но общее их количество ограничено этим числом. Поэтому в данном формате удобно хранить изображение с небольшим количеством цветов. Это позволяет за счет сокращения объема информации о цветах значительно уменьшить размер файла, а следовательно, и время загрузки. Кроме того, формат .gif используется для сохранения анимированных картинок и изображений с прозрачными частями; в .jpg такие возможности отсутствуют.
Область применения формата .jpg определяется тем, что он хранит полную цветовую палитру 24-битового изображения, которая может содержать миллионы цветов. При таком объеме информации размер файла значительно возрастает. Но главной особенностью формата .jpg является его способность хранить изображение в сжатом (подобно архивному) виде. Степень архивации изображения, сохраненного в формате .jpg, может быть весьма значительной: нормальным считается сжатие картинки в 10 - 20 раз без потери качества.
http://s48.radikal.ru/i120/0909/2f/87fbe63a9a27.jpg.......... 00
http://gifanimation.ru/images/pticy/ptici10.gif.................... 01
http://gifanimation.ru/images/pticy/ptici06.gif.................... 02
http://gifanimation.ru/images/cvety/8036.gif...................... 03
http://gifanimation.ru/images/cvety/flower01.gif ………… 04
http://gifanimation.ru/images/email/email22.gif................. 05
http://gifanimation.ru/images/knopki/button78.gif ……….. 06
http://gifanimation.ru/images/komputer/hw30.gif ………... 07
http://gifanimation.ru/images/komputer/hw24.gif............... 08
http://gifanimation.ru/images/mehanizmy/peopls167.gif …. 09
http://gifanimation.ru/images/mehanizmy/peopls33.gif …... 10
http://gifanimation.ru/images/planety/b97.gif...................... 11
http://gifanimation.ru/images/predmety/14.gif..................... 12
http://gifanimation.ru/images/derevo/fish17.gif................... 13
http://gifanimation.ru/images/derevo/fish24.gif................... 14
http://gifanimation.ru/images/derevo/79.gif......................... 15
http://gifanimation.ru/images/derevo/54terg.gif................... 16
http://gifanimation.ru/images/strelki/strelki09.gif ………..... 17
http://gifanimation.ru/images/strelki/strelki05.gif................. 18
http://gifanimation.ru/images/raznoe/80.gif.......................... 19
http://gifanimation.ru/images/raznoe/105.gif........................ 20
http://gifanimation.ru/images/raznoe/animal01.gif ………... 21
http://gifanimation.ru/images/raznoe/129.gif........................ 22
http://gifanimation.ru/images/lica/77.gif............................... 23
http://gifanimation.ru/images/lica/174.gif............................. 24
http://i075.radikal.ru/1003/ee/a7c022c1f226.jpg.................. 25
http://s46.radikal.ru/i113/1003/4d/7d9f9b4e092b.jpg........... 26
http://i3.wall-papers.in.ua/uploads/gallery_photo/photo/0080/56_thumb_80.jpg.....27
http://i1.wall-papers.in.ua/uploads/gallery_photo/photo/0079/92_thumb_80.jpg.....28
http://i2.wall-papers.in.ua/uploads/gallery_photo/photo/0096/00_thumb_80.jpg.....29
http://i1.wall-papers.in.ua/uploads/gallery_photo/photo/0098/73_thumb_80.jpg.....30
Рис. 3.2. URL-адреса рисунков.
3.4.2. Иллюстрации играют значительную роль в оформлении веб-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются они браузером внутри веб-страницы. Для расположения рисунков на веб-странице в html-документе применяется одиночный тэг < img >. Этот тэг всегда должен содержать обязательный атрибут src=, значением для которого является URL-адрес файла изображения, записанный в абсолютной или относительной формах.
При загрузке документа вместе с ним загружается рисунок и отображается в том месте документа, где расположен тэг < img >. Изображение переносится на веб-страницу с сохранением размера. Если при компоновке изображения необходимо изменить его масштаб, нужные размеры рисунка можно задать в пикселях с помощью атрибутов width= (ширина) и height= (высота).
3.4.3. Использование иллюстраций на веб-страницах связано с некоторыми сложностями. Во-первых, веб-страница может отображаться браузером, который не имеет средств для показа изображений. Во-вторых, пользователи часто отключают отображение рисунков для ускорения приема веб-страницы. В обоих случаях желательно знать, что изображено на невидимой картинке. Для этой цели используют альтернативный текст, который предоставляет более-менее подробное описание изображения. Альтернативный текст определяется тэгом < img > и значением специального атрибута alt=.
3.4.4. На рис. 3.2 выбрать URL -адрес, порядковый номер которого отвечает номеру пользователя в списке группы, переписать URL -адрес в рабочую тетрадь.
Открыть окно браузера Opera. Нажатием на панели инструментов Стандартная кнопки Открыть (см. Задание 3.3) вызывать на экран папку пользователя, а в ней - текстовый файл html-документа. Удалить предыдущий URL-адрес изображения (строка 18) и ввести новый URL-адрес, соответствующий варианту пользователя.
Сохранить новую редакцию файла с названием, например, Иванов_Веб_2 и завершить работу браузера.
В окне Total Commander двойным нажатием ЛК мыши проверить результат распознавания веб-страницы с измененным адресом рисунка. В случае несоответствия распознавания повторить редактирование.
Задание 3.5. Исследовать способы использования цветной палитры.
Цвета текста, ссылок, заголовки html-документа можно указывать внутри html-тэгов: например,
<font color="цвет"> <body text="цвет">
Любой цвет на экране монитора определяется смешением трех цветов - красного (red), зеленого (green) и синего (blue). Первые буквы этих слов определяют цветовую модель RGB. Указать цвет можно его названием; например <fo nt color="red">Текст будет красным</font>.
Иным способом указания цвета есть применение цифрового кода, в котором для описания цвета используются шесть символов шестнадцатеричной системы исчисления; например,
<font color= #FF0000>Текст будет красным</font>.
Перед кодом ставится символ # (диез); первые два символа (FF) представляют составляющую красного цвета, вторая пара (00) - зеленого цвета и третья пара (00) - синего цвета (рис. 3.3).
=#000000 black (черный ) 
=#008000 green (зеленый)
=#C0C0C0 silver (серебро) 
=#00FF00 lime (св.-зеленый)
=#808080 gray (серый) 
=#808000 olive (оливковый)
=#FFFFFF white (белый) 
=#FFFF00 yellow (желтый)
=#800000 maroon (малинов.) 
=#000080 navy (темно-синий)
=#FF0000 red (красный) 
=#0000FF blue (синий)
=#800080 purple (фиолетов.) 
=#008080 teal (сизый)
=#FF00FF fuchsia (лиловый) 
=#00FFFF aqua (бирюзовый)
Рис. 3.3. Названия цветов и значения RGB.
Цвета могут существенно добавлять информации в документ, повышая удобство чтения и восприятия; однако при использовании цветов необходимо учитывать следующие особенности:
1) использование элементов и атрибутов HTML для указания цвета является нежелательным; вместо этого следует использовать таблицы стилей;
2) не следует использовать комбинации цветов, которые вызывают осложнения в отображении;
3) при использовании изображения как фона или при указании цветов фона не следует забывать и об определении цвета текста
4) цвета, указанные в тэгах body и font и в bgcolor, выглядят по-разному в таблицах, в разных компьютерах и системах.
Задание 3.6. Исследовать способы управления стилем шрифта.
3.6.1. Для создания размера, цвета и отображения шрифта служит парный тэг < font >, который влияет на весь текст, расположенный внутри него.
Тэг < font > должен иметь хотя бы один из трех возможных атрибутов: size=; color=; faсe=.
Атрибут size= определяет размер шрифта. Предполагается, что возможны семь заранее указанных размеров шрифта. Эти значения не соответствуют каким-то единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3.
3.6.2. Атрибут color= определяет цвет шрифта, который может быть указан либо ключевым словом (red - красный), либо в системе RGB шестнадцатеричным значением (#FF0000 - красный).
3.6.3. Атрибут fase= определяет вид шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещенного в Интернете, нельзя предусмотреть какие шрифты доступны на компьютере пользователя, поэтому этот атрибут лучше не использовать.
3.6.4. Для указания приведенных параметров для всего документа, используют одиночный тэг < basefont >. Он содержит аналогичные атрибуты и указывает вид, цвет и размер шрифта, используемых по умолчанию.
3.6.5. Специальная группа тэгов используется для изменения изображения шрифта:
< b > и </ b > делают текст между ними полужирным;
< i> и </ i> определяют курсивное изображение;
< u > и </ u > определяют подчеркивание;
< s > и </ s > определяют вычеркивание текста.
3.6.6. Изучить представленные ниже примеры тэгов.
<html>
<head>
<title> Управление стилем шрифта </title>
</head>
<body>
<basefont size=4 face=”Arial”>
Этот текст использует нестандартный стиль шрифта заданный по умолчанию.
<p><font size=-2 face=”Times New Roman” color=”green”>
Этот текст мельче и использует другой шрифт и другой цвет.
</font>
<p><b> Полужирный шрифт </b> и <i> курсив </i> используют
для выделения фрагментов текста.
<p> Использование <u> подчеркивание </u> не рекомендуется,
поскольку подчеркнутый текст легко перепутать с ссылкой.
<p><s> Вычеркивание текста </s> иногда применяют для
разметки фрагментов, которые потеряли актуальность, но по каким-то причинам хранятся в документе.
</body>
</html>
Задание 3.7. Усвоить принципы качественного представления html-документов.
3.7.1. Творческий характер создания html-документов подобен программированию; при этом возможны ошибки, которые могут привести к невозможности распознать созданный html-документ. Веб-страницы предназначаются для широкого круга пользователей и поэтому при подготовке html-документов следует учитывать эти особенности.
3.7.2. Содержание документа значительно важнее внешнего вида. Содержание веб-страницы или группы веб-страниц должно быть связанным логически. Хорошо продуманная система ссылок должна позволять переходить от страницы к странице и возвращаться назад практически без использования кнопок навигации Вперед и Назад на панели инструментов браузера.
3.7.3. Для того, чтобы html-документ был доступен самой широкой аудитории, следует отставать на один шаг от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в браузерах, а новым версиям нужно время для того, чтобы достичь большинства пользователей. Документы с использованием самых последних достижений доступны лишь ограниченной аудитории.
3.7.4. Ошибка, свойственная начинающим пользователям, заключается в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричаще. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой гаммой или при отсутствии необходимых шрифтов.
3.7.5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При наличии таких объектов увеличивается время чтения веб-страницы и пользователь потеряет к ней интерес еще до того, как получит возможность что-то прочитать.
3.7.6. Поскольку создание html-документов подобно программированию, процесс поиска и исправления ошибок необходим и при создании веб-страницы. Большинство ошибок можно найти еще до того, как страница будет доступна посторонним читателям. К числу ошибок, которые нужно исправлять, входят также грамматические и печатные ошибки.
3.7.7. Интернет содержит миллионы веб-страниц с предложениями идей оформления, которыми можно воспользоваться. Достоинство этого подхода состоит в том, что таким способом можно увидеть что сделано и как сделано.
3.7.8. Размещение самой важной информации в верхней части страницы позволяет с пользой расходовать время, на протяжении которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не требует значительного труда, но высоко ценится. Наличие большого количества гиперссылок на странице не только помогает пользователям плодотворно путешествовать по пространствам Интернет, но и побуждает их раз за разом возвращаться на страницу, которая предоставила им такую возможность.
3.8. Контрольные вопросы
1. Что представляют собой html-документы?
В какой среде они создаются?
2. Какие элементы составляют синтаксис текста html-документа?
3. В чем состоит особенность структуры html-документа?
4. Каким образом вносятся изменения в html-документ?
5. Какого типа графические элементы используются
в html-документе и в чем состоит разница и общность
между этими типами?
6. Как используется цветовая палитра в html-документе?
7. Какими способами выполняется управление шрифтами?
|
|
|
