Створення Web сайту на мові html

1.2 Створення web сайту

1.3 Основні положення

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

1.5 Теги тіла документа

1.6 Список базових тегів html

2. Додаткові відомості

2.1 Теги списків

2.2 Гіпертекстові посилання

2.3 Графіка всередині документа

2.4 Додавання стилів до документа

2.5 Спеціальні теги html

2.6 Html форми

2.7 Html фрейми

2.8 Html таблиці

2.9 Оптимізація графіки для web

2.10 Основи css

3. Опис створення сайту

3.1 Підготовка

3.2 Створення головної сторінки

3.3 Створення другої сторінки

3.4 Створення сторінки з описом міста

3.5 Сторінка з фотографіями

3.6 Сторінка з програмами

3.7 Сторінка з подяками

Висновок

Список використаної літератури

Введення

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

До дипломної роботі прикріплений сайт, як приклад того, що можна створити за допомогою мови HTML.

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

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

1. Основні відомості

1.1 Про мову HTML

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

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

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

HTML-теги можуть бути умовно розділені на дві категорії:

1. Теги, що визначають, як буде відображатися WEB-броузером тіло документа в цілому.

2. Теги, що описують загальні властивості документа, такі як заголовок чи автор документа.

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

2. Створення Web сайту

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

Наприклад, HTML редактори, такі, як "Netscape Navigator Gold" компанії Netscape, дозволяють створювати документи графічно з використанням технології WYSIWYG (What You See Is What You Get). З іншого боку, більшість традиційних засобів для створення документів мають конвертери, що дозволяють перетворювати документи до формату HTML.

1.3 Основні положення

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

<TITLE> Заголовок документа </ TITLE>

Завершальний тег виглядає також, як стартовий, і відрізняється від нього прямим слешем перед текстом всередині кутових дужок. У даному прикладі тег <TITLE> говорить WEB-броузеру про використання формату заголовка, а тег </ TITLE> - про завершення тексту заголовка.

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

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

<title> Заголовок документа </ title>

Увага! Додаткові пробіли, символи табуляції і повернення каретки, додані у вихідний текст HTML-документа для його кращої читаності, будуть проігноровані WEB-броузером при інтерпретації документа. HTML-документ може включати вищеописані елементи, тільки якщо вони поміщені усередину тегів <PRE> і </ PRE>. Більш докладно про теги <PRE> буде написано нижче.

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

Коли WEB-броузер отримує документ, він визначає, як документ повинен бути інтерпретований. Найперший тег, який зустрічається в документі, повинен бути тегом <HTML>. Даний тег повідомляє WEB-броузеру, що ваш документ написаний з використанням HTML. Мінімальний HTML-документ буде виглядати так:

<HTML>

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

</ HTML>

Заголовна частина документа <HEAD>. Тег заголовної частини документа повинен бути використаний відразу після тега <HTML> і більше ніде в тілі документа. Даний тег є загальний опис документа. Уникайте розміщувати будь-який текст всередині тега <HEAD>. Стартовий тег <HEAD> покласти прямо перед тегом <TITLE> та іншими тегами, описують документ, а завершальний тег </ HEAD> розміщується відразу після закінчення опису документа. Наприклад:

<HTML>

<HEAD>

<TITLE> Список співробітників </ TITLE>

</ HEAD>

...

Увага! Технічно, стартові і завершальні теги типу <HTML>, <HEAD> і <BODY> необов'язкові. Але настійно рекомендується їх використовувати, оскільки використання даних тегів дозволяє WEB-броузеру впевнено розділити заголовну частину документа і безпосередньо смислову частину.

Заголовок документа <TITLE>. Більшість WEB-броузерів відображають вміст тега <TITLE> в заголовку вікна, що містить документ і у файлі закладок, якщо він підтримується WEB-броузером. Тема, обмежений тегами <TITLE> і </ TITLE>, розміщується всередині <HEAD>-тегів, як показано вище на прикладі. Заголовок документа не з'являється при відображенні самого документа у вікні.

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

<! - Це коментар ->

Коментарі можуть зустрічатися в документі де завгодно і в будь-якій кількості.

1.5 Теги тіла документа

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

Тіло документа <BODY>. Тіло документа має перебувати між тегами <BODY> і </ BODY>. Це та частина документа, яка відображається як текстова та графічна (смислова) інформація вашого документа.

Рівні заголовків <Hx>. Коли пишеться HTML-документ, текст структурно поділяється на просто текст, заголовки частин тексту, заголовки більш високого рівня і т.д. Перший рівень заголовків (найбільший) позначається цифрою 1, наступний - 2, і т.д. Більшість броузерів підтримує інтерпретацію шести рівнів заголовків, визначаючи кожному з них власний стиль. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером. Тема самого верхнього рівня має ознака "1". Синтаксис заголовка рівня 1 наступний:

<H1>

Заголовок першого рівня

</ H1>

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

<Hx>

Тема x-го рівня

</ Hx>,

де x - цифра від 1 до 6, що визначає рівень заголовка.

Тег абзацу <P>.

На відміну від більшості текстових процесорів, в HTML-документі зазвичай ігноруються символи повернення каретки. Фізичний розрив абзацу може знаходитися в будь-якому місці вихідного тексту документа (для зручності його читання). Однак броузер поділяє абзаци тільки при наявності тега <P>. Якщо ви не розділіть абзаци тегом <P>, ваш документ буде виглядати як один великий абзац.

Додаткові параметри тега <P>:

<P ALIGN = left | center | right>, дозволяють вирівнювати абзац по лівому краю, центру і правому краю відповідно.

Центрування елементів документа. Ви можете центрувати всі елементи документа у вікні броузера. Для цього можна використовувати тег <CENTER>.

Всі елементи між тегами <CENTER> і </ CENTER> будуть перебувати в центрі вікна.

Тег преформатірованія <PRE>. Тег преформатірованія, <PRE>, дозволяє представляти текст зі специфічним форматуванням на екрані. Попередньо сформатована текст закінчується завершальним тегом </ PRE>. Усередині попередньо сформатована тексту дозволяється використовувати:

а) переклад рядка

б) символи табуляції (зсув на 8 символів вправо)

в) непропорційний шрифт, встановлюваний броузером.

Використання тегів, що визначають формат абзацу, таких як <Hx> або <ADDRESS>, буде ігноруватися броузером при приміщенні їх між тегами <PRE> і </ PRE>.

Далі йде кілька більш докладний приклад, зібраний з попередніх:

<HTML>

<HEAD>

<TITLE> Список співробітників </ TITLE>

</ HEAD>

<BODY>

<H2> Список співробітників нашої фірми </ H2>

<H3> Складено: 30 липня 1996 </ H3>

Даний список містить прізвища, імена та по батькові

всіх співробітників нашої компанії. <P>

Список може бути використаний тільки в службових цілях. <P>

</ BODY>

</ HTML>

Ось, що ви побачите на екрані броузера:

Список співробітників нашої фірми

Складено: 30 липня 1996

Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії.

Список може бути використаний тільки в службових цілях.

Увага! Заголовок "Список співробітників" не відображений оглядачем як частина документа. Він з'явиться в заголовку вікна броузера.

Розрив рядка <BR>. Тег <BR> сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега - форматований адресу або будь-яка інша послідовність рядків, де броузер повинен відображати їх одну під іншою. Наприклад:

Олексій Ярцев <BR> Дмитрівське шосе, <BR> д.9Б, офіс 326 <BR>

Додатковий параметр дозволяє розширити можливості тега <BR>.

<BR CLEAR=left|right|all>

Даний параметр дозволяє не просто виконати переклад рядка, а розмістити наступний рядок, починаючи з чистою лівої (left), правої (right) або обох (all) меж вікна броузера. Наприклад, якщо поряд з текстом зліва зустрічається малюнок, то можна використовувати тег <BR> для зсуву тексту нижче малюнка:

<p> Як ви можете бачити, дана схема демонструє зв'язок <BR CLEAR=left> <img src="http://www.softexpress.com/images/schema1.gif" align=baseline> Майстер / Деталь </ p> .

Нерозривний рядок <NOBR>. Якщо ви не хочете, щоб броузер автоматично переносив рядок, то ви можете позначити її тегами <NOBR> і </ NOBR>. У цьому випадку броузер не переноситиме рядок навіть якщо вона виходить за нраніци екрану; замість цього броузер дозволить горизонтально прокручувати вікно. Наприклад: <NOBR> Цей рядок є найдовшою рядком документа, яка не допускає будь-якого розбиття, де б то не було </ NOBR>

Якщо ж ви хочете все ж дозволити розбиття цього рядка на дві, але в строго запланованому місці, то вставте тег <WBR> в це місце. Наприклад: <NOBR> Цей рядок є найдовшою рядком документа, <WBR> яка не допускає будь-якого розбиття, де б то не було </ NOBR>

Цей рядок є найдовшою рядком документа,

яка не допускає будь-якого розбиття, де б то не було.

Цитата <BLOCKQUOTE>. Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегом <BLOCKQUOTE>, відступає від лівого краю документа на 8 пробілів. Наприклад: На відкритті даної конференції глава представництва вимовив: <P> <BLOCKQUOTE> Сьогодні один з найбільших днів для нашої компанії. <BR> Ми відкрили нову технологію, що дозволяє нашим клієнтам підвищити продуктивність їх настільних систем у декілька разів. </ BLOCKQUOTE>

При відображенні броузером даний текст буде виглядати так:

На відкритті даної конференції глава представництва вимовив:

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

1.6 Список базових тегів HTML

Таблиця № 1: Основні теги

Стартовий	Завершальний	Опис
<HTML>	</ HTML>	Позначення HTML-документа
<HEAD>	</ HEAD>	Заголовна частина документа
<TITLE>	</ TITLE>	Заголовок документа
<BODY>	</ BODY>	Тіло документа
<H1>	</ H1>	Тема абзацу першого рівня
<H2>	</ H2>	Тема абзацу другого рівня
<H3>	</ H3>	Тема абзацу третього рівня
<H4>	</ H4>	Тема абзацу четвертого рівня
<H5>	</ H5>	Тема абзацу п'ятого рівня
<H6>	</ H6>	Тема абзацу шостого рівня
<P>	</ P>	Абзац
<PRE>	</ PRE>	Форматований текст
<BR>		Переклад рядки без кінця абзацу
<BLOCKQUOTE>	</ BLOCKQUOTE>	Цитата

Описані раніше теги - це все, що необхідне вам для того, щоб почати працювати з HTML.

З використанням описаних тегів ви можете створити простий HTML-документ. Однак наступні розділи дозволять вам істотно поліпшити зовнішній вигляд ваших документів і опишуть нові можливості HTML.

2. Додаткові відомості

2.1 Теги списків

Існує три основних види списків в HTML-документі:

а) пронумерований

б) непронумеровані

в) список описів

Ви можете створювати вкладені списки, використовуючи різні теги списків або повторюючи одні всередині інших. Для цього просто необхідно розмістити одну пару тегів (стартовий і завершальний) усередині іншої. Чи будуть елементи вкладеного списку мати ті ж маркери, які позначають елемент списку - залежить від броузера. Більш докладно дивися в розділі "Вкладені списки".

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

Пронумерований список починається стартовим тегом <OL> і завершується тегом </ OL>. Кожен елемент списку починається з тега <LI>. Наприклад:

<OL> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ OL>

1. Програмування

2. Алгоритмізація

3. Проектування

Тег <OL> може мати параметри:

<OL TYPE=A|a|I|i|1 START=n>

де:

TYPE

Вид лічильника:

A - великі латинські літери (A, B, C. ..)

a - маленькі латинські літери (a, b, c. ..)

I - великі римські цифри (I, II, III ...)

i - маленькі римські цифри (i, ii, iii ...)

1 - звичайні цифри (1,2,3 ...)

START = n

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

Наприклад:

<OL TYPE=I START=15> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ OL>

XV. Програмування

XVI. Алгоритмізація

XVII. Проектування.

Непронумеровані списки. Для непронумеровані списків броузер зазвичай використовує маркери для позначення елемента списку. Вид маркера, як правило, налаштовує користувач броузера.

Пронумерований список починається стартовим тегом <UL> і завершується тегом </ UL>. Кожен елемент списку починається з тега <LI>. Наприклад:

<UL> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ UL>

• Програмування

• Алгоритмізація

• Проектування

Тег <UL> може мати параметр:

<UL TYPE=disc|circle|square>

Тип тега <UL> визначає зовнішній вигляд маркера як вид за замовчуванням (disc), круглий (circle) або квадратний (square). Наприклад:

<UL TYPE=square> <LI> Програмування <LI> Алгоритмізація <LI> Проектування </ UL>

• Програмування

• Алгоритмізація

• Проектування

Вкладені списки. Дамо приклад вкладених списків:

<HTML> <HEAD> <TITLE> Список співробітників </ TITLE> </ HEAD> <BODY> <H2> Список співробітників нашої фірми </ H2> <H3> Складено: 30 липня 1996 </ H3> Цей список містить прізвища , імена та по батькові всіх співробітників нашої компанії. <P> Список може бути використаний тільки в службових цілях. <P> <OL> <LI> Дирекція <UL> <LI> Іванов І.І. <LI> Петров К.В. </ UL> <LI> Відділ маркетингу <UL> <LI> Варшавська Є.Л. <LI> Самсонов Д.М. </ UL> </ OL> </ BODY> </ HTML>

Ось, що ви побачите на екрані броузера:

Список співробітників нашої фірми

Складено: 30 липня 1996

Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії.

Список може бути використаний тільки в службових цілях.

1. Дирекція

• Іванов І.І.

• Петров К.В.

2. Відділ маркетингу

• Варшавська Є.Л.

• Самсонов Д.М.

Елемент списку <Li>.

Тег <LI> може мати параметри:

<OL TYPE=disc|circle|squade> або <OL TYPE=A|a|I|i|1 VALUE=n>

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

TYPE

Вид маркера (див. <UL>) або лічильника (см.OL)

VALUE = n

Значення для елемента пронумерованого списку (його номер). Всі подальші номери елементів списку будуть відраховуватися від цього номера.

Наприклад:

<OL TYPE=I START=15> <LI> Програмування <LI TYPE=i VALUE=25> Алгоритмізація <LI> Проектування </ OL>

XV. Програмування

XVI. Алгоритмізація

17. Проектування

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

Список визначень починається з тега <DL> і завершується тегом </ DL>. Даний список служить для створення списків типу "термін" - "опис". Кожен термін починається тегом <DT>, а опис - тегом <DD>. Наприклад:

<DL> <DT> <B> Відділ маркетингу </ B> <DD> Даний відділ займається просуванням продуктів і послуг <DT> <B> Фінансовий відділ </ B> <DD> Даний відділ займається всіма фінансовими операціями <DT> < B> Відділ кадрів </ B> <DD> Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстежуванням лікарняних листів і т.д. </ DL>

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

Даний відділ займається просуванням продуктів і послуг

Фінансовий відділ

Даний відділ займається всіма фінансовими операціями

Відділ кадрів

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

2. Гіпертекстові посилання

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

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

Увага! Ви можете використовувати посилання як для переміщення по документу, так і для переміщення від одного документа до іншого. Проте HTML не підтримує повернення на попереднє посилання, якщо переміщення відбувалося всередині документа. Якщо ви використовуєте посилання всередині документа, а потім натискаєте на клавішу Back, то ви не перейдете на попереднє посилання, а повернетеся на ту частину документа, яку ви переглядали до цього.

URL. HTML використовує URL (Uniform Resource Locator) для подання гіпертекстових посилань і посилань на мережеві сервіси усередині HTML-документа. Перша частина URL (до двокрапки) описує метод доступу або мережевий сервіс. Інша частина URL (після двокрапки) інтерпретується в залежності від методу доступу. Зазвичай, два прямих слеша після двокрапки позначають ім'я машини:

method: / / machine - name / path / foo. html

Наступний приклад є виклик HTML-документа index.html з сервера www.softexpress.com з використанням HTTP протоколу:

http://www.softexpress.com/index.html

Uniform Resource Locator має наступний формат:

method: / / servername: port / pathname # anchor

Опишемо кожен з компонентів URL:

METHOD. Ім'я операції, яка буде виконуватися при інтерпретації даного URL. Найбільш часто використовувані методи:

file:

читання файлу з локального диска. Ім'я файлу інтерпретується для локальної машини користувача. Даний метод використовується для відображення будь-якого файлу, що знаходиться на машині користувача. Наприклад: file: / home / alex / index.html - відображає файл index.html з каталогу / home / alex на користувальницькій машині

http:

доступ до WEB-сторінці в мережі з використанням HTTP-протоколу. (Це найбільш часто використовуваний метод доступу до якого-небудь HTML-документу в мережі). Наприклад: http://www.softexpress.com/ - доступ до Home-сторінці компанії SoftExpress

ftp:

запит файлу з анонімного FTP-сервера. Наприклад: ftp://hostname/directory/filename

mailto:

активізує поштову сесію з вказаним користувачем і хостом. Наприклад: mailto: info@softexpress.com - активізує сесію посилки повідомлення користувачеві info на машині softexpress.com, якщо броузер підтримує запуск електронної пошти. Зауважте, що метод mailto: не потребує зазначення слешів після двокрапки (як правило, після двокрапки відразу йде електронну адресу абонента)

telnet:

звернення до служби telnet

news:

виклик служби новин, якщо броузер її підтримує. Наприклад: news: relcom.www.support

SERVERNAME. Необов'язковий параметр, що описує повне мережеве ім'я машини. Наприклад: www.softexpress.com - повне мережеве ім'я сервера фірми Софтсервіс.

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

PORT. Номер порту TCP на якому функціонує WEB-сервер. Якщо порт не вказаний, то "за замовчуванням" використовується порт 80. Даний параметр (port) не використовується в переважній більшості URL.

PATHNAME. Часткова або повний шлях до документа, який повинен викликатися в результаті інтерпретації URL. Різні WEB-сервера сконфігуровані по різному для інтерпретації шляхи доступу до документа. Наприклад, при використанні CGI скриптів (виконуваних програм), вони зазвичай збираються в одному або декількох виділених каталогах, шлях до яких записаний у спеціальних параметрах WEB-сервера. Для даних каталогів WEB-сервером виділяється спеціальний логічний шлях, який і використовується в URL. Якщо WEB-сервер бачить даний шлях, то запитуваний файл інтерпретується як виконуваний модуль. В іншому випадку, запитуваний файл інтерпретується просто як файл даних, навіть якщо він є виконуваним модулем. Наприклад: http://www.softexpress.com/cgi-win/handle.exe

У даному прикладі HTTP-сервер повинен викликати CGI-скрипт з ім'ям handle.exe, який знаходиться на машині з мережевим ім'ям www.softexpress.com. Шлях до даного скрипту - / cgi-win / - насправді є віртуальним шляхом (виділеним сервером для виконуваних модулів). Зауважте, що при описі шляху використовується UNIX-подібний синтаксис, де, на відміну від DOS і Windows використовуються прямі слеші замість зворотних. Якщо після мережевого імені машини відразу йде ім'я документа, то він повинен знаходитися в кореневому каталозі на віддаленій машині або (що частіше) в каталозі, виділеному WEB-сервером в якості кореневого. Якщо ж URL закінчується мережевим ім'ям машини, то в якості документа запитується документ з кореневого каталогу віддаленої машини з ім'ям, встановленим у налаштуваннях WEB-сервера (як правило, це index.html).

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

Структура посилань в HTML-документі. Поки що ми розглянули тільки зовнішній вигляд URL. Для того, щоб броузер відобразив посилання на URL, необхідно відзначити URL спеціальними тегами в HTML-документі. Синтаксис HTML, що дозволяє це зробити - наступний:

<A HREF="URL"> текст-який-буде-підсвічений-як-посилання </ A>

Тег <A HREF="URL"> відкриває опис посилання, а тег </ A> - закриває його. Будь-який текст, що знаходиться між даними двома тегами підсвічується спеціальним чином Web-броузером. Зазвичай цей текст відображається підкресленим та виділений синім (або іншим заданим користувачем) кольором. Текст, що позначає URL, не відображається броузером, а використовується тільки для виконання запропонованих ним дій при активізації посилання (зазвичай при клацанні миші на підсвіченому або підкресленому тексті). Ось приклад сегмента HTML-документа:

Для отримання прикладу дивись <A HREF="http:/www.ruswebmasters.com/index.htm> сторінку </ A>

Цей рядок буде виглядати на екрані таким чином:

Для отримання прикладу дивись сторінку

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

Для створення такого посилання необхідно виконати наступні кроки:

1. Створіть маркер розділу. Синтаксис даного маркера наступний:

<A NAME="named_anchor"> Текст-який-відобразиться-в-першої-рядку-броузера </ A>

2. Створіть посилання на даний маркер:

<A HREF="#named_anchor"> Текст </ A>

Наприклад:

<p> <b> Список розділів </ b> </ p> <ul> <li> <a href="#ex1"> Розділ 1 </ a> </ li> <li> <a href="#ex2"> Розділ 2 </ a> </ li> </ ul> <p> <a name="ex1"> </ a> Розділ 1 </ p> <ul> <p> Текст розділу 1 </ p> </ ul> <p> <a name="ex2"> </ a> Розділ 2 </ p> <ul> <p> Текст розділу 2 <br> </ p>

Список розділів

• Розділ 1

• Розділ 2

Розділ 1

Текст розділу 1

Розділ 2

Текст розділу 2

Символи "# ex1" повідомляє вашому броузеру, що необхідно знайти в даному HTML-документі маркер з ім'ям "ex1".

Коли користувач клацне мишею на рядку "Розділ 1", броузер перейде одразу до розділу 1.

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

2. Графіка всередині документа

Одна з найбільш привабливих рис Web - можливість включення посилань на графічні й інші типи даних в HTML-документ. Робиться це за допомогою тега <IMG...ISMAP>. Використання даного тега дозволяє значно поліпшити зовнішній вигляд і функціональність документів.

Існує два способи використання графіки в HTML-документах. Перший - це впровадження графічних образів в документ, що дозволяє користувачеві бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш використовувана техніка при проектуванні документів, звана іноді "inline image". Синтаксис тега:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Опишемо елементи синтаксису тега:

URL:

Обов'язковий параметр, що має такий же синтаксис, як і стандартний URL. Даний URL указує броузеру де знаходиться малюнок. Малюнок повинен зберігатися в графічному форматі, що підтримується броузером. На сьогоднішній день формати GIF і JPG підтримуються більшістю браузерів.

ALT = "text":

Даний необов'язковий елемент задає текст, який буде відображений оглядачем, що не підтримують відображення графіки або з відключеною підкачкою зображень. Зазвичай, це короткий опис зображення, яке користувач міг би або зможе побачити на екрані. Якщо цей параметр відсутній, то на місці малюнка більшість броузерів виводить піктограму (іконку), активізувавши яку, користувач може побачити зображення. Тег ALT рекомендується, якщо ваші користувачі використовують броузер, який не підтримує графічний режим, наприклад Lynx.

HEIGTH = n1:

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

WIDTH = n2:

Параметр також необов'язковий, як і попередній. Дозволяє задати абсолютну ширину малюнка в пікселях.

ALIGN:

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

ISMAP:

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

Наведемо приклад використання даного тега:

<IMG SRC="http://www.softexpress.com/images/nekton.jpg" ALT="СофтСервіс лого" ALIGN="top" ISMAP>

З версії HTML 2.0 у тега <IMG> з'явилися додаткові параметри:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Нові параметри:

BORDER:

Цей параметр дозволяє автору визначити ширину рамки навколо малюнка.

VSPACE:

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

HSPACE:

Те ж саме, що і VSPACE, але тільки по горизонталі.

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

Опис фонового малюнка включається в тег BODY і виглядає наступним чином:

<BODY BACKGROUND = "picture. Gif">.

Завдання стандартних кольорів. Багато HTML-автори люблять використовувати заздалегідь визначені кольору фону документа, звичайного тексту і посилань. Щоб задати ці кольори, необхідно включити в тег <BODY> додаткові параметри:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

де кожен з параметрів визначає колір того чи іншого елемента. Опишемо ці параметри:

BGCOLOR:

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

TEXT:

Колір простого тексту документа

LINK:

Колір посилання. Колір задається шестизначним числом в шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Колір # 000000 відповідає чорному, а колір # FFFFFF - білому. Наприклад:

<BODY BGCOLOR = "# 000000" TEXT = "# FFFFFF" LINK = "# 9690 CC">

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

Горизонтальна лінія. Використовуючи тег <HR>, ви можете розділити текст горизонтальною рискою.

Формат тега:

<HR SIZE=number WIDTH= number|percent ALIGN=left|right|center NOSHADE>

Параметри тега:

SIZE:

Товщина лінії в пікселях.

WIDTH:

Ширина лінії в пікселях або відсотках від ширини вікна броузера.

ALIGN:

Розташування на екрані (ліворуч | у центрі | праворуч).

NOSHADE:

За замовчуванням лінія представлена ​​в 3D вигляді з тінню. NOSHADE дозволяє представити лінію просто однотонною темною смужкою.

2. Додавання стилів до документа

HTML дозволяє використовувати різні стилі шрифтів для виділення текстової інформації у ваших документах. Ось короткий список стилів, підтримуваних більшістю броузерів:

bold (жирний)

italic (похилий)

mono spaced (type writer - з використанням фіксованих шрифтів)

Ви можете комбінувати різні види стилів, наприклад жирний і курсив.

Таблиця № 2: Основні стилі тексту

Стиль	Елемент або тег	Результат
Bold	<B> Цей текст жирний </ B>	Цей текст жирний
Italic	<I> Цей текст похилий </ I>	Цей текст похилий
Mono spaced	<TT> Цей текст з непроп. шрифтом </ TT>	Цей текст з непроп. шрифтом

Комбінування стилів дозволяє вам відображати в одному рядку кілька елементів різними стилями, наприклад:

<b> Життя </ b> - <i> це <b> пісня! </ b> </ i>

Життя - це пісня!

Увага! Додавання великої кількості стилів і їх комбінацій призводить до утруднення читання тексту!

Додаткові стилі:

• big (великий)

• small (маленький)

• sub (підрядник)

• sup (надстрочнік)

• Таблиця № 3: Додаткові стилі тексту

Стиль	Елемент або тег	Результат
Big	Цей текст <BIG> великий </ BIG>	Цей текст великий
Small	Цей текст <SMALL> маленький </ SMALL>	Цей текст маленький
Sub	Цей текст <SUB> підрядник </ SUB>	Цей текст підрядник
Sup	Цей текст <SUP> надстрочнік </ SUP>	Цей текст надстрочнік

Розмір шрифту <FONT SIZE>. Ви можете змінювати розмір шрифту за допомогою тега:

<FONT SIZE = + | - n>

Шрифт може мати розмір від 1 до 7. Ви можете прямо вказати розмір шрифту цифрою, або вказати зміщення відносно базового значення (за замовчуванням - 3) в позитивну або негативну сторону. Базове значення можна змінити за допомогою тега:

<BASEFONT SIZE = n>

Наприклад:

<p> і <font SIZE=+1> з </ font> <font SIZE=+2> м </ font> <font SIZE=+3> е </ font> <font SIZE=+4> н </ font> <font SIZE=+3> е </ font> <font SIZE=+2> н </ font> <font SIZE=+1> і </ font> е </ p>

зміна

Колір шрифту <FONT SIZE>. Ви можете змінити колір шрифту за допомогою тега:

<FONT COLOR = "# xxxxxx>

Колір вказується в RGB-форматі (Red-Green-Blue) за допомогою зазначення розмірності кожної компоненти кольору в шістнадцятковому форматі. Наприклад, білий колір позначається "000000", чорний - "FFFFFF", синій - "0000FF" і т.п.

<FONT COLOR="#FF0000"> Червоний </ FONT> <FONT COLOR="#00FF00"> Зелений </ FONT> <FONT COLOR="#0000FF"> Синій </ FONT>

Червоний Зелений Синій

2.5 Спеціальні теги HTML

Наступні теги дозволять вам зробити ваш HTML-документ більш функціональним.

Тег адреси <ADDRESS>. Тег <ADDRESS> використовується для виділення автора документа і його дрес (наприклад, e-mail). Синтаксис:

<ADDRESS> Адреса-автора </ ADDRESS>

Escape-послідовності. Деякі символи є керуючими символами в HTML і не можуть безпосередньо використовуватися в документі:

1. ліва кутова дужка "<"

2. права кутова дужка ">"

3. амперсанд "&"

4. подвійні лапки "" "

Щоб використовувати дані символи в документі, необхідно замінити їх escape-послідовностями:

Таблиця № 4: Escape-послідовності

<	<
>	>
&	&
"	"

Існує велика кількість escape-послідовностей для позначення спеціальних символів, наприклад "©" для позначення знака © і ® для значка ®, що з'явилися в HTML 2.0. Однією з особливостей є заміна символів у 2-ої частини символьної таблиці (після сто двадцять сьомого символу) на escape-послідовності для передачі текстових файлів з ​​національними мовами за 7-бітним каналах.

Увага! Escape-послідовності чутливі до регістру: НЕ МОЖНА використовувати <замість <.

6. HTML Форми

Деякі WWW броузери дозволяють користувачеві, заповнивши спеціальну форму, що повертає отримане значення, виконувати деякі дії на вашому WWW-сервері. Коли форма інтерпретується WEB-броузером, створюється спеціальні екранні елементи GUI, такі, як поля введення, checkboxes, radiobuttons, що випадають меню, прокручувати списки, кнопки і т.д. Коли користувач заповнює форму і натискає кнопку "Підтвердження" (SUBMIT - спеціальний тип кнопки, який задається при описі документа), інформація, введена користувачем у форму, надсилається HTTP-сервера для обробки та передачі іншим програмам, що працюють під сервером, відповідно до CGI (Common Gateway Interface) інтерфейсом.

Коли ви описуєте форму, кожен елемент введення даних має тег <INPUT>. Коли користувач поміщає дані в елемент форми, інфоромація розміщується в розділі VALUE цього елемента.

Синтаксис. Всі форми починаються тегом <FORM> і завершуються тегом </ FORM>.

<FORM METHOD="get|post" ACTION="URL"> Элементы_формы_и_другие_элементы_HTML. </ FORM>

METHOD. Метод посилки повідомлення з даними з форми. Залежно від використовуваного методу ви можете надсилати результати введення даних у форму двома шляхами:

GET: Інформація з форми додається в кінець URL, який був зазначений в описі заголовка форми. Ваша CGI-програма (CGI-скрипт) отримує дані з форми у вигляді параметра змінної середовища QUERY_STRING. Використання методу GET не рекомендується.

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

ACTION: ACTION описує URL, який буде викликатися для обробки форми. Даний URL майже завжди вказує на CGI-програму, обробну дану форму.

Теги форми:

TEXTAREA:

Тег <TEXTAREA> використовується для того, щоб дозволити користувачеві вводити більше одного рядка інформації (вільний текст). Ось приклад использовани тега <TEXTAREA>:

<TEXTAREA NAME="address" ROWS=10 COLS=50>

Москва,

Дмитрівці шосе,

д.9Б, офіс 448

</ TEXTAREA>

Атрибути, які використовуються всередині тега <TEXTAREA> описують зовнішній вигляд і ім'я значення, що вводиться. Тег </ TEXTAREA> необхідний навіть тоді, коли поле введення спочатку пусте. Опис атрибутів:

NAME - ім'я поля введення

ROWS - висота поля введення в символах

COLS - ширина поля введення в символах

Якщо ви хочете, щоб у полі вводу за замовчуванням видавався який-небудь текст, то необхідно вставити його всередині тегів <TEXTAREA> і </ TEXTAREA>.

INPUT:

Тег <INPUT> використовується для введення одного рядка тексту або одного слова. Атрибути тега:

CHECKED - означає, що CHECKBOX або RADIOBUTTON буде обраний.

MAXLENGTH - визначає кількість символів, який користувачі можуть ввести в полі вводу. При перевищенні кількості допустимих символів броузер реагує на спробу введення нового символу звуковим сигналом і не дає його ввести. Не плутати з атрибутом SIZE. Якщо MAXLENGTH більше ніж SIZE, то в полі здійснюється скролінг. За замовчуванням значення MAXLENGTH одно нескінченності.

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

SIZE - визначає візуальний розмір поля вводу на екрані в символах.

SRC - URL,. вказує на картинку (використовується спільно з атрибутом IMAGE).

TYPE - визначає тип поля вводу. За умовчанням це просте поле введення для одного рядка тексту. Решта типів повинні бути явно зазначені:

CHECKBOX: Використовується для простих логічних (BOOLEAN) значень. Значення, асоційоване з ім'ям даного поля, яке буде передаватися в спричинюється CGI-програму, може приймати значення ON або OFF.

HIDDEN: Поля даного типу не відображаються браузером і не дають користувачеві змінювати присвоєні даному полю за умовчанням значення. Це поле використовується для передачі в CGI-програму статичної інформації, наприклад, ID користувача, пароля або іншої інформації.

IMAGE:

Даний тип поля введення дозволяє вам пов'язувати графічний малюнок з ім'ям поля. При натисканні мишею на будь-яку частину малюнка буде негайно викликана асоційована формі CGI-програма. Значення, присвоєні змінної NAME будуть виглядати так - створюється дві нових змінних: перша має ім'я, визначене в полі NAME з додаванням. X в кінці імені. У цю змінну буде поміщена X-координата точки в пікселях (вважаючи початком координат лівий верхній кут малюнка), на яку вказував курсор миші в момент натискання, а змінна з ім'ям, що містяться в NAME і доданим. Y, буде містити Y-координату. Всі значення атрибуту VALUE ігноруються. Сам опис картинки здійснюється через атрибут SRC і з синтаксису збігається з тегом <IMG>.

PASSWORD:

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

RADIO:

Даний атрибут дозволяє вводити одне значення з кількох альтернатив. Для створення набору альтернатив вам необхідно створити кілька полів введення з атрибутом TYPE = "RADIO" з різними значеннями атрибута VALUE, але з однаковими значеннями атрибута NAME. У CGI-програму буде передано значення типу NAME = VALUE, причому VALUE прийме значення атрибуту VALUE того поля введення, яке в даний момент буде вибрано (буде активним). При виборі одного з полів введення типу RADIO всі інші поля даного типу з тим же ім'ям (атрибут NAME) автоматично стануть невибраними на екрані.

RESET:

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

SUBMIT:

Даний тип позначає кнопку, при натисканні якої буде викликана CGI-програма (або URL), описана в заголовку форми. Атрибут VALUE може містити рядок, яка буде висвітлений на кнопці.

TEXT:

Даний тип поля введення описує однорядкове поле введення. Використовуйте атрибути MAXLENGTH і SIZE для визначення максимальної довжини значення, що вводиться в символах і розміру відображуваного поля вводу на екрані (за замовчуванням приймається 20 символів).

VALUE - привласнює полю значення за замовчуванням або значення, яке буде вибране при використанні типу RADIO (для типу RADIO даний атрибут обов'язковий).

Меню вибору у формах. Під меню вибору у формах розуміють такий елемент інтерфейсу, як LISTBOX. Існує три типи тегів меню вибору для форм:

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

Select single - те ж саме, що і Select, але на екрані користувач бачить одночасно три елементи вибору. Якщо їх більше, то надається автоматичний вертикальний скролінг.

Select multiple - дозволяє вибрати кілька елементів з LISTBOX.

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

Тег SELECT має одну або більше параметр між стартовим тегом <SELECT> і завершальним </ SELECT>. За замовчуванням, перший елемент відображається в рядку вибору. Ось приклад тега <SELECT>:

<FORM>

<SELECT NAME=group>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

</ SELECT>

</ FORM>

SELECT SINGLE: Тег SELECT SINGLE - це те ж саме, що і Select, але на екрані користувач бачить одночасно кілька елементів вибору (три за замовчуванням). Якщо їх більше, то надається автоматичний вертикальний скролінг. Кількість одночасно відображуваних елементів визначається атрибутом SIZE. Приклад:

<FORM>

<SELECT SINGLE NAME=group SIZE=4>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</ SELECT>

</ FORM>

SELECT MULTIPLE: Тег SELECT MULTIPLE схожий на тег SELECT SINGLE, але користувач може одночасно вибрати більш ніж один елемент списку. Атрибут SIZE визначає кількість одночасно видимих ​​на екрані елементів, атрибут MULTIPLE - максимальна кількість одночасно вибраних елементів. Приклад:

<FORM>

<SELECT SINGLE NAME=group SIZE=4 MULTIPLE=2>

<OPTION> AT 386

<OPTION> AT 486

<OPTION> AT 586

<OPTIONS> Pentium PRO

</ SELECT>

</ FORM>

Якщо вибрано одночасно кілька значень, то сервера передаються відповідне обраному кількість параметрів NAME = VALUE з однаковими значеннями NAME, але різними VALUE.

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

Увага! Оскільки дана можливість вимагає підтримки отримання файлів WEB-сервером, то, відповідно, необхідно, щоб сервер підтримував отримання файлів!

Наприклад:

<FORM ENCTYPE = "multipart / form-data" ACTION = "url" METHOD = POST> Надіслати даний файл: <INPUT NAME="userfile" TYPE="file"> <P> <INPUT TYPE = "submit" VALUE = "Відправити файл "> </ FORM>.

2.7 HTML Фрейми

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

• Кожен кадр має свій URL, що дозволяє завантажувати його незалежно від інших фреймів

• Кожен фрейм має власне ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейма

• Розмір фрейму може бути змінений користувачем прямо на екрані за допомогою миші (якщо це не заборонено зазначенням спеціального параметра)

• Дані властивості фреймів дозволяють створювати просунуті інтерфейсні рішення, такі як:

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

• Приміщення в статичному фреймі змісту всіх або частини WEB-документів, що містяться на WEB-сервері, що дозволяє користувачеві швидко знаходити потрібну йому інформацію

• Створювати вікна результатів запитів, коли в одному фреймів знаходиться власне запит, а в іншому результати запиту

• Створювати форми типу "майстер-деталь" для WEB-додатків, які обслуговують бази даних.

Синтаксис фреймів. Формат документа, що використовує фрейми, зовні дуже нагадує формат звичайного документа, тільки замість тега BODY використовується контейнер FRAMESET, що містить опис внутрішніх HTML-документів, що містить власне інформацію, що розміщується у фреймах.

<HTML> <HEAD> ...</ HEAD> <FRAMESET> ...</ FRAMESET> </ HTML>

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

+ Уявімо загальний синтаксис фреймів:

<FRAMESET COLS = "value" | ROWS = "value">

<FRAME SRC="url1"> <FRAME ...> ...

</ FRAMESET>

Загальний контейнер FRAMESET описує всі фрейми, на які ділиться екран. Ви можете розділити екран на декілька вертикальних або декілька горизонтальних фреймів. Тег FRAME описує кожен фрейм окремо. Розглянемо більш детально кожен компонент.

FRAMESET. <FRAMESET [COLS="value" | ROWS="value"]>

Тег <FRAMESET> має завершальний тег </ FRAMESET>. Все, що може перебувати між цими двома тегами, це тег <FRAME>, вкладені теги <FRAMESET> і </ FRAMESET>, а також контейнер з тегів <NOFRAME> і </ NOFRAME>, який дозволяє будувати подвійні документи для броузерів, що підтримують фрейми і не підтримують фрейми.

Даний тег має два взаємовиключних параметри: ROWS і COLS.

ROWS = "список-визначень-горизонтальних-подокон"

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

Синтаксис використовуваних видів опису величин подокон:

Value:

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

value%:

Значення величини подокна у відсотках від 1 до 100. Якщо загальна сума відсотків описуваних подокон перевищує 100, то розміри всіх фреймів пропорційно зменшуються до суми 100%. Якщо, відповідно, сума менше 100, то розміри пропорційно збільшуються.

value *:

Взагалі кажучи, значення value в даному описі є необов'язковим. Символ "*" вказує на те, що все залишилося місце буде належати даному фрейму. Якщо вказується два або більше фрейму з описом "*" (наприклад "*,*"), то простір, що залишився ділиться порівну між цими фреймами. Якщо перед зірочкою стоїть цифра, то вона вказує пропорцію для даного фрейму (у скільки разів од буде більше аналогічно описаного чистою зірочкою). Наприклад, опис "3 *,*,*", говорить, що буде створено три фрейму з розмірами 3 / 5 вільного простору для першого фрейму і по 1 / 5 для двох інших.

COLS = "список-визначень-горизонтальних-подокон"

Те ж саме, що і ROWS, але ділить вікно по вертикалі, а не по горизонталі.

Увага! Спільне використання даних параметрів може привести до непередбачуваних результатів. Наприклад, рядок: <FRAMESET ROWS="50%,50%" COLS "50%,50%"> може призвести до помилкової ситуації.

Приклади: <FRAMESET COLS="50,*,50"> - описує три фрейми, два по 50 точок праворуч і ліворуч, і один всередині цих смужок.

<FRAMESET ROWS="20%,3*,*"> - описує три фрейми, перший з яких займає 20% площі зверху екрану, другий 3 / 4 залишився від першого фрейму місця (тобто 60% всієї площі вікна), а останній 1 / 4 (тобто 20% всієї площі вікна.

<FRAMESET ROWS="*,60%,*"> - аналогічно до попереднього прикладу.

Теги <FRAMESET> можуть бути вкладеними, тобто наприклад:

<FRAMESET ROWS="50%,50%">

<FRAMESET COLS ="*,*"

</ FRAMESET>

</ FRAMESET>

Результат даного прикладу ми розглянемо пізніше.

FRAME. <FRAME SRC="url" [NAME="frame_name"] [MARGINWIDTH="nw"] [MARGINHEIGHT="nh"] [SCROLLING=yes|no|auto] [NORESIZE]>

Даний тег визначає фреймів всередині контейнера FRAMESET.

SRC = "url". Описує URL документа, який буде відображений всередині даного фрейму. Якщо він відсутній, то буде відображений порожній кадр.

NAME = "frame _ name". Даний параметр описує ім'я фрейма. Ім'я фрейму може бути використане для визначення дії з даним фреймом з іншого HTML-документа або фрейму (як правило, з сусіднього фрейму цього ж документа). Ім'я обов'язково повинно починатися з символу. Вміст пойменованих фреймів може бути задіяно з інших документів за допомогою спеціального атрибута TARGET, описуваного нижче.

MARGINWIDTH = "value". Це атрибут може бути використаний, якщо автор документа хоче вказати величину розділових смуг між фреймами збоку. Значення value вказується в пікселях і не може бути менше одиниці. За замовчуванням це значення залежить від реалізації підтримки фреймів використовуваним клієнтом броузером.

MARGINHEIGHT = "value". Те ж саме, що і MARGINWIDTH, але для верхніх і нижніх величин розділових смуг.

SCROLLING = "yes | no | auto". Цей атрибут дозволяє задавати наявність смуг прокрутки у фрейму. Параметр yes вказує, що смуги прокрутки будуть у будь-якому випадку бути присутнім у фрейму, параметр no навпаки, що смуг прокручування не буде. Auto визначає наявність смуг прокручування тільки при їх необхідності (значення за замовчуванням).

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

NOFRAMES. Даний тег використовується у випадку, якщо ви створюєте документ, який може проглядатися як броузерами, що підтримують фрейми, так і броузерами, їх не підтримують. Даний тег розміщується всередині контейнера FRAMESET, а все, що знаходиться всередині тегів <NOFRAMES> і </ NOFRAMES> ігнорується браузерами, що підтримують фрейми.

Приклади. Розглянемо реалізацію фреймів для подібного розбиття вікна:

+---------------------------+

| | |

| | |

| Link1 | Link2 |

| | |

| | |

+---------------------------+

| | | |

| | | |

| Link3 | Link4 | Link5 |

| | | |

| | | |

+---------------------------+

<FRAMESET ROWS ="*,*">

<NOFRAMES>

<H1> Ваша версія WEB-броузера не підтримує фреймів! </ H1>

</ NOFRAMES>

<FRAMESET COLS="65%,35%">

<FRAME SRC="link1.html">

<FRAME SRC="link2.html">

</ FRAMESET>

<FRAMESET COLS="*,40%,*">

<FRAME SRC="link3.html">

<FRAME SRC="link4.html">

<FRAME SRC="link5.html">

</ FRAMESET>

</ FRAMESET>

Планування фреймів і взаємодії між фреймами. З появою фреймів відразу виникає питання: "А як зробити так, щоб, натиснувши на посилання в одному фреймі ініціювати появу інформації в іншому?"

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

TARGET = "windows _ name"

Даний атрибут може зустрічатися всередині різних тегів:

TARGET в тегу A:

Це саме пряме використання TARGET. Зазвичай, при активізації користувачем посилання відповідний документ з'являється в тому ж вікні (або фреймі), що й вихідний, в якому було посилання. Додавання атрибута TARGET дозволяє зробити висновок документа в інший кадр. Наприклад:

<A HREF = "mydoc. Html" TARGET = "Frame 1"> Перехід у фрейм № 1 </ A>

TARGET в тегу BASE:

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

Документ № 1.

<FRAMESET ROWS="20,*"> <FRAME SRC="doc2.htm" NAME="Frame1"> <FRAME SRC="doc3.htm" NAME="Frame2"> </ FRAMESET>

Документ № 2 (doc2.htm).

<HTML> <HEAD> <BASE TARGET="Frame2"> </ HEAD> <BODY> <A HREF="url1"> Перша частину </ A> | <A HREF="url2"> Друга частину </ A> </ BODY> </ HTML>

TARGET в тегу AREA:

Також можна включати тег TARGET в опис посилання при створенні карти зображення. Наприклад:

<AREA SHAPE="circle" COORDS="100,100,50" HREF="http://www.softexpress.com" TARGET="Frame1">

TARGET в тегу FORM:

Те ж відноситься і до визначення форми. У даному випадку, після обробки переданих параметрів форми результуючий документ з'явиться в зазначеному фреймів.

<FORM ACTION="url" TARGET="window_name">

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

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

TARGET = "_blank":

Дане значення визначає, що документ, отриманий по посиланню, буде відображатися в новому вікні броузера.

TARGET = "_self":

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

TARGET = "_parent":

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

TARGET = "_top":

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

2.8 HTML Таблиці

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

Основні теги таблиці:

Таблиця: <TABLE >...</ TABLE>:

Це основні теги, що описують таблицю. Всі елементи таблиці повинні знаходитися всередині цих двох тегів. За замовчуванням таблиця не має обрамлення і роздільників. Обрамлення додається атрибутом BORDER.

Рядок таблиці: <TR> ...</ TR>:

Кількість рядків таблиці визначається кількістю зустрічаються пар тегів <TR> .. </ TR>. Рядки можуть мати атрибути ALIGN і VALIGN, які описують візуальне положення вмісту рядків в таблиці.

Осередок таблиці: <TD> ...</ TD>:

Описує стандартну клітинку таблиці. Осередок таблиці може бути описана тільки всередині рядка таблиці. Кожна клітинка повинна бути пронумерована номером колонки, для якої вона описується. Якщо в рядку відсутня одна або декілька осередків для деяких колонок, то броузер відображає порожню комірку. Розташування даних у клітинці за замовчуванням визначається атрибутами ALIGN = left і VALIGN = middle. Дане розташування може бути виправлено як на рівні опису рядки, так і на рівні опису осередки.

Заголовок таблиці: <TH> ...</ TH>:

Осередок заголовка таблиці має ширину всієї таблиці; текст в даній комірці має атрибут BOLD і ALIGN = center.

Підпис: <CAPTION >...</ CAPTION>:

Даний тег описує назва таблиці (підпис). Тег <CAPTION> повинен бути присутнім усередині <TABLE> ...</ TABLE>, але зовні опису будь-якого рядка чи осередки. За замовчуванням <CAPTION> має атрибут ALIGN = top, але може бути явно встановлений в ALIGN = bottom. ALIGN визначає, де - зверху чи знизу таблиці - буде поставлений підпис. Підпис завжди центрована в рамках ширини таблиці.

Основні атрибути таблиці:

BORDER:

Даний атрибут використовується в тегу TABLE. Якщо цей атрибут присутній, межа таблиці промальовується для всіх осередків і для таблиці в цілому. BORDER може приймати числове значення, що визначає ширину межі, наприклад BORDER = 3.

ALIGN:

Якщо атрибут ALIGN присутній усередині тегів <CAPTION> і </ CAPTION>, то він визначає положення підписи для таблиці (зверху або знизу). За замовчуванням ALIGN = top. Якщо атрибут ALIGN зустрічається всередині <TR>, <TH> або <TD>, він керує положенням даних в осередках по горизонталі. Може приймати значення left (ліворуч), right (праворуч) або center (по центру).

VALIGN:

Даний атрибут зустрічається всередині тегів <TR>, <TH> і <TD>. Він визначає вертикальне розміщення даних в осередках. Може приймати значення top (угорі), bottom (унизу), middle (по середині) і baseline (всі комірки рядка притиснуті догори).

NOWRAP:

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

COLSPAN:

Вказує, яка кількість осередків буде об'єднано по горизонталі для вказаної комірки. За замовчуванням - 1.

ROWSPAN:

Вказує, яка кількість осередків буде об'єднано по вертикалі для вказаної комірки. За замовчуванням - 1.

COLSPEC:

Цей параметр дозволяє задавати фіксовану ширину колонок або в символах, або у відсотках, наприклад COLSPEC = "20%".

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

<TABLE BORDER=5>

<CAPTION ALIGN=bottom> Таблиця № 1 </ CAPTION>

<TR> <TD ROWSPAN=2> </ TD> <TH COLSPAN=2> Середнє

значення </ TH> </ TR>

<TR> <TH> Зростання </ TH> <TH> Вага </ TH> </ TR>

<TR> <TD> Чоловіки </ TD> <TD ALIGN=center> 174 </ TD> <TD

ALIGN = center> 78 </ TD> </ TR>

<TR> <TD> Жінки </ TD> <TD ALIGN=center> 165 </ TD> <TD

ALIGN = center> 56 </ TD> </ TR>

</ TABLE>

Таблиця 3 - Середнє значення

	Середнє значення
	Зростання	Вага
Чоловіки	174	78
Жінки	165	56
Таблиця № 1

2.9 Оптимізація графіки для Web

На даний момент в Web використається два типи растрових файлів: у форматах JPEG і GIF.

JPEG-формат добре передає колірні й тонові розкати, розмиті границі (наприклад, фото). JPEG-файл добре масштабується в броузері. Погано передає рівні площини кольору, в компресії поступається GIF-формату. При збереженні в JPEG-форматі вибирайте якість "medium".

GIF-формат добре передає рівні площини кольори, жорсткі межі (наприклад, векторну графіку, логотипи). Має максимальну компресію, допускає прозорий фон. Погано масштабується в броузері, спотворює колірні й тонові розкати. Використовуйте GIF-формат, якщо зображення без значних втрат переводиться в 128-кольорову гаму з включеною опцією "dithering". В іншому випадку краще зберігати зображення в JPEG-форматі. Для експорту файлу в GIF-формат спочатку проіндексують його колірну палітру в Adobe Photoshop:

1. Підбирайте мінімальна кількість квітів вручну (для якісної передачі антіаліасного одноколірного зображення на одноколірному тлі досить 5-8 квітів, двох-триколірного зображення - 15-25 кольорів) Якщо вихідне зображення Grayscale, перед індексацією переведіть його в RGB-гаму.

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

3. У складних випадках перед індексуванням виділіть найбільш важливі елементи зображення. Кольори всередині виділеної області індексуються коректніше інших.

2.10 Основи CSS.

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

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

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

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

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

Практичне освоєння CSS. Як вам вже відомо, інформація про стилі може розташовуватися або в окремому файлі, або безпосередньо в коді Web-сторінки. Розташування опису стилів в окремому файлі має сенс у випадку, якщо ви плануєте застосовувати ці стилі до більшого, ніж одна, кількості сторінок. Для цього потрібно створити звичайний текстовий файл, описати за допомогою мови CSS необхідні стилі, помістити цей файл на Web-сервері, а в коді Web-сторінок, які будуть використовувати стилі з цього файлу, потрібно буде зробити посилання на нього. Робиться це за допомогою тега <LINK>, розташованого усередині тега <BODY> ваших сторінок:

Перші два параметри цього тегу є зарезервованими іменами, що вимагаються для того, щоб повідомити броузеру, що на цій сторінці буде використовуватися CSS. Третій параметр - HREF = «URL» - вказує на файл, який містить описи стилів. Цей параметр повинен містити або відносний шлях до файлу - у випадку, якщо він знаходиться на тому ж сервері, що і документ, з якого до нього звертаються - або повний URL («http:// ...») у разі, якщо файл стилів знаходиться на іншому сервері.

Другий варіант, при якому опис стилів розташовується в коді Web-сторінки, всередині тега <BODY>, у тегу <STYLE type="text/css"> ... </ STYLE>. У цьому випадку ви можете використовувати ці стилі для елементів, розташованих в межах сторінки. Параметр type = "text / css" є обов'язковим і служить для вказівки броузеру використати CSS.

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

Давайте розглянемо механізм, за допомогою якого стилі привласнюються елементам Web-сторінок. Найпростіший випадок присвоєння якому-небудь елементу певного стилю виглядає так:

Де НАЗВА_ЕЛЕМЕНТА - ім'я HTML-тега (H1, P, TD, A і т.д.), а параметри у фігурних дужках - список властивостей елемента й привласнених їм значень. Більш докладно команди мови CSS ми розглянемо трохи пізніше.

Приклад:

У цьому прикладі всім заголовкам на сторінці, оформленим тегом Н1, привласнюється розмір шрифту 30 пунктів і синій колір.

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

CSS реалізує можливість привласнювати стилі не всім однаковим елементам сторінки, а вибірково - для цього використовується параметр CLASS = "ім'я класу" або ідентифікатор ID = «ім'я елемента», привласнюються будь-якому елементу сторінки. Розглянемо ці можливості докладніше.

Параметр CLASS застосовується у разі, якщо необхідно створити однаковий стиль для декількох, але не всіх елементів сторінки (однакових або різних).

Приклад:

Всі елементи класу b-з будуть відображатися жирним шрифтом з вирівнюванням по центру сторінки (або осередку таблиці).

Що міститься в комірці текст буде відображатися відповідно до опису класу.

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

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

Властивості елементів, керованих за допомогою CSS. В даний час мова CSS налічує досить велику кількість властивостей елементів HTML, якими він може керувати. Але через те, що цей стандарт ще дуже молодий, у повному обсязі його поки не підтримують найбільш популярні броузери (Netscape Navigator і Microsoft Internet Explorer). Останні версії цих броузерів можуть працювати з досить великою кількістю команд CSS, а ось 3-й версії або зовсім не підтримують його (Netscape Navigator 3), або підтримують, але лише частково (Microsoft IE 3). Більше того, оскільки розробники з цих компаній ніяк не можуть домовитися між собою, останні версії браузерів підтримують неоднаковий набір властивостей CSS. Все це робить малоприйнятною використання CSS в повному обсязі, так як, при використанні CSS для форматування елементів сторінки і перегляді її за допомогою броузера версії нижче 4 й, є велика ймовірність побачити щось таке, що вам не сподобається. Тому буде розумніше утриматися від використання CSS для форматування основної структури сторінок до загального переходу на останні версії браузерів. У той же час, застосовуючи «безпечні», тобто сумісні з максимальною кількістю броузерів елементи CSS, ви можете сильно полегшити собі життя і зробити ваші Web-сторінки більш привабливими в плані шрифтового оформлення, а користувачі, які подорожують по Internet за допомогою застарілих броузерів, просто цього не побачать, але також вони не побачать і тих страхіть, які з'являються при використанні CSS для верстання сторінок.

Таблиця № 4: Теги CSS