9.1. Створення та редагування Web-сторінок засобами мови html Теоретичні відомості

Всесвітня інформаційна мережа (World Wide Web далі Web) має недовгу, по людським міркам, історію. Роком народження Web вважається 1992 рік, а її засновником – Тім Бернерс-Лі, який зумів, використовуючи нові мережні технології та досвід своїх попередників, зробити Web зручним засобом розповсюдження інформації у всесвітній комп'ютерній мережі Інтернет (Internet існує з середини ХХ сторіччя) .

Поштовхом для стрімкого розвитку Web-технологія отримала в 1993 році, коли Марк Андерссен з групою студентів університету Іллінойсу розробили програму Mosaic для перегляду Web-сторінок, що розповсдживалась безкоштовно (що є справжнім чинником бурхливого розвитку Web-технологій).

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

Суть і складові частини Web-технології

Виділимо базові елементи технології Web:

Інтернет – це всесвітня мережа різнорідних комп'ютерних мереж, що взаємодіють по протоколу TCP/IP.

Web – це один з додатків Internet (поряд з електронною поштою, новинами та іншими електронними сервісами), що призначений для масового поширення різноманітної інформації.

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

Для передачі гіпертексту Web-сторінок в Інтернеті використовуєть-ся спеціально розроблений протокол HTTP (Hyper Text Transfer Protocol).

Для розробки веб-сторінок використовується спеціальна мова розмітки гіпертексту HTML (Hyper Text Markup Language).

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

Основи мови розмітки гіпертексту – html

Основу HTML складають елементи. Кожний елемент компонується з трьох частин: відкриваючого тега, змістовної частини елемента і закриваючого тега. Тегом (від англ. слова tag – мітка) в HTML-мові вважається текст з назвою елемента, поміщений між символами «<» та «>». Наприклад, тег може мати вигляд <Р>. Тоді елемент може бути таким:

<Р> Електронний модуль </Р>,

де <Р> – відкриваючий тег, </Р> – закриваючий тег.

Між ними подано текст HTML-елемента. Призначення елемента Р є абзацний відступ. Стосовно наведеного прикладу це – вимога створення абзацного відступу для тексту "Електронний модуль". Як видно з запису, закриваючий тег відрізняється від відкриваючого наявністю символу /.

Мова HTML не чутлива до регістру. Теги можуть набиратися як великими, так і малими літерами, тобто команда <title> еквівалентна команді <TITLE> або <TiTlE>. Не всі теги підтримуються всіма браузерами. Якщо браузер не підтримує тег, він його просто ігнорує.

Засобами HTML подаються усі Web-документи. Елементи HTML умовно можна розділити на декілька категорій:

структурні елементи, що обов’язкові для документа – це: HTML, HEAD, BODY, TITLE;

блочні елементи, які призначені для форматування текстових блоків (DIV, H1, H2, H3, H4, H5, H6, P, Pre);

текстові, призначені для розмітки шрифту (I, B, U, BIG, SMALL), розмітки тексту (STRONG, CODE, VAR, CITE та ін.);

спеціальні – елементи порожнього рядка (BR, HR) якірний елемент А, впроваджені елементи (IMG, OBJECT, MAP та ін.), елементи таблиць (TABLE).

Тексти найменувань тегів бажано записувати заголовковими літерами. Браузери, розпізнають теги і виконують пов’язані з ними дії.

Теги зазвичай мають атрибути. Це – компоненти тегів, які утримують вказівки про те, як мусить браузер сприймати і оброблювати теги. Атрибут записується після назви тега перед кутовою дужкою «>» і подається, як правило, у вигляді пари «ім’я атрибуту – значення». Значення атрибуту записується після імені атрибуту через знак «=» і повинне замикатись в подвійні «"» чи одинарні «‘» верхні лапки. Тег може мати декілька атрибутів, тоді вони відокремлюються один від одного пробілами.

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

<! - - Текст коментаря - ->

В готовому Web-документі вони не відображаються.

Стандартний HTML-документ зазвичай складається з трьох компонентів:

даних про версію використовуваного HTML;

заголовка документа;

тіла документа.

Структура такого документа в дещо спрощеному вигляді має бути такою, як у наведеному нижче прикладі:

<! DOCTYPE HTML PUBLIC”-//W3C//DTD HTML 4.01//EN”>

<HTML>

<HEAD>

<TITLE> HTML-документ </TITLE>

</HEAD>

<BODY>

<H1> Заголовок </H1>

<Р> Перший абзац </Р>

<Р> Другий абзац </Р>

</BODY>

</HTML>.

Перший рядок в наведеній структурі HTML-документа утримує інформацію про використовувану версію мови HTML (у даному випадку це – 4.01), а також визначається, який тип даних (DTD) мусить використовувати браузер при взаємодії з документом.

Базовим елементом в структурі HTML-документа є елемент HTML, який задається парою тегів <HTML> і </HTML>. Саме він дозволяє вказати браузеру на те, що він обробляє HTML-документ, а не будь-який інший. Елемент HTML вміщує в себе всі інші структурні частини HTML-документа такі як HEAD, BODY, H1, Р та ін. Все, що поміщено між тегами <HTML> і </HTML> і є, власне, HTML-документ.

Важлива увага в HTML-документі приділяється заголовку HEAD, бо в ньому утримуються відомості про HTML-документ, а саме: назва (тема документа), ключові слова, що використовуються пошуковими системами, а також ряд інших даних. Елемент HEAD задається парою тегів <HEAD> і </HEAD>, між якими зазвичай поміщають інші елементи згідно наступної схеми:

<HEAD>

<TITLE> … </TITLE>

<META…>

...

<META…>

</HEAD>.

Елемент TITLE задає конкретну назву HTML-документа. Саме вона відображається в заголовку вікна броузера. Вона ж сприймається пошуковими системами в Інтернеті. Тому наявність цього елемента в HTML-документі обов’язкова.

Вся змістовна частина HTML-документа знаходиться в елементі BODY (тіло). Для визначення цього елемента використовується пара тегів <BODY> і </BODY>. З елементом BODY зв’язані наступні найбільш часто використовувані атрибути:

background – URL, що вказує зображення для фону (зазвичай береться невеличке зображення, котре розмножується для заповнення фону нового документа);

bgcolor – колір фону HTML- документа;

text – колір шрифту документа;

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

vlink – колір відвіданих гіперпосилань;

alink – колір гіперпосилань при виборі їх користувачами (при натиску Enter станеться перехід за таким гіперпосиланням).

Всі атрибути, зв’язані з кольором, мають тип Color. Значення таких атрибутів можуть бути заданими шістнадцятковими числами з символом # перед числом. Наприклад так: bgcolor=”#FF0005”. При визначенні кольору в такий спосіб слід мати на увазі, що числом задається колір в RGB-форматі. Це означає, що перші два символи задають інтенсивність червоного кольору від 0 до FF (від 0 до 255 в десятковій системі числення), третій та четвертий символи подають інтенсивність зеленого кольору, а два останніх – інтенсивність синього кольору. Значення кольорів можна задавати також назвами кольорів. Окремі з них наведені в таблиці 9.1.

Таблиця 9.1