СТВОРЕННЯ WEB-СТОРІНКИ МОВОЮ HTML
СТВОРЕННЯ WEB-СТОРІНКИ МОВОЮ HTML
Всесвітня мережа World Wide Web (www) складається із web-сторінок, які створюють за до-помогою мови розмітки гіпертексту HTML (Hyper Text Markup Language).
Мова HTML набула популярності в середині 90-х років завдяки експонентному зростанню ме-режі Інтернет. Нині назріла необхідність стандартизації мови, оскільки різні кампанії, які розро-блювали програмне забезпечення для доступу в Інтернет, пропонували власні варіанти інструкцій HTML, кількість яких все збільшувалася.
Створенням специфікації HTML займалась організація World Wide Web Consortium (W3C), завданням якої було скласти специфікації, які віддзеркалюють сучасний рівень розвитку можливос-тей мови, враховуючи різноманітні пропозиції кампаній-розробників браузерів.
Браузер - це програма перегляду web- сторінок у всесвітній комп'ютерній мережі Інтернет. Від браузера залежить в якому вигляді буде відображено вміст web-сторінки, оскільки браузери можуть підтри¬мувати різне форматування. Лідерами серед цих програм є Internet Explorer & Netscape Naviga-tor, на які припадає близько 95 % всіх браузерів.
Web-сторінка - звичайний текстовий файл у форматі *html, *dhtml, *shtml, htm тощо. Брау-зери інтерпретують ці текстові файли, розмічені за правилами мови HTML, форматують їх у вигляді web- сторінок та відображають їх зміст на екрані комп'ютера користувача. Тобто коли завантажу-ється web-сторінка, завантажується текстовий файл, який браузер комп'ютера відображає як графі-чну інформацію.
Браузер відображає текст у потрібному вигляді за допомогою спеціальних символів тегів (з англ. tag - ярлик, ознака). Всі теги HTML виділяються символами-обмежниками(< та >), між якими записується ідентифікатор тегу, та, якщо потрібно, його параметри.
Слід зауважити, щоб створити сторінку з фотокарткою та розповіддю про себе, зовсім не потрібно володіти мовою HTML, з цією метою можна скористатися одним із візуальних редакторів. Проте для тих, хто має намір створити гарний професіональний сайт, є сенс вивчити HTML.
Структура web-сторінки має бути такою. Найперше, документ повинен бути відмічений як доку-мент у форматі HTML, для цього він має починатися тегом <HTML> і закінчуватися тегом </НТМІ>.
Документ складається з:
* заголовка (Head);
* власне документа (Body).
Для виділення заголовка потрібно ввести: <HEAD> Заголовок документа </HEAD>.
Тег заголовної частини документа має бути використаним відразу після тегу <HTML> і ніде більш у документі. Цей тег являє собою загальний опис документа.
Неправильно розміщувати який-небудь текст усередині тегу <HEAD>. Стартовий тег <HEAD> розміщується безпосередньо перед тегом <TITLE> та іншими тегами, які описують документ, а тег </HEAD> має розміщатися відразу після закінчення опису документа.
Кожний www-документ має назву, яка вводиться в титульному рядку браузера. Для введення ти-тульного рядка в заголовок документа потрібно скористатися наступними командами:
<HTML>
<HEAD>
<TITLE> Title List </TITLE>
</HEAD>
</HTML>
Для запису основного тексту слід ввести: <BODY> Основний текст </BODY>. В цій частині документа задаються графічні інтерпретації тексту (фон, колір, розмір, малюнки, виноски, таблиці, списки тощо).
Таким чином, загальна схема документа в форматі HTML матиме такий вигляд:
<HTML>
<НЕАІ)ХПТЬЕ> Титульний рядок документа <TITLE></HEAD>
<BODY> Основний текст документа </BODY>
</HTML>
Слід зазначити, що стартові та завершальні теги типу <HTML>,<HEAD> та <BODY> необов'язкові, проте їх варто використовувати, оскільки це дозволяє web-браузеру розді-лити заголовну а змістовну частини документа.
Під час створення трифреймового сайта на тему "Персональна web-сторінка" були реалізовані сучасні можливості HTML 4.01 та JavaScript - набір операторів мови, які послідовно оброблюються вбудованими у браузер інтерпретаторами.
У першому фреймі завантажується сторінка "меню", яка містить виноски на інші сторінки ("біо-графія", "факультет" та ін.), що заванта¬жуються у другому фреймі. Призначення третього фрейму - за-ванта¬ження верхнього фону, на який не впливають переходи зі сторінки на сторінку. Використання фреймів також дозволяє зекономити час на написання тегів.
Сторінка "меню" являє собою набір тегів, зокрема тег, в якому описано шлях до файлу фону сто-рінки:
<table background="addition/bg.gif" width=100 % height=100 % cellspacing=O cellpad-ding=O border=0>,
виноски на інші сторінки: "біографія", "факультет", "навчання", "мої пісні" та "головна":
<а href="home.html" target="display"onMouseovei="document.bgCoIor=’#333333’;" onmouseout=' 'docu-ment.bgColor='#FFFFFF;” > Головна </а>;
<a href="ho.html" target="display"onMouseover=”docmnent.bgColor= *#003333M'onmouseouf=MdocumentbgColor='#FFFFFP;u > Факультет </а>;
<a href="home3.html" target="display"onMouseover="documentbgCok)r= '#663333’”onmouseout= “document.bgColor='#FFFFFF;" >Мої пісні </а>;
<a href="home2.htm]" target="display"onMouseover="document.bgColor= f#333300'"onmouseout="document.bgColor=”#FFTFFP;" >Біографія </а>;
<a href="homel.html target="display"onMouseover="document.bgColor= ‘#003363’”onmouseout="document.bgColor=’#FFFFFF’;”>Haвчання</a>.
Для того, щоб не використовувати для редагування тексту сторінки "факультет" теги <br>,<font>,<div align>,<U>,<B> тощо, був застосований спеціальний "тег-контейнер" - <рге> текст (відредагований) </рге>.
Динаміко-графічні елементи та флеш-об'єкти дозволяють зробити сайт більш цікавим для відвідувача, наприклад скрипт, що змушує рухатися по літерах титул сторінки:
<Script>
var tit =document. title;
var c = 0;
function writetitle() {
document. title = tit.substring(0,c);
if(c=tit.length) {
c = 0;setTimeout("writetitl()", 3000)
} else {
C++;
setTimeout ("writetitIe()", 200) } }
writetitle() </script>
Використовуються також скрипти, які задають рух по орбітах навколо курсору геометричних фі-гур, та багато інших ефектів.
Таким чином, створення web-сторінки мовою HTML дозволяє усвідомити структуру Інтернет та програмного забезпечення взагалі, а також дає можливість використати здобуті знання у майбутній професійній діяльності.