Тепер ми можемо помістити на нашу Web-сторінку певний текст із різним вирівнюванням:

Тут будуть мої особисті сторінки!

На них Ви зможете знайти: - розповідь про мене та про мої захоплення; - мої фотографії.

З однієї з моїх сторінок можна буде
надіслати мені електронного листа.

3. Інструментарій для створення Web-сторінок

3.1 HTML-редактори

Кожен вибирає свій інструмент для створення веб-сторінок. Це може бути MS FrontPage або Macromedia DreamWeaver, Allaire HomeSite або 1st Page. А хтось користується простим текстовим редактором, наприклад, Блокнотом (Notepad).

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

Основним недоліком MS FrontPage є те, що він генерує дуже великий HTML-код (занадто багато зайвого), тому сторінки виходять більшими, що позначається на швидкості завантаження. Більше того, при створенні Web-сторінок у цьому редакторі бачиш одне, а у вікні браузера зовсім інше. Сторінки виходять якимись кривими, тому для створення якісних Web-сторінок рекомендується використовувати пакети, які будуть розглянуті нижче.

Почнемо ми із популярного Macromedia DreamWeaver. Компанія Macromedia вважається лідером у виробництві програм для створення веб-сайтів, а також законодавцем моди в цій галузі.

Hyper Text Markup Language (HTML) - мова розмітки гіпертексту - призначена для написання гіпертекстових документів, що публікуються в World Wide Web.

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

За допомогою цих позначок можна виділяти заголовки документа, змінювати колір, розмір і зображення букв, вставляти графічні зображення і таблиці. Але основною перевагою гіпертексту перед звичайним текстом є можливість додавання до вмісту документа гіперпосилань – спеціальних конструкцій мови HTML, які дозволяють клацанням миші перейти до перегляду іншого документа.

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

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

Найчастіше теги використовуються парами. Пара складається з відкритого<имя_тега>і закриваєтегів. Дія будь-якого парного тега починається з того місця, де зустрівся тег, що відкриває, і закінчується при зустрічі відповідного закриває тега. Часто пару, що складається з тегів, що відкриває і закриває, називають контейнером, а частина тексту, облямовану тегом, що відкриває і закриває, - елементом.

Послідовність символів, складова текст може складатися з пробілів, табуляцій, символів переходу на новий рядок, символів повернення каретки, букв, розділових знаків, цифр, і спеціальних символів (наприклад #, +, $, @), за винятком наступних чотирьох символів, що мають у HTML спеціальний зміст: (більше), & (амперсанд) і "(подвійна лапка). Якщо необхідно включити до тексту якийсь із цих символів, то слід закодувати його особливою послідовністю символів.

Структура HTML-документа

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

HTML-документ складається з двох частин: заголовок (head) та тіла (body), розташованих у наступному порядку:

Заголовок документа Тіло документа

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

Тіло документає обов'язковим елементом, оскільки у ньому розташовується весь матеріал документа. Тіло документа розміщується між тегами і

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

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

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

Мова HTML підтримує логічне та фізичне форматування вмісту документа. Логічне форматування вказує призначення цього фрагмента тексту, а фізичне форматування задає його зовнішній вигляд.

При використанні логічного форматуваннятексту браузером виділяються різні частини тексту відповідно до структури документа. Щоб відобразити назву, використовується один із тегів заголовка. Заголовки у типовому документі поділяються за рівнями. Мова HTML дозволяє задати шість рівнів заголовків: h1 (заголовок першого рівня), h2, h3, h4, h5 та h6. Заголовок першого рівня зазвичай має більший розмір і насиченість порівняно з заголовком другого рівня. Приклад використання тегів заголовків:

l. Назва глави

l.l. Назва розділу

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

Тег вставляє зображення в документ, якби воно було одним великим символом. Приклад застосування тега:

Для створення гіпертекстового посиланнявикористовується пара тегів<а>... . Фрагмент тексту, зображення або інший об'єкт, розташований між цими тегами, відображається у вікні браузера як гіпертекстове посилання. Активація такого об'єкта призводить до завантаження у вікно браузера нового документа або відображення іншої частини поточної Web-сторінки. Гіпертекстове посилання формується за допомогою виразу:

Href тут є обов'язковим атрибутом, значення якого є URL-адреса запитуваного ресурсу. Лапки у заданні значення атрибуту href не є обов'язковими. Якщо задається посилання на документ на іншому сервері, то вид гіперпосилання такий:

<а href = "http://www.school.donetsk.ua/11.jpg">Світлина 11-А

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

Мова розмітки гіпертексту Hyper Text Markup Language, а HTML це основна мова створення веб-сторінок. У цій статті проведемо загальне знайомство з мовою HTML.

Мова гіпертекстової розмітки Hyper Text Markup Language

HTML-документ будується на основі тегів. Теги створюють структуру документа. Основні теги парні. Це означає, що якщо є тег типу, що відкриває<…>, то має бути і закриваючий тег зі слішем. Бувають і не парні теги.

Весь документ HTML обрамляється двома тегами … . Як бачите вони парні. Крім цього, в HTML документі має бути одиночний тег валідатортип поточного документа.

У HTML 4 три валідатор, у HTML 5 валідатор один. Структура тега HTML 5 :

Приклади:

• документів HTML 4.
• єдиний всім документів HTML5.

Структура HTML документа

HTML документ складається із заголовка (header) та тіла (body). Заголовок обрамляється тегами … . Тіло документа обрамляється парними тегами …

.

Приклад:Основний каркас HTML 5 документа повинен мати таку структуру:

Тут місце для заголовка Тут текст документа

Структура заголовка

Заголовок … включає кілька спеціальних тегів. Основні їх це теги: і .

Тег title

Це заголовок документа, що виводиться у великій частині сторінки.

Тег meta

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

Для індексації веб сторінок важливими є мета-теги description і keywords:

Зауважу, що сучасні пошукові системи перестали «бачити» keywords, але це не скасовує їх використання. Внутрішню перелінковку ніхто не скасовував.

Приклад веб-сторінки на HTML

Наведу елементарну веб-сторінку на HTML:

Моя перша, а значить улюблена веб-сторінка.

Вивчаючи основи HTML, не можна без вивчення та використання спеціальних текстових редакторів. Тому що набирати будь-який текст сторінки HTML потрібно лише у текстовому редакторі типу: NotePad++, Sublime Text2 тощо. Після набору документа потрібно зберегти з розширенням htm або html. Створений файл відкриваємо у будь-якому браузері, яким ви користуєтесь.

Структура тіла документа

Текст у документі (у тегах

) також розбивається на заголовки та частини тегами.

Теги заголовка та абзацу

Текст, документ може обрамлятися спеціальними тегами.
Абзац виділяється тегами

Заголовки розділів тексту виділяються тегами

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

Приклад застосування тегів

Обзац моєї улюбленої веб-сторінки

h1 Категорія товару

h2 Категорія товару

h3 Категорія товару

h4 Категорія товару

h5 Категорія товару

h6 Категорія товару

Атрибути тегів

Однією з основних атрибутів тегів є атрибут форматування під назвою align. Значення атрибуту align:

• left - вирівняти по лівому краю,
• center – вирівняти по центру,
• right – вирівняти праворуч,
• justify - симетричне вирівнювання по двох краях.

Приклад:

Моя улюблена веб-сторінка

h1 Товар

h2 Товар

h3 Товар

Таке форматування називається фізичним та в принципі застаріло. Для форматування краще та рекомендовано використовувати таблиці каскадних стилів (CSS).

Списки

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

• Списки марковані (unordered list);
• Списки нумеровані (ordered list);
• Список термінів (definition list).

Розглянемо кожен із видів списків.

Списки марковані

Марковані списки задаються тегами (unordered list). Для створення кожного елемента списку застосовується теги і(Item list).

Приклад:

• Товар 1 із списку товарів
• Товар 2 із списку товарів
• Товар 3 із списку товарів

У списку можна розміщувати теги заголовків:

Заголовок списку

• Товар 1 із списку товарів
• Товар 2з переліку товарів
• Товар 3 із списку товарів

Маркери, тобто видимі значки перед елементами списку, можуть змінюватися, які зовнішній вигляд задається атрибутами type. Атрибути type можуть бути: circle (не зафарбований кружок), disk (зафарбований кружок) та square (квадрат зафарбований). За промовчанням використовується атрибут disc. Приклад використання маркера з атрибутом disk:

• Товар 1 зі списку
• Товар 2 зі списку
• Товар 3 зі списку

Списки нумеровані

Нумеровані чи впорядковані списки (ordered list), кожному елементу списку надається номер. Створюються нумеровані списки тегами. Для кожного елемента нумерованого списку також використовуються парні теги … .

У нумерованих списках використовуються п'ять атрибутів:

1-Цифри арабські; i- Римські малі цифри; I- римські великі цифри; a-латинські малі літери; A-Латинські великі літери.

Приклад нумерованого списку.

Список товарів нумерований

1. Товар1 зі списку
2. Товар2 зі списку
3. Товар3 зі списку

Приклад нумерованого списку з маркерами латинських малих літер:

1. Товар1 зі списку
2. Товар2 зі списку
3. Товар3 зі списку

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

Для створення списків за типом термін-визначення терміну застосовуються теги

…

, а визначення (пояснення) терміна полягає у парний тег

.

Приклад:

Заголовок

Термін 1

Пояснення терміна 1

Термін 2

Пояснення терміна 2

Вкладення списків

Будь-який тип списку, маркований і нумерований, можна вкладати один в одного. Вкладення припустимо довільне. Головне під час створення вкладених списків не заплутатися у парних тегах.

Приклад вкладених списків:

Вкладені списки

• Розділ товарів 1
1. Розділ товарів 1.1
2. Розділ товарів 1.2
• Розділ товарів 2
1. Розділ товарів 2.1
2. Розділ товарів 2.2
3. Розділ товарів 2.3
• Розділ товарів 3
1. Розділ товарів 3.1

Таблиці в HTML

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

Структура таблиці:

//- парні теги контейнера таблиці;// //контейнер для створення рядка таблиці// , який має бути всередині тега//

// Тег створення одного осередку таблиці. Цей тег має бути всередині контейнера

• Border - рамка шириною 2 px;
• Cellpadding-відстань між зовнішніми межами осередків таблиці;
• Cellspacing-відстань між зовнішніми межами осередків таблиці.
• Height-висота таблиці;
• Width-ширина таблиці.
• Caption-тег для створення заголовка таблиці, може розміщуватися тільки всередині контейнера .

  Приклад таблиці:

  Проста таблиця

  1-1	1-2	1-3
  2-1	2-2	2-3

  Теги colspan та rowspan
  призначені для об'єднання осередків :

  Осередки 1.1 та 1.2		Осередок 1.3
  Осередок 2.1	Осередок 2.2	Осередок 2.3
  Осередки 3.1 - 3.3

  
  
  

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

  Основний атрибут цього тегу href. Цей тег містить адресу ресурсу, який веде посилання. Усередині тега-контейнера пишеться текст посилання.

  Якір

  Щоб послатися на якір, в іншому документі, ім'я якоря з гратами (#) пишеться відразу після адреси стороннього документа, без пробілу.

  Посилання на Якір 3 у Документі 009

  Малюнки у вигляді посилань

  Малюнки та фото також можна робити у вигляді посилань. Для цього малюнок вставляється в текст із тегом . Атрибут src цього тега має значення файлу картинки:

  

  

  На цьому все! Звичайно, основи HTML не включають всі особливості цієї мови, але дають уявлення про формування HTML документа.

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

  Стандарт HTML та інші стандарти для Web розроблені під керівництвом консорціуму W3C (World Wide Web Consortium). Стандарти, специфікації та проекти нових пропозицій можна знайти на сайті http://www.3w.org/. В даний час діє специфікація HTML 4.0, підтримка якої з боку основних браузерів невпинно зростає.

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

  Інформацію про теги HTML Compendium (короткий посібник з HTML) створено Ron Woodall. Компендіум містить список тегів та їх атрибутів за абеткою, а також оновлену інформацію про підтримку кожного з них з боку браузерів.

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

  Користувачам Windows слід перевірити HomeSite, потужний і недорогий редактор HTML компанії Allaire Corporation. У ньому є засоби виділення кольорами синтаксичних конструкцій HTML, функція FTP, контроль синтаксису і правопису, багатофайловий пошук і заміщення. Крім того, він містить спеціальні команди та шаблони для створення складніших елементів (фреймів, сценаріїв JavaScript та DHTML).

  Працюючи на комп'ютерах Macintosh звертають увагу на BBEdit, комерційний HTML-редактор компанії Bare Bones Software, Inc. Він справді має вагу серед Web-розробників для комп'ютерів Macintosh. До його складу входять зручні та швидкі HTML-інструменти, багатофайловий пошук та заміна, вбудована FTP-функція, підтримка 13 мов програмування, будівельник таблиць, контроль синтаксису HTML та ще безліч функцій.

  Останні роки характеризуються різким зростанням ринку авторських інструментів. HTML-редактори класу WYSIWYG (What You See Is What You Get – що бачиш, те й отримаєш) мають графічні інтерфейси, які роблять написання HTML більш схожим на програму редагування текстів чи розмітки сторінки. Початковою метою цих програм було звільнення користувачів від тегів HTML, на кшталт того, як програми розмітки сторінок захищають розробника від набору команд мови PostScript. Сьогодні їхня значущість зросла, оскільки вони підвищують ефективність і рівень автоматизації виробництва документів, забезпечуючи водночас доступ до вихідного тексту HTML.

  Найбільш популярними в даний час WYSIWYG-редакторами є Macromedia DreamWeaver, Golive CyberStudio (тільки для комп'ютерів Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe PageMill.

  Документ HTML містить текст (вміст сторінки) та вбудовані теги - інструкціями про структуру, зовнішній вигляд та функції вмісту. Документ HTML поділяється на дві основні частини: заголовок – head та тіло – body. Заголовок містить такі відомості про документ, як його назву та методичну інформацію, що описує вміст. У тілі знаходиться самий вміст документа (те, що виводиться у вікні браузера).

  Кожен тег складається з імені, за яким може йти список необов'язкових атрибутів, всі вони знаходяться всередині кутових дужок< >. Вміст дужок ніколи не відображається у вікні браузера. Ім'я тега, як правило, є абревіатурою його функції, що полегшує його запам'ятовування. Атрибути є властивостями, які розширюють чи уточнюють функцію тега. Як правило, ім'я та атрибути всередині тега не чутливі до регістру. Тег працюватиме так само, як . Однак значення певних атрибутів можуть бути чутливими до регістру. Це стосується, зокрема, імен файлів та URL.

  Більшість тегів є контейнерами. Це означає, що вони мають початковий (відкриваючий чи стартовий) і кінцевий (закриває) теги. Текст, що знаходиться між тегами, буде виконувати інструкції, що містяться в них.

  Кінцевий тег має те саме ім'я, що і початковий, але перед ним стоїть сліш (/). Його можна розглядати як "вимикач" тега. Кінцевий тег ніколи не містить атрибутів.

  У деяких випадках кінцевий тег не є обов'язковим, і браузер визначає кінець тега з контексту. Найчастіше опускають кінцевий тег<р>(Абзац). Браузери раніше підтримували цей тег без відповідного завершення, тому багато авторів Web звикли використовувати коротку форму. Це дозволено не всім тегам, і не всі браузери вибачають їхню відсутність. Тому, якщо є сумніви, увімкніть текст закриває тег. Це особливо важливо, коли ви використовуєте каскадні таблиці стилів у документі.

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

  ---

  ) та теги, що містять інформацію про документ і не впливають на вміст, що виводиться на екран, такі як і .

  Атрибути додаються до тега для розширення або модифікації його дій. До одного тега можна додати кілька атрибутів. Якщо атрибути тега слідують після імені тега, вони розділяються одним або декількома пробілами. Порядок прямування не важливий. Більшість атрибутів мають значення, які йдуть за знаком рівності (=), що знаходиться після імені атрибута. Довжина значень обмежена 1024 символами. Значення можуть бути чутливими до регістру. Іноді значення мають перебувати у лапках (подвійних чи одинарних). Правила запису значення такі:

  • - якщо значення є одне слово або число і складається тільки з літер (a-z), цифр (0-9) та спеціальних символів (точка<.>
  • - якщо значення містить кілька слів, розділених комами або пробілами, або містить спеціальні символи, відмінні від точки чи дефісу, тоді його необхідно помістити в лапки. Наприклад, URL потребують лапок, тому що вони містять символи "://". Також лапки необхідні при заданні значень кольорів із використанням формату "#rrggbb".

  Якщо ви не впевнені, чи варто використовувати лапки, використовуйте їх завжди для всіх значень.

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

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

  The weather is gorgeous today - це інформація, що ігнорується браузерами.

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

  • - Розриви рядків. Символи кінця рядків у документі HTML ігноруються. Текст та елементи будуть переноситися доти, доки в потоці тексту документа не зустрінеться тег
  • - символи табуляції та множинні прогалини. Коли браузер зустрічає в документі HTML символ табуляції та кілька послідовних символів пробілу, він виводить лише один пробіл. Таким чином, якщо документ містить "far, far away", браузер виведе "far, far away". Додаткові пробіли можна додати до текстового потоку, використовуючи символ нерозривної пробілу (Snbsp;). Крім того, всі прогалини виводяться, якщо текст є форматованим (перебуває в тегах
  • - множинні
  • - Теги, що не розпізнаються. Якщо браузер не розуміє тег або той був неправильно заданий, браузер його просто ігнорує. Це може призвести до різних результатів залежно від тега та браузера. Або браузер нічого не виведе, або може відобразити вміст тега як звичайний текст;
  • - Текст у коментарях. Браузери не виводять текст між спеціальними елементами

  Технологія WWW

  Служба World Wide Web (WWW) – найпопулярніша служба Internet. WWW – це єдиний інформаційний простір, що складається із сотень мільйонів взаємопов'язаних електронних документів, що зберігаються на Web-серверах. Окремі документи, що становлять простір Web, називають Web-сторінками. Групи тематично об'єднаних Web-сторінок називають Web-вузлами (Web-сайт). Один фізичний Web-сервер може містити досить багато Web-вузлів, кожному з яких відводиться окремий каталог на жорсткому диску сервера.

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

  Такі команди називають тегами. Теги полягають у дужках<>. Більшість тегів використовуються парами: тег, що відкриває, і закриває.

  текст

  Складні теги, крім ключового слова, мають додаткові атрибути та параметри. Правила запису тегів містяться у специфікації спеціальної мови розмітки гіпертексту – HTML (Hyper Text Markup Language). Т. е. Web-Документ являє собою звичайний текстовий документ, розмічений тегами HTML.

  Найважливішою рисою Web-документів є гіпертекстові посилання. Гіперпосилання можна встановити на будь-який фрагмент тексту. Для створення гіперпосилання використовується парний тег . Цей тег містить обов'язковий атрибут HREF, який визначає адресу URL документа, на який вказує посилання.

  Адреса може бути задана в абсолютній та у відносній формі. Адреса в абсолютній формі починається із зазначення протоколу та адреси Web-вузла. Такий запис використовується, коли необхідно направити відвідувача на інший веб-сайт, і розглядається як зовнішнє посилання. Під час використання відносної адреси в засланні задається лише відносний шлях пошуку для документа. При цьому передбачається використання того ж протоколу і того ж Web-вузла, а посилання розглядається як внутрішнє. Внутрішнє посилання зберігає свою працездатність у разі зміни адреси веб-сайту як цілого (наприклад, на інший сервер). Повний формат гіперпосилання включає можливість посилання певне місце всередині сторінки. Але це можна зробити лише для сторінок власної розробки. І тому місце, яким ставиться посилання позначається з допомогою спеціального елемента- якоря. Якір задається за допомогою парного тегу c обов'язковим атрибутом NAME. Значенням цього атрибуту є довільна послідовність латинських літер та цифр – ім'я якоря. Для посилання на якір його ім'я вказується в кінці URL після символу #.

  
  
  

  Глосарій

  Браузер шукатиме документ на даному сервері у поточній папці

  Midi-музика

  Браузер виконає перехід на сайт http://www.midi.ru.

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

  Гіпертекстовий зв'язок між великою кількістю документів, що зберігаються на фізичних серверах Internet, є основою існування логічного простору WWW.

  Розглянемо апаратні та програмні засоби, які разом утворюють Інтернет.

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

  · URL-адреси та протоколи передачі даних.Якщо фрагменти документа розкидані по всьому світу, а ви хочете надати його користувачу у вигляді цілісного, витриманого в єдиному стилі документа, знадобиться дуже хороша адресна система. Кожен файл в Інтернеті має адресу, яка називається URL (Uniform Resource Locator - уніфікований покажчик інформаційного ресурсу). Наприклад, URL сайту Європейської федерації футболу - http://ua.uefa.com.

  Перша частина URL визначає метод, з якого комп'ютер отримує доступ до файлу, тобто комунікаційний протокол. До більшості веб-сторінок доступ здійснюється за допомогою протоколу HTTP (Hypertext Transfer Protocol – протокол передачі гіпертекстових документів). Ось чому веб-адресу зазвичай вказують з використанням літер «http», а браузери автоматично вставляють ці літери перед введеною користувачем веб-адресою. Часто частина адреси http:// на початку URL опускається.

  Наступна частина адреси – це хост-ім'я веб-сервера. Система доменних імен направить ваш запит веб-серверу, де б він не знаходився.

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

  · HTML(Hypertext Markup Language - мова розмітки гіпертекстових до-нтів) є універсальною мовою Веб. Він використовується для компонування сторінок, на яких може бути відтворена інформація, розміщена в Інтернеті: текстова, графічна, а також аудіо- та відеоінформація.

  · Java та JavaScript.МоваJava призначена для пересилання через Веб невеликих додатків (званих аплетами або Java-додатками). А мова JavaScript розширює можливості НTML для вбудовування невеликих програм (або сценаріїв) у веб-сторінки. Основне призначення аплетів та сценаріїв полягає у підвищенні інтерактивності веб-сторінок - замість взаємодії з віддаленим веб-сервером ви працюєте з аплетом та сценарієм, які виконуються на вашому комп'ютері.

  Існують також Java-аплети та сценарії JavaScript для побудови анімації, вони надсилаються веб-сервером по мережі, щоб бути виконаними на комп'ютері користувача; вони дозволяють уникнути передачі кадрів анімації Інтернетом. Описані процеси зазвичай відбуваються непомітно користувача.

  · VBScript та елементи керування ActiveX.Мова VBScript та елементи керування ActiveX – це стандартні засоби, що підтримуються браузером Internet Explorer.

  VBScript є спрощеною версією мови Visual Basic, розробленої компанією Microsoft. За його допомогою можна створювати сценарії, які надають веб-сторінкам динамічності. Таким чином, за своїми можливостями VBScript аналогічний до мови JavaScript.

  Елементи керування ActiveX, подібно до Java-аплетів, застосовуються для вбудовування виконуваних програм у веб-сторінки. Коли Internet Explorer зустрічає веб-сторінку, де використовуються елементи керування ActiveX, він перевіряє, чи встановлений конкретний елемент керування на вашому комп'ютері, і якщо ні – інсталює його.

  · XML та інші розширені мови Веб. XML (Extensible Markup Language - розширена мова опису документів) є дуже потужною мовою, яка повинна замінити HTML як мову розробки додатків для Веб. На відміну від HTML, XML не містить жодних інструкцій про те, як повинні відображатися дані, що описані в XML-документі. Спосіб їх відображення задається мовою опису стилів, який грає для XML приблизно ту ж роль, що каскадні таблиці стилів для HTML. Консорціум W3C працює з двома специфікаціями таблиць стилів: XSL (Extensible Style Language – розширена мова стилів) та CSS (Cascading Style Sheets – каскадні таблиці стилів). Інша важлива відмінність XML від HTML полягає в тому, що він може містити будь-які теги, які вважають за потрібне використовувати автори XML-словника.

  Більш досконалою версією HTML є мова DHTML (Dynamic HTML - динамічний HTML), що включає три компоненти - HTML, JavaScript та CSS.

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

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

  HyperText Markup Language(HTML) – мова розмітки гіпертексту – призначена для написання гіпертекстових документів, що публікуються у World Wide Web.

  Гіпертекстовий документ– це текстовий файл, який має спеціальні теги, які називаються тегами, які згодом розпізнаються браузером і використовуються для відображення вмісту файлу на екрані комп'ютера. За допомогою цих позначок можна виділяти заголовки документа, змінювати колір, розмір і зображення букв, вставляти графічні зображення і таблиці. Але основною перевагою гіпертексту перед звичайним текстом є можливість додавання до вмісту документа гіперпосилань- Спеціальних конструкцій мови HTML, які дозволяють клацанням миші перейти до перегляду іншого документа.

  Існує два способи створення гіпертекстових документів. Можна скористатися одним із WYSIWYG HTML-редакторів (наприклад, Microsoft FrontPage, або ін.), для роботи з якими не потрібні спеціальні знання про внутрішню структуру створюваного документа. Цей спосіб дозволяє створювати документи для WWW без знання мови HTML. HTML-редактори автоматизують створення гіпертекстових документів, позбавляють рутинної роботи. Однак їх можливості обмежені, вони сильно збільшують розмір файлу і не завжди отриманий з їх допомогою результат відповідає очікуванням розробника. Але, безумовно, цей спосіб є незамінним для новачків у справі підготовки гіпертекстових документів.

  Альтернативою є створення та розмітка документа за допомогою звичайного редактора тексту (NotePad). При цьому способі тексту вручну вставляються команди мови HTML. Створюючи документи у такий спосіб, ви точно знаєте, що робите.

  Як зазначалося, HTML-документ містить символьну інформацію. Одна її частина - власне текст, тобто дані, що становлять вміст документа. Інша – теги(markup tags), звані також прапори розмітки, – спеціальні конструкції мови HTML, що використовуються для розмітки документа та керують його відображенням. Саме теги мови HTML визначають, як буде представлений текст, які його компоненти виконуватимуть роль гіпертекстових посилань, які графічні чи мультимедійні об'єкти мають бути включені у документ. Графічна та звукова інформація, що включається до HTML-документу, зберігається в окремих файлах. Програми перегляду HTML-документів (браузери) інтерпретують прапори розмітки та мають текст і графіку на екрані відповідним чином. Для файлів, що містять HTML-документи, прийняті розширення .htm або .html.

  Великі та малі літери при записі тегів не відрізняються.Найчастіше теги використовуються парами. Пара складається з тегів, що відкриває (start tag) і закриває (end tag). Синтаксис тега, що відкриває:

  <имя_тега [атрибуты]>

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

  Атрибути тега записуються у наступному форматі:

  ім'я[="значення"]

  Лапки при заданні значення аргументу не обов'язкові і можуть бути опущені. Для деяких атрибутів значення може не вказуватись. У теги, що закриває, атрибутів не буває.

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

  Послідовність символів, що становить текст, може складатися з пробілів, табуляцій, символів переходу на новий рядок, символів повернення каретки, букв, розділових знаків, цифр, і спеціальних символів (наприклад, +, #, $, @), за виняткомнаступних чотирьох символів, що мають у HTML спеціальний зміст:< (меньше), >(більше), & (амперсенд) і "(подвійна лапка). Якщо необхідно включити до тексту якийсь із цих символів, то слід закодувати його особливою послідовністю символів.