Міністерство загальної та професійної освіти
Свердловської області.
Навчально-технічний центр «Омега-1»
Предмет: Інформатика
Розробка web сайту на основі HTML з використанням JavaScript.
Виконавець: Неуймін Микола
учень 11 «Б» класу
Керівник: Речкалова Н.В.
вчитель ІХТ
Єкатеринбург 2005.
Зміст:
Введення .. 4
Історія HTML .. 5
Версії HTML .. 5
Гіпертекст .. 6
Структура WEB-сторінки .. 8
<HTML> </ Html> .. 8
<HEAD> </ Head> .. 9
<TITLE> </ Title> .. 9
<STYLE> </ Style> .. 9
<META> .. 9
<BODY> </ Body> .. 9
<! - Коментар --!>.. 10
<H1> <h1> .. 10
<HR> .. 10
<A> </ A> .. 11
Перехід всередині одного документа. 11
Перехід до іншого документу. 12
<BASE> .. 14
Правила синтаксису .. 15
Кодування символів. 16
Використання символів. 16
Управління кольором .. 18
Конструктор документів .. 20
Додаток. Структура програми. 20
Ланцюжок .. 20
Застосування ланцюжків. 21
Ієрархія. 22
Укладемо картинку у фоновий паркет. 23
Графіка .. 27
Формат GIF. 27
Формат JPG .. 27
Як програмувати картинки .. 28
Картинка в тексті. 28
Зображення як посилання. 29
Побудова таблиць. 30
Що таке таблиця .. 30
Як задати таблицю .. 30
Атрибути команди TABLE .. 31
Атрибути команди TR .. 31
Атрибути команди TD (TH) 32
Багатоликі таблиці .. 33
Сторінкові відступи .. 33
Зауваження. 34
Багатошпальтової верстка. 34
Накладення картинок. 34
Зауваження. 35
Таблиці стилів .. 36
Рівні CSS. 36
Способи визначення таблиць стилів .. 36
Запис шаблону CSS .. 38
Угруповання й спадкування. 38
Селектори .. 39
Псевдокласи .. 40
Застосування таблиць стилів CSS. 40
CSS у форматуванні тексту. 40
Одиниці виміру в таблицях стилів. 41
Структурний форматування. 42
Введення в JavaScript .. 44
Використання JavaScript 1944
Важливість вивчення JavaScript 1944
JavaScript в дії .. 44
Введення / виведення інформації за допомогою JavaScript 1945
Об'єкти, методи і властивості. 45
Управління даними за допомогою змінних .. 46
Значення в мові JavaScript 1946
Змінні в мові JavaScript 1948
Масиви JavaScript і Escape-послідовності .. 49
Як користуватися масивами. 50
Вирази, умови, операції, рядки і числа .. 52
Що таке висловлювання й умови. 52
Знайомство з операціями. 53
Створення сценаріїв за допомогою функцій і подій .. 56
Опис браузерів .. 59
Перегляд WEB-сторінок .. 59
Microsoft Internet Explorer. 59
Netscape Communicator. 61
Термінологія .. 64
Практична частина .. 67
Список літератури ... 68

Введення

Термін HTML (Hyper Text Markup Language) означає "мова маркування гіпертекстів". Це поняття більш широке, включає в себе Інтернет і локальні мережі, редактори, браузери, різноманітні програмні продукти, компакт-диски, навчальні курси, дизайн і багато іншого. HTML - своєрідна протилежність складним мов програмування, відомим тільки фахівцям.
HTML давно перестав бути просто мовою програмування. Людина, який вивчав цю мову, знаходить можливість робити складні речі простими способами і, головне, швидко, що в комп'ютерному світі не так вже й мало. Гіпертекст підходить для включення елементів мультимедіа в традиційні документи. Практично саме завдяки розвитку гіпертексту, більшість користувачів отримало можливість створювати власні мультимедійні продукти і поширювати їх на компакт-дисках. Такі інформаційні системи, виконані у вигляді набору HTML-сторінок не вимагає розробки спеціальних програмних засобів, так як всі необхідні інструменти для роботи з даними (WEB-браузери) стали частиною стандартного програмного забезпечення більшості персональних комп'ютерів. Від користувача потрібно виконати тільки ту роботу, яка відноситься до тематики розроблюваного продукту: підготувати тексти, намалювати малюнки, створити HTML-сторінки і продумати зв'язок між ними.
HTML, як основа створення WEB-сторінок, має пряме відношення і до нового напряму образотворчого мистецтва - WEB-дизайн. Художнику в Інтернеті недостатньо просто намалювати красиві картинки, оригінальний логотип, створити новий фірмовий стиль. Він повинен ще помістити все це в Мережі, продумати зв'язок між WEB-сторінками, щоб усе рухалося, відгукувалася на дію користувача, вражало уяву, викликало бажання створити що-небудь своє, оригінальне в цій галузі.
Мета роботи: вивчити мови програмування HTML і JavaScript.
Виходячи і вище поставленої мети при створенні даного проекту я поставив наступні завдання:
1. Вивчити та проаналізувати літературу з даної теми.
2. Вивчити принцип роботи браузерів.
3. Створити оригінальний сайт.

Історія HTML

Версії HTML

Перша версія HTML була розроблена в 1989 році Тімом Бенерс-Лі для популярного в минулому браузера Mosaic. Але в той час ні для мови, ні для браузера не знайшлося гідного застосування. У 1993 році з'явився HTML +, і ця версія також залишилася практично непоміченою. Початок широкого використання гіпертексту дала версія 2.0, яка, з'явилася в червні 1994 року. Це був рік зростання популярності WWW по всьому світу. Елементи, включені у версію 2, в більшості своїй використовуються досі.
У версії 3.0 HTML, яка з'явилася через рік, була реалізована можливість промальовування математичних символів (знаків інтервалу, нескінченності, дробу, дужок і т.д.) за допомогою елементів мови. Під цю версію був розроблений браузер Arena. Але цей проект виявився тупиковим і не дістав подальшого поширення.
У 1996 році з'явився HTML 3.2. Це було новаторське рішення, в специфікацію мови були введені фрейми, які стали тепер дуже популярні у розробників WEB-сторінок. Навіть зараз на основі цієї специфікації можна реалізувати цікаві дизайнерські рішення. Практично всі сучасні браузери підтримують версію 3.2, тому автори WEB-сторінок впевнені в працездатності всіх елементів.
Поряд з офіційними специфікаціями мови, які розроблялися організацією W3C (W3 Консорціум), компанії-виробники браузерів створювали власні елементи (розширення). Згодом, деякі з цих елементів, після отримання загального визнання включилися в специфікацію наступних версій мови. Але новаторське рішення - фрейми, не були включені в специфікацію 3.2. Але браузери підтримували фрейми і багато книг, присвячені HTML, містили опис фреймів без згадки про те, що це нестандартні елементи. У наслідку, фрейми стали стандартом де-факто. У версії 4 вони вже були включені на повній підставі.
І навпаки, елементи APPLET і SCRIPT, необхідні для розширення HTML іншими програмними кодами версії 3.2, не зіграли тієї ролі, яку були покликані зіграти. Це пояснюється тим, що браузери різних версій по-різному інтерпретували програми на різних мовах JAVA, JAVASCKRIPT, Visual Basic (VBScript). У результаті не вдалося отримати достатньо надійний працюючий код, і дані мови використовувалися любителями HTML в основному для експериментів.
Офіційна специфікація HTML 4 (Dynamic HTML) з'явилася в 1997 році. У цей час вже було очевидно, що подальший розвиток гіпертексту буде здійснюватися за рахунок скрипт - програмування. Це виявилося трохи більше ефективним, ніж вводити в мову всі нові елементи. Що з'явилися в той час браузери (Netscape Navigator 4, Microsoft Internet Explorer 4 та ін) вже досить надійно інтерпретували програмний код (був встановлений певний рівень стандартизації). Проте проблеми у розробників ще залишилися. Як приклад можна відзначити, що багато скрипти починаються з визначення версії браузера, щоб потім використовувати той чи інший фрагмент коду. Очевидно, що на програміста лягає обов'язок тестування сторінок на всіх популярних в наш час браузерах.
У результаті, використання усіх можливостей Dynamic HTML стало долею програмістів досить великих організацій, де є умови для розробки складних програм і всебічного їх тестування. Творцям особистих WEB-сторінок часом доводиться шукати компроміс між надійністю та новаторством, щоб отримати достатньо грамотний HTML-код.

Гіпертекст

Вже досить багато часу витрачено на те, щоб навчитися за допомогою HTML і браузера виводити на екран тексти.
Але це просто тексти. Використовуючи потужний текстовий процесор, такий, як Microsoft Word, зверстати оголошення, лист брошуру і невелику книгу можна набагато швидше, і результат буде кращої якості.
При цьому не треба писати програми, вникати в усі тонкощі численних тегів та їх атрибутів. Працюючи в Worde, практично не треба думати ні про що, крім утримання власного твору. Різноманітний оформлювальний інструментарій має інтуїтивно-зрозумілий інтерфейс і численну бібліотеку шрифтів, ліній, значків, рамочок, орнаментів, фігур, картіночек та інших корисних "штучок", які роблять текст на екрані і папері приємним для ока. За умови, звичайно, що ви не позбавлені смаку і почуття міри.
Так чому ж у всьому світі вибухнув справжній бум HTML-програмування? Збувається мрія А. П. Єршова: програмування стає другою грамотністю, народним захопленням.
Головних причин популярності HTML три. Ось вони в порядку зростання важливості.
HTML-програмування дуже просте. У ньому немає традиційних алгоритмічних структур, таких, як розвилка, цикл, процедура. Воно лінійно у своїй основі.
(Відступом від цієї тези є посилання. З їх допомогою можна організувати розгалуження і процедурний виклик. Про це йтиметься нижче. Однак, ці кошти надто примітивні для серйозного зіставлення з аналогічними структурами мов типу Сі чи Паскаль.)
Багато авторів підручників навіть соромляться називати HTML-тексти програмами. Роботу HTML-проектувальника вони називають розміткою тексту. Насправді, в цій назві укладена методична помилка. Адже вона (назва) передбачає такий порядок роботи:
береться звичайний текст
і розмічається, тобто, на нього накладається сітка з тегів так, щоб браузер зміг показати рядки тексту на екрані.
Однак, хороші гіпертекстові документи при такому підході отримати набагато складніше, ніж у випадку коли, структура HTML-документа планується ще до написання текстів. Адже гіпертекст влаштований принципово інакше (див. третю причину).
Переносимість.
Якщо, працюючи в Word'e, ви створюєте документ для власного споживання, у вас немає проблем. Немає проблем і тоді, коли ви посилаєте свою роботу у світ як друковану копію. Якщо ж ваш партнер, видавець або колега просить надіслати електронну версію - починаються проблеми.
Для того щоб документ з'явився на екрані в абонента, необхідно, щоб його комп'ютер і операційна система (платформа) дозволяли запустити ваш улюблений редактор.
Для того щоб документ завантажився в Word, вкрай бажано збіг версій цього продукту у вас і вашого колеги.
Для того, щоб текст на екрані не виглядав як давньонорвезького манускрипт, необхідно, щоб ваш партнер мав на своєму комп'ютері шрифти, які були використані при створенні вашого тексту.
Але навіть, якщо всі ці умови виконані, все одно мало шансів на те, що ваш товариш побачить текст неспотвореним (картинки вилазять з рамок, межі сторінок пливуть по тексту ,...). Це відбувається тому, що ваш Word і Word вашого партнера налаштовані по-різному.
Після того, як по телефону (або електронною поштою) редактори будуть налаштовані однаково, текст все одно може виглядати по-різному вже з причин, відомим тільки фірмі Microsoft.
Все, про що говорилося, називається непереносимістю продукту. Не в тому сенсі, що продукт когось не любить, а в тому, що різним користувачам неможливо, або вкрай важко, відображати у себе те, що зроблено в іншому місці.
HTML-документ є стерпним продуктом. Це означає, що авторський праця буде легко доступний величезній кількості користувачів, незалежно від марки комп'ютера і типу операційної системи. Саме це властивість HTML-документів, а також їх відносно малий розмір, дозволили з успіхом використовувати HTML-технологію для підготовки WWW-сторінок в Інтернеті.
Переносимість HTML-документа досягається за рахунок того, що пересилається не екран зображення, а програма. А зображення будує браузер, виконуючи команди цієї програми. Щоправда, і тут не все гладко. Різні браузери можуть працювати трохи по-різному.
HTML-документ - це гіпертекст.
Звичайний текст має лінійну структуру. І хоча користувач може читати будь-які його сторінки і рядки, гортаючи документ на екрані або в паперовій книзі, автор припускає, що текст читається по порядку. Спочатку перша сторінка, потім друга і так далі.
Перший етюд до гіпертексту
Деякий порушення лінійності звичайної книги вносять виноски, посилання на інші сторінки і посилання на іншу літературу.
Передбачається, що користувач може перервати лінійне читання в місці посилання, подивитися іншу частину тексту, що читається або навіть зовсім інший текст, а потім продовжити читання з місця переривання.
Другий етюд до гіпертексту
З маси лінійної текстової продукції виділяються словники, довідники, енциклопедії. Фізично текст влаштований лінійно: за сторінкою 10 обов'язково слід сторінка 11, а за сотий - сто перша. Однак, передбачається, що читач звертається до книги для довідки, а не читає її всю підряд від кірки до кірки.
Для спрощення навігації користувача в таких книгах передбачаються докладні змісту, алфавітні та тематичні покажчики. Розділи словника чи довідника мають систему розвинених перехресних посилань. (Пам'ятаєте як у Лема: сепульки - предмет для сепулькаціі, див. сепулькація. СЕПУЛЬКАЦІЯ - дія, що виконується за допомогою сепульки, див. сепульки.)
Третій етюд до гіпертексту
У століття бурхливих комп'ютерних технологій якось не хочеться вручну копатися у великому словнику. Чому б цю рутину не доручити "залізному" одного з "м'якої" душею? Вжене словник в "залізо" і налаштуємо "душу". Клацнув мишкою по потрібному слову - отримав результат: потрібний розділ книги на екрані.
Останній етюд до гіпертексту
Можливості комп'ютера народжують принципово нову ідею: чому б спочатку не проектувати текст в розрахунку на можливість читання не по-порядку, а за контекстом. Такий підхід дозволяє різним користувачам переглядати текст орієнтуючись, на свої смаки, рівень володіння темою і поставлені завдання.
Структура комп'ютерної книги стає суттєво нелінійною, вона навіть перестає бути ієрархічною, а швидше нагадує сплутані рибальську мережу або порцію спагеті, перекинуту на підлогу.
Для навігації по такій мережі передбачається простий спосіб: ті фрагменти документа, які мають переходи на інші його частини, якимось чином виділені. Просте інтерфейсне дію на такому посиланню (натискання на Enter або мишачий клацання) перекидають користувача в інший інформаційний вузол.
Подивився, повернувся назад, або, не повертаючись, продовжив подорож за новою посиланням.

Синтаксис HTML.

Структура WEB-сторінки

Заготівля типовою WEB-сторінки:
<HTML>
<HEAD>
<TITLE> Структура WEB-сторінки </ title>
<STYLE> H2 {font-family: Arbat;} CODE {font-family: Arial;} </ style>
<META http-equiv. = "Content-Type" content = "text / html; chariest = windows-1251">
<META Name = "Author" content = "Pavel Trizno">
<META Name = "Keywords" content = "HTML, document, element">
</ Head>
<BODY Bgcolor = #FFFFFF>
<! - Коментар до сторінки -!>
<A Name = "top> </ a>
Перехід до <A href = "#bottom"> кінець </ a> документа <P>
Перехід до <A href = "#S001"> <B> посиланням 1 </ b> </ a> <P>
<P>
<HR>
<H1> Заголовок 1 </ h1>

Аплет (applet) - програма, передана на комп'ютер клієнта у вигляді окремого файлу і запускається при перегляді Web-сторінки.
Скрипт або сценарій (skript) - програма, включена до складу Web-сторінки для розширення її можливостей. Браузер Internet Explorer в певних ситуаціях виводить повідомлення: «Дозволити виконання сценаріїв на сторінці?». У цьому випадку маються на увазі скрипти.
Розширення (extension) - елемент, що не входить в специфікацію мови, але використовується, забезпечуючи можливість створення нового цікавого ефекту форматування.
CGI (Common Gateway Interface) - загальна назва для програм, які, працюючи на сервері, дозволяють розширити можливості Web-сторінок. Наприклад, без таких програм неможливе створення інтерактивних сторінок.
Програмний код або код - аналог поняття «текст програми».
Код HTML - гіпертекстової документ у своєму первісному вигляді, коли видно всі елементи і атрибути.
World Wide Web, WWW або Web - Всесвітня павутина, розподілена система доступу до гіпертекстових документів, яка існує в Інтернеті, HTML є основною мовою для створення документів у WWW. Вивчаючи його, ми вивчаємо частина цієї системи, хоча область застосування мови набагато ширше

Web - сторінка - документ (файл), підготовлений у форматі гіпертексту і розміщений в World Wide Web.
Сайт (site) - набір Web-сторінок, що належать одному власнику.
Браузер (browser) - програма для перегляду Web - сторінок.
Користувацький агент (user agent) - браузер або інша програма, що працює на комп'ютері - клієнті.
Завантаження (downloading) - копіювання файлів з сервера на комп'ютер - клієнт.
URL (Uniform Resource Locator) - універсальний покажчик ресурсу - адреса деякого об'єкта в Інтернеті. Типовий URL для WWW має вигляд: http:// www, назва, домен / ім'я файлу.
Тут назва - це частина адреси, який часто вживається для позначення власника сайту, а домен - позначення великого «розділу» Інтернету: країни, області діяльності і т. д. URL використовується для того, щоб вказати конкретну Web - сторінку або графічний файл в гіперпосиланнях , а також скрізь, де потрібно однозначно визначити місце розташування Web - сторінки або файлу.
Базовий URL - Частина адреси, яка є спільною для всіх посилань поточної Web-сторінки.
Базовий колір - кожен колірний відтінок на екрані монітора виходить з'єднанням трьох базових кольорів: червоного, зеленого, синього.
Колірний канал - інтенсивність червоного, зеленого, синього кольору на екрані монітора. Колір кожного пікселя визначається як комбінація цих трьох величин.
Гамма - корекція - створення нелінійної залежності між реальною інтенсивністю базового кольору і отриманої яскравістю на екрані монітора. Зображення, отримані без гамма - корекції, виявляються більш темними, так як монітор відтворює різні градації яскравості не лінійно по відношенню до їх числовому вираженню. Зміна параметра «гамма» часто використовують в графічних редакторах при роботі із зображенням.

Практична частина

Лістинг сайту:
<html>
<HEAD>
<TITLE> Школа № 100 </ title>
<META Content="text/html; charset=windows-1251" http-equiv=Content-Type>
<META Content="" name=Description>
<META Content="" name=Keywords>
<META Content=Nikolay name=Author>
<SCRIPT language = JavaScript1.2
src = "search / search.js"> </ SCRIPT>
<SCRIPT language = JavaScript1.2
src = "search / searchEngine.js"> </ SCRIPT>
<STYLE>
p, span, form, input, hr, textarea {
font-family: Tahoma, Verdana, Arial, Sans serif;
font-size: 11px;
margin: 0px; padding: 0px;
vertical-align: middle;
}
. Vmarg {margin-top: 4px;}
. Hmarg {margin-left: 5px; margin-right: 5px;}
. UserData {BEHAVIOR: url (newhome0.htm)}
img {margin: 0px; padding: 0px;}
. Checkbox {border: none; width: 17px; height: 11px; vertical-align: middle; text-align: left; margin: 2px;}
. B {font-weight: bold;}
. Select {height: 21px; vertical-align: top; border: # A2B1C9 1px solid; background-color: # FFFFFF;}
. Button {height: 21px; vertical-align: top; font-family: Verdana, Arial, Sans serif; font-size: 10px;}
. But {height: 21px; vertical-align: bottom; font-family: Verdana, Arial, Sans serif; font-size: 10px;}
input, textarea {border: # A2B1C9 1px solid; height: 21px; vertical-align: bottom; font-family: Verdana, Arial, Sans serif; font-size: 11px;}
. Head {background-color: # 084D6C;}
. Height1 {height: 1px;}
. Headline {background: # A7C1DD; padding: 0px; margin-top: 2px; margin-bottom: 2px;}
. Headline_m {padding: 0px; margin: 0px;}
. Headline1 {text-align: left; color: # FFFFFF; font-weight: bold; margin: 2px; margin-left: 3px;}
. Text {text-align: justify; padding: 2px; margin: 2px; color: # 26486E;}
a {text-decoration: none;}
a: hover {text-decoration: none;}
a.nav {color: # FFFFFF;}
a.nav: hover {color: # FF0000;}
a.copyr: visited {color: # 074C6B; text-decoration: none;}
a.copyr: hover {color: # 074C6B; text-decoration: underline;}
a.copyr {color: # 074C6B;}
. W {color: # FFFFFF;}
. R {color: # FF0000;}
a.podrobnee {color: # AB7A2C; padding: 10px;}
a.podrobnee: hover {text-decoration: underline;}
. Mi1 {padding: 4px; background-color: # 5FA4DE;}
. Mi {padding: 2px; background-color: # 4D81BA; border-bottom: 1px solid White; padding-left: 4px;}
. Mi2 {padding: 2px; padding-left: 4px;}
. Mlink {padding: 0px; background-color: # 529ADA;}
a.al {
color: # FFFFFF;
background-image: none;
width: 181px;
height: 43px;
text-align: left;
font-weight: bold;
padding: 2px 5px 0px 10px;
border-bottom: 1px solid # FFFFFF;
}
a.al: hover {color: # 771C00; background-image: url (but_on00.gif); height: 43px; width: 180px;}
. Ramka {margin: 3px; border: 1px solid # A2B1C9; background-color: # 3273bb; text-align: center;}
. Copyright {margin-left: 5px; color: # FFFFFF;}
div.win {
overflow: scroll;
overflow-x: hidden;
scrollbar-face-color: # 306CAD;
scrollbar-shadow-color: # A7C1DD;
scrollbar-highlight-color: # A7C1DD;
scrollbar-3dlight-color: # 306CAD;
scrollbar-darkshadow-color: # 306CAD;
scrollbar-track-color: # ffffff;
scrollbar-arrow-color: # ffffff;
}
body {
scrollbar-face-color: # 306CAD;
scrollbar-shadow-color: # A7C1DD;
scrollbar-highlight-color: # A7C1DD;
scrollbar-3dlight-color: # 306CAD;
scrollbar-darkshadow-color: # 306CAD;
scrollbar-track-color: # ffffff;
scrollbar-arrow-color: # ffffff;
}
</ STYLE>
</ Head>
<body aLink=#006699 link=#000066 bgColor=#ffffff leftMargin=0 topMargin=0 marginheight="0" marginwidth="0" text="black" vlink="purple" style="skrolling:no">
<table align=center border=0 bordercolor=black border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan=3>
<table background="img\fon1.gif" border=0>
<tr>
<td> <img src="img\admin.jpg"> </ td>
<td width="100%" align=center> <img src="img\adnin1.gif" align=center> </ td>
<td> <img src="img\flag1.gif" align=right> </ td>
</ Table>
</ Td>
</ Tr>
<tr>
<td colspan=3 height="7"> </ td>
</ Tr>
<tr>
<td colspan=3 background="img\fon4.gif" height="24"> </ td>
</ Tr>
<tr>
<td colspan=3 height="7"> </ td>
</ Tr>
<tr>
<td background="img\fon1.gif" width="10" valign="top">
<a index.htm> <img src="img\home.gif" border=0> </ a> <br>
<a 01.htm> <img src="img\hystor.gif" border=0> </ a> <br>
<a 02.htm> <img src="img\peopls.gif" border=0> </ a> <br>
<a 03.htm> <img src="img\model.gif" border=0> </ a> <br>
<a 04.htm> <img src="img\obraz.gif" border=0> </ a> <br>
<a 05.htm> <img src="img\sou.gif" border=0> </ a> <br>
<a 06.htm> <img src="img\kontak.gif"border=0> </ a> <br>
</ Td>
<td width="65%" valign="top" height="890" bgcolor="#FAF8F8">
<table width="100%">

<tr>

<td> <p> </ p> </ td>
</ Tr>
<tr>
<td> <P id=sR align=justify> </ td>
</ Tr>
</ Table>
</ Td>
</ Td>
<td height="100%" valign="top">
<table width="182" border="0" cellspacing="0" cellpadding="2">
<tr height="18" align="right">
<td valign="middle" width="100%" background="grad.gif" height="18"> <p> Опитування </ p> </ td>
</ Tr>
<tr>
<td colspan="3" bgcolor="#ffffff" height="200">
<div id="winnews" style="height:350;"> </ p> </ div> </ td>
</ Tr>
<table width="182" border="0" cellspacing="0" cellpadding="2">
<tr height="18">
<td valign="middle" width="100%" height="18"> <p> Знайти </ p> </ td>
<td width="18" height="1" height="18"> </ td>
</ Tr>
<tr>
<td height="100" colspan="2" bgcolor="#ffffff">
<table border="0" cellpadding="0" cellspacing="0">
<div align="center"> <center>
<FORM Name=searchform onsubmit="find();return false;"> <TBODY>
<tr> <td nowrap> <p> Пошук по сайту </ p> <p> <input style="width:143px" size="11" value="" name=searchbox maxlenght="100"> </ p > <p align="right"> <input onclick=find(); type="button" value="Найті "> </ p> </ td> </ tr>
<tr>
</ Td>
</ Tr>
</ Table>
</ Table>
</ Td>
</ Tr>
<tr>
<td colspan=3 height="7"> </ td>
</ Tr>
<tr>
<td colspan=3 background="img\fon4.gif" height="24"> </ td>
</ Tr>
<tr>
<td colspan=3 height="100"> </ td>
</ Tr>
</ Table>

Лістинг скриптів:
1. Search. Js
<! -
function info (name, link, info) {
this.name = name;
this.link = link;
this.info = info;
}
var searchInfo = new Array ();
searchInfo [0] = new info ("Головна", "index.htm", "20.12 Гра Найрозумніший 6-7 класи 25.12 КВН 27.12 Конференція по боротьбі проти залежностей 20.01 Збір макулатури (зібрано 4 тонни) 11.02 Вибори президента ради школи Надалі планується 14.02 День Святого Валентина У програмі: - концерт - дискотека - робота пошти закоханих 19.02 Огляд ладу та пісні 22.02 Гра Лицарський турнір 5 7 класи 26.02 День сім'ї ");
searchInfo [1] = new info ("історія 1 969 1977", "01_1.htm", "I етап - становлення, 1969 - 1977 роки, створення єдиного колективу <br> педагогів, учнів, батьків. Сформувалися міцні традиції в естетичному напрямку освіти , склалися творчі колективи: хор учнів <br>, ансамбль педагогів, шкільний <br> театр, які мали успіх не лише в районних конкурсах, а й міських. Як відзначали вчителі шкіл № 22, 28, де продовжували навчання діти, випускники школи- восьмирічки № 100 відрізнялися життєрадісністю і взаєморозумінням. ");
searchInfo [2] = new info ("Історія 1977 1997", "01_2.htm", "II етап - функціонування, в 1978 році школа набула статусу середньої загальноосвітньої. \ Це призвело до подальшого розвитку її потенціалу, колектив вчителів поповнився новими талановитими педагогами , що мають досвід роботи в середній школі. \ Контингент учнів визначила специфічна соціальне середовище. \ В основному це були на 65% сім'ї робітників другого покоління уралмашевцев і 35% сім'ї ІТП та інтелігенції. \ У той період більшість батьків пов'язували долю своїх дітей із заводом і прагнули дати їм середню або вищу технічну освіту. \ Тому в школі традиційно величезне значення надавалося точних наук. \ У 1988 - 1989 р.р. школа вступила в смугу кризи, в якій знаходилася вся радянська система. \ Були втрачені колишні ціннісні орієнтири, які стали підмінятися цінностями матеріального збагачення будь-якою ціною. \ Поряд з цим, поступово почалися процеси пробудження і зростання суспільної самосвідомості. \ У 90-ті роки XX століття змінилися цільові орієнтири нашої держави. \ Товариство звертається до визнання позиції соціальних груп і прав конкретної людини. \ Цим обумовлений наступний етап розвитку школи. \ У 1988 - 1989 р.р. школа вступила в смугу кризи, в якій знаходилася вся радянська система. \ Були втрачені колишні ціннісні орієнтири, які стали підмінятися цінностями матеріального збагачення будь-якою ціною. \ Поряд з цим, поступово почалися процеси пробудження і зростання суспільної самосвідомості. \ У 90-ті роки XX століття змінилися цільові орієнтири нашої держави. \ Товариство звертається до визнання позиції соціальних груп і прав конкретної людини. \ Цим обумовлений наступний етап розвитку школи. \ II етап - пошуку ідей забезпечення прав особистості в освітньому процесі через диференціацію в навчанні. \ У 1992 році прийнята I програма розвитку школи. \ Діяльність педагогічного колективу була спрямована на забезпечення умов для становлення учня як особистості, з різним рівнем здібностей і потреб, для реабілітації відстаючих і надання можливості просунутого навчання тим, хто здатний вчитися з випередженням. У період до 1995 року була проведена жорстка диференціація за рівнем навченості, створені гомогенні класи: класи корекційно-розвиваючі, компенсуючі. Математичної і гуманітарної спрямованості, розвивального навчання за системою Ельконіна Д.Б. і Давидова У . В. \ Однак згодом ми відмовилися від ранньої жорсткої диференціації, зберігши лише спеціальні корекційні класи для дітей із затримкою психічного розвитку. Так як в гомогенному класі обмежуються можливості розвитку особистості. \ У 1996 році була розроблена нова концепція і програма розвитку школи, де провідною ідеєю стала ідея адаптивного диференційованого навчання. Особливу увагу в цей період педагогічний колектив приділяв конструювання уроку залежно від схильностей, можливостей і здібностей дітей у класах змішаного типу. Здійснювався пошук різних форм і методів навчання для максимального розвитку кожної дитини, апробовувалися у початковому і середній ланці технології розвивального навчання. Була розпочата робота з освоєння програми поглибленого вивчення математики та створення УМК для класів гуманітарного спрямування на завершальній стадії основної школи. \ У 1997 році надійшло замовлення батьків майбутніх десятикласників на відкриття підготовчих курсів до вузу на базі школи і був укладений договір з УГТУ -УПІ. \ Даний етап розвитку школи характеризується бурхливим зростанням педагогічної майстерності вчителів. Методична робота сприяла становленню статусу педагога як суб'єкта освітнього процесу, оскільки було направлено не тільки на підвищення теоретичних знань та методичних умінь, а й на розвиток самостійності, відповідальності, рефлексивності (здатності осмислювати свої дії, самопізнання). ");
searchInfo [3] = new info ("Історія 1998-2002", "01_3.htm", "У 1998 - 1999 р.р. школа пройшла процес ліцензування та атестації. \ Основні види послуг зафіксовані у ліцензії, і школа отримала право на освітню діяльність за програмами поглибленого вивчення математики, корекційним освітнім програмам, поряд із загальноосвітніми програмами навчання. \ Враховуючи соціальне замовлення батьків та учнів, у 2000 році був укладений договір з УДПУ на створення підготовчих курсів для класів гуманітарного спрямування (9 - 11 кл.), в перспективі планується спільна робота з УрГСХА (відкриття профільних сільськогосподарських 10 класів). \ Таким чином, у діяльності освітньої установи за ці роки відбулися серйозні цільові, змістовні, організаційно-методичні та управлінські зміни, на аналізі яких ми зупинимося нижче, і проведені нами соціологічні дослідження підтверджують наше припущення про те, що на шляху традиційного, негуманного підходу до зростаючої особистості не могутнаступіть якісні зміни в системі освіти, в тому числі в роботі нашої школи, завдяки яким досягався б головний результат - виховання вільної і відповідальної, духовно і морально розвиненої особистості . \ Рішення такого важливого завдання можливо, на наше переконання, у навчальному закладі, переведеного з умов стабільного функціонування в розвиваються, робота якого спрямована на розвиток особистості дитини в процесі духовного взаємодії з постійно вдосконалюється особистістю дорослого. ");
searchInfo [4] = new info ("Додаткова освіта", "04.htm", "У школі діє 18 дитячих об'єднань за наступними напрямками: - спортивне - художньо-естетичне - Прикладне (театр модниця вигадливий гачок, зроби сам, юний редактор і юнний оформлювач) - проедметние (еколлогія уралу літертури уралу цікавий французький логіка мова) - розвиваючі гуртки (МДО) ");
searchInfo [5] = new info ("Додаткова освіта Гуртки", "04_1.htm", "Театр Юний програміст Танці Хор");
searchInfo [6] = new info ("Додаткова освіта Секції", "04_2.htm", "Волейбол Баскетбол Карате Кіокушинкай ОФП");
searchInfo [7] = new info ("Додаткова освіта Платні послуги", "04_4.htm", "Ці заняття із задоволенням відвідують діти з 3 по 6 клас. \ На уроках вони освоюють ази комп'ютерної грамотності. \ Інформатика допомагає їм розвивати уважність зосередженість , пам'ять і мислення. \ Хлопці дізнаються, як виникають помилки, як їх запобігати й розшукувати. \ Але найголовніше: «Інформатика вчить їх вчитися !»");
/ / SearchInfo [n] = new info ("","","");
//-->
2. SearchEngine.js
var msg = "";
var yes = false;
var found = 0;
var bold = "";
var boldN = "";
var resultsN = "";
function find ()
{
var search = "";

search = document.searchform.searchbox.value;
if (search.length <3) {return;}
var searchFor = search.toUpperCase ();

for (i = 0; i <searchInfo.length; i + +)
{
for (n = 0; n <searchInfo [i]. info.length; n + +)
{
var results = searchInfo [i]. info.substring (n, n + search.length);
if (results.toUpperCase () == searchFor)
{
yes = true;
bold = searchInfo [i]. info.substring (0,40);
bold +=".....";
break;
}
}
if (yes == true)
{
found + +;
boldN = searchInfo [i]. name;
msg + = '<a "'+searchInfo[i].link+'">' + boldN + '</ a> -' + bold + '<br>';
yes = false;
}
}
var table = "<b> РЕЗУЛЬТАТИ ПОШУКУ: </ b> Знайдено <font size=+1 color=#00008B>" + found + "</ font> посилань" + '<font color=#FF0000> <b>' + search + '</ b> </ font> <br> <br>';

if (document.all) document.all.sR.innerHTML = table + '\ n' + msg;
if (document.layers)
{
/ / Тут відкрити нове вікно, куди все і записати.
var neww = window.open ("", "neww");
neww.document.write (table + '\ n' + msg);
neww.document.close ();
}
window.status = "Пошук завершено.";

yes = false;
found = 0;
document.forms [0]. searchbox.value = "";
resultsN = "";
bold = "";
msg = "";
boldN = "";
}

Висновок

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

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

1. Айзекс А. Dynamic HTML BHV-Санкт-Петербург 1998
2. Ганчаров А. Самовчитель HTML. Пітер 2000
3. Дарнелл Р. HTML 4 Енциклопедія користувача ДіаСофт 1999
4. Денисов Internet Explorer 5 Довідник Пітер 1999
5. Хоумер А. Dynamic HTML Довідник Пітер 1999
6. Петюшкін А.В., HTML. Експрес-курс. - СПб.: БХВ - Петербург, 2003
7. Кінгслі-Хью Е., JavaScript: навчальний курс. - СПб.: Пітер, 2002
8. http://www.robotland.ru/

<H2> Заголовок 2 </ h2>
<H3> Заголовок 3 </ h3>
<H3> Тема 4 </ h4>
<H3> Тема 5 </ h5>
<H3> Заголовок 6 </ h6>
<HR>
Тут розташована <B> посилання 1 </ b> <A name = "S001"> </ a>
<HR>
<P> Тут повинен розташовуватися оригінальний текст WEB-сторінки
<HR>
<A Name = "bottom"> </ a> <P>
Перехід в <A href = "#top"> початок </ a> документа
</ Body>
</ Html>
Якщо розглянути вихідні тексти різних WEB-сторінок, то можна легко побачити схожість їх структури. Це пояснюється тим, що документи створюються за певними правилами. В основу синтаксису мови HTML ліг стандарт ISO 8879:1986 «Information processing. Text and office systems. Standard Generalized Markup Language (SGML) ». Правда, існує велика різниця між стандартом офіційному і стандартом фактичним. HTML постійно розвивається, доповнюється новими елементами.
Розглянемо основні елементи HTML.

<HTML> </ Html>

Означає документ на мові HTML. Я вже згадував про те, що одним із принципів мови є багаторівневе вкладення елементів. Цей елемент є самим зовнішнім, так як між його початковим і ліжковим тегами повинна знаходиться вся WEB - сторінка. У принципі, цей елемент. Він має атрибути version, long і dir, якими в даному випадку рідко хто користується, і допускає вкладення елементів HEAD, BODY і інших, визначальну загальну структуру WEB-сторінки. Кінцевим тегом </ html> закінчуються всі документи у форматі HTML.

<HEAD> </ Head>

Область заголовка Web - сторінки, її перша частина. HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути IANG, DIR, повинен включати елемент TITLE і допускає вкладення елементів BASE, META, LINK, OBJECT, SCARIPT, STULE.

<TITLE> </ Title>

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

<STYLE> </ Style>

Елемент для опису стилю деяких елементів Web - сторінки. У файлі Strukt. Htm призначені шрифти для елементів h2, code. Для кожного елемента існує стильове оформлення за замовчуванням, тому вживання елемента style не обов'язково, але бажано. Цей елемент введений порівняно недавно, без нього немислима робота в додатках World, Excel.

<META>

Елемент містить службову інформацію, яка не відображається при перегляді Web-сторінки. Всередині нього немає тексту у звичайному розумінні, тому немає і кінцевого тега. Кожен елемент Meta містить два основних атрибуту, перший з яких визначає тип даних, а другий - зміст. Ось кілька прикладів meta - даних:
Дата, що позначає термін придатності документа:
Name - "Expires" content = "Дата"
Адреса електронної пошти:
Name = "Reply - to" content = "Ім'я @ Адреса"
Ім'я автора Web-сторінки:
Name = "Author" content = "Ім'я автора "
Набір ключових слів для пошуку:
Name = "Keywords" content = "слово 1, слово 2, слово 3 ..."
Короткий опис змісту Web-сторінки:
Name = "Description" content = "Зміст сторінки"
Опис типу і характеристик Web - сторінки:
Name = "Content - Type" content = "Опис сторінки"
Вказівка програми, в якому була створена Web - сторінка:
Name = "Generator" content = "Назва HTML - редактора"
Атрибут Name використовується додатком - клієнтом для отримання додаткової інформації про Web - сторінках та їх упорядкування. Його часто замінюють атрибутом http - equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.
Елемент META може містити URL. Шаблон атрибута такий:
URL = "http:// адресу"

<BODY> </ Body>

Цей елемент містить в собі гіпертекст, який визначає власне Web - сторінку. Кінцевий тег цього елемента треба шукати в кінці HTML-файлу. Усередині елемента BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Усередині початкового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю.
Атрибут, що визначає фон сторінки, є одним з найбільш важливих для дизайну.
background = "Шлях до файлу"
Більш просте оформлення фону зводиться до завдання його кольори:
bgcolor = "# RRGGBB"
Кольори фону задається трьома дворозрядними шестнадцатерічнимі числами, які визначають інтенсивність червоного, зеленого і синього. Обидва наведених вище ознаки не є альтернативними і часто використовуються спільно: якщо з яких-небудь причин не може бути знайдений малюнок фону, використовується колір.
Оскільки фон станиці може зміняться, необхідно мати можливість підбирати відповідний колір тексту. Для цього є наступною атрибут:
text = "# RRGGBB"
Для завдання кольору тексту гіперпосилань використовуються наступні атрибути:
link = "# RRGGBB"
Точно так само можна задати колір для переглянуто гіперпосилань:
vlink = "# RRGGBB"
Можна також вказати зміна кольору для останньої вибраний користувачем гіперпосилання:
Alink = "# RRGGBB"

<! - Коментар -!>

У будь-якій мові програмування є конструкції, що дозволяють створювати довільні ремарки. HTML в цьому сенсі - не виняток. Текст, введень всередині цього елемента, ігнорується браузером. Ці елементи можуть розташовуватися в будь-якому місці WEB-сторінки. Ознакою коментаря служить знак оклику, а текст коментаря повинен обрамляти подвійним дефісом. Наприклад:
<! - Коментар -!>

<H1> <h1>

Елемент заголовка. Існує шість рівнів заголовка, які позначаються H1 ... H6. Тема рівня 1 самий великий, а рівень 6 забезпечує найменший заголовок. Для заголовків можуть використовувати атрибути, що задають вирівнювання вліво, по центру або праворуч:
align = "left"
align = "center"
align = "right"

<HR>

Горизонтальна лінія - дуже часто використовуваний елемент. По-перше, тому що з його допомогою дуже зручно ділити сторінку на частини.
По-друге, тому що вибір подібних елементів оформлення у автора сторінки дуже невеликий. Цей елемент не має кінцевого тега, але допускає ряд атрибутів для вирівнювання вліво, по центру, вправо, по ширині:
align = "left"
align = "center"
align = "right"
align = "justify"
Можна задати товщину лінії:
Size = товщина в пікселях
Можна керувати довжиною лінії:
width = довжина в пікселях
width = довжина у відсотках
Можна вибрати колір:
color = "колір"

<A> </ A>

HTML-документ може бути дуже великим, і в цьому випадку потрібно мати можливість швидкого переміщення до потрібного розділу документа. Для цього можна використовувати механізм гіперпосилань. Необхідно також у потрібних місцях тексту розставити відповідні мітки. Шаблон для створення міток такий:
<A Name = "> Довільний текст </ a>
У даному випадку даної рядку документа присвоюється ім'я, і, отже, в іншій частині документа або навіть на іншому документі може бути створена гіперпосилання, приводить в цю точку. Для переходу всередині документа можна використовувати наступну конструкцію:
<P> Перехід до <A href = "#метка"> мітці </ a> </ p>
Кілька подібних рядків можуть утворити своєрідне зміст Web-сторінки, які можна розмістити на початку і в кінці документа.
Читаючи цю роботу, ви, звичайно, вже досить багато попрацювали з посиланнями і розумієте, що це таке на практиці.
Ви зрозуміли, що:
гіпертекстові посилання серед інших елементів тексту виділяються кольором і підкресленням;
мишачий курсор на засланні змінює свою форму і перетворюється на вказівний перст;
для переходу за посиланням необхідно клацнути по ній мишкою;
для повернення із заслання необхідно використовувати навігаційну кнопку браузера "Назад" ("Back").
Якщо посилання утворюють вкладену ланцюжок, то кнопки "Назад" ("Back") і "Вперед" ("Forward") можна використовувати для руху по пройденому посилальної шляху в обидві сторони. Вони працюють як традиційні операції "відкочування" і "накатка" в більшості прикладних програм.
У наведеному нижче прикладі використовується ланцюжок вкладених посилань. Здійсніть невелику подорож. Спочатку, клацаючи посилання, дістаньтеся до тексту, в якому посилань вже немає. Потім, користуючись навігаційними кнопками браузера, "прогуляйтеся" з пройденого шляху вперед і назад.
Посилання можуть відводити не тільки в різні документи, але завантажувати на екран різні фрагменти одного й того ж тексту. В останньому випадку навігаційні засоби браузера працюють також.

Перехід всередині одного документа

Для завдання гіпертекстового переходу всередині документа використовують дві команди <A>. Перша команда з атрибутом href є джерелом переходу, друга з атрибутом name - приймачем.

Загальний вигляд програми
... <A # мітка> текст </ A> ... ... <A name = мітка> </ A> ...	Завдання переходу по мітці На екран виводиться посилання: текст Мітка. Сюди браузер приходить по посиланню. На екрані нічого не відображається.

Для організації переходу всередині документа потрібно:
Вибрати ім'я для позначки.
Ім'я повинно бути унікальним в HTML-програмі. Це означає, що інших позначок з таким ім'ям у програмі бути не повинно.
А що буде, якщо не послухатися цієї ради?
Коли однакових позначок кілька, браузер виконує перехід на найпершу мітку в програмі.
Ім'я може полягати в лапки.
Ім'я може складатися з будь-яких символів. У тому випадку, коли ім'я містить пробіли або ключові символи HTML, лапки обов'язкові.
Запрограмувати перехід по мітці.
У місці переходу треба написати команду <A # мітка> текст </ A>.
Тут:
# - Ключовий символ;
мітка - обране ім'я для позначки;
текст - запис, який буде виглядати на екрані браузера як посилання.
Встановити тег з позначкою на потрібному місці HTML-програми.
Перед фрагментом HTML-програми, на який повинен виконатися перехід записати команду-позначку <A name = мітка> </ A>.
При цьому:
ім'я мітки повинно бути те ж саме, що і в команді, яка задає перехід;
на екрані тег-мітка <A name = мітка> ніяких зображень не будує.

Перехід до іншого документу

Для того, щоб браузер завантажив у своє вікно новий HTML-документ, потрібно записати в програмі заслання за допомогою команди <A> з атрибутом ім'я_файлу.

Загальний вигляд програми
... <A ім'я_файлу> текст </ A> ...	Виконати файл "ім'я_файлу". На екран виводиться посилання: текст При клацанні користувача на засланні браузер будує на екрані документ за програмою, заданої у файлі "Ім'я_файлу".

Документ
Програма (файл doc1.htm)
Програма, на яку налаштована посилання в документі (файл doc2.htm)
Перехід браузера

Перехід до мітці іншого документа
Ми навчилися вирішувати такі завдання:
передавати управління в іншу частину документа;
передавати управління в іншу програму (HTML-файл).
Ці два методи можна об'єднати і передати управління з одного документа до мітці усередині іншого.

Загальний вигляд програми

Перший HTML-файл
...
<A ім'я_файлу # мітка> текст </ A>
...
Другий HTML-файл
...
<A name = мітка> </ A>
...

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

Документ
Програма (файл doc3.htm)
Програма, на яку налаштована посилання в документі (файл doc4.htm)
Перехід браузера

Імена файлів і посилання на них
Імена файлів з HTML-програмами мають розширення htm або html.
Без необхідності позначення html краще не використовувати, тому що не всі операційні системи розуміють 4 символи в розширенні імені файлу.
Імена для файлів завжди намагаються придумати осмислені. Коли файлів багато, порядок в іменах має особливе значення.
Якщо, наприклад, ваш многофайловий гіпертекст має ієрархічну структуру, намагайтеся в позначеннях враховувати ієрархію. Так, основний файл зі змістом можна назвати 00.htm (або index.htm). Файл з першим розділом - 01.htm і так далі (можливо до 99.htm). Коли глави мають файли-параграфи, їх імена виходять з імені глави додаванням двозначного номера параграфа. Так само роблять і з файлами-пунктами параграфа.
Пропонована нотація дозволяє по імені файлу визначити його приналежність. Наприклад, файл 0205.htm - описує побудову п'ятий пункту другого розділу, а файл 111299.htm - 99-один з попередніх пунктів дванадцятого параграфу 11-му розділі.
Якщо в теге <A> вказано ім'я файлу, браузер шукає файл у тому ж каталозі, в якому розташований файл з посиланням. Коли необхідно послатися на файл з іншого каталогу можна:
вказувати на засланні повний шлях до файлу, починаючи від імені дисководу;
вказувати на засланні шлях по відношенню до файлу з посиланням.
Другий спосіб набагато краще, тому що при правильному використанні дозволяє переносити ваш многофайловий гіпертекст з одного каталогу в інший і з одного комп'ютера на інший без додаткових налаштувань.

Нехай, наприклад, ваш гіпертекст розташований в каталозі BOOK кореневого каталогу диска C. У самому каталозі BOOK розташований файл зі змістом 00.htm. Решта файлів поміщені в підкаталоги 01, 02, 03, 04 в відповідності з приналежністю до тієї чи іншої чолі документа.

Як можна послатися з файлу 00.htm на файл 02.htm?
C: / BOOK/02/02.htm (абсолютна адресація)
./02/02.htm (Відносна адресація)
Перший спосіб призводить до нестерпності вашого продукту. Варто вам перезаписати, наприклад, каталог BOOK на диск D, як посилання перестають працювати.
Другий запис пропонує браузеру орієнтуватися на поточний каталог - про це говорить вказівка "./". Можна переміщати каталог BOOK в будь-яке місце і навіть перейменовувати його - посилання працювати будуть.
Відносне посилання з файлу 02.htm в файл 00.htm запишеться так: ../00.htm. Символи "../" вказують на батьківський каталог.
Зауваження
При запису шляху до файлу використовуйте косу риску з нахилом вправо, а не вліво, як прийнято в DOS, навіть якщо ваш браузер знаходить посилання і з левонаклонной рисою. Нахил риси стає суттєвим при розміщенні гіпертексту на сервері для доступу до нього з Інтернету. Сервери, як правило, працюють під операційною системою UNIX, а в ній рисочки - правонаклонний.

<BASE>

Елемент для завдання базового адреси (URL) для посилань. Це дозволяє опускати початкову частину адреси в посиланнях документа. Для використання цього елементу необхідно використовувати наступну конструкцію:
<BASE Href ="http:// компьютер/путь 1">
Фрагмент адреси путь1 не є обов'язковим. При формуванні повної адреси він буде відкинутий. Якщо в тексті документа зустрінеться відносна посилання
<A Href =" шлях 2/імя документа. Htm "> Видимий текст посилання </ a>,
то вона буде відповідати URL
http:// комп'ютер / шлях 2/імя документа. Htm
У тому випадку, коли треба поставити базовий адресу для локального диска (наприклад, D), повинна бути використана така конструкція:
<BASE Href =file://D:\путь\>
Тоді при вказівці відносної посилання можна буде ставити не тільки ім'я файлу, а й імена папок, в яких він знаходиться.
У виразі абсолютної посилання можна також опустити вказівку на схему доступу (file: / /) У цьому випадку буде враховуватися тільки ліва частина абсолютного посилання до першого лівого символу "\", тобто ім'я локального диска.

Правила синтаксису

При використанні кожного елемента важливо знати, які елементи можуть розташовуватися всередині нього, і всередині яких елементів може знаходитися він сам. Так, взаємне розташування елементів HTML, HEAD, TITLE, BODY повинно бути стандартним на будь-якій сторінці, в тих випадках, коли не використовуються фрейми. Якщо сторінка представляє собою документ планування фреймів, то замість елемента BODY використовується елемент FRAMESET.
Існують групи елементів, які використовуються спільно. До них належать елементи для створення таблиць, списків, фреймів. У цьому випадку порядок вкладення елементів визначається логікою створення того чи іншого об'єкта на сторінці. Таблиці та фрейми часто використовуються для того, щоб розмістити деталі сторінки (малюнки, текст та ін) в певному порядку. Наприклад, маючи в своєму розпорядженні малюнок всередині клітинки таблиці, можна домогтися певного його положення.
Велика кількість елементів, які використовуються для форматування тексту, допускають самі різноманітні варіанти вкладення. І самі вони обов'язково повинні розташовуватися всередині певних елементів.
Наприклад, є два абзаци (перший в зеленій рамці) і таблиця:
<P Style = "border: 3px solid green"> Текст абзацу 1 </ p>
<TABLE> ... </ Table>
<P> Текст абзацу 2 </ p>
Таблиця в даному випадку - незалежний елемент. Її можна, наприклад, вирівнювати незалежно від решти тексту.
Можна використовувати інший код:
<P Style = "border: 3px solid green "> Текст абзацу 1
<TABLE> ... </ Table>
<P> Текст абзацу 2 </ p>
Зник кінцевий тег першого абзацу. Тепер таблиця є частиною першого абзацу, і зелена рамка буде охоплювати таблицю і текст.
І навпаки, елемент P може знаходитися всередині таблиці: наприклад, один елемент комірки TD може містити кілька абзаців P.
Правила синтаксису поширюються і на використання стартового і кінцевого тегів, атрибутів і вмісту елементу. Не можна плутати поняття «елемент» і «тег». Елемент - це контейнер, що містить атрибути всередині стартового тега і корисну інформацію між стартовим і кінцевим тегами. Тег - це конструкція, укладена в кутові дужки і використовується для позначення області дії елемента.
Деякі елементи не мають кінцевого тега. Елементу BR, що позначає кінець рядка, не потрібен кінцевий тег. Деякі елементи можуть використовуватися з кінцевим тегом і без нього. Елемент абзацу P може мати кінцевий тег, але якщо тег не заданий, то ознакою закінчення дії елемента служить наступний елемент, який може логічно визначити кінець поточного абзацу: інший елемент P, елемент малюнка IMG, елемент списку UL, елемент таблиці TABLE та ін
Важливим правилом, яке не має виключень, є розміщення атрибутів елемента всередині початкового тега.

Кодування символів

Основною мовою Інтернету є англійська мова. Але для гіпертекстових документів передбачено використання національних алфавітів. Стандартним режимом відображення є кодування ISO Latin 1 (ISO 8859-1). Вона підходить як для MS-DOS (набір символів ASCCII), так і для Windows. У теж час браузери підтримують набір символів Unicode 2.0 (ISO10646), що дозволяє використовувати національні алфавіти. Це означає, що символи можуть кодуватися однобайтові числом (коди в межах 0-255) або багатобайтових (0-65 535). У першому випадку для використання національного алфавіту необхідний атрибут charset, оскільки одні й ті ж коди символів можуть бути інтерпретовані по-різному для різних кодових сторінок.
Кирилиця (Windows) та / або Кирилиця (КОИ8-Р) - це дві найбільш популярні в нашій країні кодування.
Якщо в документі є вказівка на певну кодову сторінку, то вибір шрифту буде зумовлений. Коди 32-127, тобто знаки пунктуації, цифри і букви латинського алфавіту, відображаються правильно, а коди 128-255 можуть відображатися по-різному.
Якщо кодова сторінка вказана неправильно, то, наприклад, при створенні гіпертекстових документів в MS FrontPage Exdivss в текст сторінки автоматично додається конструкція типу charset = xxxxx, яка не дозволяє використовувати кирилицю. У цьому випадку необхідно правильно вказати значення атрибуту: charset = windows-1251.
Якщо документ використовує кодування Unicode, то для роботи з ним підійдуть такі засоби, як Блокнот, Norton Commander або WordPad, і доведеться зупинитися на гіпертекстовому редакторі. У цьому випадку російська буква А буде виглядати в режимі «джерела» так А (в десятковій кодуванні). Таку сторінку буде складно читати і редагувати. Тому кожен новий редактор треба тестувати на можливість використання російських букв: набрати невеликий текст, зберегти документ, а потім переглянути його в режимі джерела.

Використання символів

У HTML і в браузерах реалізована можливість промальовування символів за їх кодами. Символи можуть бути загальноприйнятими, нестандартними і використовуваними в HTML як службових символів. Їх називають спецсимволи. Перший спосіб введення спецсимволи полягає у вказівці його коду. Наприклад, латинську букву А можна задати так: A. Для деяких символів передбачена мнемонічна кодування.
Часто використовувані спецсимволи (за стандартом ISO 8859 - 1):

Код символу	Числовий код	Мнемонічний код	Назва	Символ
34	"	"	Пряма лапки	"
38	&	&	Амперсанд	&
60	<	<	знак «менше»	<
62	>	>	Знак «більше»	>
153	™	& Trade	Троговими марка	™
160			Нерозривний пробіл
162	¢	¢	Цент	ў
163	£	£	Фунт	Ј
164	¤	¤	Знак валюти	¤
165	¥	¥	Йена	Г
166	\|	\|	Вертикальна рядок	\|
167	§	§	Знак параграфа	§
169	©	©	Знак копірайту	©
171	«	«	Ліва друкарський лапки	«
172	¬	¬	Знак заперечення	¬
174	®	®	Знак "зареєстровано"	®
176	°	°	Знак градуси	°
177	±	±	Знак "плюс мінус»	±
178	²	²	Ступінь 2	І
179	³	³	Ступінь 3	І
181	μ	& Mikro	Знак «мікро»	μ
182	¶	¶	Знак абзацу	¶
183	·	·	Точка-маркер	·
185	¹	¹	Ступінь 1	№
187	»	»	Права друкарський лапки	»
188	¼	¼	Одна четверта	ј
189	½	½	Одна друга	Ѕ
215	×	×	Знак множення / лапки /	*
247	÷	÷	Знак ділення	/

Для відділення символу від подальшого тексту треба вводити крапку з комою.
Мнемонічні символи бувають дуже корисні, особливо для тих символів, які не можна ввести з клавіатури. Наприклад, для вказівки дозволу екрану можна використовувати таку конструкцію:
640 × 480
Лапки, кутові дужки і амперсанд (<,>, &) є службовими в HTML. Якщо їх треба використовувати в звичайному тексті на Web-сторінці, то вони повинні бути вказані тільки за допомогою кодів.
Кирилиця теж може бути реалізована у вигляді набору спецсимволів. Російські літери розташовані (при кодуванні Windows-1251) в тому місці кодової таблиці, де спочатку розташовувалися латинські літери з тильдами, умляут. Тому англомовні редактори HTML при перемиканні клавіатурного регістру часто записують кирилицю у вигляді кодів.
Типи даних
Основним типом даних Web-сторінки є текстової тип. Існує багато елементів, які є контейнерами для тексту, або використовуються для форматування тексту. Числові і мнемонічні коди, що позначають символи, предваряются знаком амперсанд &. Таким чином, амперсанд і кутові дужки можуть бути введені в текст не на пряму, а тільки за допомогою кодів. Текстові дані, що є значеннями атрибутів, полягають в прямі подвійні лапки.
Числові дані потрібні тільки для вказівки значень атрибутів і записуються без лапок.
Гіперпосилання зазвичай складаються з двох частин: тексту підказки й адреси, який визначає координату переходу. Текст підказки або замінюючий його малюнок розташовується всередині елемента А, а адреса задається за допомогою атрибуту href. Гіперпосилання зазвичай виділяється на тлі тексту кольором або підкресленням. Вид покажчика миші обов'язково змінюється, коли він поміщається над гіперпосиланням.
Існують правила для визначення розмірів елементів. Розмір, заданий звичайним числом, виражається в пікселях. Наприклад, задається довжина горизонтальної лінії в 100 пікселів:
<HR Width = 100>
Горизонтальний розмір може бути заданий у відсотковому відношенні до ширини вікна браузера:
<HR Width = 50%>
Якщо розмір вікна буде змінений, то зміниться і довжина горизонтальної лінії.
Символ * може використовуватися для розділення простору сторінки в певних пропорціях. Два способи визначення фреймів (атрибут cols створює фрейми з вертикальним поділом), причому лівий фрейм у даному випадку завжди буде в три рази вужчий, ніж правий.
<FRAMESET Cols = "25%, 75% ">
<FRAMESET Cols = "1*, 3* ">

Управління кольором

Кодування кольору використовується для розфарбовування шрифтів, горизонтальних ліній та фону, інших елементів сторінки. Кольори позначаються англійськими назвами або числовими шестнадцатерічнимі кодами. Існує кілька атрибутів, значеннями яких є параметри кольору. Найпростіший спосіб визначити колір - написати назву кольору англійською мовою. Так, наприклад, задається червоний колір шрифту в елементі FONT:
Color = "red"
Допустимі назви кольорів:

Російська назва	Англійська назва	RGB - код
Аквамарин	Aqua	# 00FFFF
Білий	White	# FFFFFF
Жовтий	Yellow	# FFFF00
Зелений	Green	# 008000
Золотий	Gold	# FF0700
Індіго	Indigo	# 4B0080
Каштановий	Maroon	# 800000
Червоний	Red	# FF0000
Оливковий	Olive	# 808000
Помаранчевий	Orange	# FF0000
Пурпуровий	Purple	# 800080
Світло-зелений	Lime	# 00FF00
Сріблястий	Silver	# C0C0C0
Сірий	Gray	# 808080
Сизий	Teal	# 008080
Синій	Blue	# 0000FF
Ультрамарин	Navy	# 000080
Фіолетовий	Violet	# EE80EE
Фуксіновий	Fuchsia	# FF00FF
Чорний	Black	# 000000

Але в загальному випадку колір визначається RGB - кодом. Будь-який колір у цьому випадку є як комбінація червоного (R), зеленого (G), синього (B) кольорів, узятих в певних пропорціях. Частка кожної колірної складової визначається інтенсивністю кольору і виражається двуразрядним шістнадцятковим числом. У десятковому численні ці числа відповідають діапазону від 0 до 255. У Windows-95 це відповідає колірному режиму монітора True Color (24-розрядне двійкове кодування кольору).
У вище наведеної таблиці видно, що для формування стандартних кольорів часто використовуються або крайні значення інтенсивності базового кольору 00 і FF, або середнє значення 80. Вибравши колір, можна побачити його чисельні характеристики, і навпаки, задавши чисельні значення, отримати новий відтінок.
Ще один напрям застосування кольору: елемент HR, створює горизонтальну лінію, допускає використання ряду атрибутів. З їх допомогою лінію можна перетворити на кольоровий прямокутник. Його можна використовувати для поділу частин сторінки або в якості маркерів списку.
HTML - код, який малює веселку на Web-сторінці:
<FONT Color = "red "> Веселка </ front>
<TABLE Border = 0 width = 100%>
<TR> <TD Bgcolor = #FF3030> K
<TR> <TD Bgcolor = FFD000> 0
<TR> <TD Bgcolor = #F3FF5F> Ж
<TR> <TD Bgcolor = #00FF00> З
<TR> <TD Bgcolor = #6FD3F7> Г
<TR> <TD Bgcolor = # 5F72FDF> З
<TR> <TD Bgcolor = # B568F4> Ф
</ Table>
Колірна опрацювання Web-сторінки є альтернативою численних малюнків і дозволяє забезпечити більш швидке завантаження документа.

Конструктор документів

Пора від технічних деталей програмування перейти до більш важливих питань:
· Як скласти сценарій гіпертекстового документа?
· Як спроектувати зовнішній вигляд документа на екрані?

Додаток. Структура програми

Коли гіпертекст складається з декількох файлів, термін "документ" до нього вже не дуже підходить. Надалі будемо називати документом однофайловий гіпертекст. А для випадку, коли файлів багато, введемо термін "додаток".
Отже, є ідея створити красиве, корисне і зручне для користувача гіпертекстове додаток. З чого почати роботу?
Можна, звичайно, відразу писати теги, а там - як вийде. Сумнівно, що вийде добре.
Краще спочатку вирішити, який спосіб організації гіпертексту найбільше підходить для поставленої задачі, тобто, подумати над загальною структурою програми.

Ланцюжок

Це найпростіша структура. Документи, що становлять додаток, проглядаються користувачем по порядку, як сторінки в книзі. Кожен документ закінчується посиланням на наступний. Користувач рухається по ланцюжку "до упору", тобто до останнього документа. В останньому документі посилання "вперед" вже немає. Тепер можна закінчити роботу або, користуючись кнопкою браузера "Назад" ("Back"), пройтися по документах "назад".
Ланцюжок можна зобразити такою схемою:

Приклад ланцюжка
Для зручності роботи з додатком, можна поміщати на сторінці документа посилання не тільки вперед, але і назад. У цьому випадку відпадає необхідність використовувати навігаційні кнопки браузера.
Посилання-зв'язку можна оформити у вигляді піктограм.
Приклад красивою ланцюжка
Коментарі до останнього прикладу.
· Працюючи з документом, дуже легко побачити програму, яка цей документ будує. У браузері для цієї мети є спеціальна позиція "У вигляді HTML" ("Page Source") головного меню "Вид" ("View"). Увійдіть ще раз на додаток "Приклад красивою ланцюжка" та подивіться програми документів.
· У додатку "Приклад красивою ланцюжка" використана незвичайна фонова ілюстрація (про фонових картинках докладніше дивіться нижче в цьому уроці). Подивіться її тут. Це дуже вузька і довга GIF-картинка розміром 1x1200 пікселів, тобто ширина картинки всього один піксел, а висота - 1200 пікселів. Паркет з таких плиточок виглядає як гама кольорових горизонтальних смужок з наростаючою вниз щільністю кольору.
Якби документи були довгими, то через деякий час, прокручуючи екран по вертикалі, ми дійшли б до другого ряду плиточок і побачили б, як темна горизонтальна смужка раптово обривається і починається світла (новий горизонтальний паркетний ряд). Це не відбувається, тому що в прикладі документи короткі, а паркетна плиточка довга. Довжина 1200 пікселів обрана у відповідності з дозволом екрану 1600x1200. Такий розмір користувацького екрану в пікселах - поки ще більша рідкість і зустрічається в основному на професійних графічних станціях. Звичайні комп'ютери працюють з роздільною здатністю екрану 640x480, 800x600 і 1024x768.
Картинки, подібні vert.gif, рідко використовують для фону сторінки, адже в довгих документах, перехід від одного горизонтального ряду такого паркету до іншого виглядає непривабливо і сприймається як похибка. Однак, вузькі картинки з колірною "розтяжкою" HTML-програмісти охоче використовують для створення фону в таблицях (про це розмова піде пізніше).
Набагато частіше на практиці використовують паркет, що складається з дуже широких (по горизонталі) і коротких (по вертикалі) плиточок. Приклад такого паркету можна подивитися тут. Розмір паркетної плиточки (картинка hor.gif): 1024x1.
У чистому вигляді ланцюжок використовується проектувальниками дуже рідко. Звичайна практика - це ланцюжок документів з додатковим набором HTML-файлів, що утворюють довідковий розділ. У цей розділ виносяться великі ілюстрації, довгі приклади, коментарі, тлумачення термінів, літературні джерела, ліричні відступи.
Таким чином, додатково до посилань руху по ланцюжку, у додатку з'являються посилання, що ведуть користувача на документи довідкового розділу. Вивчивши додатковий матеріал, користувач повертається в ланцюжок і продовжує послідовний рух.
Схема ланцюжка з довідковим розділом виглядає так:
Ланцюжок з довідником

Можливі різні варіанти організації довідкового розділу:
· Розділ складається з декількох незалежних документів.
· Деякі документи розділу мають посилання один на одного або навіть утворюють ланцюжок.
· Довідковий розділ складається з одного документа з мітками, на які налаштовані посилання в документах ланцюжка.
· Кожен документ у ланцюжку має свій власний довідковий розділ, і ці різні розділи можуть містити посилання один на одного.

Застосування ланцюжків

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

Ієрархія

Ієрархія - це залежність за підпорядкуванням, або включенню одних об'єктів до інших.
Прикладом ієрархії служить система класифікації тварин. Тварини поділяються на типи, кожен тип у свою чергу підрозділяється на підтипи. Підтипи складаються з класів, класи із загонів, загони з підрядів, підряди з сімейств. Родини включають в себе пологи, пологи - види і, нарешті, види в цій системі класифікації, складаються з окремих представників тваринного світу.
Інший приклад ієрархічної структури, більш близький нам по темі - структура книги. Книга ділиться на томи, томи на частини, частини на голови, голови на параграфи, параграфи на пункти. У конкретній книзі деякі елементи з цієї ієрархії можуть бути опущені (наприклад, поділ на томи).
Ієрархічну структуру книги добре відображає зміст (зміст). У правильно оформлених книгах зміст поміщають на перших сторінках.
Особливу роль зміст грає в довідковій літературі. Адже такі книги не читають підряд від кірки до кірки, а звертаються до обраних сторінок у міру потреби.
Зміст виявляється корисним, навіть якщо книжка призначена для послідовного читання.
Зміст:
· Дає уявлення про книгу в цілому;
· Дозволяє швидко відкрити потрібний розділ для продовження читання;
· Допомагає знайти окремі, які полюбилися фрагменти.
Ієрархічне гіпертекстове програма має такий же пристрій, як і звичайний паперовий довідник. Тільки рядки у змісті є гіперпосиланнями, і не потрібно вручну гортати сторінки.
Схему ієрархічного програми можна зобразити наступним чином:
Ієрархія

Документ 00.htm (корінь ієрархії) містить посилання на розділи 01.htm, 02.htm, 03.htm, ..., nn.htm (гілки ієрархії). Ці розділи, у свою чергу, містять посилання на підпорядковані документи і так далі, аж до таких документів як 030101.htm і 030102.htm: вони вже не мають посилань (листя ієрархії).
Приклад гіпертекстової ієрархії
Схема цього прикладу виглядає наступним чином:

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

Укладемо картинку у фоновий паркет

Тепер, після "високих" сфер, одна приємна (але й небезпечна для новачків!) Технічна подробиця.
Користуючись атрибутом bgcolor команди BODY, можна пофарбувати фон документа в який-небудь один колір.
Замість одноколірної заливки можна використовувати картинку. Ця картинка буде, повторюючись, укладатися в екранне полі зразок паркетних плиточок.
Щоб "паркет" виглядав красиво, необхідна візуальна стиковка плиточок між собою. Це треба враховувати при створенні фонової ілюстрації. І ще: дуже важливо, щоб фон залишався саме фоном, а не відволікав увагу користувача від головних елементів документа, не заважав читати текст.
Фонова картинка задається в команді BODY атрибутом background:
<BODY background = ім'я файлу з картинкою>
Приклади
1.

Цей фон задається командою:
<BODY background =. / pic/fon1.jpg>
Подивитися на повному екрані