Почнемо все спочатку. Якшо ви вже ознайомлені з мовою HTML-розмітки, то перші розділи вам не будуть цікавими. Але всерівно раджу почитати. І так:
1.1. Групи тегів НТМL
Всі теги НТМ по їхньому призначенню й області дії можна розділити на наступні основні групи визначаючі структуру документа; оформлення блоків гіпертексту (параграфи, списки, таблиці, картинки); гіпертекстові посилання й закладки; форми для організації діалогу; виклик програм.
Структура гіпертекстової мережі задається гіпертекстовими посиланнями. Гіпертекстове посилання - це адреса іншого HTML документа або інформаційного ресурсу Internet, що тематично, логічно або яким-небудь іншим способом пов'язаний з документом, у якому посилання визначене.
Для запису гіпертекстових посилань у системі WWW була розроблена спеціальна форма, що називається Universe Resource Locator. Типовим прикладом використання цього запису можна вважати наступний приклад:
Цей текст містить <A HREF="http://polyn.net.kiae.su/altai/index.html"> гіпертекстове посилання</A>
У наведеному вище прикладі тег "A", що в HTML називають якорем (anchor), використовує атрибут "HREF", що позначає гіпертекстове посилання (Hypertext Reference), для запису цього посилання у формі URL. Дане посилання вказує на документ із ім'ям "index.html" у директорії "altai" на сервері "polyn.net.kiae.su", доступ до якого здійснюється по протоколі "http".
Гіпертекстові посилання в HTML діляться на два класи: контекстні гіпертекстові посилання й загальні. Контекстні посилання вмонтовані в тіло документа, як це було продемонстровано в попередньому прикладі, у той час як загальні посилання зв'язані з усім документом у цілому й можуть бути використані при перегляді будь-якого фрагмента документа. Обидва класи посилань присутні в стандарті мови із самого його народження, однак, спочатку найбільшою популярністю користувалися контекстні посилання. Ця популярність привела до того, що механізм використання загальних посилань практично повністю "атрофувався". Однак у міру стандартизації інтерфейсу користувача й стилів подання інформації розробники мови знову повернулися до загальних посилань і прагнуть пристосувати їх до завдань керування цим інтерфейсом. Слід зазначити, що загальні гіпертекстові посилання в більшості броузеров не використовуються і не відображаються.
Структура HTML-документа дозволяє використати вкладені один в оден контейнери. Сам документ - це один великий контейнер який починається з тега <HTML> і закінчується тегом </HTML>: <HTML> Зміст документа </HTML>
Контейнер HTML або гіпертекстовий документ складається із двох інших вкладених контейнерів: заголовка документа (HEAD) і тіла документа (BODY):
Розглянемо найпростіший приклад класичного документа:
Компанія Netscape Communication розширила класичну форму документа можливістю організації фреймів (кадрів), що дозволяють розділити робоче вікно програми перегляду на кілька незалежних фреймів. У кожен фрейм може бути завантажена своя сторінка HTML.
1.2. Контейнери HTML-документа
Кожна із складових частин документа має свій набір контейнерів, які можна використати. Контейнери тіла документа не використаються в заголовку або в контейнері FRAMSET. Розглянемо кожну групу контейнерів більш докладно. Контейнери заголовка документа НТМ - HEAD
Заголовок документа не має атрибутів. Основне призначення тегів заголовка - це опис загальних для всього документа параметрів відображення. До таких параметрів можна віднести стиль відображення документа, загальна базова адреса гіпертекстових посилань, загальні гіпертекстові посилання, ідентифікатор й ім'я документа і т.д. Ми розглянемо тільки контейнери які найчастіше зустрічаються. ТIТLЕ
Найбільш часто використовуваним тегом заголовка є ім'я документа.
ТIТLЕ має наступний синтаксис <ТIТLЕ> Назва документа </ТIТLЕ>
Зміст тега ТIТLЕ відображається в полі назви документа. ВАSE
Тег ВАSЕ пов'язаний з формою подання гіпертекстового посилання у формі URL. Справа в тому, що специфікація URL визначає дві форми адресації документів: повну й неповну. НТМ дозволяє використати як повну форму адреси URL, так і неповну. Але для того, щоб використати другу форму специфікації, її треба на чомусь базувати, тобто задавати базову адресу, яку можна було б використати для формування повної форми URL з неповної. Тег ВАSЕ дозволяє визначити цю базу. Так, наприклад, якщо в заголовку буде задано: <BASE HREF="http://polyn.net.kiae.su/>,
буде розширена до <A HREF= http://polyn.net.kiae.su/altai/index.html
Це ж стосується й інших імпортованих у документ Тегів. Графічний образ, вмонтований у документ по команді: <IMG SRC="/gif/te t.gif">
буде знайдений за адресою: <IMG SRC=' http://polyn.net.kiae.su/gif/test.gif'>
Зміст тега ВАSЕ інтерфейсом користувача прямо не відображається. ISINDEX
Можливість пошуку НТМL-документа за ключовими словами визначається тегом ISINDEX заголовка документа. У перших версія мови даний тег не мав додаткових атрибутів. Якщо сервер міг виконати запит по ключових словах, то він автоматично вставляв у заголовок тег ISINDEX. Список ключових слів приписувався клієнтом до адреси документа після символу "?". Зрозуміло, що виконати запит міг сервер, що при наявності символу "?" перетворювався в пошукову машину. НТМL-документ міг бути сгенерований "на ходу" програмою, тоді ключові слова після "?" приписуються до адреси цієї програми. У новій версії мови з'явилася можливість вказати програму обробки запиту й задати фразу замість стандартної "SЕАRСН ISINDEX": <ISINDEX HREF= "http://polyn.net.kiae.su/cgi-bin/search" PROMPT="Enter Keywords:">
У наведеному прикладі атрибут НREF визначає адресу програми обробки запиту, а атрибут РRОМРТ - зміст запрошення. Справедливості заради варто відзначити, що повністю нові можливості цього тега виконує тільки один - Аrеnа. Такі популярні інтерфейси, як Моsaic й Netscape, даний тег інтерпретують по-старому. META
Тег META призначена для визначення в заголовку документа конструкцій, відсутніх у специфікації НТМ. Має три атрибути: NAME, CONTENT, HTTP-EQUIV. Застосування даного тега ускладнене тим, що для інтерпретації конструкцій, які вводяться через цей тег, необхідно, щоб сервер або інтерфейс користувача могли ці конструкції розшифрувати й застосувати. Для такого сорту роботи програма повинна вміти інтерпретувати конструкції SGML, що практично не реалізовано в жодній інтерфейсній програмі. Єдиним способом застосування даного тега на практиці є включення в заголовок відгуку по протоколі НТТР інформації, визначеної через атрибут НТТР-ЕQUIV: <META HTTP-EQUIV="Keywords" CONTENT="Plsma, Nuclear Physics">
При такому використанні в заголовок НТТР-пакета буде включений рядок: Keywords: Plasma, Nuclear Physics, що зручно при відправленні пошти.
Найбільш ефективне застосування контейнера META для побудови демонстраційних роликів. У цьому випадку зміна відображуваної сторінки будується на параметрі Rеfresh (тобто часу відновлення документа). У заголовок документа записується контейнер META наступного виду: <meta http-equiv = "Refresh": content = "0, URL=next.html">
така пропозиція рівносильна появі в заголовку повідомлення протоколу НТТР пропозиції виду: Refresh = 0; URL=next.html <LF>
У свою чергу це означає заміну документа відразу ж після завантаження його браузером. При цьому як новий документ використається документ із параметра URL.
Контейнери тіла документа НТМ - BODY
Теги тіла документа
Теги тіла документа призначені для керування відображенням інформації в програмі інтерфейсу користувача. Вони описують гіпертекстову структуру бази даних за допомогою вбудованих у текст контекстних гіпертекстових посилань. Тіло документа складається з: ієрархічних контейнерів і заставок; заголовків (від Н1 до Н6); блоків (параграфи, списки, форми, таблиці, картинки й т.п.); горизонтальних ліній й адрес; тексту, розбитого на області дії стилів (підкреслення, виділення, курсив), математичних описів, графіків і гіпертекстових посилань. ВОDY
Опис тегів тіла документа варто почати з тега ВОDY. У відмінності від тега НEАТ, тег ВОDY має атрибути:
ID - ідентифікатор тега. Використовуеться для іменування тегів, а також як точка переходу по гіпертекстовому посиланню. Даний атрибут є практично у всіх тегах тіла документа. З погляду практичного використання ідентифікатора ВОDY як точка переходу по гіпертекстових посиланнях, використання цього атрибута сумнівно, тому що відображувана частина документа власно і починається з цього тега.
LANG - визначає мову документа у вигляді двохсимвольного коду ISO-639, за яким йде через крапку необов'язковий код країни у форматі ISO-3166. За задумом розробників стандарту мови даний атрибут повинен розпізнаватися програмами інтерпретації й управляти відображенням багатомовних текстів. Однак навіть Аrеnа, спеціально призначена для ілюстрації НТМ 3.0, не реалізує цієї можливості.
СLASS - ієрархічно організоване ім'я типу "ADDITION.FIRST". Призначено для зв'язування тега тексту з певним стилем відображення. Реально поки не використовується.
Всі три перерахованих вище атрибути є загальними для тегів тіла і у подальшому ми їх обговорювати не будемо. Якщо атрибут не буде дозволений для тега тіла тексту документа, то це буде зазначено спеціально.
ВАСКGROUND - визначає фон, на якому відображається текст документа. У прикладі НТМL-документа як фон був використано невеликий графічний образ "bgr.gif. <ВОDY ВАСКGROUND="bgr.gif">
Як видно із цього приклада, як значення даного атрибута використовується адреса в скороченій формі URL. У цьому випадку це адреса локального файлу.
Варто помітити, що різні інтерфейси користувача підтримують різні додаткові атрибути для тега ВОDY. Атрибут Значення
У даній таблиці рядок #ХХХХХХ визначає кольори в термінах RGB у шістнадцятирічній нотації. Так, кольори тексту визначені як синій, фону - білий, пройденого посилання червоний, а нове посилання зелений. Якщо як атрибути тега ВОDY указати: <ВОDY ВАСКCOLOR=#FFFFFF ТЕХТ=#0000FF VLINK=#FF0000 LINK=#00FF00>
то колір фону буде жовтим, текст буде синім, посилання - зелені, а пройдені посилання стануть червоні. Однак користуватися цими атрибутами треба вкрай обережно, тому що в користувача може виявитися інший інтерфейс, що ці параметри не інтерпретує. Теги керування розміткою
Заголовки позначають початки розділів документа. У стандарті визначено 6 рівнів заголовків: від Н1 до Н6. Текст, оточений тегами <Н1></Н1>, виходить більшим - це основний заголовок. Якщо текст оточений тегами <Н2></Н2>, то він виглядає трохи менше (підзаголовок); текст усередині <НЗ></НЗ> ще менше й так далі до <Н6></ Нб>. Деякі програми, дозволяють використати більше число заголовків, однак реально більше трьох рівнів зустрічається рідко, а більше 5 - украй рідко.
Стандарт мови нараховує 11 атрибутів у тега заголовок. Розглянемо тільки АLIGN, тому що інші в більшості програм інтерпретаторів не реалізовані.
Для розбивки тексту на параграфи використовується тег <Р> у ньому використовуються ті ж атрибути що і у заголовках.
Як приклад розглянемо створення домашньої сторінки фірми із продажу побутової електроніки.
Приклад 1.3 <HTML> <HEAD> <TITLE> Головна сторінка</TITLE> </HEAD> <BODY> Компанія. Відкрите акціонерне товариство Компанія заснована в 1996 році, є одним із провідних продавців побутової електроніки в Росії. Основними напрямками діяльності Компанії є: реалізація побутової електроніки провідних фірм світу через мережу магазинів; створення сервісних центрів по обслуговуванню побутової електроніки; Компанія шукає агентів по збуту побутової електроніки. Контактна інформація Telephone (123) 123-34-56 FAX (123) 123-34-56 Поштова адреса 123456 м. Місто, вул Лісова, 106 Електронна пошта Загальна інформація: abc@abc.su Продажі: abc@abc.abc.su Copyright 1997 Компанія </BODY> </HTML>
Рис. 1.3. Приклад тексту без розмітки
Броузер покаже нам цей HTML-документ у вигляді безперервного тексту.
Атрибут АLIGN. Атрибут АLIGN дозволяє вирівняти текст по лівому або правому краї, по центрі або ширині. За замовчуванням текст вирівнюється по лівому краю. Даний атрибут застосуємо також до графіки й таблиць.
Наступна таблиця визначає можливі значення атрибута АLIGN: Значення Опис застосування
Left Вирівнювання по лівому краю
Right Вирівнювання по правому краю
Justify Вирівнювання по лівому й правому краях
Сеnter Центрування
Значення Justify реалізоване не у всіх програмах інтерпретації.
Вирівнювання по лівому краю
За умовчанням текст HTML вирівнюється по лівому краю і не вирівнюється по правому, тобто початок рядків перебуває на одному рівні, а кінці на різні. Найчастіше виходить, що текст із рівними проміжками між словами виглядає краще. Оскільки вирівнювання по лівому краю задається автоматично, атрибут АLIGN=LEFT можна опустити.
Вирівнювання по правому краю
Текст, вирівняний по правому краю й не вирівняний по лівому - кінці рядків перебувають на одному рівні, а початок на різних, - часто застосовується на практиці, хоча б з метою створити оригінальний дизайн. Цей ефект досягається завданням атрибута АLIGN=RIGHT у звичайних тегах, наприклад у тезі <Р>.
Центрування тексту й графіки
Є кілька способів відцентрувати текст або графіку. У специфікаціях HTML 3.0 пропонується користуватися тегом <АLIGN=СЕNТЕR>. Однак цей тег застосуємо не для всіх об'єктів HTML-сторінки, тому Netscape додав тег <СЕNТЕR>, що центрує будь-які об'єкти й підтримується броузерами Netscape Navigator, Microsoft Explorer і деякими іншими. До тегу <СЕNТЕR> потрібно ставитися з обережністю. Який-небудь броузер може його взагалі проігнорувати, і на сторінці виявиться вирівняний по лівому краю текст.
Огортання
За допомогою атрибута ALIGN= ви можете <огорнути> текст навколо графічного об'єкта. Для цього помістіть тег <IMG SRC="/шлях/файл.gif"> у тім місці, де повинен бути графічний об'єкт, і додайте атрибут ALIGN=LEFT, ALIGN=RIGHT або АLIGN=CENTER. Крім того, за допомогою атрибутів НSPAСЕ= й VSPАСЕ= (вони описуються нижче ) задається ширина горизонтальних і вертикальних полів, що відокремлюють зображення від тексту. Можна також створити рамку навколо картинки або обрамлення таблиці текстом.
Загалом кажучи, СLEAR є загальним для всіх блокових тегів (заголовки, параграфи і т.д.), однак реалізований далеко не для всіх з них.. СLEAR може приймати наступні значення: Значення Призначення
left Пропустити картинку, розташовану з лівого краю аркуша
right Пропустити картинку або таблицю, розташовану з правого краю аркуша
аll Перервати відображення тексту перед картинкою або таблицею й продовжити нижче
В атрибуті СLEAR можна вказати й чисельні значення: <Р СLEAR="100 рiх">
Даний запис означає порожнє горизонтальне поле висотою в 100 піксельних рядків.
Розставимо теги заголовків з атрибутами в нашому прикладі.
Приклад 1.4 <HTML> <HEAD> <TITLE> Головна сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компанія</H1> <H3 ALIGN=LEFT>Відкрите акціонерне товариство Компанія заснована в 1996 році, є одним із провідних постачальників побутової електроніки Вроссии.</H3> <H4 ALIGN=RIGHT>Основними напрямками діяльності Компанії є: реалізація побутової електроніки провідних фірм миру через мережу магазинів; створення сервісних центрів по обслуговуванню побутової електроніки; </H4> <H3> Компанія шукає агентів по збуті побутової електроніки</H3> <H5 ALIGN=CENTER>Контактна інформація Telephone (123) 123-34-56 FAX (123) 123-34-56 Поштова адреса 123456 м. Місто, вул Лісова, 106 Електронна пошта Загальна інформація: abc@abc.su Продажі: abc@abc.abc.su Copyright 1997 Компанія</H5> </BODY> </HTML>
Рис. 1.4. Текст із використанням тегів заголовків
Результат ми можемо бачити на екрані.
Тег <ВR>
Примусовий переклад рядка використовується для того, щоб порушити стандартний порядок відображення тексту. При звичайному режимі інтерпретації програма інтерфейсу користувача відображає текст у робочому вікні, автоматично розбиваючи його на рядки. У цьому режимі існуючі в тексті кінці рядків ігноруються. Іноді для більшої виразності потрібно почати друкувати з нового рядка. Для цієї мети й використовується тег ВR. Атрибут СLЕА= у тезі <ВR> використовується для того, щоб зупинити в зазначеній вами точці обтікання текстом об'єкта й потім продовжити текст у порожній області за об'єктом. Наступний за об'єктом текст вирівнюється у відповідності зі значеннями LEFT, RIGHT або АLL атрибута СLЕА=: <BR СLЕА =LЕFТ> Текст буде продовжений, починаючи з найближчого порожнього лівого поля
<BR СLЕА =RIGHT> Текст буде продовжений, починаючи з найближчого порожнього правого поля
<BR СLЕА=АLL> Текст буде продовжений, як тільки й ліве, і праве поля виявляться порожніми
Тег <NOВ>
Тег <NОВ> (Nо Вrеаk, без обриву) дає команду броузеру відображати весь текст в одному рядку, не обриваючи його. Якщо текст, укладений у теги <NОВ>, не поміститься на екрані, броузер додасть у нижній частині вікна документа горизонтальну смугу прокручування. Якщо ви хочете обірвати рядок у певнім місці, поставте там тег <ВR>. Теги керування відображенням символів
Всі ці теги можна розбити на два класи: теги, що керують формою відображення (font style), і теги, що характеризують тип інформації (information type). Часто зовні різні теги при відображенні дають однаковий результат. Це залежить головним чином від настроювань інтерпретуючої програми і смаків користувача. Теги, що управляють формою відображення
Курсив, посилання, підкреслення, верхній індекс, нижній індекс, шрифт великої, маленький, червоний, синій, різні комбінації - все це робить сторінки цікавішими й функціональнішими. Microsoft Internet Explorer й Netscape Navigator дозволяють визначити шрифт за допомогою атрибута FАСЕ=. Тепер можна поєднувати на одній сторінці кілька видів шрифтів, поза залежністю від того, який з них заданий за за умовчанням у броузері користувача. Верхні й нижні індекси [НТМ 3.0]
За допомогою тегів <SUР> й <SUВ> можна задавати верхні й нижні індекси, необхідні для запису торгівельних знаків, символів копірайта, посилань і виносок. Розглянуті теги дозволяють створити всередині текстової області верхні або нижні індекси будь-якого розміру. Щоб вони здавалися менше навколишнього тексту, можна використати теги <SUР> й <SUВ> з атрибутом FONT SIZE=.
Атрибут SIZE=
Атрибут SIZЕ= тега <FОNТ> дозволяє задавати розмір тексту в даній області. Якщо ви не користуєтеся тегом <ВАSЕFОNТ SIZЕ=n> для завдання певного розміру шрифту на всій сторінці, то за замовчуванням приймається 3.
Деякі броузери не підтримують тег <FONТ>, тому бажано вживати його тільки всередині текстової області. В інших випадках краще використати теги <Н1>, <Н2>, <НЗ> і т.д. Головна перевага тега <FONТ> полягає в тому, що він після закінчення своєї дії не розбиває рядок, як теги <Нn>. Тому тег <FONТ> буває дуже корисний для зміни розміру шрифту всередині рядка. Теги <ВIG> і <SMALL>
Текст, розташований між тегами <ВIG></ВIG> або <SMALL></SMALL>, буде відповідно більше .
Атрибут СОLОR=хх
Якщо ви хочете зробити свою сторінку більше барвистою, то можете скористатися атрибутом СОLОR= у тезі FONТ, і тоді єдиним обмеженням буде колірна палітра на комп'ютері користувача. Поки тільки самі популярні броузери відображають кольори шрифту.
Користуватися тегом <FONТ СОLОR=> для зміни кольорів шрифту, так само як і більшістю тегів НТМ, дуже просто. Вкладаєте текст у теги <FONТ СОLОR= RED></FONТ>. Теги, що управляють формою відображення Тег Значення
<I>.....</I> Курсив (Italic)
<B>...</B> Посилення ВОLD)
<ТТ>... </TТ> Телетайп
<U>. </U> Підкреслення
<S>...</S> Перекреслений текст
< BIG >... </ BIG > Збільшений шрифт
< SMALL >...</ SMALL > Зменшений шрифт
< SUB >...</ SUB > Підрядкові символи
< SUЗ >... </ SUР > Надрядкові символи
Теги, що характеризують тип інформації Тег Значення
<ЇМ>... </ЇМ> Типографське посилення
<СIТЕ>...</СIТЕ> Цитування
< STRONG >.</ STRONG > Посилення
<СODE>... </СОDE> Відображає приклади коду (наприклад, коди програм)
<SАМР>... </SАМР> Послідовність літералів
<КВ>... </КВ> Приклад введення символів із клавіатури -
<VAR>...</VAR> Змінна
<DFN>... </DFN> Визначення
<Q>- </Q> Текст, укладений в дужки
Всі ці теги допускають вкладеність і перетинання один одним, тому всі вони мають тег початку й кінця. При використанні цих тегів варто пам'ятати, що їхнє відображення залежить від настроювань програми-інтерфейсу користувача, які можуть і не збігатися з настроюваннями програми-розробника гіпертексту. Використання стилів, які заміняють настроювання інтерфейсу, у даний момент проблематично.
Приклад 1.5. Використання тегів, що управляють формою відображення.
<HTML> <HEAD> <TITLE> Головна сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компанія</H1> <H3 ALIGN=LEFT><I>Відкрите акціонерне суспільство Компанія заснована в 1996 році, є одним із провідних постачальників побутової електроніки В России.</I></H3> <H3 ALIGN=RIGHT><B>Основними напрямками діяльності Компанії є</B>: реалізація побутової електроніки провідних фірм миру через мережу магазинів; створення сервісних центрів по обслуговуванню побутової електроніки;</H3> <H3><U> Компанія шукає агентів по збуті побутовий електроніки</U></H3> <H5 ALIGN=CENTER><TT>Контактна інформація</TT> <DL>Telephone (123) 123-34-56 <DL>FAX (123) 123-34-56 <DL>Поштова адреса 123456 м. Місто, вул Лісова, 106 Електронна пошта <DL>Загальна інформація: abc@abc.su <DL>Продажі: abc@abc.abc.su</DL> Copyright 1997 Компанія</H5> </BODY> </HTML>
Рис. 1.5. Теги відображення стилів тексту Тег <DL>
Використання тега списку (Definition List: <DL>) нагадує застосування відступів у звичайних текстових редакторах. Тег <DL> був створений для форматування тексту, що визначає якийсь термін. Обумовлений термін записується на одному рядку, а його визначення на наступному, з невеликим відступом вправо. Тег <DL> дозволяє створювати окремі абзаци з відступом без нумерації або маркерів. Відступ робиться від лівого краю. Якщо у вас на сторінці декілька тегів <DL>, то текст поступово зміщується усе більше вправо. Наприкінці визначення помістити закриваючий тег </DL>. Пам”ятайте, що тег <DL> зрушує тільки ліву границю абзацу.
Тег <ВLОСKQUOTE>
Тег додає поля ліворуч і праворуч від тексту. Це корисний тег, оскільки він дозволяє розташувати текст компактно в центрі сторінки. При використанні < ВLОСKQUOTE > кілька разів текст усе більше стискується до центра.
Microsoft Internet Explorer і Netscape Navigator допускають застосування атрибутів LEFTMARGIN=n і ТОРМАRGIN =n у тезі <ВОDY>. Атрибут LEFTMARGIN = задає ліве поле для всієї сторінки. ТОРМАRGIN= визначає верхнє поле. Число n показує ширину поля в пікселях. Наприклад, тег < ВОDY LEFTMARGIN ="40"> створить на всій сторінці ліве поле шириною 40 пікселів. При n, рівному 0, ліве поле відсутнє. Табуляція
Потреба в цьому засобі існувала вже дуже давно, але лише недавно воно було, нарешті, запропоновано розроблювачам. Табуляцію можна задати декількома способами.
Найпростіший - записати тег <ТАВ IDENT=n>, де n визначає число еn-пробілів перед новим абзацом. Еn-пробіл - це типографська одиниця виміру, приблизно рівна ширині букви n у тім шрифті, що ви використаєте. Таким чином, тег <ТАВ IDENT=4> задає символ табуляції шириною в чотири еn-пробіли.
Якщо ви хочете в декількох місцях застосувати символ табуляції заданої величини, то в тім місці, де ви задаєте його розмір, помістите тег <ТАВ> з атрибутом ID=, наприклад, у такий спосіб: <ТАВ ID="tabone" >
Тепер у будь-якому місці сторінки досить написати <ТАВ ТЕ="ТАВОNЕ">, і символи табуляції стануть рівними ТАВОNЕ. Відповідно можна аналогічним чином створити ТАВТWО, ТАВТНRЕЕ, ТАВFОUR і т.д.
Щоб створити більш складний дизайн, можна застосувати з тегом <ТАВ> атрибут ALIGN=. При завданні АLIGN=LЕFТ або ALIGN=RIGHT текст, що випливає за тегом <ТАВ> (аж до найближчого обриву рядка або тега), буде вирівняний по лівому або правому краю відповідно. При завданні АLIGN=СЕNTER текст центрується щодо табулятора, що задає тегом <ТАВ> число еn-пробілів.
Тег <ТАВ> можна застосовувати для розміщення і тексту, і графіки.
Списки
Списки є важливим засобом структурування тексту й застосовуюється у всіх мовах розмітки. У НТМ є наступні види списків: ненумерований список (неупорядкований), нумерований список (упорядкований) і список визначень. Теги для ненумерованих (Unordered Lists <UL>) і нумерованих списків (Ordered Lists <OL>) - це основа HTML. HTML 3.0 додає кілька атрибутів до тегів списків для вибору різних типів маркерів у ненумерованих списках і різних схемах нумерації в нумерованих. Можна включати такі атрибути в самі теги <LI> (List Item), щоб змінити тип маркера всередині списку. Після появи нового атрибута всі наступні маркери в списку будуть мати такий же вид. Тег <UL>
Ненумерований список. Ненумерований список призначений для створення тексту типу: перший елемент списку другий елемент списку третій елемент списку
Записується даний список у вигляді наступної послідовності: <UL> <LI> перший елемент списку <LI> другий елемент списку <LI> третій елемент списку </UL>
Теги <UL> й </UL> - це теги початку й кінця ненумерованого списку, тег <LI> (List Item) задає тег елемента списку. На додаток до цим тегам існує тег, що дозволяє йменувати списки - LН (List Header). Приведемо приклад відображення ненумерованого списку наступного виду:
Атрибути маркерів у ненумерованому списку
Якщо ви не бажаєте застосовувати ті самі маркери на різних рівнях вкладеності, то використайте атрибут ТYРЕ=. Ви можете задати будь-який тип маркера в довільному місці списку. Можна навіть змішувати різні типи маркерів в одному списку. Нижче перераховані теги з атрибутами стандартних маркерів
<UL TYPE =DISK> Тег створює суцільні маркери такого типу, як у списках першого рівня за замовчуванням <UL TYPE =CIRCLE> Тег створює маркери у вигляді окружностей <UL TYPE =SQUARE> Тег створює суцільні квадратні маркери
В HTML 3.0 ви можете замість звичайного маркера помістити GIF або спеціальний символ.
Атрибут РLА=
Атрибут РLAN= створює ненумеровані списки без маркерів. Зрозуміло, найпростіший спосіб це зробити - скористатися списком визначень, але якщо ви все-таки захочете вставити в список один-два маркера, то краще застосовуйте даний атрибут.
Атрибут SRС=
Атрибут SRС= використовується для того, щоб задати GIF-файл замість звичайного маркера GIF, найбільш уживаний в HTML графічний формат. Замість того щоб поміщати GIF перед рядком з тегом <ВR> наприкінці, ви можете створити власні витончені маркери й потім використати їх у списку. У цьому випадку ви одержите всі переваги ненумерованого списку до того ж симпатичні GIF-картинки як маркери. Атрибут SRC= можна задати в теге <UL>, визначивши відразу всі маркери списку, а можна вказати різні GIF для різних пунктів списку, поміщаючи атрибут SRC= у кожному теге <LI>. У кожному разі для того щоб атрибут SRС= працював з тегом <UL>, потрібно задати атрибут РLAN=.
Атрибут SRС= для Тегів списків дуже потрібний Web-розроблювачам і здатний зробити ваші сторінки надзвичайно привабливими. Разом з тим, його некоректне вживання приводить до винятково виродливих сторінок.
Атрибут DINGВАТ= [НТМ 3.0]
Атрибут DINGВАТ= дозволяє створювати спеціальні типографські символи dingbats, підтримувані броузером. Ці символи мають вигляд картинок, які використаються як маркери в списках. Приведемо список стандартних dingbats: Text, Audio, Folder, Disc drive, Form, Home, Next.
Для завдання dingsbat потрібно вказати його ім'я в теге <LI>. Наприклад, для того щоб задати home (будиночок), записуйте тег <LI DINGBAT="home" >.
Dingsbat можна також застосовувати з тегом заголовка. Тег <OL>
Нумеровані списки. Тег <OL> разом з атрибутом ТYРЕ= в HTML 3.0 дозволяє створити нумеровані списки, використовуючи як номери не тільки звичайні числа, але й рядкові й прописні букви, а також рядкові й прописні римські цифри. При необхідності можна навіть змішувати ці типи нумерації в одному списку.
<ОL ТYРЕ=1> Тег створює список з нумерацією у форматі 1., 2., 3., 4. і т.д. <ОL ТYРЕ=A> Тег створює список з нумерацією у форматі А., В., С., В. і т.д. <ОL ТYРЕ=a> Тег створює список з нумерацією у форматі а., b., с., d. і т.д. <ОL ТYРЕ=I> Тег створює список з нумерацією у форматі I., II., III., IV. і т.д.
Пример 1.6. Використання Тегів різних списків. <HTML> <HEAD> <TITLE> Головна сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компанія</H1> <HR> <H3 ALIGN=LEFT><I>Відкрите акціонерне товариство Компанія заснована в 1996 році, є одним з ведучих постачальників побутової електроніки Вроссии.</I></H3> <HR> <H3>Основними напрямками діяльності Компанії є: <OL> <LI>реалізація побутовий електроніки провідних фірм миру через мережу магазинів; <LI>створення сервісних центрів по обслуговуванню побутової електроніки</H3> </OL> <HR> <H3><U><FONT COLOR=RED> Компанія шукає агентів по збуті побутової електроніки</FONT></U></H3> <H5 ALIGN=CENTER>Контактна інформація</H5> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI>Поштова адреса 123456 р. Місто, вул Лісова, 106 <UL TIPE=CIRCLE>Електронна пошта<BR> <LI>Загальна інформація: abc@abc.su <LI>Продажу: abc@abc.abc.su</UL></UL> <BR><BLINK>Copyright</BLINK> 1997 Компанія </BODY> </HTML>
Рис. 1.6.
Тег <НR>
Горизонтальне отчеркивание (horizontal rule) застосовується для поділу документа на частині. За допомогою одного лише тега <НR> можна додати сторінці зовсім незвичайний вид. Спробуйте поэкспериментировать із тегом <НR>і ви одержите лінії, зовсім не схожі на ті, котрими ви звичайно користуєтеся. Тег <РRЕ>
Відображення тексту без форматування. Тег <BLINK>
Тег <BLINK> викликає мерехтіння тексту ув'язненого в нього. Гіпертекстові посилання
Всі розглянуті вище засоби керування відображенням тексту є безумовно важливими, але тільки додатковими до основного тегу документа - гіпертекстовому посиланню. Для запису гіпертекстового посилання використовується контейнер <А...>......</А>, що називають "якір" (аnchor). Якір має кілька атрибутів, головним з яких є НREF (Нуреrтехt Reference). Просте посилання можна записати у вигляді: <А НREF="http://роlyn.net.kiae.su/index.shtml"> Індекс бази даних "Полинь" </А>
де значенням атрибута HREF є адреса документа " index.shtml " на машині " роlyn.net.kiae.su ", доступ до якої здійснюється по протоколі НТТР. Форма запису цієї адреси називається універсальним локатором ресурсів (Universe Resource Locator) і є складовою частиною технології WWW.
Зміст контейнера А, укладене між тегом початку й тегом кінця, виділяється в тексті кольорами, певним для контекстних гіпертекстових посилань.
Однієї з особливостей створення Web-сервера є те, що представлену на ньому інформацію бажано розбити на окремі частини, які можуть бути виведені на екран без необхідності його прокручування. Організація зв'язків між окремими частинами й здійснюється за допомогою гіпертекстових посилань.
Розглянемо це на прикладі.
Одним з типових прийомів створення Web-сервера фірми є подання на першої сторінки переліку основних частин, у які входять: Новини, Товари, Послуги, Контакти, Пошук.
Вставимо список цих частин у наш приклад разом з гіпертекстовими посиланнями на відповідні документи. При цьому можна вказувати не повна адреса URL.
Приклад 1.7 <HTML> <HEAD> <TITLE> Головна сторінка</TITLE> </HEAD> <BODY> <H1 ALIGN=CENTER>Компанія</H1> <HR> <H3 ALIGN=LEFT><I>Відкрите акціонерне товариство Компанія заснована в 1996 році, є одним із провідних постачальників побутової електроніки в Росії.</I></H3> <HR> <p ALIGN=CENTER> <font color="glava~10.shtml#400040" size="4">[ <a href="news.shtml">Новини</a> |<a href="products.shtml">Товари</a> | <a href="servis.shtml">Послуги</a> | <a href="contact.shtml"> Контакти</a> | <a href="search.shtml">Пошук</a> ] </font> <HR> <H3>Основними напрямками діяльності Компанії є: <OL> <LI>реалізація побутовий електроніки провідних фірм миру через мережу магазинів; <LI>створення сервісних центрів по обслуговуванню побутової електроніки</H3> </OL> <HR> <H3><U><FONT COLOR=RED> Компанія шукає агентів по збуті побутової електроніки</FONT></U></H3> <H5 ALIGN=CENTER>Контактна інформація</H5> <UL> <LI>Telephone (123) 12-34-56 <LI>FAX (123) 12-34-56 <LI>Поштова адреса 123456 м. Місто, вул Лісова, 106 <UL TIPE=CIRCLE>Електронна пошта
<LI>Загальна інформація: abc@abc.su <LI>Продажу: abc@abc.abc.su</UL></UL> <BR><BLINK>Copyright</BLINK> 1997 Компанія </BODY> </HTML>
На екрані це буде виглядати в такий спосіб. При натисканні на посилання "Товари" у вікно броузера буде завантажений новий документ.
Рис. 1.7. Гіпертекстові посилання
Іншою формою використання тега А є визначення крапок усередині тексту, на які можна послатися: Такий метод використовується у випадку коли документ не можна поділити на частині й необхідно швидко пересуватися зі змісту по тексту. <А NАМЕ= роint">
Для посилання на таку крапку використають наступну форму URL: <А НREF= "http://роlyn.net.kiae.su/index.shtml #роint"> Посилання на крапку "роint" у документі "index.shtml"</А>
На описі простих гіпертекстових посилань можна закінчити огляд засобів мови НТМ, орієнтованих на текстове подання інформації й організацію гіпертекстових баз даних.
Графіка
Cамыми розповсюдженими графічними форматами в Web є GIFи JPEG формати. Для того, щоб вставити зображення в Web-сторінку необхідно або намалювати його, або взяти вже готове. У будь-якій програмі малювання нескладно намалювати просте зображення й зберегти його в необхідному форматі . Якщо програма не підтримує цей формат, то необхідно перетворити файл. Для цього існує безліч програм, призначених для перетворення одного графічного формату в іншій. Запозичити ж картинки можна з різних програмних пакетів, або з інших Web-сторінок в Internet, що містить бібліотеки художніх зображень вільного доступу. Коли броузер виводить сторінку Web із зображенням, що відповідає графічний файл тимчасово зберігається в пам'яті комп'ютера. У більшості броузеров є команда, що дозволяє зберегти файл постійно на локальному диску. Існує безліч інших варіантів одержання графічних файлів.
Зображення можуть бути корисні своєю інформативністю й надають Web-сторінці привабливий вид. Приведемо найпоширеніші випадки застосування зображень: логотип компанії на діловій сторінці; графіка для рекламного оголошення; різні малюнки; діаграми й графіки; художні шрифти; підпис автора сторінки; застосування графічного рядка в якості горизонтальної розділової лінії; застосування графічних маркерів для створення гарних маркірованих списків.
Тепер розглянемо як вставити зображення в сторінку Web. Тегом НТМ, що змушує броузер виводити зображення, є <IMG> з наступним загальним форматом: <IMG SRC="picture.gif">
