« Назад

1. Характеристика мережі інтернет

Інтернет (мережа Інтернет) – сукупність мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP (Transport Control Protocol/Internet Protocol), спільний простір імен та адрес для забезпечення доступу користувачів до інформаційних ресурсів мережі. Відзначимо, що TCP/IP – це множина комунікаційних протоколів, що визначають як комп’ютери різноманітних типів з різноманітними операційними системами можуть спілкуватись між собою. Кожен комп’ютер, з’єднаний з мережею Інтернет, отримує в ній унікальну адресу (IP- адресу). 

Юридична або фізична особа, яка надає користувачам доступ до мережі Інтернет, називається провайдер.

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

Одна із найбільш популярних мереж, що входить до складу Інтернет є WWW або Web ( Word Wide Web - всесвітня павутина). Популярність даної мережі пояснюється зручністю роботи з різноманітними видами інформації, від простого тексту до мультимедійних роликів.   В свою чергу зручність роботи забезпечується використанням посилань.

Посилання (гіпертекстове посилання) – адреса іншого мережевого інформаційного ресурсу у форматі URL (Universal Resource Location), який тематично, логічно або будь-яким іншим способом пов’язаний з документом, у якому це посилання визначене.

Окремий інформаційний ресурс мережі WWW, що має власну адресу, називають   Web-сторінкою або Web-сайтом.  Для передачі даних в мережі WWW використовується протокол прикладного рівня HTTP (Hyper Text Transfer Protocol).

Програмне забезпечення, що надає користувачам інтерфейс для доступу до інформації Web-сторінок та їх перегляду, називають  броузер або браузер. На сьогодні найбільш популярними та поширеними є браузери Microsoft Internet Explorer, Netscape Navigator та Opera.

Інформаційні системи, призначені та пристосовані для використання в мережі WWW, називають Web-орієнтованими ІС.

Як і вся мережа Інтернет, мережа WWW базується на багаторівневій архітектурі "клієнт-сервер".

Наведемо деякі пояснення стосовно архітектури та функціонування мережі WWW.

Клієнт мережі Інтернет (робоча станція) – окремий (персональний) комп’ютер або віддалений термінал мережі, з яких користувачі отримують доступ до ресурсів мережі Інтернет.

Клієнт мережі WWW– браузер, що використовується клієнтом мережі Інтернет для доступу до ресурсів мережі WWW.

Сервер – об’єкт комп’ютерної системи (програмний або програмно-апаратний засіб), що надає послуги іншим об’єктам за їх запитами.

WEB - сервер – сервер, який обслуговує запити користувачів (клієнтів) згідно з протоколом HTTP, забезпечує актуалізацію, збереження інформації WEB-сторінки, зв’язок з іншими серверами.

Для отримання доступу до певного інформаційного ресурсу мережі WWW (Web–сайту) клієнт (браузер) встановлює TCP–з’єднання з Web–сервером, що обслуговує даний сайт. З’єднання встановлюється за допомогою сервера провайдера та мережі Інтернет. Після цього браузер відсилає Web-серверу запит на доступ до ресурсу. Відзначимо, що кожен ресурс в мережі WWW має свою унікальну адресу (URL- адреса).

Наступним етапом є опрацювання Web-сервером отриманого запиту. В найпростішому випадку опрацювання полягає в пошуку Web-сервером необхідного файлу. В більш складних випадках необхідний інформаційний ресурс повинен бути сформований на основі даних запиту.   Під час опрацювання таких запитів Web-сервер досить часто  використовує доступне йому прикладне програмне забезпечення та бази даних. Розробка такого програмного забезпечення дістала назву "програмування на стороні серверу ". В процесі розробки найчастіше використовуються технології: CGI, Active Server Pages, JavaServer Pages, Java Servlets, Server-Side JavaScript, SSi та Php. Використання цих технологій потребує професійних знань в галузі програмування. Це є основною з причин того, що "програмування на стороні серверу" не входить до компетенції більшості Web-дизайнерів.

Після опрацювання запиту відповідь по мережі Інтернет відсилається клієнту. Відповідь надходить у вигляді HTML-документу, який після інтерпретації браузером відображається на екрані робочої станції.  Розробка програмного коду HTML-документу, дістала назву "програмування на стороні клієнта" і є одним із основних завдань Web-дизайну. В процесі розробки, як правило, використовують HTML, CSS та JavaScript.

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

URL- адреса складається із трьох частин:

- Протоколу, який також називають схемою.

- DNS- імені комп’ютера, на якому знаходиться Web-сторінка.

- Локального імені, що ідентифікує Web-сторінку в межах комп’ютера. Звичайно, в якості локального імені використовують ім’я файлу, що відповідає Web-сторінці.

Окремі частини URL- адреси розділяються за допомогою спеціальних символів. Розглянемо приклад адреси головної сторінки Web-сайту пошукової системи META:

http://www.meta.ua/index.htm

Ця URL-адреса складається із трьох частин: протоколу (http), DNS-імені Web-серверу (www.meta.ua) та імені файлу (index.htm).

Відзначимо, що під час реалізації запитів DNS - ім’я комп’ютера (задане людиною-користувачем в адресному рядку браузера або Web-дизайнером при визначенні гіперпосилання) замінюється відповідною IP-адресою. Використання DNS - імен пояснюється тим, що на відміну від цифрових IP - адрес їх застосування викликає у користувачів WWW набагато менше труднощів. 

Особливістю мережі WWW є її поділ на окремі зони, кожна з яких має певне ім’я. Зони визначають тематику Web-сайтів, що належать цим зонам. Деякі імена зон та відповідна тематика сайтів показана в табл. 1.1.

Таблиця 1.1

Зони WWW та тематика Web-сайтів

Імена зон	Тематика сайтів
com	Сайти комерційних структур
edu	Сайти організації освіти
mil	Сайти військових організацій
net	Сайти організацій, що займаються комп’ютерними мережами
gov	Сайти урядових організацій
org	Сайти не комерційних організацій
ua	Сайти, що тематично пов’язані з Україною
ru	Сайти, що тематично пов’язані з Росією
de	Сайти, що тематично пов’язані з ФРН

Призначення DNS-імені комп’ютеру реалізується з врахуванням того, до якої зони належить тематика Web-сайту. Ім’я зони входить в DNS-ім’я в якості суфікса. Наприклад, ім’я пошукової системи META, що входить до української зони WWW:

www.meta.ua

Крім наведеної абсолютної адресації, при визначені гіпертекстових посилань досить часто використовують відносну URL-адресацію. В цьому випадку URL-адреса вказує на ресурс (файл) на тому ж комп’ютері, на якому знаходиться Web-сторінка з гіпертекстовим посиланням. Відносна URL-адреса може містити компоненти відносних шляхів та ідентифікатори фрагментів. Наприклад, вираз "../"  означає що ресурс знаходиться в ієрархії на один рівень вище від  файлу, в якому визначене посилання.

Основними ресурсами мережі WWW є HTML-документи, які представляють собою  файл текстової або нетекстової природи (звук, відео, зображення), створений за допомогою мови гіпертекстової розмітки  HTML (Hyper Text Mark-up Language).

Застосування універсальної мови HTML зумовлене необхідністю представлення інформації для глобального використання комп’ютерами різноманітних типів, що працюють під управлінням різноманітних операційних систем.  Існують стандарти мови HTML, які підтримуються практично всіма провідними компаніями-розробниками програмного та апаратного забезпечення. Ці стандарти передбачають, що HTML-документ буде однаково та коректно  представлений будь-якому користувачеві мережі WWW. 

Мова HTML надає розробникам засоби для:

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

- Навігації по HTML-документам за допомогою гіперпосилань.

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

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

Текстовий HTML-документ представляє собою звичайний текстовий файл з розширенням HTML або HTM. Відзначимо, що в назві файлу можливо використовувати тільки символи латинського алфавіту, арабські цифри, символи дефісу ("-") та підкреслення ("_"). 

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

Всі теги мови HTML-документу виділяються обмежуючими символами (< та >), між якими записується ідентифікатор (ім’я) тегу. Розрізняють одинарні та парні теги.

Наведемо приклад одинарного тегу для відображення у вікні браузера горизонтальної лінії <hr>.

На відміну від одинарного для визначення парного тегу ( тегу-контейнеру ) використовуються відкриваючий та закриваючий тег. Закриваючий тег відрізняється наявністю символу / перед іменем тегу. Наприклад:

<td> Зміст тегу </td>

Все, що записано між відкриваючим та закриваючим тегом називають змістом тегу. В деяких випадках закриваючий тег можливо не використовувати. Наприклад тег-контейнер <li> можливо використовувати без закриваючого тегу </li>.

Теги можуть мати параметри (атрибути). Наприклад, для визначення розміру тексту в тезі <font> можливо використати  атрибут size:

<font size='12'>

Кількість та номенклатура параметрів індивідуальні для кожного тегу. Якщо параметрів декілька, то вони відокремлюються між собою за допомогою пробілів. Наприклад:

<font size=12 color='red'>

Відзначимо, що як імена тегів, так і імена параметрів не чутливі до регістру символів, за допомогою яких вони визначені. Таким чином, визначення тегів <br> та <BR> рівнозначне. Розрізняють параметри тегів, які потребують запису значення та параметри, які використовуються без значення.

Якщо параметр тегу не потребує запису значення, то використовується тільки назва параметру. Наприклад:

<br noshade>   

Якщо параметр тегу потребує запису значення, то воно вказується після назви параметру  після символу "=". Значення параметру може записуватись як в одинарних або подвійних лапках, так і взагалі без лапок. Наприклад:

<td align='left'>

<td align="left">

<td align=left>

Проте рекомендується записувати значення параметру в одинарних або подвійних лапках.

Крім одинарних та парних тегів розрізняють теги рівня блоку та послідовні теги. Різниця між ними полягає в тому, що теги рівня блоку можуть містити послідовні теги та інші теги рівня блоку. Послідовні теги можуть містити тільки данні та інші послідовні теги. Наведемо приклади:

- Теги рівня блоку: <table></table>, <p></p>.

- Послідовні теги: <img>, <br>.

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

Мова HTML передбачає можливість використання кольорового форматування HTML-документу. При цьому кольори визначаються або за допомогою англійських назв, або в форматі RGB (Red Green Blue).

Приклади визначення кольорів за допомогою англійських назв:

- green – зелений.

- red – червоний.

- blue – синій.

- white – білий

- black – чорний.

Хоча такий спосіб визначення кольору досить зручний, але він обмежений кількістю відповідних назв. Тому більш поширений є спосіб визначення кольорів у форматі RGB, який дозволяє використовувати більш ніж 1,5 млн. кольорів.

Передумовою використання формату RGB є те, що будь-який колір можливо визначити за допомогою трьох кольорів: червоного (red), зеленого (green) та синього (blue). В форматі RGB кожному із цих кольорів може відповідати число від 0 до 256, записане в шістнадцятирічному форматі. Відсутність даного кольору відповідає числу 0 (00), а максимальна насиченість числу 256 (ff). Синтаксис RGB передбачає використання знаку "#".

Приклади  визначення кольорів в форматі RGB:

- Червоний – #ff0000.

- Зелений – #00ff00.

- Синій – #0000ff.

- Чорний – #00000.

- Білий –  #fffffff.

Для створення HTML-документу достатньо використовувати текстовий редактор, який не вставляє в текст документу власних команд. Прикладом може бути редактор "Блокнот", що входить в стандартну комплектацію операційної системи Windows.

Технологія створення HTML-документу в випадку застосування "Блокноту" полягає в тому, що Web-програміст визначає текст HTML-документу та теги, що в ньому використовуються. Після цього HTML-документ зберігається у файлі формату html або htm та тестується за допомогою браузеру. Після виправлення помилок HTML-документ може бути розміщений на Web-сервері.

Хоча вказана технологія є досить простою та не потребує спеціального програмного забезпечення, але вона є не оптимальною з точки зору трудомісткості, виявлення помилок при визначенні тегів та високих вимог до кваліфікації Web-програміста. Високі вимоги пояснюються тим, що Web-програмісту необхідно пам’ятати великий обсяг інформації, пов’язаний з номенклатурою та синтаксисом тегів. Тому на сучасному етапі використовують спеціальні HTML-редактори, які дозволяють суттєво підвищити якість програмного коду та прискорити процес створення HTML-документів. Найбільш популярними серед вітчизняних Web-програмістів є HTML-редактори – Macromedia Homesite та Macromedia Dreamweaver. Популярність цих редакторів пояснюється дружнім інтерфейсом користувача, наявністю вбудованої в редактори бібліотеки тегів та синтаксичного аналізатора правильності програмного коду HTML-документу, а також можливістю застосування візуальної технології створення HTML-документів.

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

2. Правила побудови html - документів

Першим тегом, з якого слід починати опис HTML-документу, є тег <html>. Він завжди повинен починати опис документу, а завершати опис повинен тег </html>. Тобто тег <html> є тегом контейнером для всієї HTML-сторінки. Сам документ є звичайним текстовим ASCII - файлом і може складатися із двох розділів - заголовка та змістовної частини.

Розділ заголовка  відкривається тегом <head> і закривається тегом </head>. Задачею заголовку є надання браузеру інформації, необхідної для коректного відображення HTML-сторінки. Теги, що знаходяться всередині розділу заголовку (крім назви документу) на екрані не відображаються. Назву документу визначають за допомогою тегу контейнеру <title>. Наприклад:

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

Змістовна частина документу, що не містить фреймів, визначається тегом контейнером <body>. Тобто весь текст та всі теги змістовної частини документу  знаходиться між тегами <body> та </body>.

Таким чином, для визначення простої HTML-сторінки  досить написати:

         <html><head><title> Заголовок моєї Web-сторінки</title>

         </head><body>

         Зміст Web-сторінки

           </body></html>

Відзначимо, що в розділі заголовку досить часто використовується тег <meta>. За допомогою цього тегу вирішують деякі типові задачі:

1. Визначення кодування тексту HTML-сторінки. Наприклад, визначення того, що кодування тексту HTML-сторінки, задане в найпоширенішому серед вітчизняних користувачів форматі windows-1251, можливо здійснити так:

<META http-equiv=Content-Type content="text/html; charset=windows-1251">

2. Визначення ключових слів, що використовуються пошуковими системами. Наприклад, визначення ключових слів "економіка" та "торгівля" можливо здійснити так:

<META name="keywords" content="економіка, торгівля">

3. Визначення опису HTML-сторінки в пошуковій системі. Наприклад:

<META name="description" content =  "сайт присвячений економіці та торгівлі ">

4. Відображення в браузері визначеної HTML-сторінки. Наприклад, для переходу на HTML-сторінку 1.html через 20 секунд після відображення поточної HTML-сторінки необхідно:

<meta http-equiv="refresh"

content="20;URL=untitled1.html">

Також необхідно відзначити, що тег <body> може мати ряд необов’язкових параметрів (див. табл.2.1), які визначають форматування всієї HTML-сторінки. 

Таблиця 2.1

Параметри тегу <body>

Параметр	Призначення
Alink	Визначає колір активного гіперпосилання
Background	Вказує на адресу фонового зображення
Bottommargin	Визначає межу нижнього поля документу
Bgcolor	Визначає колір фону документу
Bgproperties	Дозволяє, або забороняє прокрутку фонового зображення
Leftmargin	Визначає межу лівого поля документу
Link	Визначає колір не переглянутого гіперпосилання
Rightmargin	Визначає межу правого поля документу
Scroll	Встановлює, або забороняє смуги прокрутки вікна браузера
Text	Визначає колір тексту
Topmargin	Визначає межу верхнього поля документу
Vlink	Визначає колір переглянутого гіперпосилання

Наприклад, для визначення документу з текстом зеленого кольору та відсутністю смуг прокрутки слід написати:

<body  text="green" scroll="0">

Розглянемо форматування тексту засобами HTML. Форматування реалізується за допомогою спеціальних тегів. Всі теги форматування тексту використовуються тільки в розділі <body> і є парними тегами. Найчастіше використовуються такі теги:

Тег <b> - призначений для відображення тексту напівжирним шрифтом. Наприклад:

<b>Це напівжирний шрифт</b>

Тег <i> - призначений для відображення тексту курсивом. Наприклад:

<i>Це курсив</i>

Тег <u> - призначений для відображення тексту підкресленим. Наприклад:

<u>Це підкреслений текст</u>

Тег <s> - призначений для відображення тексту перекресленими символами.  Наприклад:

<s>Це перекреслені символи</s>

Тег <sub> - призначений для відображення тексту в вигляді верхнього індексу. Наприклад:

_{Верхній індекс}

Тег <sup> - призначений для відображення тексту в вигляді нижнього індексу. Наприклад:

^{Нижній індекс}

Теги  <sub>  та <sup> зручно використовувати для виводу формул.

Всі теги форматування тексту можуть бути вкладені один в інший. Це дозволяє проводити комбінований вивід тексту. Наприклад, для того, щоб текст був виведений курсивом та був підкресленим необхідно:

 <i><u>Приклад підкресленого курсиву</u></i>

Порядок вкладення тегів один в інший значення не має. Наприклад, попередній приклад коректно записати і так:

<u><i>Приклад підкресленого курсиву</i></u>

Зміна зовнішнього вигляду тексту в вікні браузера при використанні наведених тегів форматування показана на рис. 2.2.

Тег <font> - призначений для визначення параметрів шрифту. За допомогою цього тегу можливо визначити колір символів, їх розмір та тип шрифту. Зміна параметрів шрифту відбувається за допомогою змін параметрів тегу color, size та face.

Параметр color. Дозволяє змінювати колір символів. Наприклад, визначення зеленого кольору символів можливо реалізувати так:

<font color="green">Цей текст зеленого кольору/font>

Відзначимо, що кольору тексту, визначений за допомогою цього тегу, має пріоритет  над кольором, визначеним за допомогою тегу <body>. Тобто, якщо в  тегу <body text="red"> визначено, що колір тексту червоний, а в тегу <font color="yellow"> заданий жовтий колір, то на всій HTML-сторінці текст буде червоний, але блок, обмежений тегом <font>, буде жовтого кольору.

Параметр face. Дозволяє задати тип шрифту, яким браузер буде виводити текст. Для цього в якості значення параметру необхідно вказати назву шрифту. Наприклад,  вивід тексту шрифтом Courier New, можливо реалізувати так:

<font face="Courier New"> Використовуємо шрифт Courier New</font>

Відзначимо, якщо на комп’ютері користувача такого шрифту немає, то браузер буде використовувати стандартний шрифт. Крім того, можливо задати не одну, а декілька назв шрифтів, розділених комами. Якщо, на комп’ютері користувача не буде першого шрифту, то браузер намагатиметься знайти шрифт за номером два і так далі. Наприклад:

<font face="Arial,Helvetica, sans-serif">Використовуємо шрифт Arial, якщо такого нема, то Helvetica і так далі.</font>

Параметр size. Дозволяє визначити розмір символів. Розмір задається в умовних одиницях від 1 до 7. Фактичний розмір умовних одиниць залежить від характеристик екрану комп’ютера користувача та настройок браузера. Цифра один відповідає найменшим символам, а 7 найбільшим. Розмір символів при стандартних установках 3. Розмір символів можливо вказувати як в абсолютних, так і в відносних величинах.

Синтаксис запису наступний:

<font size=x>Визначення символів в абсолютних величинах</font>

<font size=± x> Визначення символів в відносних величинах</font>

В першому випадку х це цифра  від 1 до 7, тобто величина символів в умовних одиницях. В другому випадку х може бути як додатнім, так і від’ємним числом. Причому знак + або – треба вказувати обов’язково. Величина х буде показувати на скільки умовних одиниць повинна змінитись величина символів відносно поточного значення.

Наприклад, вивід тексту з розміром символів 7  та 1 можливо реалізувати так:

<font size=7>Визначення символів розміром 7</font>

<font size=1>Визначення символів розміром 1</font>

Зменшення символів на одну умовну одиницю відносно поточного значення:

<font size=-1> Зменшення символів на 1 умовну одиницю </font>

Збільшення символів на одну умовну одиницю відносно поточного значення:

<font size=+1> Збільшення символів на 1 умовну одиницю </font>

Приклади використання параметрів face та size показані на рис.2.3.

Тег <basefont> використовується для визначення параметрів шрифту, які будуть використовуватись в якості стандартних при перегляді HTML-сторінки. Параметри тегу <basefont> ті ж самі, що і для тегу <font>. Зміна параметрів  <basefont> розповсюджується на ту частину HTML-сторінки, яка розміщена нижче тегу <basefont>. При сумісному використанні тегу <basefont> з <font> має пріоритет тег <font>. На відміну від <font> <basefont> не має закриваючого тегу. Його дія розповсюджуються до кінця HTML-сторінки, або до ще одного тегу <basefont>. Наприклад, визначення шрифту розміром 4 за допомогою тегу <basefont> можна здійснити так:

<basefont size=4>Використання тегу basefont

Відзначимо, що теги <font> та <basefont> відносяться до послідовних тегів, а тому не можуть включати в себе теги рівня блоку, наприклад <table> або <tr>.

Для виділення тексту, крім вказаних тегів форматування, досить часто на сайтах використовують теги заголовків. До них відносяться теги - <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Виділення тексту реалізується за рахунок зміни розмірів та "жирності" тексту. Тегу h1 відповідає найбільший розмір тексту, а h6 - найменший розмір. Особливістю даних тегів є вставка порожнього рядка до і після  виділеного фрагменту тексту.  Наприклад, для виділення в тексті HTML-сторінки трьох фрагментів тексту  як заголовків 1, 3 та 6 рівнів, необхідно:

<body>

Звичайний текст. <h1> Заголовок 1 рівня </h1>

Звичайний текст. <h3> Заголовок 3 рівня </h3>

Звичайний текст. <h6> Заголовок 6 рівня </h6>

Звичайний текст.

</body>

Всі вказані теги є парними та можуть використовуватись з необов’язковим параметром align, який служить для горизонтального вирівнювання тексту.  Можливі значення параметру align показані в табл. 2.2.

Таблиця 2.2

Значення параметру align

Значення параметру	Наслідки використання
Left	Текст вирівнюється по лівій стороні вікна браузера
Center	Текст вирівнюється по центру вікна браузера
Right	Текст вирівнюється по правій стороні вікна браузера
Justify	Текст вирівнюється по ширині вікна браузера. Візуально відрізняється від left тільки в тому випадку, коли текст заголовку містить більш ніж два рядки тексту.

Відзначимо, якщо параметр align не заданий, то використовується вирівнювання заголовку по центру вікна браузера.

Розглянемо приклад визначення на HTML-сторінці чотирьох заголовків третього рівня з різними параметрами вирівнювання. Для цього  в розділі необхідно записати:

<body> Звичайний текст.

<h3 align="center"> Заголовок вирівнюється по лівій стороні вікна браузера</h3>

Звичайний текст.

<h3 align="center"> Заголовок вирівнюється по центру вікна браузера</h3>

Звичайний текст.

<h3 align="right"> Заголовок вирівнюється по правій стороні вікна браузера</h3>

Звичайний текст.

<h3 align="justify"> Заголовок вирівнюється по ширині вікна браузера.

Візуально відрізняється від left тільки в тому випадку, коли текст заголовку містить більш ніж два рядки тексту. </h3>

Звичайний текст. </body>

Розглянемо теги форматування HTML-документу. Почнемо з тегу <br> , що використовується для примусового переводу рядка. Необхідність використання даного тегу пояснюється тим, що при відображенні текстових документів  перенесення тексту із одного рядка в інший відбувається автоматично та залежить в основному від  розмірів шрифту та розмірів вікна браузера. При цьому переведення рядка може здійснюватись тільки по символам, що розділяють окремі слова.

Наприклад, HTML-код для запису виразів "Перший рядок" та "Другий рядок" в двох різних рядках  такий:

<body>

Перший рядок <br> Другий рядок

</body>

Парний тег <nobr> на відміну від тегу <br> використовується для заборони переводу рядка. Наприклад, для гарантованого розміщення в одному рядку виразу "Цей текст повинен відображатись в одному рядку" необхідно:

<nobr> Цей текст повинен відображатись в одному рядку </nobr>

Якщо даний текст не буде вміщуватись в одному рядку, то в вікні браузера з’явиться горизонтальна  смуга прокрутки.

Тег <p> призначений для розділу тексту HTML-сторінки на окремі абзаци. Даний тег є тегом-контейнером та може використовуватись з необов’язковим параметром align. Значення параметру align та наслідки його використання для абзаців ті ж самі, що і для заголовків, див. табл. 2.2. Відзначимо, що візуально в вікні браузера абзац буде відділятись від іншого тексту за допомогою порожніх рядків. Крім того  можливо змінити горизонтальне вирівнювання абзацу. Наведемо приклад використання тегу <p>:

<body>

Звичайний текст

<p align="center"> Абзац з горизонтальним вирівнюванням - "по центру" </p> </body>

Відповідне вікно браузера показане на рис. 2.6.

Парний тег <center> призначений для горизонтального вирівнювання елементів HTML-сторінки посередні вікна браузера. Наведемо приклад його використання:

 <body>

Звичайний текст

<center> Текст з горизонтальним вирівнюванням - "по центру" </center>

Звичайний текст  </body>

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

Тег - контейнер <pre> використовується для визначення попередньо відформатованого тексту. Текст, розміщений між тегами <pre> та </pre>, буде виведений у вікні браузера з збереженням деяких параметрів форматування, виконаних за допомогою  текстових редакторів.  Відзначимо, що в середині контейнеру <pre> не можна використовувати деякі важливі та широко вживані теги. Тому використання цього тегу  досить обмежене.

Тег <hr> - призначений для виведення в вікні браузера горизонтальної лінії, до і після якої вставляються порожні рядки. Необов’язкові параметри тегу <hr> та їх призначення наведені в табл. 2.3.

Таблиця 2.3

Параметри тегу <hr>

Параметр	Призначення
align	Визначення горизонтального вирівнювання лінії. Можливі значення: left  ("по лівому краю"), center ("по центру"), right ("по правому краю"). Якщо параметр align не використаний, то застосовується вирівнювання "по центру"
color	Встановлює колір лінії
noshed	Відміняє рельєфність лінії
size	Визначає товщину лінії
width	Встановлює довжину лінії

Наприклад, для визначення лінії червоного кольору, товщиною 2 пікселі, довжиною 400 пікселів, без рельєфу необхідно:

<hr color="red" size=2 width=400 noshade>

В деяких випадках необхідно не показувати у вікні браузера частину HTML-коду сторінки, тобто закоментувати цей код. Для цього використовуються теги коментарів <!-- та -->. Наприклад:

 <!-- Цей текст не буде відображатись у вікні браузера -->

Як відомо, при створенні HTML-сторінки повинні застосовуватись тільки символи, що входять до базової частини таблиці кодів ASCII. Про те, деякі спеціальні символи     ( наприклад, пробіл ) не входять до цієї частини таблиці. В випадку використання вказаних спеціальних символів необхідно застосовувати спеціальні HTML-коди, див. табл. 2.4.

Таблиця 2.4

Коди спеціальних символів

Спеціальний символ	HTML-код
Амперсанд (&)	&
Знак copyright (©)	©
Знак більше (>)	>
Знак менше (<)	&lt;
Пробіл	&nbsp;
Знак плюс/мінус (±)	&plusmn;
Знак одна друга (½)	&frac12;
Знак одна друга (¼)	&frac14;
Знак одна друга (¾)	&frac34;
Знак "»"	&raquo;
Знак "§"	&sect;
Знак "«"	&laquo;

 

3. Використання графіки та звуку

Для вставки рисунка в HTML-сторінку використовується тег <img>. Основним параметром цього тегу є параметр src, за допомогою якого вказується адреса файлу, в якому і зберігається рисунок. Цей же тег також можливо використовувати для показу відео - роликів. В цьому випадку використовується параметр dynsrc, за допомогою якого вказується адреса відео файлу. Найпоширенішими форматами файлів-рисунків є  формати jpg, gif, png,  а відео файлів -  avi.

Відзначимо, що  адреса файлу-рисунка може бути вказана в абсолютному та відносному форматі. При використані абсолютного формату в адресі,  повністю визначено комп’ютер, каталог та файл рисунку.

Наприклад, для вставки рисунка, що зберігається в файлі logo.gif, за адресою www.picture.com.ua/picture необхідно:

<img src=" www.picture.com.ua/picture/logo.gif"> 

При використанні відносного формату визначення місцезнаходження файл-рисунку відбувається з урахуванням місцезнаходження даної HTML-сторінки.

Наприклад, для вставки в HTML-сторінку prim..html рисунка, який зберігається в файлі logo.gif, що знаходиться  в одному  каталозі з файлом   prim..html необхідно:

<img src="logo.gif"> 

Графічні файли зручно зберігати в окремому каталозі, наприклад, в каталозі з іменем img. В цьому випадку, для вставки в HTML-сторінку prim.html рисунка logo.gif   необхідно:

<img src="img/logo.gif"> 

Відзначимо, що каталог img та файл prim.html повинні знаходитись в одному каталозі. Крім обов’язкового параметру src  тег <img>  має декілька необов’язкових параметрів, див. табл. 3.1.

Таблиця 3.1

Параметри тегу <img>

Назва параметру	Призначення
alt	Визначення альтернативного тексту
width	Ширину рисунку в пікселях
height	Висоту рисунку в пікселях
hspace	Відступ від рисунку до інших об’єктів на HTML-сторінці по вертикалі
vspace	Відступ від рисунку до інших об’єктів на HTML-сторінці по горизонталі
border	Товщина рамки навколо рисунку
lowsrc	Задає файл з альтернативним зображенням
align	Вирівнювання рисунку відносно інших об’єктів на HTML-сторінці
src	Адреса графічного файлу
dynsrc	Адреса відео файлу
start	Задає момент початку прокрутки відео ролика. Можливі  значення: fileopen - ролик починається відразу після завантаження відео файлу, mouseover - ролик починається при наведенні миші на зображення.
loop	Задає кількість повторів відео - ролика. Якщо значення дорівнює  –1,  то програвання відбувається безперервно

Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують браузера, що працює в режимі відключення завантаження зображень. Як відомо, цей режим дозволяє зменшити час відображення HTML-сторінки в вікні браузера. В цьому випадку замість зображення на екрані з’являється альтернативний текст, заданий в параметрі alt. Крім цього альтернативний текст відображається в якості підказки при знаходженні курсору "миші" в області рисунку. Приклад використання параметру alt:

<img src="logo.gif"  alt="Альтернативний текст" >

Параметри width  та height призначені для визначення розмірів рисунку у вікні браузера. Відзначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто час завантаження рисунку не змінюється. Наведемо приклад застосування параметрів   alt,  width   та height для одного і того рисунку:

<img src="logo.gif"   width="184"   height ="164"  alt="Альтернативний текст" >

<img src="logo.gif"   width=" 92 "   height =" 82"  alt="Альтернативний текст" >

<img src="logo.gif"   width=" 150 "   height ="40 "  alt="Альтернативний текст" >

Відповідне вікно браузера показане на рис. 3.1.

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

Параметр border дозволяє визначити товщину рамки навколо рисунку. Застосуємо цей параметр із значенням 2  для рисунків попереднього прикладу:

<img src="logo.gif"   width="184"   height ="164"  border="2">

<img src="logo.gif"   width=" 92 "   height =" 82"  border="2" >

<img src="logo.gif"   width=" 150 "   height ="40 "  border="2">

Параметри hspace та vspace дозволяють в пікселях задавати відступи від рисунку до інших об’єктів на HTML-сторінці. Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього прикладу:

<img src="logo.gif"   width="184" height="164" hspace="20" vspace="20" border="2">

<img src="logo.gif"   width=" 92 "   height =" 82"  hspace="20" vspace="20" border="2" >

<img src="logo.gif"   width=" 150 "   height ="40 " hspace="20" vspace="20" border="2">

Параметр lowsrc дозволяє визначити файл з альтернативним зображенням, яке з’являється у вікні браузера  до появи основного зображення. Альтернативне зображення, як правило, це рисунок того ж змісту, що і основний, але менш якісний. По цій причині файл альтернативного зображення менший за розміром, а тому завантажується набагато швидше ніж основний. Це дозволяє швидко показати загальні риси зображення. Приклад використання:

<img src="logo.gif" width="184" height="164" lowsrc ="small.gif">

Параметр align використовується для визначення горизонтального або вертикального вирівнювання рисунку відносно інших об’єктів на HTML-сторінці.  Параметри вирівнювання залежать від значень параметру align. При використанні цього параметру із значеннями left або right рисунок розміщується відповідно до лівої або правої сторони вікна браузера, а текст "обтікає" зображення з протилежної сторони. Відзначимо, що в цьому випадку текст може займати декілька рядків. Приклад використання параметру align:

<body>

<img src="logo.gif" width="182" height="162" border="1" align="right">

Приклад використання параметру align="right". Рисунок розміщений

біля правої сторони вікна браузера. Текст обтікає зображення з лівої сторони.

</body>

Крім left та right параметр aling може приймати наступні значення:

- top - верхня межа зображення вирівнюється по найбільш високому елементу рядка.

- texttop - верхня межа зображення вирівнюється по найбільш високому текстовому елементу рядка.

- middle - середина зображення вирівнюється по базовій лінії рядка.

- absmiddle - середина зображення вирівнюється по середині рядка.

- bottom - нижня межа зображення вирівнюється по базовій лінії рядка

- absbottom - нижня межа зображення вирівнюється по нижній межі рядка

В цих випадках зображення можна розглядати як звичайний елемент рядка.

Відзначимо, що базова лінія тексту - це нижня лінія рядка тексту без врахування нижньої частини деяких символів (р, j, y).

Наведемо приклад використання параметру align тегу <img> з значеннями top, middle та bottom:

<body>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="top">

Приклад використання параметру align="top". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="middle">

Приклад використання параметру align="middle". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="bottom"> Приклад використання параметру align="bottom".

</body>

Для програвання звуку на Web-сторінках можливо використовувати тег <embed>, основним параметром якого є src, що дозволяє визначити адресу звукового файлу. Наприклад, для того, щоб при перегляді в браузері Web-сторінки прозвучав звук записаний в файлі 1.wav, необхідно записати такий HTML-код:

<embed src=1.wav >

Основні параметри цього тегу показані в табл.3.2.

Табл. 3.2

Парметри тегу <embed>

Назва параметру	Призначення
width	Ширину звукового програвача в пікселях
height	Висоту звукового програвача  в пікселях
hspace	Відступ від звукового програвача  до інших об’єктів на HTML-сторінці по вертикалі
vspace	Відступ від звукового програвача  до інших об’єктів на HTML-сторінці по горизонталі
hidden	Дозволяє показувати/не показувати (false/true) звуковий програвач у вікні браузера
lowsrc	Задає файл з альтернативним зображенням
align	Вирівнювання рисунку відносно інших об’єктів на HTML-сторінці
src	Адреса графічного файлу
dynsrc	Адреса відео файлу
autostart	Задає момент початку прокрутки відео ролика. Можливі  значення: true  - програвання починається відразу після завантаження звукового файлу, false - програвання починається після команди користувача.
loop	Задає кількість повторів відео - ролика. Можливі значення: true  - програвання відбувається безперервно, false -  кількість повторів визначається користувачем.