ВЕБ-ДОКУМЕНТОВ
Задание 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