Мова розмітки гіпертексту 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 зі списку

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

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

…

(definition list) та

…

(Definition description). Причому сам термін полягає у парний тег

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

.

Приклад:

Заголовок

Термін 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 документа.

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

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

  Мова гіпертекстової розмітки HTML

  Популярність Internet багато в чому викликана появою World Wide Web (WWW), оскільки це перша мережна технологія, яка надала користувачеві простий інтерфейс для доступу до різноманітних мережевих ресурсів. Простота та зручність застосування привели до зростання кількості користувачів WWW та привернули увагу комерційних структур. Далі процес зростання числа користувачів став лавиноподібним, і так продовжується досі. На основі необхідності об'єднати всі множини інформаційних ресурсів почала розвиватися технологія за допомогою якої визначається гіпертекстова навігаційна система. Цією технологією стала мова HTML. Технологія HTML на початковому етапі була надзвичайно проста, і практично всі користувачі мережі одночасно отримали можливість спробувати себе як творці та читачі інформаційних матеріалів, опублікованих у Всесвітньому павутинні. Справа в тому, що при розробці різних компонентів технології передбачалося, що кваліфікація авторів інформаційних ресурсів та їхня оснащеність засобами обчислювальної техніки будуть мінімальними.

  Мова HTML (HyperText Markup Language, мова розмітки гіпертексту) належить до так званих мов розмітки тексту (markup languages). Під терміном "розмітка" розуміється загальна службова інформація, яка не виводиться разом із документом, але визначає; як мають виглядати ті чи інші фрагменти документа. Наприклад, ви можете вимагати, щоб слово виводилося жирним або курсивним шрифтом, вивести окремий абзац особливим шрифтом або оформляти заголовки збільшеним шрифтом.

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

  1) мова визначає синтаксис розмітки;

  2) мова визначає зміст розмітки.

  Найбільш поширеною мовою розмітки Web-сторінок є HTML. Ця мова розмітки була створена і рекламована як одна з конкретизацій SGML. Вперше запропонований у 1974 році Чарльзом Голдфарбом і надалі після значного доопрацювання прийнятий як офіційний стандарт ISO, SGML (Standard Generalized Markup Language, Стандартна узагальнена мова розмітки) є метамовою - системою для опису інших мов.

  Поява стандарту SGML була обумовлена ​​необхідністю спільного використання даних різними програмами та операційними системами. Навіть у далеких 60-х роках у користувачів комп'ютерів виникало чимало проблем із сумісністю. Проаналізувавши недоліки багатьох нестандартних мов розмітки, троє вчених з IBM - Чарльз Гольдфарб (Charles Goldfarb), Ед Мо-шер (Ed Mosher) та Рей Лорі (Ray Lorie) - сформулювали три загальні принципи, що забезпечують можливість спільної роботи з документами в різних операційні системи.

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

  2) Спеціалізація мов форматування. Завдяки можливості побудови спеціалізованої мови на базі набору стандартних правил програміст перестає залежати від зовнішніх реалізацій та їх уявлень про потреби кінцевого користувача

  3) Чітке визначення формату документа. Правила, що визначають формат документа, задають кількість та маркування мовних конструкцій, що використовуються у документі. Застосування стандартного формату гарантує, що користувач точно знатиме структуру вмісту документа. Зверніть увагу: йдеться не про формат відображення документа, а про його структурний формат. Набір правил, що описують цей формат, називається визначенням типу документа (document type definition, DTD).

  Ці три правила було закладено основою попередника SGML - GML (Generalized Markup Language). Дослідження та розробка GML тривали близько десяти років, поки в результаті угоди, укладеної міжнародною групою розробників, не з'явився стандарт SGML.

  HTML (Hypertext Markup Language, Мова розмітки гіпертексту) - це комп'ютерна мова, що лежить в основі World Wide Web. HTML заснований на стандарті SGML гіпертекстова мова розмітки документів для їх подання до Web. Стандарти мови HTML, одного з ключових стандартів Web, розробляються та підтримуються консорціумом W3C. Засновником цього міжнародного консорціуму є Тім Бернес Лі (Tim Berners-Lee). Консорціум, крім створення стандартів форматування, є центром розробки Semantic Web (семантична мережа). Засобами мови HTML забезпечується форматна розмітка документів, визначаються гіперзв'язки між документами та їх фрагментами.

  Як основу написання коду HTML було обрано звичайний текстовий файл. p align="justify"> Таким чином, гіпертекстова база даних в концепції WWW - це набір текстових файлів, розмічених на мові HTML, який визначає форму подання інформації (розмітка) і структуру зв'язків між цими файлами та іншими інформаційними ресурсами (гіпертекстові посилання).

  Розробники HTML змогли вирішити два завдання:

  · Надати дизайнерам гіпертекстових баз даних простий засіб створення документів;

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

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

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

  Гіпертекстові посилання, що встановлюють зв'язки між текстовими документами, поступово почали об'єднувати різні інформаційні ресурси, у тому числі звук і відео. Система гіперпосилань HTML дозволяє побудувати систему взаємозалежних документів за різними критеріями. Мова HTML містить команди (теги), що дозволяють керувати формою та розміром шрифтів, розміром та розташуванням ілюстрацій, дозволяє здійснювати перехід від фрагмента тексту або ілюстрації до інших html – документом – так зване гіпертекстове посилання. Документ в html - форматі є текстовий файл, що містить всі необхідні відомості про інформацію, що виводиться на екран. Для керування сценаріями перегляду сторінок Website (гіпертекстової бази даних, виконаної у технології World Wide Web) можна використовувати мови програмування цих сценаріїв, наприклад, JavaScript, Java та VBScript. Форми для введення користувачем даних, які пізніше піддаються обробці та іншу інформацію можна обробляти за допомогою спеціальних серверних програм (наприклад, мовами PHP або Perl). Мова HTML дозволяє розміщувати на сторінках гіпертекстові посилання та інтерактивні кнопки, які з'єднують ваші Web-сторінки з іншими сторінками того ж Web-сайту, так само як і з іншими Web-сайтами по всьому світу.

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

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

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

  Динамічний та статичний HTML-документи

  Розрізняють два види html-документів – статичні та динамічні. Статичні документи зберігаються у файлах тієї файлової системи, яка використовується web-сервером або браузером для перегляду локальних файлів. При розміщенні інформації на web-сервері можна використовувати динамічні документи - такі, які не існують постійно як файли, а генеруються в момент запиту клієнта. Причому кінцевого користувача немає значення динамічний чи статичний спосіб подання документів.

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

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

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

  Перспективи HTML

  Нових версій мови HTML не буде, проте існує подальший розвиток HTML під назвою XHTML (англ. Extensible Hypertext Markup Language - мова розмітки гіпертексту, що розширюється). Поки XHTML за своїми можливостями можна порівняти з HTML, проте висуває більш суворі вимоги до синтаксису. Як і HTML, XHTML є підмножиною мови SGML, проте XHTML, на відміну попередника, відповідає специфікації XML. Варіант XHTML 1.0 був схвалений як Рекомендація Консорціуму Всесвітньої павутини (W3C) 26 січня 2000 року. Необхідно, однак, врахувати одну серйозну деталь - у цьому форматі створено велику кількість інформаційних ресурсів, що вони ще довго "розуміються" web-браузерами і використовуватимуться у своєму первозданному вигляді. Крім того, нові формати будуть розроблятися (і вже розробляються - наприклад XML) з підтримкою технологій HTML.

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

  МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ

  СХІДНОУКРАЇНСЬКИЙ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ

  імені Володимира Даля

  Кафедра комп'ютерних наук

  З дисципліни

  Комп'ютерний дизайн та мультимедія

  Студент Болдакова І.В.

  1. Вступ

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

  Література

  1. Вступ

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

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

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

  Створити Web-сторінку непросто, але, напевно, кожна людина хотіла б спробувати себе в ролі дизайнера. І я, в даному випадку, не виняток, тому й обрала таку тему для своєї курсової роботи.

  У своєму рефераті я зробила спробу розібратися в тому, що необхідно знати та вміти для створення Web-сторінки, яке програмне забезпечення є інструментом створення Web-сторінок і як його ефективно використовувати.

  Також у цій роботі мною розглянуті основи мови програмування Web-сторінок - HTML, що є загальноприйнятим стандартом WWW. Це дасть нам можливість ознайомитися зі структурою Web-сторінки та прийомами її правильного оформлення. А за допомогою CMS Joomla ми розглянемо створення сайту.

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

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

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

  Мова HTML існує у кількох варіантах і продовжує розвиватися, але конструкції HTML швидше за все будуть використовуватись і надалі. Вивчаючи HTML і пізнаючи його глибше, створюючи документ на початку вивчення HTML і розширюючи його наскільки це можливо, ми маємо можливість створювати Web-сторінки, які можна переглянути багатьма браузерами Web, як, і у майбутньому. Це не виключає можливості використання інших методів, наприклад, метод розширених можливостей, який надається Opera, Google Chrome, Internet Explorer або іншими браузерами.

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

  HTML було ратифіковано World Wide Web Consortium. Він підтримується усіма браузерами.

  Оскільки HTML-документи записуються в ASCI I-форматі, то для її створення може бути використаний будь-який текстовий редактор.

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

  Усі теги починаються символом "<" и заканчиваются символом ">". Зазвичай є пара тегів - стартовий (відкриваючий) і завершальний (закриваючий) тег (схоже на дужки, що відкриваються і закриваються в математиці), між якими міститься інформація, що розмічується:

  Інформація

  Тут стартовим тегом є тег

  А завершальним –

  . Завершальний тег відрізнятиметься від стартового лише тим, що в нього перед текстом у дужках<>стоїть символ " / (Слеш).

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

  A) Оголошення HTML;

  B) Заголовна частина;

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

  A) Оголошення HTML

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

  B) Заголовна частина.

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

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

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

  ..........

  Тепер ми можемо написати HTML-код нашої сторінки:

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

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

  Для початку нового рядка використовується тег
  (скор. від англ. break – перервати). Цей тег призводить до відображення браузером подальшого тексту з початку наступного рядка. Тег, що закриває для нього, не використовується. Він зручний, якщо потрібно з якогось місця писати з нового рядка без початку нового абзацу, наприклад, у вірші. Повторне його використання дозволяє вставити один або кілька порожніх рядків, відсунувши наступний фрагмент сторінки вниз.

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

  (англ. paragraph – абзац). Цей тег, крім початку нового рядка, вставляє один порожній рядок. Але багаторазове повторення

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

  Усередині дужок тега, крім його назви, можуть розміщуватися також атрибути (англ. atributes - атрибути). Вони відокремлюються від назви і між собою пробілами (одним або декількома), а пишуться у вигляді ім'я_атрибута ="значенняЯкщо значення не містить пробілів, то лапки можуть бути опущені, але так робити не рекомендується.

  Може містити атрибут ALIGN, що визначає вирівнювання абзацу. За промовчанням абзац вирівняно ліворуч ALIGN="left". Можливі також вирівнювання вправо ALIGN="right" та по центру ALIGN="center". При використанні атрибутів, після форматованого тексту слід використовувати тег, що закриває

  . Якщо його немає, то новий тег

  означає закриття попереднього, відповідно вкладені

  Неможливі. Вирівняти текст по центру можна також тегом

  .

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

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

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

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

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

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

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

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

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

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

  DreamWeaver 3.0

  Але DreamWeaver на кілька кроків випереджає інші редактори, що використовують технологію WYSIWYG, насамперед тим, що генерує дуже чистий HTML-код. DreamWeaver дозволяє позбавитися однотипної роботи при створенні сторінок (наприклад, верстка тексту) за допомогою використання опції "запис послідовності команд" (ви записуєте послідовність команд, що ви вами, потім натискаєте, наприклад, CTRL+P, і DreamWeaver відтворює все в тій же послідовності.

  HomeSite 4.0

  Наступний редактор - HomeSite 4 - створення сторінок вручну, тобто. для знавців HTML. Ви отримуєте повний контроль над HTML-кодом, причому існує можливість оптимізувати свою сторінку під одним із трьох популярних браузерів (MSIE, Google Phrome, Opera).

  HomeSite містить два основні режими: Edit та Design. Режим Design - це подоба WYSIWYG-редактора, що видає HTML-код, причому, якщо ви завантажите чужий HTML-код, HomeSite все перепише по-своєму.

  Ще одна відмінна риса HomeSite - це його "склейка" з Dreamweaver. HomeSite має кнопку "Dreamweaver", а також входить у його стандартний пакет поставки. Втім, і DreamWeaver має можливість підключення HomeSite як редактора для коригування HTML-коду.

  Одним із останніх HTML-редакторів є EVR Soft 1st Page v2.

  Його гасло - "Create 1st class websites!" ("Створюйте першокласні веб-сайти!"). Редактор містить кілька режимів - Normal, Easy, Advanced/Expert та Hardcore, тобто ви можете вибрати свій рівень, а згодом перейти на вищий. Ще одна особливість – досить велика колекція скриптів на JavaScript та DHTML. Все це досить зручно розбите за категоріями.

  3.2 Графічні редактори

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

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

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

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

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

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

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

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

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

  Графічні пакети (редактори) теж поділяються на два типи: растрові та векторні. Давайте тепер розглянемо найпопулярніші з них.

  А) Редактори растрової графіки

  

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

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

  

  Пакет пропонує, наприклад, засоби для відновлення пошкоджених зображень, ретушування фотографій або створення найфантастичніших колажів, які тільки можуть дозволити собі уяву. Загалом, потенціал цього пакету справді величезний. Починаючи з версії 5.5, у пакет включена програма Adobe ImageReady, що надають величезні можливості для обробки графіки під WEB (оптимізація зображень, створення анімованих gif, "розрізання" картинок на дрібніші і т.д.). Девіз розробників Adobe Photoshop - "Camera of your mind" - передбачає не лише технічну досконалість, а й повну свободу творчості, на яку людина, яка працює з цією програмою, просто приречена.

  PhotoPaint- ще один не менш відомий графічний редактор (з пакету Corel Draw) для обробки растрової графіки, який конкурує з Adobe Photoshop. Тут також є всі необхідні інструменти обробки графіки, різноманітні фільтри, текстури. Різниця лише у зручності роботи, інтерфейсі та швидкості накладання фільтрів - накладання відбувається трохи повільніше.

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

  Існує ще ряд редакторів ( Microsoft Photo Editor, Microsoft Photo DRAW), що також дозволяють реалізувати найпростіші завдання, але не задовольняють запитам професіоналів.

  B) Редактори векторної графіки

  

  Adobe Illustrator- пакет дозволяє створювати, обробляти та редагувати векторну графіку. За своєю потужністю він еквівалентний

  растровому редактору Adobe Photoshop: має аналогічний інтерфейс, дозволяє підключати різні фільтри та ефекти, розуміє багато графічних форматів, навіть такі як. cdr (Corel Draw) в. SWF (Flash).

  CorelDraw- безумовно, такий відомий графічний пакет було неможливо обійтися без засобів обробки векторної графіки. Пакет за своєю потужністю практично не поступається графічним редакторам Adobe Photoshop та Adobe Illustrator. Крім обробки векторної графіки, у цьому пакеті існує обробник растрової графіки (Photo Paint), трасувальник зображень, редактор шрифтів, підготовки текстур та створення штрих-кодів, а також величезні колекції із зображеннями (CorelGallery).

  Adobe Streamline- ще один продукт фірми Adobe, призначений для трасування (переведення) растрової графіки у векторну. Це невеликий, але дуже корисний та потужний продукт. Особливо корисний, якщо ви створюєте Web-сторінки за допомогою векторної графіки, наприклад, технології Flash.

  4. Створення сайту за допомогою CMS Joomla 1.5.7

  Плавно, за принципом від простого до складного, переходимо від статичних сторінок WWW до динамічних. Щоб це здійснити, нам знадобиться знання Web - мов PHP, Jscript, Perl, jQueryі хоча б мову структурних запитів MySQL. Нічого страшного, лише якісь пару років і ви профі, здатні робити такі багатофункціональні сайти, у яких сторінки генеруються на льоту, в яких присутні бази даних кліетів форумів, логіни, паролі, ідентифікація, аутентифікація, підключення анімації та багато іншого.

  Але не обов'язково мати знання всіх мов, щоб зробити динамічний багатофункціональний сайт. Мені вистачило знання HTML, SCC, PHP, 3Ds Max, Photoshop та SMC Joomla.

  Joomla - система керування вмістом, написана на мовах PHP і JavaScript, що використовує як сховище базу даних MySQL. Є вільним програмним забезпеченням, яке розповсюджується під ліцензією GNU GPL.

  Основні можливості:

  1. Функціональність можна розширювати за допомогою додаткових модулів (розширень, плагінів).

  2. Модуль безпеки для багаторівневої автентифікації користувачів та адміністраторів.

  3. Система шаблонів дозволяє легко змінювати вигляд сайту.

  4. Настроювані схеми розташування модулів, включаючи лівий, правий та центральний блоки меню.

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

  Можна працювати з Joomla на сервері хостера в інтернеті (додаткові витрати, а також залежить багато від швидкості інтернету). Я волію працювати на локальному сервері. Для цього вибрала Apache/2.2.4 (Win32) mod_ssl/2.2.4 OpenSSL/0.9.8d PHP/5.2.4 Server at 127.0.0.1 Port 80.

  Отже, встановили локальний сервер. У директорії localhost/home/www/ створюємо папку, в яку вміщуємо саму Joomla. Хочу зауважити, що під PHP5.3.1 Joomla працює неправильно. Постійно компоненти форумів FireBoard та Kunena видає помилки на сайті, доводиться редагувати файл php. ini і відключати висновок про помилки, що сама дія обіцяє непередбачені обставини для сайту. Тому рекомендую вибирати версію PHP 5.2.4, робота стабільна для всіх плагінів, модулів і компонентів. Після встановлення Joomla через браузер створюємо в MySQL користувача-адміна і під його логіном та паролем заходимо на адмін панель. Далі потрібно вибрати шаблон для веб-сайту. З першого погляду здасться, що це дуже легко, але крапнувши глибше переконуєшся, що 80% часу йде для модернізації цього шаблону. Тому рекомендую вибирати максимально підходящий шаблон під потреби, не забуваючи про модулі, що виводяться. Далі підключаємо весь функціонал сайту: реєстрацію, форум, слайд-шоу, банери, файли для скачок, відео on line, аудіо, редагуємо всі сторінки, що виводяться. Працюємо в основному із файлом Index. php та template. css і звичайно конфігуруємо під себе всі підключені розширення яких близько 6000 для Joomla. Далі залишається найприємніше – це дизайн сайту. За допомогою растрової програми Photoshop і 3Ds Max (повнофункціональна професійна програмна система для створення та редагування тривимірної графіки та анімації, розроблена компанією Autodesk, містить найсучасніші засоби для художників та фахівців у галузі мультимедіа) створюємо дизайн шаблону. Редагуємо header, робимо необхідний вигляд.

  Висновок

  У зв'язку зі швидким розвитком Web-програмування та створення множинних CMS, було полегшено роботу Web-дизайнера. Тепер для створення багатофункціонального потужного динамічного web порталу достатньо освоїти кілька мов програмування (якщо дописуватимемо розширення та скрипти), вміло володіти графічними та растровими програмами, трохи натхнення, інновацій та майстерності.

  Література

  1. Которєв Д. В, Костарєв А.Ф. "PHP 5 або найбільш повний посібник у оригіналі." Петербугр 2005

  2. А. Гончаров "Самовчитель HTML".

  3. А. Матросов, А. Сергєєв, М. Чаунін "HTML 4.0 у оригіналі"

  4. Айзекс С. "Dynamic HTML"

  5. Байєнс Дж. "Примочки програмування в WEB"

  6. Бурсов М.В. та ін. "Основи роботи з HTML-редактором Dreamweaver. Навчально-методичний посібник"

  7. Веліхов В. "Довідник з HTML 4.0"

  Ми випустили нову книгу «Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників та закохати їх у свій бренд».

  Підписатися

  

  НTML – це мова гіпертекстової розмітки.

  Мова використовується для організації веб-сторінок. Проведемо аналогію. Ви купуєте газету. У ній надруковано кілька статей. Кожна стаття має назву, в ній є фотографії. А текст набирається кількома шпальтами. Це – структура газетної сторінки.

  На сайті все відбувається так само. Щоб зробити правильну структуру статті – контенту – потрібно використовувати мову розмітки тексту.

  Для чого потрібний HTML

  Мова HTML потрібна, щоб повідомити браузеру, як потрібно відобразити сторінку на екрані.

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

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

  Що таке HTML-код

  Код – це команди браузеру, як слід відобразити сторінку. Є структура, яка має дотримуватися завжди. Наприклад, наявність тільки одного заголовка H1 на сторінці, основна інформація міститься в розділі і т.д.

  

  У мові є три інструменти.

  • Тег – це команда. Вона вказує безпосередньо на дію. Наприклад,
    • 
      - Перенести текст на новий рядок.

    • Розпочати новий абзац.

    • - помістити текст на початок сторінки.
  • Атрибути тега – це доповнення до команд. Вони дозволяють налаштувати ту дію, яка закладена у тезі. Наприклад,
    • - Тут тег вказує те що, що у текст вставляється посилання, а атрибут href - вказує адресу линка.
  • Значення атрибута - пояснює, як саме потрібно змінити властивість.
    • - Повертаючись до цього прикладу, сайт - це значення атрибута.

  

  Теги бувають двох видів - парні та одиночні.

  • - парний тег, що відкриває та закриває. Вони діють текст, поміщений з-поміж них.

  • Одиночний тег, він діє текст, що стоїть після нього до наступного тега.

  Структура HTML-коду на сторінці

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

  1. !- Вказує, що у документі використовується HTML.
  2. ...- у цей тег міститься весь код сторінки. Все, що в ньому не вміщено, не розпізнається браузером і не відображається.
  3. ...- парний тег, в нього міститься технічна інформація, наприклад, про кодування документа.
     1. - це заголовок сторінки, він міститься всередині розділу head. Будь-яка сторінка повинна мати свою унікальну назву.
     2. - Це службова інформація. Вона підключає до сторінки окремі стилі - css і т.д. Не відображається користувачеві.
  4. ...
     
     - Тіло сторінки. Вся основна інформація полягає у цьому тегу.
     1. ...- гіперпосилання.
     2. - Зображення.
     3. ...- Жирний текст.
     4. ...- Курсив.

  Елементів всередині body може бути необмежену кількість.

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

  

  Що частіше використовувати теги, то швидше вони запам'ятовуються. Завжди можна знайти довідник із усіма тегами, атрибутами та їх значеннями.

  Технологія 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 спеціальний зміст:< (меньше), >(більше), & (амперсенд) і " (подвійна лапка). Якщо необхідно включити до тексту якийсь із цих символів, то слід закодувати його особливою послідовністю символів.