Лекція 4

Мета: ознайомлення та закріплення знань про поняття «веб-технології», «HTML», «структура HTML-документа», «створення заголовків», «списки», «абзаци», «форматування символів», «управління кольором», «створення спеціальних символів», «коментарі», «посилання на різні веб-сторінки», «посилання на поштову адресу», «посилання на окремі місця веб-сторінки», «додавання зображень», «додавання аудіо», «додавання відео», «зображення в якості посилання», «навігаційні карти», «анімовані зображення», «створення таблиць», «форми», «елементи керування для форми», «команди META», «фрейми», «атрибути фреймів», розвиток уваги, пам’яті, мислення, вміння аналізувати матеріал, виховання у студентів самостійності.

Завдання: розкрити сутність понять «веб-технології», «HTML», «структура HTML-документа», «створення заголовків», «списки», «абзаци», «форматування символів», «управління кольором», «створення спеціальних символів», «коментарі», «посилання на різні веб-сторінки», «посилання на поштову адресу», «посилання на окремі місця веб-сторінки», «додавання зображень», «додавання аудіо», «додавання відео», «зображення в якості посилання», «навігаційні карти», «анімовані зображення», «створення таблиць», «форми», «елементи керування для форми», «команди META», «фрейми», «атрибути фреймів»,

Характеристика проблеми, показ стану питання:

Веб-технології – технології, які застосовують в Інтернеті. Знання веб-технології є дуже важливим, за домогою цих знань стає можливим створення якісного функціонального веб-сайту.        

Виклад лекційного матеріалу

1. Введення у веб-технології. Поняття «HTML». Історія розвитку HTML.

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

Основою всієї Всесвітньої павутини є мова розмітки гіпертексту HTML – Hyper Text Markup Language (рис. 5.1). Вона служить для логічної (смисловий) розмітки документа (веб-сторінки). Іноді його неправомірно використовують для управління способом відображення вмісту веб-сторінок на екрані монітора або при виведенні на принтер, що в корені суперечить ідеології, прийнятої у Всесвітній павутині.

Рис. 5.1. Веб-технології

           

Для цілей управління відображенням вмісту веб-сторінок призначені каскадні таблиці стилів (CSS). CSS багато в чому подібні зі стилями, застосовуваними в популярному текстовому процесорі Word.

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

Для додання веб-сторінкам динамізму (меню, анімація) використовуються мови написання скриптів. Стандартним скриптовою мовою у Всесвітній павутині є JavaScript. Ядром мови JavaScript є ECMAScript.

HTML, CSS, JavaScript є мовами, за допомогою яких можна створювати скільки завгодно складних веб-сайтів. Але це всього лише лінгвістичне забезпечення, в той час як в браузерах документи подаються у вигляді набору об’єктів, безліч типів яких є об’єктною моделлю браузера (BOM). Об’єктна модель браузера унікальна для кожної моделі і таким чином виникають проблеми при створенні межбраузерних додатків. Тому Веб-консорціум запропонував об’єктну модель документа (DOM), що є стандартним способом представлення веб-сторінок за допомогою набору об’єктів.

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

Сукупність HTML, CSS, JavaScript і DOM часто називають динамічним HTML – Dynamic HTML або DHTML.

Синтаксис сучасного HTML описаний за допомогою розширюваної мови розмітки XML – Extensible Markup Language. XML дозволять створювати власні мови розмітки, аналогічні HTML у вигляді DTD (набір дійсних елементів, які ідентифікують елементи, які можуть бути в інших елементах, визначають дійсні атрибути для кожного з них). Існує безліч таких мов: для представлення математичних і хімічних формул, знань і т. д.

Отже, всі веб-технології тісно взаємопов’язані. Розуміння цього факту дозволить легше усвідомити призначення того чи іншого механізму, що застосовується при створенні веб-додатків [1].

Переходимо до вивчення мови гіпертекстової розмітки HTML.

Історія розвитку HTML

В 1991 році Тім Бернерс-Лі створив проект HTML (Hypertext Markup Language). Ранні версії HTML (HTML в 1994 році і HTML 2.0 у 1995 році) були розроблені на основі ранніх робіт Тіма з метою створення життєздатної системи управління інформацією. Однак коли Всесвітня павутина завоювала світ, розробники браузерів, в першу чергу таких, як Mosaic Netscape і Microsoft Internet Explorer, не стали чекати загальних стандартів. Вони створили безліч елементів, що поліпшують зовнішній вигляд сторінок, але індивідуальних для кожного браузера. Це конкурентне протистояння отримало назву «Війни браузерів». У результаті в кінці 1990-х стало звичайною справою створювати кілька різних версій сайту – по одній для кожного з популярних браузерів.

У 1996 році консорціум Всесвітньої павутини (W3C) випустив першу Рекомендацію – HTML 3.2 (збір всіх HTML-елементів, презентаційні розширення HTML, що з’явилися в результаті суперництва браузерів, а також через відсутність альтернативи у вигляді таблиць стилів). HTML 4.0 (1998) і HTML 4.01 (редакція з невеликими змінами, яка замінила попередній стандарт в 1999) повинні були підкреслити поділ структури і уявлення, підвищити доступність інформації для користувачів з обмеженими можливостями.

Всі завдання представлення були перекладені на новостворені каскадні таблиці стилів (CSS) одержували повну підтримку браузерів.

Приблизно в той же час, коли розроблялася версія HTML 4.01, співробітники консорціуму Всесвітньої павутини усвідомили, що одну мову розмітки з обмеженими можливостями не вийде використовувати для опису всіх видів інформації (хімічних формул, математичних рівнянь, мультимедійних презентацій, фінансової інформації тощо), які можна поширювати у Всесвітній павутині. Рішенням стала XML (розширювана мова розмітки), метамова для створення мов розмітки. XML – це спрощений варіант SGML (стандартної узагальненої мови розмітки), головної метамови, яку Тім Бернерс-Лі використовував для створення свого оригінального HTML-додатку. Але сам SGML виявився складнішим, ніж було потрібно для Всесвітньої павутини.

У консорціумі W3C припускали, що Всесвітня павутина буде розвиватися на основі XML і безліч спеціалізованих мов розмітки будуть використовуватися спільно навіть у межах одного документа. Звичайно, щоб втілити це в життя, довелося б дуже уважно створювати розмітку, суворо дотримуючись синтаксис XML, щоб виключити потенційну плутанину. Їх першим кроком було переписати специфікацію HTML у відповідності з правилами XML, щоб його можна було використовувати разом з іншими XML-мовами. В результаті з’явився XHTML (розширюваний HTML). Перша версія, XHTML 1.0, майже ідентична специфікації HTML 4.01, містить ті ж елементи і атрибути, але має більш жорсткі вимоги щодо того, як повинна виконуватися розмітка.

Наступним кроком було створення XHTML 2.0, але ця мова виявилася несуміснию зі старими стандартами і поведінкою браузерів. Процес написання та затвердження затягнувся на роки.

У 2004 році співробітники компаній Apple, Mozilla і Opera сформували робочу групу з розробки гіпертекстових додатків для Інтернету (Web Hypertext Application Technology Working Group, WHATWG, whatwg.org) окремо від консорціуму Всесвітньої павутини.

Метою WHATWG став подальший розвиток HTML у відповідності з новими вимогами таким чином, щоб він узгоджувався з реальною практикою верстки веб-сторінок і поведінкою браузерів (на відміну від ідеалу, описуваного XHTML 2.0, де вся робота починалася з нуля). Їх вихідні документи, Веб-додатки 1.0 і Веб-форми 1,0 об’єдналися в HTML5.

Консорціум Всесвітньої павутини в кінцевому підсумку створив власну робочу групу з HTML5 (також на чолі з Хіксон), взявши за основу роботу, виконану групою WHATWG. Робота над специфікацією HTML5 велася в обох організаціях спільно, іноді з протилежними результатами.

Щодо XHTML 2.0 наприкінці 2009 року консорціум Всесвітньої павутини офіційно припинив роботу над ним, закривши робочу групу і направивши свої ресурси і зусилля на HTML5 [4, c. 220 – 222]. 

2.  Структура HTML документа. Створення заголовків. Списки.

Структура документа HTML заснована на зарезервованої послідовності символів, що починаються зі знаку < і закінчуються знаком >. Закриття тега відрізняється від відкриття тільки наявністю символу /.

Загальна структура найпростішого документа виглядає так:

<СОММЕNТ> Коментар </СОММЕNТ>

<HTML>

<HEAD>

<TITLE> Назва документа </TITLE>

</HEAD>

<BODY>

Текст документа HTML.

</BODY>

</HTML>

Розглянемо більш детально теги документа HTML:

1. <COMMENT> – коментар до документа, не є обов’язковим;

2. <HTML> – ідентифікатор всього блоку HTML-команд;

3. <HEAD> –  ідентифікатор заголовка документа HTML;

4. <TITLE> – ідентифікатор заголовка вікна перегляду;

5. <BODY> – ідентифікатор HTML-команд документа для перегляду.

Три основних тега <HTML>, <HEAD> і <BODY> передають браузеру основну інформацію для ідентифікації та структури документа. Всі вказані теги – парні, тобто кожен з них закінчується кінцевим тегом з косою рисою. Всі команди пишуться як з маленькою, так і з великої літери. Тег <МЕТА> – непарний тег і застосовується для вказівки більш детальної інформації про документ [2, c. 56 – 57].

Створення заголовків

До парних тегів форматування заголовків документа відносять: <Н1>, <Н2>, <НЗ>, <Н4>, <Н5>, <Н6>. При цьому заголовки будуть виведені великими літерами, причому розмір букв у тега <Н1> буде найбільший, у <Н2> – менше, в <НЗ> – ще менше і т.д. [2, c. 57].

Створення списків

Існує три види списків:

· неупорядковані списки (використовуються спеціальні символи);

· упорядковані списки (використовуються нумерація);

· списки-визначення (використовуються визначення).

Теги неупорядкованого списку – <UL> (тег на початку списку) і <UL> (тег на кінці списку). Елементи списку починаються з тегу <LI>, у якому може бути параметр TYPE, який визначає зовнішній вигляд символа. TYPE мати наступні значення:

· <LI TYPE=DISK> – кругла жирна точка;

· <LI TYPE=CIRCLE> –  коло;

· <LI TYPE=SQUARE> – маленький чорний квадрат.

Теги упорядкованого списку – <OL> (тег на початку списку) і </OL> (тег на кінці списку). Елементи списку починаються з тегу <LI>, у якому може бути параметр TYPE, який визначає тип нумерації. TYPE має наступні значення:

· <LI TYPE=А> – великі букви;

· <LI TYPE=а> –  малі букви;

· <LI TYPE=I> –  прописні римські цифри;

· <LI TYPE=i> –  рядкові римські цифри;

· <LI TYPE=1> –  арабські цифрами.

Список-визначення – список, в якому записи здвинуті ліворуч за допомогою табуляції. Теги списку-визначень – <DL> тег на початку списку) і </DL> (тег на кінці списку). Елементи  списку починаються з тегу <DD>.

3. Абзаци. Форматування символів. Управління кольором.

Абзаци ділять текст на логічні частини і на листі відокремлюються відступом від краю аркуша. Для організації абзаців в HTML передбачений тег <P>, який передбачає наявність закриваючого тега.

Для тегу <P> можна задати атрибут, який визначає вирівнювання, – ALIGN. Значення атрибута ALIGN наступні:

· center – вирівнювання по центру;

· left – вирівнювання по лівому краю;

· right – вирівнювання по правому краю;

· justify – вирівнювання за шириною.

Крім вирівнювання для абзацу можна визначити текст підказки, яка з’являється при наведенні покажчика миші на текст. Підказка створюється за допомогою атрибуту TITLE, значенням якого є текст підказки [6, c. 42].

Форматування символів                  

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

Логічні теги форматування тексту:

· <ABBR> – абревіатура (за допомогою атрибуту TITLE);

· <CITE> – цитата або виноска, взята з іншого джерела, зазвичай відображається курсивом;

· <CODE> – програмний код, який може містити, наприклад, змінні, функції або невеликі шматки програми; зазвичай виводиться моноширинним шрифтом;

· <DFN> – виділення тексту як визначення;

· <EM> – фрагменти тексту, відображаються курсивом;

· <SAMP> – виділений текст як приклад, зазвичай використовується для виділення результатів роботи програми, відображається моноширинним шрифтом;

· <STRONG> – постановка акценту на тексті, відображається напівжирним шрифтом;

· <VAR> – виділення змінних з програм, відображається курсивом;

· тощо [6, c. 60 – 64].

Фізичні теги форматування тексту:

· <B> – напівжирне написання шрифту;

· <I> – курсивне написання тексту;

· <TT> – моноширинне написання тексту;

· <U> – підкреслений текст;

· <S> – закреслення тексту горизонтальною лінією;

· <STRIKE> – також закреслення тексту горизонтальною лінією;

· <BIG> – відображення тексту всередині тега шрифтом більшого розміру щодо решти тексту;

· <SMALL> – відображення виділеного тексту шрифтом меншого розміру щодо решти тексту;

· <SUB> – підрядкове написання символів, тобто текст розташовується нижче рівня базового рядка і стає меншого розміру;

· <SUP> – надрядкове написання символу, тобто він розташовується вище базової лінії і стає меншого розміру;

· <SPAN> – виділення частини тексту і визначення для неї особливих параметрів відображення за допомогою таблиць стилів [6, c. 65 – 67].

Управління кольором

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

· <BODY bgcolor="teal" text="aqua" link="red"> – задає колір тексту (text), колір фону (bgcolor) і колір гіпертекстового посилання (link);

· <BODY background="back.jpg"> – задає фоновий малюнок на веб-сторінці у файлі back.jpg;

· <BODY background="\windows\tartan.bmp"> – фоновий малюнок взято з файлу tartan.bmp, причому вказано шлях цього файлу;

· <font color="yellow" size=5> – задає колір символів тексту (color) і їх розмір (size). Наприкінці потрібен тег </font>.

Розрізняють 16 кольорів символів HTML: white – білий; black – чорний; blue – синій; gray – сірий; red – червоний; green – зелений; yellow – жовтий; pink – рожевий; maroon – темно-червоний; aqua – бірюзовий; navy – темно-синій; fuchsia – ярко- фіолетовий; olive – оливковий; purple – фіолетовий; cyan – відтінок бірюзового; brown – коричневий; silver – світло-сірий; teal – яскраво-блакитний; orange – оранжевий; lime – яскраво-зелений.

Замість зазначених термінів для завдання кольору можна використовувати RGB-коди (Red, Green, Blue), наприклад: #FFFFFF – білий (white), #FF0000 – червоний (red). Міняючи RGB-коди, колір можна підбирати для тексту і фону [2, c. 58 – 59].

4. Створення спеціальних символів. Коментарі.

Створення спеціальних символів

Іноді потрібно включити символи (наприклад, символи <, >) у тексті веб-сторінки. Це є проблемою, оскільки ці символи також використовуються для позначення тегів в HTML. Отже, можна використовувати наступні позначення символів:

· &gt – >;

· &lt – <;

· &amp – &;

· &pound – .;

· &copy – ©;

· &trade – ™ [7, c. 41 – 42].

Коментарі в HTML

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

Коментарі розташовуються в тег <!-- Текст коментаря -->. Текст, розташований всередині цього тега, браузером не відображається.

Коментарі зручно використовувати при створенні HTML-документів, оскільки в них можна укласти тимчасово непотрібні фрагменти коду [6, c. 39].            

5. Вбудування гіпертекстових посилань: на різні веб-сторінки, поштову адресу, окремі місця веб-сторінки. Додавання зображень, аудіо, відео. Використання зображення в якості посилання.

Вбудування гіпертекстових посилань на різні веб-сторінки

Для створення посилань використовується тег <A> ... </A>.

Обов’язковий атрибут href вказує абсолютну або відносну адресу, на яку веде посилання. Посилання може вказувати на HTML-документ, зображення, файл для збереження на диск та ін. Текст посилання записується між відкриваючим та закриваючим тегом.

Абсолютна адреса містить в собі ім’я хоста і повний шлях до ресурсу, наприклад: http://www.site.com/docs/1.html. За допомогою абсолютної адреси можна посилатися на будь-який відкритий ресурс в Інтернеті. Якщо потрібно поставити посилання на головну сторінку сайту, вказують його адресу і слеш. Приклад для абсолютної адреси:

HTML-код: <A href="http://www.google.ua"> Google </A>

У браузері посилання зазвичай представляється як підкреслений текст. При натисненні по посиланню браузер завантажує сторінку, зазначену в атрибуті href.

Наприклад, щоб поставити посилання з файлу 1.html на файл 2.html, необхідний наступний HTML-код:

<A href="1/2.html"> файл 2.html </A>

А щоб посилання у файлі 2.html вказувала на 1.html:

<A href="../1.html"> файл 1.html </A>

Дві точки (..) означають перехід до батьківського каталогу.

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

Для відкриття посилання в новому вікні використовується атрибут target зі значенням _blank.

Приклад: <A href="http://google.ua/" target="_blank"> Google </A>

Колір посилань у документі можна вказати атрибутами тега <BODY>:

· alink="колір" – колір активних посилань;

· link="колір" – колір невідвіданих посилань;

· vlink="колір" – колір відвіданих посилань [5, c. 23 – 24].

Створення посилання на поштову адресу

Щоб створити посилання на адресу електронної пошти, необхідно використовувати наступний синтаксис:

<A href="mailto:name@example.com">name@example.com</A>,

де name@example.com – адреса електронної поштової скриньки [8, c. 58].

Перехід на окремі місця сторінки

Перш ніж можна буде створювати посилання на кожній секції сторінки (за допомогою джерела якоря – закладка з унікальним ім’ям на певне місце веб-сторніки, призначена для створення переходу до неї за посиланням), потрібно додати призначення якоря. Наприклад, всередині <h2> елементу є <а> елемент з атрибутом ID, значення якого визначає кожен розділ (сторінка не повинна містити два атрибути ID, які мають однакові значення):

<h1>Linking and Navigation</h1>

<h2><a id="URL"> URLs </a></h2>

<h2><a id="SourceAnchors">Source Anchors</a></h2>

<h2><a id="DestinationAnchors">Destination Anchors</a></h2>

<h2><a id="Examples">Examples</a></h2>

Для посилання на певній ділянці, значення атрибут href і повинно бути таким же, як значення ID атрибуту відповідного елемента, перед яким є знак – #.

<p>This page covers the following topics:

<ul>

<li><a href="#URL">URLs</a></li>

<li><a href="#SourceAnchors">Source Anchors</a></li>

<li><a href="#DestinationAnchors">Destination Anchors</a></li>

<li><a href="#Examples">Examples</a></li>

</ul>

</p>

[8, c. 69 – 70].

Додавання зображень, аудіо, відео

Додавання зображення здійснюється непарним тегом <IMG>. Обов’язковий атрибут SRC вказує абсолютну або відносну URL-адресу зображення. Стандартні форматами зображень є GIF, PNG і JPEG.

Атрибути <IMG>:

·   align="…" – визначає режим вирівнювання зображення щодо тексту в рядку:

-       top – по верхньому краю;

-       middle – по центру рядка;

-       bottom – по нижньому краю (за замовчуванням);

-       left – по лівому краю вікна;

-       right – по правому краю вікна;

· alt="…" – визначає текст, що описує зображення для браузерів без підтримки графіки (або з відключеною графікою), пошукових машин тощо;

· border="N" – встановлює товщину рамки навколо зображень, яка дорівнює N пікселів, значення 0 – для відключення рамки;

· height="N" – висота зображення в пікселях або відсотках;

· width="N" –  ширина зображення в пікселях або відсотках [5, c. 26].

Приклади:

· <IMG src="1.jpg">;

· <IMG src="1.gif" width="100" height="100">.

Вставка аудіо

Для відтворення звуку (файл *.mid) після завантаження документа HTML в браузер Internet Explorer (тобто у фоновому режимі), треба записати наступну команду, наприклад: <bgsound src="\windows\canyon.mid" loop=1>. Можна також використовувати файл формату *.wav. Число відтворень loop можна збільшити з 1 до n [2, c, 61].

Вставка відео

Вставка відео відбувається за допомогою тега <IMG> можна вставити в документ відеофрагмент у форматі *.avi. Як правило, у таких випадках малюнок має зображувати рупор або щось подібне.

Атрибути тега <IMG> для вставки *.avi-файла:

· dynsrc="URL" – шлях до .avi-файла;

· src="URL" – шлях до графічного зображення, що з’явиться у випадку нездатності браузера програвати;

· start – момент початку програвання, може набувати значення: fileopen – почати програвання відразу ж після завантаження, mousemove – почати програвання після того, як користувач помістить курсор на вікно, призначене для програвання відеофрагмента;

· controls – відображення елементів керування процесом програвання;

· loop – кількість програвань відеофрагмента, якщо loop дорівнює -1 або INFINITE, програвання буде виконуватися нескінчено;

· loopdelay – затримка між програванням в мілісекундах.

Приклад:

<img dynarc="video/1.avi" start="mousemove" controls>

Відеофайл можна вставити в документ за допомогою посилання, наприклад:

<a href="video/1.avi"> </a>

У цьому випадку при натисненні на посилання браузер завантажить плагін для відтворення відео і запуску ролика [3, c. 72 – 73].

Використання зображення в якості посилання

Якщо вставити картинку між тегами <A> </A>, то картинка стане посиланням. Такий вид посилання дуже часто використовують у створенні мапи сайту, організації меню або організації посилання на будь-яку інформацію через піктограму. У цьому випадку браузер обведе картинку рамкою, видалити яку можна, вказавши значення атрибута border="0" тега <IMG> [3, c. 71 – 72].

Приклад:

· <a href=www.site.ua><IMG src="images/1.jpg" align="center"></a>www.site.ua;

· <a href=www.site.ua><IMG src="images/1.jpg" border="0" align="center"></a> www.site.ua.

6. Навігаційні карти. Анімовані зображення.

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

Є два типи карт зображень:

· клієнт-сторона – веб-браузер реагує на яку частину зображення користувач натиснув  і відправляє на відповідну сторінку;

· сервер-сторона – веб-браузер посилає серверу координати, визначаючи, на яку частину зображення користувач натиснув, і оброблюється файл сценарію на сервері, який визначає, на яку сторінку потрібно відправити.

Зображення, яке використовується для утворенням карту, вставляється на сторінку за допомогою <IMG>. Атрибут називається USEMAP, він додається до <IMG>, щоб вказати, що цей образ повинен використовувати інформацію, що міститься у відповідному <IMG> елементі, щоб включити зображення в зображення карти. Тег <MAP> містить інформацію, використовувану, щоб вказати браузеру, як розділити зображення таким чином, що воно відправляло користувача на потрібну сторінку [8, c. 89 – 91].           

Приклад зображення, яке розділене на дві частини, кожна з яких є посиланням на веб-сторінку

<MAP NAME="ImageMap">

<AREA href="1.html" SHAPE="rect" COORDS="0,0,50,100" ALT="text1">

<AREA href="2.html" SHAPE="rect" COORDS="50,0,100,100" ALT="text2">

</MAP>

<BODY>

<IMG src="image/1.gif" USEMAP="#ImageMap" HEIGHT="100" WIDTH="100" BORDER="0">           

Анімовані зображення

Для створення анімованого зображення на веб-сторінці, необхідно спочатку створити анімоване зображення у відповідному графічному редакторі (наприклад, Adobe Photoshop), а потім анімоване зображення розмістити в гіпертекстовому документі.

За допомогою тегу <marquee> можна створити ефект руху для графічного зображення. Наприклад:

<marquee direction="center"><img src="1.gif"></marque>

Існують наступні атрибути тегу <marquee>:

-       behavior – тип руху вмісту контейнера <marquee>, може приймати наступні значення:

· alternate – переміщення між правим і лівим краєм елементу;

· scroll – переміщення в напрямку, заданим атрибутом direction, потім заховується за межами області, потім починає знову рухатися;

· slide – переміщення в напрямку, заданим атрибутом direction, доходе до краю області та зупиняється;

-       bgcolor – колір фону;

-       direction – напрямок руху вмісту контейнера <marquee>, може приймати наступні значення:

· down – рух зверху вниз;

· left – рух справа наліво;

· right – рух праворуч;

· up – рух вгору;

-       height – висота області прокручування;

-       width – ширина області прокручування;

-       hspace – горизонтальне поле навколо контейнера;

-       vspace – вертикальні поля навколо вмісту;

-       loop – кількість прокручування вмісту контейнера;

-       scroolamount – швидкість руху контейнера;

-       scrolldelay – затримка в мілісекундах між рухами;

-  truespeed – відміна вбудованого обмежувача швидкості при низьких значеннях атрибута scrooldelay.

7.   Створення таблиць. Форми. Створення форм. Елементи керування для форми. Команди META

Створення таблиць

Таблиці є зручним засобом форматування даних в HTML. Таблицю задає і визначає її загальні властивості тег <table> </table>. По горизонталі, наприклад по центру, таблицю можна вирівняти за допомогою тега <р align="center">, що розміщується перед <table>.

Наприклад:

<table border = "5" width="100" cellpadding="10" cellspacing=10">,

де тег <table> має наступні атрибути:

· border="5" – ширина бічної грані в пікселях, при нульовому значенні рамка зникає;

· width="100" – ширина таблиці в пікселях або width="50%" – ширина таблиці в % по відношенню до ширині сторінки у вікні;

· cellspacing="10" –  ширина фронтальної грані в пікселях;

· cellpadding="10" – розмір порожнього простору в пікселях, навколо данних в комірці.

Тег <caption> </caption> – задає заголовок таблиці.

Тег <tr> задає рядок таблиці. Наступний тег <tr> задає наступний рядок таблиці. Кінцевий тег необов’язковий.

Тег <td> задає елемент таблиці. Наступний тег <td> задає наступний елемент таблиці. Кінцевий тег необов’язковий.

Колір фону осередку задається в тезі <td>: <td bgcolor="yellow">

Непарний тег <th> – задає елемент комірки, який є заголовком таблиці. Цей тег повинен знаходитися усередині тега <tr>.

Комірка-заголовок відрізняється від звичайної тим, що текст всередині неї виділяється напівжирним шрифтом. Колір фону заголовка задається: <tr> <th bgcolor="yellow"> 3аголовок 1 [2, c. 63].

Форми. Створення форм. Елементи керування для форми

Теги форми

Для функціонування форми знадобиться написати CGI-скрипт. HTML-просто створює вигляд форми. Теги форми:

· <form></form> – створення заповнюваної форми;

· <select multiple name="NAME" size=?X/select> – елемент select створює в заповнюваної формі меню типу «Вибір одного пункту з багатьох» або «Вибір кількох пунктів з багатьох». Розмір визначає число видимих ​​пунктів без прокручування;

· <option> – елемент option описує окремі пункти меню, не має закриваючого тега;

· <textarea name="NAME" cols=40 rows=8X/textarea>  – створення поля для введення декількох рядків тексту. Cols вказує на ширину, rows – на висоту;

· <input type="checkbox" name="NAME"> – створення поля введення для атрибутів типу "yes"/"no" або для атрибутів, які можуть одночасно приймати кілька значень. Відразу за тегом слідує текст;

· <input type="radio" name="NAME" value="x"> – створення поля введення для атрибутів, які приймають одне значення з декількох можливих. Текст слідує відразу за тегом;

· <input type=text name="foo" size=20> – створення поля введення під один рядок тексту. Size вказує довжину в символах;

· <input type="submit" value="NAME"> – створення кнопки, при натисканні якої заповнена форма надсилається на сервер;

· <input type="image" border=0

name="NAME"

src="name.gif">

<input type="reset"> – створення графічного образу для кнопки, які ініціалірує передачу даних на сервер [2, c. 62].

Команди META

Тег <МЕТА> використовується для зберігання додаткової інформації про сторінку. Цю інформацію використовують браузери для обробки сторінки, а пошуковими системами – для її індексації.

У блоці <HEAD> можна використовувати декілька тегів <МЕТА>, бо в залежності від використовуваних атрибутів вони можуть нести різну інформацію.

Розглянемо атрибути тега <МЕТА>. Атрибут CONTENT використовується разом з атрибутами HTTP-EQUIV та NAME. Він задає значення властивості, яке вказується з їх допомогою.

Атрибут HTTP-EQUIV встановлює службові властивості документа, наприклад його кодування, дає браузеру інформацію про те, як потрібно обробляти документ.

Розглянемо можливі значення атрибута HTTP-EQUIV:

· Content-Typе – визначає тип вмісту документа, цей параметр бажано вказувати завжди;

· Expires – задає час дії документа, після дати, зазначеної для цієї властивості, документ вважається застарілим;

· Pragma – визначає тип кешування документа, тобто можна заборонити браузеру зберігати сторінку в кеш;

· Refresh – дозволяє задати параметри автоматичного завантаження документа в те саме вікно браузера, що і поточний документ;

· Content-Language – задає мову вмісту, є аналогом атрибуту lang тега HTML;

· Content-Script-Type – типи сценаріїв, використовуваних на сайті;

· Content-Style-Type – задає типи таблиць стилів [6, c. 21 – 22].

8.  Фрейми. Атрибути фреймів.

Фрейми

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

Тег <frameset rows="value,value"> – визначає кількость та розміри горизонтальних фреймів (фреймів-рядків) у вікні браузера (пікселі, відсотки ширини).

Тег <frameset cols="value,value"> – визначає кількість та розміри вертикальних фреймів (фреймів-стовпців) у вікні браузера (пікселі, відсотки ширини).

Тег <frame> – визначає фрейм і його властивості всередині фреймсет-структури.

Тег <noframes></noframes> – визначає стан, при якому браузер не підтримує фрейми.

Атрибути фреймів:

· <frame src="URL"> – визначення адреси (URL) на сторінку HTML-файлу, відображуваного в даному фреймі;

· <frame name="name"> – визначення імені даного фрейма, який буде надалі використовуватися для посилання на нього з інших документів за допомогою параметра target;

· <frame marginwidth=#> – визначення ширини (в пікселях) лівого і правого полів фрейму; повинен бути рівний 1 або бути більше 1;

· <firame marginheight=#> – визначення висоти (в пікселях) верхнього та нижнього полів фрейму; повинен бути рівний 1 або бути більше 1;

· <firame scrolling=VALUE> – визначення наявності смуги прокручування вмісту фрейму; значеннями можуть бути: «yes», «no» або «auto» (за замовчуванням стоїть auto);

· <frame noresize>  – запобігання зміни розмірів фрейма [2, c. 61 – 62].          

Завдання для самостійної та пошукової роботи:

Знайти відповіді на наступні питання:

1.   Основи DHTML.

2.   Основи XHTML та XML.