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

Размещено на http://www.allbest.ru/

Вступ

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

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

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



1.Створення web сайту, основні положення, структура документа

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-браузерах різних типів і на різних платформах.

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

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

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

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

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

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

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

HTML не реагує на регістр символів, що описують тег,

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

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

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

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

<HTML>

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

</ HTML>

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

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

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



1.1 Теги тіла документа, список базових тегів html

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

Ідентифікують (відображаються) у вікні компоненти 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>.

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

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

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

Таблиця. Список базових тегів HTML

Стартовий	Завершальний	Опис
<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.

1.2 Теги списків, гіпертекстові посилання

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

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

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

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

Ви можете створювати вкладені списки, використовуючи різні теги списків або повторюючи одні всередині інших. Для цього просто необхідно розмістити одну пару тегів (стартовий і завершальний) всередині іншої. Чи будуть елементи вкладеного списку мати ті ж маркери, що позначають елемент списку - залежить від браузера. У пронумерованому списку браузер автоматично вставляє номери елементів по порядку. Це означає, що якщо ви видалите один або декілька елементів пронумерованого списку, то інші номери автоматично будуть перераховані. Пронумерований список починається стартовим тегом <OL> і завершується тегом </ OL>. Кожен елемент списку починається з тегу <LI>. Для не пронумеровані списків браузер зазвичай використовує маркери для помітки елемента списку. Вид маркера, як правило, налаштовує користувач браузера Непронумеровані список починається стартовим тегом <UL> і завершується тегом </ UL>. Кожен елемент списку починається з тегу <LI>.

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

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

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

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

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

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

file:

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

http:

доступ до WEB-сторінці в мережі з використанням HTTP-протоколу. (Це найбільш часто використовуваний метод доступу до якого-небудь HTML-документу в мережі).

ftp:

Запит файлу з анонімного FTP-сервера.

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

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

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

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

Точки, на які посилається #anchor, вказуються в документі за допомогою тега NAME, як це буде описано далі.

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

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

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

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

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

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

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

<A HREF="#named_anchor"> Текст </ A> Символи "# ex1" повідомляє вашому браузеру, що необхідно знайти в даному HTML-документі маркер з ім'ям "ex1"

1.3 Графіка всередині документа, додавання стилів в документ

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

Одна з найбільш привабливих рис 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 і буде обговорена нами пізніше.

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

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="#9690CC">

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

Формат тега:

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

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

SIZE:

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

WIDTH:

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

ALIGN:

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

NOSHADE:

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

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

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

bold (жирний)

italic (похилий)

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

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

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

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

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

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

* 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>

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

синій - "0000FF" і т.п.

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

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

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

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

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

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

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

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

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

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

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

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

<	&lt;
>	&gt;
&	&amp;
"	&quot;

1.5 Html форми, Html фрейми, Html таблиці 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 - ім'я поля введення

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 SINGLE

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

SELECT MULTIPLE

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

Якщо вибрано одночасно кілька значень, то сервера передаються відповідне обраному кількість параметрів 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>.

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, але ділить вікно по вертикалі, а не по горизонталі.

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> ігнорується броузерами, підтримуючими фрейми.

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

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

TARGET = "windows_name"

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

TARGET в тегу A:

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

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

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

TARGET = "_blank":

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

TARGET = "_self":

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

TARGET = "_parent":

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

TARGET = "_top":

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

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%".

2.5 Оптимізація графіки для web, основи css

На даний момент в 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. У складних випадках перед індексуванням виділіть найбільш важливі елементи зображення. Кольори всередині виділеної області індексуються коректніше решти.

Основи CSS.

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

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

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

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

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

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

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

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

...