Конспект лекцій з курсу Основи Web–дизайну Тема 1-4 Передумови створення html-документів, НУДПСУ

Тема 1. ПЕРЕДУМОВИ СТВОРЕННЯ HTML - ДОКУМЕНТІВ

1.1. Інтернет та WWW

Інтернет (мережа Інтернет) – сукупність мереж та обчислювальних засобів, які використовують стек протоколів 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 базується на багаторівневій архітектурі "клієнт-сервер", див. рис. 1.1.

Наведемо деякі пояснення стосовно архітектури та функціонування мережі 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.

1.2. URL - адреса

За допомогою URL- адресації реалізується механізм іменування та ідентифікації розміщення Web-сторінок. Для цього кожній 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-сайтів

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

www.meta.ua

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

1.3. Коротка характеристика мови HTML

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. Саме цим питанням і присвячені наступні лекції.

1.4. Контрольні запитання

1. Що таке Інтернет та WWW?

2. Що таке протоколів TCP/IP?

3. Що таке гіпертекстове посилання?

4. Архітектура мережі Інтернет?

5. Що таке HTML-документ?

6. Правила запису URL- адреси?

7. В чому полягає різниця між абсолютною та відносною URL – адресами?

8. Зони мережі WWW?

9. Основні можливості мови HTML?

10. Визначення HTML – документу?

11. Правила запису тегів в HTML – документі?

12. В чому полягає різниця між парними та непарними тегами?

13. В чому полягає різниця між тегами рівня блоку  та послідовними тегами?

14. Правила визначення кольорів в мові HTML?

15. Технологія створення HTML – документів?

Тема 2. ПРАВИЛА ПОБУДОВИ HTML-ДОКУМЕНТІВ

2.1. Визначення загальних параметрів

Першим тегом, з якого слід починати опис 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>

Відображення цієї сторінки в вікні браузера показане на рис. 2.1.

Відзначимо, що розділі заголовку досить часто використовується тег <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>

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

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

2.2. Форматування тексту

Форматування тексту засобами 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>.

2.3. Використання тегів заголовків

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

<body>

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

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

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

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

</body>

Відповідне відображення HTML- сторінки в вікні браузера показане на рис. 2.4.

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

Таблиця 2.2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.4. Форматування HTML-документу

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

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

<body>

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

</body>

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

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

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

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

<body>

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

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

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

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

 <body>

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

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

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

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

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

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

Таблиця 2.3

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

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

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

2.5. Використання коментарів та спеціальних символів

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

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

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

Таблиця 2.4

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

2.7. Контрольні запитання

1. За допомогою яких тегів визначаються загальні параметри HTML-документу?

2. Як визначити назву HTML- документу7

3. Як визначити змістовну частину HTML – документу?

4. Навіщо використовується тег <meta>?

5. Основні параметри тегу <body>?

6. За допомогою яких тегів реалізується форматування тексту?

7. Чим відрізняється тег <font> від тегу <basefont>?

8. Назвіть основні параметри тегів <font> та <basefont>?

9. Поясніть використання тегів заголовків?

10. Які теги відносяться до тегів форматування HTML – документу?

11. Як визначити абзац?

12. За допомогою якого тегу можливо заборонити перевод рядка?

13. Навіщо використовується тег <pre>?

14. Як визначити коментар?

15. Наведіть приклади кодів найбільш використовуваних спеціальних символів?

Тема 3. РИСУНКИ, ГІПЕРПОСИЛАННЯ, СПИСКИ

3.1. Рисунки

Для вставки рисунка в HTML-сторінку використовується тег <img>. Основним параметром цього тегу є параметр src за допомогою якого вказується адреса файлу в якому і зберігається рисунок. Найпоширенішими форматами файлів-рисунків є  формати jpg, gif, png. Відзначимо, що  адреса файла-рисунка може бути вказана в абсолютному та відносному форматі. При використані абсолютного формату в адресі,  повністю визначено комп’ютер, каталог та файл рисунку. Наприклад, для вставки рисунка, що зберігається в файлі 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>

Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді 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">

Відповідне вікно браузера показане на рис. 3.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">

Результат застосування показаний на рис. 3.3.

Параметр 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>

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

Крім 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>

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

3.2. Гіперпосилання

Як відомо, гіперпосилання призначені для зв’язування одного Web-ресурсу з іншим. Гіперпосилання складається із двох частин. Перша частина це об’єкт який користувач бачить у вікні браузера і вибір якого призводить до переходу на цільовий Web-ресурс, URL-адреса якого вказана в другій частині гіперпосилання.  В якості цього об’єкту можуть бути текст або/та зображення. В залежності від цього класифікують текстові та графічні гіперпосилання. При типових настройках браузера гіперпосилання виділяються на HTML-сторінці за допомогою кольору. Крім того, текст гіперпосилання виділений за допомогою підкреслення. Для визначення гіперпосилання в коді HTML-сторінки використовують парний тег <a>. Основним параметром цього тегу є параметр href, що задає URL-адресу гіперпосилання. Синтаксис запису гіперпосилання такий:

<a href=" URL-адресу "> Текстовий або графічний об’єкт </a>

Приклади запису текстового та графічного гіперпосилання показані нижче:

<a href="www.meta.ua"> Текстове гіперпосилання </a>

<a href="www.meta.ua"> <img src="logo.gif"> </a>

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

<a href="2.html "> Текстовий або графічний об’єкт </a>

 то мається на увазі, що цільова HTML-сторінка 2.html  знаходиться  в тому ж каталозі, того ж комп’ютера в якому знаходиться і HTML-сторінка 1.html.

Абсолютною називається URL-адреса, в якій повністю визначено комп’ютер, каталог та файл цільового ресурсу. Наприклад:

<a href="www.example.com/html/3.html"> Абсолютне гіперпосилання</a>

Важливим параметром тегу <а> є параметр targer, за допомогою якого можливо  вказати вікно браузера в яке повинен бути завантажений цільовий ресурс. Для завантаження цільового ресурсу в нове вікно браузера значення цього параметру має бути "_blank". Наприклад для визначення текстового гіперпосилання вибір якого призводить до відображення в новому вікні браузера файла 2.html необхідно:

<a href="2.html " target="_blank"> Текст </a>

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

Цікавою є можливість гіперпосилань задати в якості цільового ресурсу певну частину власної HTML-сторінки. Наприклад, зручно читати великий документ, коли він має зміст з гіперпосиланнями на різні розділи. В цьому випадку перехід по гіперпосиланню до деякого розділу (який може знаходитись в кінці документу) призведе  до відображення цього розділу на екрані. Такі гіперпосилання називаються внутрішніми. Для їх побудови необхідно за допомогою тегу <а> вказати місце переходу (покажчик) та за допомогою параметру name тега <а> присвоїти йому ім’я.

Наприклад, для переходу на 12 розділ документу на початку тексту цього розділу розмістимо покажчик з іменем  "go12":

<a name="go12"></a>Текст розділу 12

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

Особливістю гіперпосилання для переходу в середині HTML-сторінки є використання в параметрі href імені покажчика з перфіксом #. Наприклад:

<a href="#go12">Перехід до розділу 12</a>

3.3. Списки

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

3.3.1. Маркіровані списки

Для визначення маркірованого списку використовується тег-контейнер <ul>, в середині якого розміщуються всі елементи списку. При цьому кожен пункт списку  повинен починатись тегом <li>.   Наведемо приклад HTML-коду маркірованого списку:

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

<ul>

<li> Перший пункт маркірованого списку

<li> Другий пункт маркірованого списку

<li> Третій пункт маркірованого списку

</ul>

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

</body>

Відображення маркірованого списку у вікні браузера показане на рис. 3.6.

Як в тезі <ul>, так і в тезі <li> можливо використовувати необов’язковий параметр type за допомогою якого визначаються тип маркеру списку. Можливі значення цього параметру:

- disc - маркери відображаються заповненими колами,

- circle - маркери відображаються не заповненими колами,

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

Приклад використання різних значень параметру type  в тезі <li> маркірованого списку:

<ul>

<li type="disc"> Перший пункт маркірованого списку. type="disc"

<li type="square"> Другий пункт маркірованого списку. type="square"

<li type="circle"> Третій пункт маркірованого списку. type="circle"

</ul>

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

Відзначимо, якщо параметр type в тегах <ul> та <li> не використовується то для всього списку використовується маркер типу "disc".

3.3.2. Нумеровані списки

Для визначення нумерованого списку використовується тег-контейнер <ol>, в середині якого розміщуються всі елементи списку. При цьому кожен пункт списку  повинен починатись тегом <li>.   Наведемо приклад HTML-коду нумерованого списку:

<ol>

<li> Перший пункт нумерованого списку

<li> Другий пункт нумерованого списку

<li> Третій пункт нумерованого списку

</ol>

Відображення такого нумерованого списку у вікні браузера показане на рис. 3.8.

Досить часто тег <ol> використовується з необов’язковими параметрами typeтаstart. При цьому параметр type використовується також в тезі <li>. Його призначенням є визначення одного з стандартних типів маркера. Відзначимо, що для нумерованого списку існує п’ять стандартних типів маркерів. Використання цього параметру в тезі <ol> розповсюджується на весь список, а використання в тезі <li> розповсюджується тільки на поточний пункт списку. Можливі значення параметруtype та відповідні цим значенням стандартні типи маркерів показані в табл. 3.2.

Таблиця 3.2

Використання параметру type

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

<ol type="I">

<li> Перший пункт нумерованого списку.

<li type="A"> Другй пункт нумерованого списку. type="A"

<li> Третій пункт нумерованого списку.

</ol>

Відображення цього списку у вікні браузера показане на рис. 3.9.

Відзначимо, що нумерація пунктів нумерованого списку не залежить від типу маркеру. Якщо параметр type в тегах <ol> та <li> не зазначено, то для всього списку використовується маркер типу "1".

Параметр start призначений для зміни початку нумерації пунктів списку і може використовуватись тільки в тезі <ol>. Для зміни нумерації пунктів в середині списку в тезі <li> використовується параметр value. Значеннями параметрів start та value можуть бути тільки натуральні числа. Наведемо приклад визначення нумерованого списку, в якому нумерація пунктів починається з п’яти, а в третьому рядку списку початок нумерації змінюється на десять:

<ol start="5">

<li> Перший рядок нумерованого списку.

<li> Другий рядок нумерованого списку.

<li value="10"> Третій рядок нумерованого списку.

<li> Четвертий рядок нумерованого списку.

</ol> 

Відображення цього нумерованого списку показане на рис. 3.10.

3.3.3. Списки визначень

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

Список визначень задається за допомогою тегу-контейнеру <dl>. Для визначення терміну використовується тег <dt>, а для визначення пояснення використовується тег <dd>. Наведемо приклад списку визначень для розміщення на HTML-сторінці деяких стандартних термін в галузі Web-програмування:

<dl>

<dt>Інтернет (мережа Інтернет)

<dd>Сукупність мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP (Transport Control Protocol/Internet Protocol), спільний простір імен та адрес для забезпечення доступу до інформаційних ресурсів мережі  будь-якій особі;

<dt>Гіпертекстове посилання

<dd>Адреса іншого мережевого інформаційного ресурсу у форматі URL, який тематично, логічно або будь-яким іншим способом пов'язаний з документом, у якому це посилання визначене.

</dl>

Відображення цього списку визначень у вікні браузера показане на рис. 3.11.

Як видно з рисунка 3.11 у вікні браузера термін відділяється від свого пояснення за допомогою переводу рядка та табуляції.

3.4. Контрольні запитання

1. Який тег вставки рисунка?

2. Які найпоширенішими форматами файлів-рисунків?

3. Параметри тегу вставки рисунка7

4. Як змінити розмір рисунку в HTML – документі?

5. Навіщо використовується параметр lowsrc7

6. Правила запису гіперпосилань7

7. В чому різниця між абсолютним та відносним гіперпосиланням?

8. Як відкрити гіперпосилання в новому вікні браузера7

9. Що таке "якір"?

10. Для чого використовуються списки в HTML – документі?

11. Як визначити маркірований список?

12. Як змінити маркер пункту списку?

13. Як визначити нумерований список?

14. Як змінити номер пункту списку?

15. Як визначити список визначень?

Тема 4. ВИКОРИСТАННЯ ТАБЛИЦЬ, ФОРМ ТА ФРЕЙМІВ

4.1. Таблиці

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

Для побудови таблиці необхідно використати теги - контейнери: тег таблиці <table>, тег рядка <tr> та тег комірки даних <td>, або тег комірки заголовка <th>. При цьому таблиця має бути розміщена в тілі HTML-документу, будується вона рядками, причому кількість комірок в рядках повинна бути однакова. Таким чином одній таблиці відповідає один тег <table>, та стільки тегів <tr> скільки рядків має таблиця. Якщо в таблиці немає об’єднання комірок, то сумарна кількість тегів <td> та <th> дорівнює добутку кількості рядків на кількість колонок таблиці. Різниця між тегами <td> та <th> полягає в форматуванні та вирівнюванні розміщеного в них тексту. В тезі <td> текст відображається стандартним шрифтом з горизонтальним вирівнюванням "по лівому краю". В тезі <th> текст відображається напівжирним шрифтом з горизонтальним вирівнюванням "по середині".  Для розміщення інформації (тексту або графіки ) в середині таблиці  необхідно помістити її в тег комірки. Таблиця може мати заголовок, якому відповідає парний тег <caption>, який має бути розміщений після тегу <table> до першого тегу <tr>

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

<table>

<caption>Заголовок таблиці </caption>

<tr><th>Рядок 1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr>

<tr><td>Рядок 2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr>

<tr><td>Рядок 3. Комірка 1</td><td> Рядок 3. Комірка 2</td></tr>

</table>

Для зручності ідентифікації комірок в них розміщено текст, що відповідає номеру рядка та номеру комірки в рядку. Відображення такої таблиці у вікні браузера показано на рис. 4.1.

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

Розглянемо призначення найбільш використовуваних параметрів тегів <table>, <caption>, <tr>, <td> та <th>.

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

Можливі значення параметру align тегу <caption>:

- right - заголовок вирівнюється по правому краю таблиці,

- center - заголовок вирівнюється по центру таблиці,

- left - заголовок вирівнюється по лівому краю таблиці.

Параметр valign дозволяє розміщувати заголовок над таблицею (значення top), або під таблицею (значення bottom ). При відсутності параметрів align та valign вирівняний по центру заголовок розміщується над таблицею, див. рис. 4.1.

Параметри тегу <table> та їх призначення наведені в табл. 4.1.

Таблиця 4.1

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

Розглянемо типові приклади використання параметрів тегу таблиці.

Приклад 1. Побудуємо таблицю, що складається з двох рядків та двох колонок, шириною 400 пікселів, висотою 200 пікселів з товщиною меж 5 пікселів, відстанню між комірками 7 пікселів та відстанню від меж комірки до даних в комірках 3 пікселів. HTML-код, що відповідає цій таблиці такий:

<table width=400  height=200 border=5 cellspacing=7  cellpadding=3 >

<tr><th>Рядок 1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr>

<tr><td>Рядок 2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr>

</table>

Відображення такої таблиці у вікні браузера показане на рис. 4.2.

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

Приклад 2. Розглянемо як можна змінити взаємне розміщення таблиці і інших елементів на HTML-сторінці за допомогою параметру align. Можливі значення цього параметру для тегу <table>:

- align="center", горизонтальне вирівнювання "по центру", таблиця "не обтікається" текстом;

- align="left", горизонтальне вирівнювання "по лівому краю", таблиця "обтікається" текстом з правої сторони;

- align="right", горизонтальне вирівнювання "по правому краю" таблиця "обтікається" текстом з лівої сторони.

HTML-код для розміщення в HTML-документі тексту та таблиці вирівняної "по правому краю":

<table border="1" align="right">

<tr><th>Рядок 1. Комірка 1</th><th>Рядок 1. Комірка 2</th></tr>

<tr><td>Рядок 2. Комірка 1</td><td>Рядок 2. Комірка 2</td></tr>

</table>

Таблиця вирівняна "по правому краю".

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

Відзначимо, що наведені в табл. 4.1 параметри bordercolor, bgcolorтаbackgroundвикористовуються також в тегах рядків (<tr>) та комірок (<td>, <th>) для визначення кольору меж, кольору фону та фонових рисунків рядків та комірок. Крім того як в тегах рядків, так і  тегах комірок для горизонтального та вертикального вирівнювання розміщеної в них інформації можливо використовувати параметри align та valign.   

В тегах <tr>, <td> та <th> параметр align може приймати значення left, center та right  для горизонтального вирівнювання інформації відповідно "по лівому краю", "по центру" та "по правому краю" комірок.

В тегах <tr>, <td> та <th> параметр valign може приймати значення top, middle, bottom, таbaseline   для вертикального вирівнювання інформації відповідно "по верхньому краю", "по середині", "по нижньому краю"  та "по базовій лінії тексту" комірок.

Якщо параметри bordercolor, bgcolor, background, align та valign   визначені в тезі <tr>, то їх дія розповсюджується на весь рядок таблиці, але ці параметри можуть бути перевизначені в будь-якій комірці.

Особливістю тегів <td> та <th> є можливість використання параметрів rowspan та colspan для  об’єднання декількох сусідніх комірок в одну.

Параметр rowspan використовується для об’єднання комірок "по вертикалі", а параметр colspan - для об’єднання комірок "по горизонталі". Синтаксис запису цих параметрів такий:

rowspan="n"

colspan="m"

де n та m кількість комірок, що об’єднуються.

При використанні параметру rowspan="n" необхідно в наступних  n-1 рядках таблиці зменшити кількість комірок. При використанні параметру colspan="m" необхідно в поточному рядку таблиці зменшити кількість наступних  комірок на m-1.

Допускається сумісне використання параметрів rowspan та colspan для однієї комірки.

Наведемо HTML-код таблиці що складається із двох рядків та трьох колонок, при цьому середня комірка займає обидва рядки:

<table border="1" > <tr><td> Рядок 1. Комірка 1</td>

<td rowspan="2"> Рядки 1,2. Комірка 2</td>

<td> Рядок 1. Комірка 3</td></tr>

<tr><td> Рядок 2. Комірка 1</td>

<td> Рядок 2. Комірка 3</td></tr></table>

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

Наведемо HTML-код таблиці що складається із двох рядків та трьох колонок, при цьому всі комірки нижнього рядка об’єднані в одну:

<table border="1" > <tr><td>Рядок 1. Комірка 1</td>

<td>Рядок 1. Комірка 2</td><td>Рядок 1. Комірка 3</td></tr>

<tr><td colspan="3">Рядок 2. Комірки об'єднані в одну 1</td></tr>

</table>

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

4.2. Форми

Основною метою використання форм є передача інформації від клієнта на Web-сервер. Як правило, результатом такої передачі є відображення у клієнта нового HTML-документа, сформованого Web-сервером на основі переданої інформації.

Форма визначається в HTML-документі за допомогою тегу - контейнеру <form> та складається із набору полів вводу, що визначені за допомогою тегів <input>, <select> та <textarea>. Дані на Web-сервер передаються у вигляді:

змінна=значення

де змінна - ім’я поля вводу задане за допомогою параметру name, наприклад:

<input type="text" name="mytext">

Тег <form> у вікні браузера не відображається, а поля вводу відображаються  за допомогою стандартних графічних елементів управління.

Основними параметрами тегу <form> є action, enctype та method. 

Обов’язковий параметр action  визначає URL-адресу, куди передається інформація.

Параметр enctype визначає формат кодування даних при їх передачі. Можливими значеннями цього параметру є application/x-www-form-urlencoded (використовується при стандартних установках) та multipart/form-data (використовується при передачі файлів).

Параметр method визначає метод передачі інформації. Можливими значеннями цього параметру є get та post. Метод get рекомендується використовувати, якщо обсяг інформації, що передається не перевищує 255 символів. Метод post слід застосовувати при передачі великого обсягу інформації.

Тег <input> використовується для генерації таких елементів управління як: кнопки та поля для вводу тексту, паролів, імен файлів. Основні параметри цього тегу представлені в табл. 4.2.

Таблиця 4.2

Основні параметри тегу  <input>

Тег <select> призначений для того, щоб організувати на формі вибору текстових елементів із декількох заданих варіантів. Синтаксис запису цього тегу такий:

<select name="ім’я елементу" size="кількість видимих рядків" multiple>

<option selected >елемент вибору 1</option>

<option>елемент вибору 2</option>

         ..............................................

</select>

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

Параметр size задає кількість елементів вибору, що можуть відображатись одночасно. Якщо size=1, то відображається випадаюче меню. 

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

Елементи вибору задаються в середині тегу <select>за допомогою тегу <option>. Для показу елементу, як вже вибраного необхідно в тезі <option> використати параметр selected.

Тег <textarea> призначений для створення в середині форми поля для вводу тексту із декількох рядків. Крім обов’язкового параметру name в цьому тезі використовуються параметри cols та rows. Ці параметри дозволять визначити кількість колонок та рядків тексту, що відображається в даному елементі управління. 

Наведемо приклад HTML-коду для визначення форми, що містить  елементи управління для вводу рядка тексту, паролю, кнопки типу submit для відправки даних на сервер та кнопки типу  reset для відновлення початкового значення полів:

<body><table>

<form action="password.php" method="get">

<tr><td><input type="text" name="login" size="21" maxlength="21">

Введіть ім'я </td></tr>

<tr><td><input type="password" name="passw" size="21" maxlength="21">

Введіть пароль </td></tr>

<tr><td><input type="reset" value="Очистити" width="50" height="30">

<input type="submit" value="Відправити" width="50" height="30"></td></tr>

</form>

</table></body>

Відображення такої форми у вікні браузеру показане на рис. 4. 6.

Особливості даної форми:

- Призначена для ідентифікації користувача на Web-сервері за допомогою персональних даних (імені та паролю);

- Використання таблиці для розміщення елементів управління;

- Використання текстових пояснень призначення елементів управління;

- Дані форми передаються методом get  та призначені для обробки Web - додатком password.php, який знаходиться в тому ж директорії, що і HTML-документ з формою.

4.3. Фрейми

Фреймова структура HTML-документу дозволяє розділити вікно браузера на декілька прямокутних областей (фреймів) в кожну із яких можливо завантажити окремий HTML-документ.

Між фреймами можливо організувати взаємодію. Сенс взаємодії між фреймами полягає в тому, що вибір посилання в одному із фреймів може призвести до завантаження вказаного HTML-документу в інший фрейм.

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

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

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

Фреймова структура HTML-документу визначаються за допомогою тегу - контейнеру <frameset>, що використовується замість тегу <body>.

Тег <frameset> може мати параметри rows та cols за допомогою яких визначається кількість та розміри областей на які розділяється вікно браузера. За допомогою параметру rows вікно браузеру розділяється на горизонтальні  області, а за допомогою параметру cols - на вертикальні області.

Синтаксис запису тегу:

<frameset rows="висота_1, висота_2..."  cols="ширина_1, ширина_1...">

Кількість заданих "висот" та "ширин" задають кількість горизонтальних та вертикальних областей (фреймів) на які буде розділене вікно браузера. Для коректного визначення фреймової структури необхідно як мінімум задати хоча б два розміри для одного із параметрів rows чи cols.

Розміри фреймів можуть задаватись в: пікселях, процентах від розмірів вікна браузера або відносних одиницях. Наведемо приклади.

Визначення розмірів фреймів в пікселях:

<frameset rows="100,500"> - визначає два горизонтальні фрейми висотою 100 та 500 пікселів.

Визначення розмірів фреймів в процентах:

<frameset rows="10%,90%"> - визначає два горизонтальні фрейми висотою 10% та 90% від висоти вікна браузера.

Визначення розмірів фреймів в відносних одиницях:

<frameset rows="*,2*"> - визначає два горизонтальні фрейми висотою ¹/₃ та ²/₃ від висоти вікна браузера. В цьому випадку для показу відносних величин використовується символ *.

В середині контейнеру <frameset> можуть розміщуватись тільки теги визначення окремого фрейма <frame> або вкладені теги <frameset>. Сумарна кількість цих тегів повинна бути рівною кількості фреймів, заданих параметрами rows та cols контейнеру <frameset>. Параметри тегу <frame> представлені в табл. 4.3.

Таблиця 4.3

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

Наведемо приклад html-коду для визначення двох фреймів, що займають відповідно 25% та 75% від ширини вікна браузера. Відзначимо, що межа між фреймами повинна відображатись у вікні браузера. Лівий фрейм має ім’я fmenu, в ньому завантажений файл fmenu.html. Правий фрейм має ім’я fwindow, в ньому завантажений файл fwindow.html. Поля лівого фрейму становлять 5 пікселів, а поля правого фрейму 7 пікселів. Розміри правого фрейму не можуть бути змінені користувачем.

<frameset cols="25%,75%">

<frame src="fmenu.html" name="fmenu" frameborder="1" marginwidth="5" marginheight="5">

<frame src="fwindow.html" name="fwindow" marginwidth="7" marginheight="7" noresize>

</frameset>

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

Відзначимо, що особливостю посилань які використовуються для навігації по фреймам є використання параметру target для визначення імені фрейму. Наведемо приклад html-коду посилання вибір якого призводить до завантаження у фрейм з name=" fwindow" файлу exsp.html:

<a href=" exsp.html " target="fwindow"></a>

4.4. Контрольні запитання

1. Для чого використовуються таблиці?

2. Теги визначення таблиць?

3. Як об’єднати декілька комірок таблиці?

4. Параметри тегу визначення рядка таблиці?

5. Як змінити фон окремої комірки  таблиці?

6. Для чого використовуються форми?

7. Параметри тегу <form>?

8. Що таке поля вводу форми?

9. Який метод слід використовувати при передачі великого обсягу інформації?

10. Основні параметри тегу <input>?

11. Навіщо застосовуються фрейми?

12. Особливості HTML-документу з фреймовою структурою?

13. Теги визначення фреймів?

14. Параметри тегів визначення фреймів?

15. Як організувати взаємодію між фреймами?

З повагою ІЦ “KURSOVIKS”!