Лекція №4, Організація інформації в Інтернет. HTML

« Назад

1. Організація World Wide Web (WWW)

В Iнтернеті існує ряд протоколів, побудованих на базових протоколах TCP/IP, які пропонують різноманітний сервіс. Останнім часом найбільш популярним сервісом в Iнтернеті став сервіс WWW (World Wide Web - Всесвітня павутина). В основу даної системи покладено поняття гіпертексту, тобто безліч окремих текстів, які мають посилання один на одного. Слова, що містяться в одному документі, ніби "прив'язані" до інших документів. Наприклад, якщо в змісті книжки замість номерів сторінок поставити посилання на відповідні частини тексту і створити можливість переходу за цими посиланнями, то таку книжку буде зручніше читати. Оскільки посилання можуть вказувати на документи в Iнтернеті в будь-якому куточку Землі, то дана система одержала назву Всесвітньої павутини. Для роботи зі Всесвітньою павутиною використовується спеціальний протокол НТТР(Hyper Text Transfer Protocol) - протокол передачі гіпертексту.

Гіпертекст - це текст із виділеними фрагментами, що відіграють роль посилань, активізація яких спричиняє виконання певних дій, наприклад: виведення графічного зображення, відтворення звуку, відкриття нового документу тощо. Дії, які асоціюються з певними гіперпосиланнями, можуть виконуватися автоматично (наприклад, вставка малюнка в певне місце тексту або програвання музичної мелодії під час читання документа).

Гіпертекстові документи створюються за допомогою HTML(Hyper Text Markup Language)- спеціальної мови розмітки гіпертексту. Документ у Всесвітній павутині, написаний на мові HTML і доступний для перегляду користувачем, називається Web-сторінкою. Технологія WWW була розроблена Європейською лабораторією фізики елементарних частинок. Принцип роботи у Всесвітній павутині схожий на роботу з енциклопедією: ви читаєте одну певну статтю і, користуючись посиланнями, що зацікавили вас, читаєте ще й інші статті. Крім тексту в документах WWW можуть знаходитися графічні зображення, звуки і відео кліпи.

Щоб почати користуватися World Wide Web, потрібно з'єднатися з мережею Iнтернет і мати в наявності спеціальну програму-провідника по Всесвітній павутині.

2. Поняття про мову HTML, Web-сторінку, гіпертекстові документи

Щоб представити інформацію для глобального використання, потрібний універсальна мова, що розуміли б усі комп'ютери. Мовою публікації, використовуваним у World Wide Web, є HTML (HyperText Markup Language - мова розмітки гіпертекстів).

HTML дає авторам засоби для:

• публікації електронних документів із заголовками, текстом, таблицями, списками, фотографіями і т.д.

• завантаження електронної інформації за допомогою щиглика миші на гіпертекстовому посиланні.

• розробки форм для виконання транзакцій з вибраними службами, для використання в пошуку інформації, резервуванні, замовленні продуктів і т.д.

• включення електронних таблиць, відеокліпів, звукових фрагментів і інших додатків безпосередньо в документи.

Коротка історія HTML

<span title="HTML::development of">Мова HTML</span> був розроблений Тімом Бернерс-Лі під час його роботи в <span title="CERN">CERN</span> і розповсюджений браузером Mosaic, розробленим у NCSA. У 1990-х роках він домігся особливих успіхів завдяки швидкому росту Web. У цей час HTML був розширений і доповнений. У Web дуже важливе використання тих самих угод HTML авторами Web-сторінок і виробниками. Це стало причиною спільної роботи над специфікаціями мови HTML.

<span title="HTML::version 2.0">HTML 2.0</span> (листопад 1995, [RFC1866]) був розроблений під егідою <span title="Internet Engineering Task Force (IETF)">Internet Engineering Task Force (IETF)</span> для упорядкування загальноприйнятих положень наприкінці 1994 року. <span title="HTML::version HTML+">HTML+</span> (1993) і <span title="HTML::version 3.0">HTML 3.0</span> (1995, [HTML30]) - це більш багаті версії мови HTML. Незважаючи на те, що в звичайних дискусіях згода ніколи не була досягнута, ці чернетки привели до прийняття ряду нових властивостей. Зусилля Робочої групи World Wide Web Consortium по HTML в упорядкуванні загальноприйнятих положень у 1996 привели до версії <span title="HTML::version 3.2">HTML 3.2 </span>(січень 1997, [HTML32]).

Більшість людей визнають, що документи HTML повинні працювати в різних браузерах і на різних платформах. Досягнення сумісності знижує витрати авторів, оскільки вони можуть розробляти тільки одну версію документа. У противному випадку виникає ще більший ризик, що Web буде являти собою суміш особистих несумісних форматів, що в кінцевому рахунку приведе до зниження комерційного потенціалу Web для всіх учасників.

У кожній версії HTML починалася спроба відбити усе більше число угод між працівниками і користувачами цієї індустрії, щоб зусилля авторів не були витрачені впусту, а їхні документи не стали такими, що нечитаються в короткий термін.

Мова HTML розроблявся з того погляду, що всі типи пристроїв повинні мати можливість використовувати інформацію в Web: персональні комп'ютери з графічними дисплеями з різним дозволом і числом квітів, стільникові телефони, переносні пристрої, пристрої для висновку і введення мови, комп'ютери з високою і низькою частотою і т.д.

HTML 4.0

У HTML 4.0 уводяться механізми таблиць стилів, скриптів, кадрів, впровадження об'єктів, поліпшена підтримка різних напрямків листа і напрямки праворуч ліворуч, таблиці з великою кількістю можливостей і нові властивості форм, забезпечуючи кращі можливості доступу для людей з фізичними недоліками.

Інтернаціоналізація

Ця версія HTML розроблена за допомогою експертів в області інтернаціоналізації, так що документи можна писати на будь-якій мові і легко передавати їх по усьому світі. Це досягається за рахунок використання [RFC2070], стосовного до інтернаціоналізації HTML.

Важливим кроком стало прийняття стандарту ISO/IEC:10646 (див. [ISO10646]) як набір символів для документів HTML. Це найбільш змістовний стандарт у світі, у якому вирішені питання представлення національних символів, посилання листа, пунктуації й інших мовних питань.

HTML тепер надає кращу підтримку різних мов в одному документі. Це забезпечує більш ефективне індексування документів для пошукових машин, друкарню вищої якості, перетворення тексту в мову, більш зручні переноси і т.д.

Оскільки співтовариство Web росте, і можливості й уміння його членів розрізняються, дуже важливо, щоб основні технології відповідали потребам. Мова HTML розроблена так, щоб зробити Web-сторінки більш доступними для користувачів з фізичними недоліками. У HTML 4.0 маються наступні доповнення, продиктовані розуміннями доступності:

• посилено поділ структури і представлення документа, що спонукує використовувати таблиці стилів замість елементів і атрибутів представлення мови HTML.

• поліпшено форми, включена можливість призначення клавіш доступу, можливість семантичного угруповування керуючих елементів форми, семантичного угруповування варіантів у тезі SELECT і активні мітки.

• додано можливість розмітки текстового опису включеного об'єкта (за допомогою елемента OBJECT).

• уведений новий механізм дії зображень-карт на стороні клієнта (елемент MAP), який дозволяє авторам інтегрувати зображення і текстові посилання.

• альтернативний текст для зображень, що включаються за допомогою елемента IMG, обов'язковий.

• додано підтримку атрибутів title і lang в всіх елементах.

• додано підтримку елементів ABBR і ACRONYM.

• більш широкий діапазон цільових пристроїв (телетайп, шрифт Бройля і т.д.) для використання в таблицях стилів.

• поліпшено таблиці, включена підтримка заголовків, груп стовпців і механізмів для спрощення невізуального представлення документа.

• додано довгі описи таблиць, зображень, кадрів і т.д.

Автори, що розробляють сторінки з урахуванням доступності, одержать не тільки цю можливість, але також і деякі інші: добре розроблені документи HTML з розділеними структурою і представленням будуть легше адаптуватися до нових технологій. <div>

Структура тексту html документу виконується за допомогою спеціальних елементів – тегів, які мають наступну будову:

- Ліва кутова дужка “<” (менше)

- необов’язковий слеш “/”, який означає, що тег є кінцевим, оскільки вони здебільшого записуються в парі – відкриваючий і закриваючий або кінцевий теги. В окремих випадках кінцеві теги необов’язкові.

- імені тега, наприклад TITLE

- необов’язкових атрибутів, які встановлюють параметри конкретного тега.

- правої кутової дужки “>”

Щоб почати користуватися World Wide Web, потрібно з'єднатися з мережею Iнтернет і мати в наявності спеціальну програму-провідника по Всесвітній павутині. Така програма називається Web-браузером (browser-провідник), вона може відображати різноманітні типи інформації Web і переходити з теми на тему за гіпертекстовими посиланнями, які вбудовані в Web-документи.

Гіпертекстові зв'язки(посилання) виділяються на екрані кольором або/і підкреслюються. Якщо вибрати деякий гіпертекстовий зв'язок, Web-броузер відобразить документ, на який вказує даний зв'язок. Найчастіше використовуються броузери, які входять в пакети програм для роботи з Iнтернетом: Internet Explorer і Netscape Navigator. Крім того, деякі комерційні діалогові служби, наприклад, America Online, мають свої власні броузери.

Зауважимо, що для перегляду файлів, написаних мовою HTML, потрібно виконати такі дії:

• Запустіть броузер.

• Виберіть команди Файл->Открыть і вкажіть у діалоговому вікні шлях до файла.

HTML-файл.

Широке розповсюдження HTML-документи одержали завдяки різноманітним можливостям представлення інформації, легкістю написання та сумісністю з різними операційними системами. Спочатку нагадаємо, що команди мови HTML називають тегами. Теги бувають одинарними і парними. Більшість тегів є парними, наприклад, тег означення HTML-файлу: <html>:</html>. Парні теги позначають початок і кінець області дії відповідної команди. Теги записують у кутових дужках, причому той тег, що закриває область дії, має косу риску (слеш/slash). Тег може містити параметри, які користувач записує у першому тезі через пропуск, наприклад, <body bgcolor="black">.

Всі програми, написані мовою HTML (HTML-файли) мають однакову структуру. Можна зекономити час при створенні своїх Web-сторінок, якщо використовувати цю структуру як еталон. Зокрема, обов'язково повинні бути такі команди(теги):

<html>

<head>

<title>..Назва вікна Web-сторінки.. </title>

</head>

<body>

</body>

</html>

Теги <html> i </html> обмежують WWW-документ і записуються лише задля форми. Команди <head> i </head> обмежують заголовок сторінки. Ці теги також не є обов'язковими, вони допомагають краще структурувати сторінку. Нарешті, <title> виконує важливу функцію. Текст, введений між <title> і </title>, з'являється в броузері в рядку заголовку. Ще важливішим є тег <body>, який дозволяє описати власне Web-документ. В цьому місці розміщується певна кількість параметрів, що визначають зовнішній вигляд документа. Ці параметри, наприклад, визначають, як виглядає фон і колір тексту і яке зображення повинно бути на задньому плані Web-сторінки.

На цьому завершуємо початкове ознайомлення із тегами мови HTML та їх використанням, оскільки на практичних заняттях буде детально розглянуто створення власної Web-сторінки.

На завершення звернемо увагу, що для створення Web-сторінок дизайнери використовують гіпертекстові редактори, наприклад, Macromedia Dreamweaver, Microsoft FrontPage та інші, хоча за достатнього володіння мовою HTML можна писати Web-сторінки в будь-якому текстовому редакторі, наприклад, Блокнот(NotePad). Після написання програм файл потрібно зберегти на диску з певною назвою та розширенням.html чи.htm. Сучасні текстові процесори, наприклад, MS Word, Lotus WordPerfect дають змогу створити Web-сторінки методом конструювання без застосування команд HTML, оскільки вони генерують ці команди автоматично. Загальна назва таких програм, які мають можливість автоматизованого створення Web-сторінок без явного застосування користувачем мови HTML - Web-композери.

Розглянемо дещо детальніше можливості композера, які має програма MS Word. Щоб створити Web-сторінку або цілий Web-сайт, потрібно під час створення нового документу перейти на закладку Web-сторінки і скористатись Майстром Web-сторінки чи створити нову сторінку. У другому випадку алгоритм дій дизайнерів такий:

Командою меню Формат->Фон задають колір фону чи спосіб замальовування екрана певною текстурою.

Уводять текст, вибираючи шрифт, його розмір, колір, вирівнювання тощо.

Створюють списки, як у звичайному текстовому редакторі.

Вставляють горизонтальні лінії командою меню Вставка->Горизонтальная линия, і вибирають тип лінії.

За допомогою команди Таблица створюють і форматують таблиці.

Використовують команду Вставка для вставлення картинок, фотографій, звуку, гіперпосилань тощо. Записують створений файл як Документ HTML, і переглядають його браузером.

Довідник початківця Web-дизайнера Довідник початківця Web-дизайнера

Теги для форматування тексту

 Теги для задання параметрів шрифта FONT

Загальний зразок: < FONT > параметри...</ FONT >, де параметри можуть бути такими:

FACE="..." назва шрифта;

SIZE=i розмір символів i, де і=1,2,3,4,5,6,7;

COLOR="..." колір тексту.

Основні кольори мають такі назви:

Приклад використання тегів <FONT>...</FONT>:

<FONT FACE= "Decor" SIZE=3 COLOR= "aqua"> текст </FONT>

Теги для створення переліків (списків у тексті)

<ul>

<li>

елементи списку <!--створюється ненумерований список-->

<li>

</ul>

Приклад використання див. у завданні 4.

<оl>

<li>

елементи списку <!--створюється нумерований список-->

<li>

<оl>

Приклад використання див. у завданні 5.

Зауваження. В парному тезі <ol>...</ol> можна задати параметр TYPE. Наприклад:

<ol TYPE= "i"> задається нумерація римськими малими цифрами;

<ol TYPE= "і"> задається нумерація римськими великими цифрами;

<ol TYPE= "а"> задається нумерація латинськими малими літерами;

<ol TYPE= "А"> задається нумерація латинськими великими літерами.

Тег для вставляння графічних і відео-файлів <IMG-параметри>

Загальний формат: <IMG SRC= "адреса графічного файлу" параметри>, де параметри можуть бути такими:

ALT= "..." підказка-текст, який виводиться біля картинки;

ALIGN= "..." задається місце розташування картинки на екрані;

WIDTH= "..." задається ширина картинки;

HEIGHT= "..." задається висота картинки;

BORDER= "..." задається товщина рамки в пікселях навколо зображення;

HSPACE= "..." задання пропуску справа і зліва від малюнку;

VSPACE= "..." задання пропуску над і під малюнком;

DYNSRC= "адреса відео-файлу " вставляється відеофільм.

Загальний формат: <MARQUEE параметри>...</MARQUEE>, де параметри можуть бути такими:

BGCOLOR= "колір"	задається колір біжучого тексту
HEIGHT = "розмір пікселя"	задається розмір символів біжучого тексту
BEHAVIOR= "alternate"	ефект відбивання тексту від країв екрану
BEHAVIOR= "slide"	зупиняється біжучий рядок біля лівого краю екрана
DIRECTION= "right"	ефект руху тексту у протилежний бік
LOOP= "N", де N- ціле число	Обмежується кількість повторень біжучого тексту числом N
SCROLLAMOUNT= "N", де 1<=N<=10 (при N=10 - найшвидше)	задається швидкість руху тексту

Таблиці

З кожною таблицею може бути зв'язаний заголовок (див. елемент CAPTION), котрий надає короткий опис таблиці. Можна також вказати і більш довгий опис (за допомогою атрибута summary) для зручності людей, що використовують агенти на базі абетки Бройля чи для зручності людей, що використовують агенти на базі абетки Бройля або мови.

Нижче показана проста таблиця, на прикладі якої ілюструються деякі можливості моделі таблиць мови HTML. Наступне визначення:

<TABLE border="1"

summary="У цій таблиці приводиться деяка статистика про фруктових мух:

середня висота і вага, відсоток мух з червоними очима (особе чоловічої і жіновий статі).">

<CAPTION><EM>Тестова таблиця з об'єднаними осередками </EM></CAPTION>

<TR><TH rowspan="2"><TH colspan="2">Середній

<TH rowspan="2">Червоні<BR>ока

<TR><TH>висота<TH>вага

<TR><TH>чоловіча стать<TD>1.9<TD>0.003<TD>40%

<TR><TH>жіновий стать<TD>1.7<TD>0.002<TD>43%

</TABLE>

Елемент TABLE містить всі інші елементи, що визначають заголовок, рядки, вміст і форматування таблиць

Є два способи визначення кількості стовпців у таблиці (у порядку старшинства):

Якщо елемент TABLE включає елементи COLGROUP чи COL, агенти користувачів повинні підраховувати число стовпців, підсумовуючи наступні цифри:

Для кожного елемента COL - значення його атрибута span (за замовчуванням 1).

Для кожного елемента COLGROUP, утримуючого принаймні один елемент COL - ігнорувати атрибут span для елемента COLGROUP. Для кожного елемента COL виконати обчислення з кроку 1.

Для кожного порожнього елемента COLGROUP - значення його атрибута span (за замовчуванням 1).

У противному випадку, якщо елемент TABLE не містить елементів COLGROUP чи COL, агенти користувачів визначати число стовпців з того, що необхідно для рядків. Число стовпців дорівнює число стовпців, необхідних рядку з найбільшим числом стовпців, включаючи комірки, span кілька стовпців. Для будь-якого рядка, число стовпців у який менше, кінець цього рядка буде доповнюватися порожніми комірками.

Якщо таблиця містить елементи COLGROUP чи COL, і ці два способи підрахунку дають різні результати, це є помилкою.

Підрахунок ширини стовпців

Автори можуть указувати ширину стовпців трьома способами:

Фіксована

Вказання фіксованої ширини дається в пікселах (наприклад, width="30"). Використання фіксованої ширини дозволяє використовувати послідовну генерацію.

У відсотках

Вказання ширини у відсотках (наприклад, width="20%") означає відсоток горизонтального простору, доступного для таблиці (між поточним лівим і правим полями, включаючи floats). Пам'ятайте, що цей простір не залежить від самої таблиці, тому вказівка ширини у відсотках дозволяє використовувати послідовну генерацію.

Пропорційна

Вказання пропорційної ширини (наприклад, width="3*") означає число частин горизонтального простору, необхідного для таблиці. Якщо ширина таблиці визначається як фіксоване значення (за допомогою атрибута width елемента TABLE), агенти користувачів можуть генерувати таблицю послідовно і з вказанням пропорційної ширини.

Однак якщо ширина таблиці не фіксована, агенти користувачів повинні одержати всі дані таблиці перед тим, як вони зможуть визначити горизонтальний простір, необхідний для таблиці. Тільки тоді цей простір може бути розподілений між стовпцями, для яких зазначена пропорційна ширина.

Елементи TR служать контейнерами для рядка комірок таблиці. Кінцевий тег можна опустити.

Ця проста таблиця складається з трьох рядків, кожна з який починається з елемента TR:

<TABLE summary="Проба">

<CAPTION>Скільки чашок кава випиває кожен студент</CAPTION>

<TR>...Рядок заголовка...

<TR>...Перший рядок даних...

<TR>...Другий рядок даних...

...продовження таблиці...

</TABLE>

Елемент TH визначає комірку, що містить інформацію заголовка. Агентам користувачів доступні дві частини заголовної інформації: вміст елемента TH і значення атрибута abbr.

Елемент TD визначає комірку, що містить дані. Наприклад, у наступній таблиці міститься чотири стовпці даних, кожен стовпець має заголовок.

<TABLE summary="...">

<CAPTION>Скільки чашок кава випиває кожен студент</CAPTION>

<TR>

<TH>Ім'я</TH>

<TH>Число чашок</TH>

<TH>Тип кава</TH>

<TH>Цукор?</TH>

<TR>

<TD>Maccofee</TD>

<TD>10</TD>

<TD>Эспрессо</TD>

<TD>Немає</TD>

<TR>

<TD> </TD>

<TD>5</TD>

<TD> </TD>

<TD> </TD>

</TABLE>

і TD.