Веб-документов

Задание 3.1. Исследовать структуру веб-документов.

3.1.1. С овременный этап развития Интернета начался в начале 1990-х годов с появлением протокола обмена информацией НТТР (Hyper Text Transfer Protocol - протокол передачи гипертекста). Вместе с этим протоколом появилась служба World Wide Web (WWW) - обширная сеть серверов НТТР, передающих файлы через Интернет.

Основную часть этих файлов составляют веб-страницы - специальные файлы, созданные при помощи языка HTML (Hyper Text Markup Language - язык разметки гипертекста). Веб-страница является отдельным веб-документом (или html-документом) службы WWW и может содержать текст, графику, звуковое сопровождение, анимацию и другие мультимедийные объекты, а также гипертекстовые ссылки. Web-страницы публикуются в Интернете путем размещения Web-файлов на серверах НТТР (Web-узлах). Для создания веб - документов может быть использован любой текстовый редактор. Текст документов такого типа размечается с помощью html-тэгов (tag - признак). В веб-документе определяются синтаксис и расположение тэгов, в соответствии с которыми Web-браузер отображает информацию, но текст самих тэгов будет скрыт. Файлам веб-документов присваивается тип .html.

Все тэги ограничиваются символами " < " и " > ". Значительную часть тэгов составляют пары - стартовый (открывающий) и конечный (закрывающий); например,

<p>Информационная система</p>

Здесь стартовым тэгом является < p >, а конечным - тэг </p >, отличающийся от стартового добавлением символа " / " (прямой слеш).

3.1.2. Тэги могут иметь атрибуты и значения атрибутов. Наборы допустимых атрибутов для тэга приведены в описании языка 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.3. О тображение веб-документа в окне Web-брау-зера выполняется в соответствии со структурой html-тэгов. В каждом веб-документе должны присутствовать три главные части: объявление HTML, заголовок и тело документа.

1) Объявление HTML обеспечивает пара < html > и </html >. Они сообщают Web-браузеру, что между ними находится документ в формате HTML; первым тэгом в самом начале документа должен быть тэг < html >, а последним (в самом конце документа) - </html>.

2) Заголовок определяет пара тэгов < head > и </head >. Между этими тэгами располагается информация о документе (название, ключевые слова для поиска, описание).

3) Название веб-документа в виде текстовой строки располагается между тэгами < title > и </ title >. Название является обязательным элементом заглавной части документа и является ссылкой на страницу сайта. В окне браузера в поле поиска вводятся ключевые слова искомой темы, в соответствии с которыми поисковая система выводит на экран некоторое количество ссылок на разные документы. Одной из таких ссылок становится текст, расположенный между тэгами <title> и </title>.

4) Главная часть документа (тело веб-документа) следует после заголовка и находится между тэгами < body > и </ body>.

Первый из этих тэгов должен быть расположен после тэга </head>, а второй - перед тэгом </html>. Тело веб-документа составляет информативную часть документа, которая должна быть отформатирована средствами языка HTML.

3.1.4. Изучить приведенные в табл. 3.1 основные тэги.

3.1.5. Изучить текст веб-документа, представленный на рис. 3.1 в структурированном виде.

Задание 3.2. Исследовать процесс создания

веб-документа.

1) Командой

ПускžПрограммыžСтандартныеžБлокнот

открыть текстовый редактор. С помощью клавиатуры ввести текст рис. 3.1 в текстовом поле редактора с указанием названия группы, фамилии и инициалов пользователя. Ввод всех строк рекомендуется начинать с первой позиции.

2) Сохранить созданный текст в папке группы исполнением команды Файл ž Сохранить как - на экран выводится окно Сохранить как.

3) В поле Папка этого окна нажать кнопку списка - выводится перечень устройств компьютера.

4) Исполнить Локальный диск [C:] - в рабочем поле выводится корневой каталог диска С:.

5 ) Исполнить папку Documents and Settings - выводится перечень папок и файлов указанной папки.

6) Исполнить папку группы.

7) В поле Имя файла ввести имя сохраняемого текстового файла - 11_Тарасенко_Прг_1; здесь 11 - номер рабочего места; _ Тарасенко - фамилия пользователя; символы _ Прг - сокращение слова программа; _ 1 - номер варианта исследования.

8) Завершить сохранение нажатием кнопки Сохранить. Тип .txt программа Блокнот присвоит файлу самостоятельно.

9) Окно Сохранить как удаляется с экрана автоматически, окно редактора Блокнот с программой остается на экране.

10) В поле Имя файла ввести имя сохраняемого текстового файла - 11_Тарасенко_Веб_1.htm; здесь 11 - номер рабочего места; _ Тарасенко - фамилия пользователя; символы _ Веб - сокращение слова веб-страница; _ 1 - номер варианта исследования; .htm - тип файла.

11) В поле Тип файла нажать кнопку списка и исполнить тип Все.

12) Завершить сохранение нажатием кнопки Сохранить.

13) Окно Сохранить как удаляется с экрана автоматически, окно редактора Блокнот с программой остается на экране.

14) Закрыть окно Блокнот исполнением команды ФайлžВыход.

15) Исполнить файл пользователя с типом .htm.

16) Закрыть окно браузера Opera нажатием кнопки Закрыть.

Задание 3.3. Исследовать методы изменения

информации в веб-документе.

В веб-документе (рис. 3.1) можно редактировать, форматировать и добавлять текст, рисунки, звуки, цвета, мультимедийные эффекты. В очередных заданиях будут заданы варианты для выполнения изменений в программе, созданной пользователем в соответствии с рис. 3.1. Каждое изменение веб-документа следует хранить в папке пользователя с очередным порядковым номером (см. задание 3.2).

Изменения в веб-документе выполняются следующими действиями.

1) Исполнить файл пользователя - например, 11_Тарасенко _ Прг_1.txt.

2) В программе (в окне Блокнота) выполнить запланированные изменения.

3) Страницу Блокнота с текстом измененной программы следует сохранить с помощью команды ФайлžСохранить как. В открывшемся окне сохранения в поле имени файла заменить цифру 1 на цифру 2 (вторая модификация) и нажать кнопку Сохранить. Окно сохранения закроется, но на экране будет присутствовать окно блокнота с текстом измененной программы.

4) Вновь исполнить команду ФайлžСохранить как. В открывшемся окне сохранения в поле имени файла заменить цифру 1 на цифру 2, вместо символов Прг ввести символы Веб, а вместо символов txt ввести символы htm: 11_Тарасенко _ Веб_2.htm

5) Для сохранения очередной модификации этого файла нажать кнопку Сохранить.

6) Завершить работу в окне Блокнота командой ФайлžВыход.

7) Проверить результат модификации веб-страницы. Для этого в среде ТС в папке пользователя указать новую модификацию веб-файла и дважды нажать ЛКМ - на экран выводится результат распознавания указанного файла.

Задание 3.4. Исследовать способы использования

графических изображений.

3.4.1. При использовании графических изображений следует помнить, что в Интернете важны не художественное качество картинки, а скорость ее загрузки, то есть минимизация размера картинки. Для расположения картинок на веб-страницах в основном используются два графических формата (типы): .gif и .jpg. На рис. 3.2 представлены URL -адреса картинок обоих типов. Для удобства выбора пользователями вариантов справа в адресах указаны их порядковые номера.

Формат .gif преимущественно используется для сохранения рисованных изображений, векторной графики, картинок без полутонов, градиентов (переходов от цвета к цвету) и большого количества мелких деталей различных цветов. Этот формат позволяет хранить изображения, содержащие не более 256 цветов. Сокращение объема информации о цветах значительно уменьшить размер файла и время загрузки. Кроме того, формат .gif используется для сохранения анимированных картинок и изображений с прозрачными частями; в .jpg такие возможности отсутствуют.

Область применения формата .jpg определяется тем, что он хранит полную цветовую палитру 24-битового изображения, которая может содержать миллионы цветов. При таком объеме информации размер файла значительно возрастает. Но главной особенностью формата .jpg является его способность хранить изображение в сжатом (архивированном) виде. Степень архивации изображения, сохраненного в формате .jpg, может быть весьма значительной: нормальным считается сжатие картинки в 10 - 20 раз без потери качества.

3.4.2. Иллюстрации играют значительную роль в оформлении веб-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются они браузером внутри веб-страницы. Для расположения рисунков на веб-странице в веб-документе применяется одиночный тэг < img >. Этот тэг всегда должен содержать обязательный атрибут src=, значением для которого является URL-адрес файла изображения, записанный в абсолютной или относительной форме.

При загрузке документа вместе с ним загружается рисунок и отображается в том месте документа, где расположен тэг < img >. Изображение переносится на веб-страницу с сохранением размера. Если при компоновке изображения необходимо изменить его масштаб, нужные размеры рисунка можно задать в пикселях с помощью атрибутов width= (ширина) и height= (высота).

3.4.3. Показиллюстраций на веб-страницах связан со сложностями:

1) веб-страница может отображаться браузером, который не имеет средств для показа изображений.

2) пользователи часто отключают отображение рисунков для ускорения приема веб-страниц.

В обоих случаях желательно знать, что изображено на невидимой картинке. Для этой цели используют альтернативный текст, который предоставляет более или менее подробное описание изображения. Альтернативный текст определяется тэгом < img > и значением специального атрибута alt=.

3.4.4. На рис. 3.2 выбрать URL-адрес, порядковый номер которого соответствует номеру пользователя в списке группы, переписать URL-адрес в рабочую тетрадь. Выполнить в веб-документа следующие изменения.

1) В папке группы исполнить текстовый файл веб-документа пользователя - например, 11_Тарасенко_Прг_1.

2) Удалить предыдущий URL-адрес изображения (строка 18) и ввести новый URL-адрес, соответствующий варианту пользователя.

3) Используя указания Задания 3.3, сохранить новую редакцию программы с именем, например, 11_Тарасенко_Прг_3.txt.

4) Используя указания Задания 3.3, сохранить также эту программу с именем, например,

11_Тарасенко_Веб_3. htm.

5) Завершить работу в окне браузера командой ФайлžВыход.

6) Проверить результат модификации веб-страницы с измененным адресом рисунка. Для этого в среде ТС в папке группы исполнить новую модификацию веб-файла - на экран выводится результат распознавания исследуемого файла.

Задание 3.5. Исследовать способы использования

цветной палитры.

Пользователю рекомендуется самостоятельно выполнить изменения во введенной программе цвета текста, ссылок, заголовков веб-документа, которые можно указывать внутри html-тэгов: например, <font color="цвет"> или <body text="цвет">.

Цвета на экране монитора определяется смешением трех цветов - красного (red), зеленого (green) и синего (blue). Первые буквы этих слов определяют цветовую модель RGB. Указать цвет можно его названием; например

< font color="red">Текст будет красным</font>

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

<font color=#FF0000>Текст будет красным</font>.

Перед кодом (рис. 3.3) ставится символ # (диез ); первая пара символов (FF0000) представляет красный цвет, вторая пара (00FF00) - светло-зеленый цвет и третья пара (0000FF) - синий цвет. Необходимо учитывать, что цвета, указанные в тэгах body и font и в bgcolor, могут отличаться в таблицах, в разных компьютерах и системах. Сохранить текст новой редакции программы с именем, например, 11_Тарасенко_Прг_4.txt.

Сохранить новую редакцию программы с именем, например, 11_Тарасенко_Веб_4. htm.

Задание 3.6. Исследовать способы управления

стилями шрифтов.

1) Пользователю рекомендуется самостоятельно выполнить изменения во введенной программе размера, цвета и типа шрифта, которые можно указывать с помощью парного тэга < font >.

Этот тэг влияет на весь текст, расположенный внутри него. Тэг < font > должен иметь хотя бы один из трех возможных атрибутов: size=; color=; faсe=.

2) Атрибут size= определяет размер шрифта. Предполагается, что возможны семь заранее указанных размеров шрифта. Эти значения не соответствуют каким-то единицам измерения, но чем больше значение, тем крупнее шрифт. По умолчанию используется значение 3.

3) Атрибут color= определяет цвет шрифта, который может быть указан либо ключевым словом (red - красный), либо шестнадцатеричным значением (#FF0000 - красный) в системе RGB.

4 ) Атрибут fase= определяет вид шрифта. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для веб-документов нельзя предусмотреть какие шрифты доступны на и поэтому данный атрибут лучше не использовать.

5) Для указания приведенных параметров для всего документа, используют одиночный тэг < basefont >. Он содержит аналогичные атрибуты и указывает вид, цвет и размер шрифта, используемых по умолчанию.

Специальная группа тэгов используется для изменения изображений шрифта:

< b > и </ b > - текст между ними исполняется полужирным шрифтом;

< i> и </ i> - определяют курсивное изображение;

< u > и </ u > - определяют подчеркивание;

< s > и </ s > - определяют вычеркивание текста.

6) Сохранить текст новой редакции программы с именем, например, 11_Тарасенко_Прг_5.txt.

Сохранить новую редакцию программы с именем, например, 11_Тарасенко_Веб_5. htm.

Тема 4