Програмування Конвертера валют
Проект сторінки з розміщенням конвертора валют на мові програмування HTML та JavaScript. Розмітка гіпертекстових документів HTML, основні функції, властивості і параметри; структурне форматування. Технології CSS, JavaScript, ефективність використання.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | украинский |
| Дата добавления | 30.01.2012 |
| Размер файла | 1,8 M |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Размещено на http://www.allbest.ru/
Міністерство освіти і науки України
Кафедра інформатики та інформаційної безпеки
Курсова робота
З предмету
Проектування вузлів та сервісів в мережах
на тему:
Програмування Конвертера валют
Зміст:
- Технічне завдання
- Вступ
- Історія HTML
- Версії HTML
- Гіпертекст
- Структура WEB-сторінок
- <HTML></html>
- <HEAD></head>
- <TITLE></title>
- <STYLE></style>
- <META>
- <BODY></body>
- <!-- Коментар --!>
- <H1><h1>
- <HR>
- <A></a>
- Перехід усередині одного документа
- Перехід до іншого документа
- <BASE>
- Правила синтаксису
- Кодування символів
- Використання символів
- Управління кольором
- Конструктор документів
- Додаток. Структура додатку
- Ланцюжок
- Застосування ланцюжків
- Ієрархія
- Укладемо картинку у фоновий паркет
- Графіка
- Формат GIF
- Формат JPG
- Як програмувати картинки
- Картинка в тексті
- Картинка як посилання
- Побудова таблиць
- Що таке таблиця
- Як задати таблицю
- Атрибути команди TABLE
- Атрибути команди TR
- Атрибути команди TD (TH)
- Багатоликі таблиці
- Сторінкові відступи
- Зауваження
- Багатоколонна верстка
- Накладення картинок
- Зауваження
- Таблиці стилів
- Рівні CSS5
- Способи визначення таблиць стилів
- Запис шаблону CSS
- Угрупування і спадкоємство
- Селектори
- Псевдокласи
- Застосування таблиць стилів CSS
- CSS у форматуванні тексту
- Одиниці вимірювання в таблицях стилів
- Структурне форматування
- JavaScript
- Використання JavaScript
- Важливість вивчення JavaScript
- JavaScript у дії
- Введення/вивід інформації за допомогою JavaScript
- Об'єкти, методи і властивості
- Управління даними за допомогою змінних
- Значення в мові JavaScript
- Змінні в мові JavaScript
- Масиви JavaScript і Escape-последовательности
- Як користуватися масивами
- Вирази, умови, операції, рядки і числа
- Що таке вирази і умови
- Знайомство з операціями
- Створення сценаріїв за допомогою функцій і подій79
- Опис браузерів
- Проглядання WEB-сторінок
- Microsoft Internet Explorer
- Netscape Communicator
- Практична частина
- Лістинг сайту
- Лістинг програми (конвертера валют)
- Висновок
Технічне завдання
На мові програмування HTML та JavaScript, проектувати сторінку на якій буде знаходитись конвертор валют
Вступ
Термін HTML (Hyper Text Markup Language) означає "мова маркіровки гіпертекстів". Це поняття ширше, включає Інтернет і локальні мережі, редактори, браузери, різноманітні програмні продукти, компакт-диски, повчальні курси, дизайн і багато що інше. HTML - своєрідна протилежність складним мовам програмування, відомим тільки фахівцям.
HTML давно перестав бути просто мовою програмування. Людина, що вивчала цю мову, знаходить можливість робити складні речі простими способами і, головне, швидко, що на комп'ютерному світі не так вже і мало. Гіпертекст підходить для включення елементів мультимедіа в традиційні документи. Практично саме завдяки розвитку гіпертексту, більшість користувачів дістали можливість створювати власні мультимедійні продукти і поширювати їх на компакт-дисках. Такі інформаційні системи, виконані у вигляді набору HTML-сторінок, не вимагає розробки спеціальних програмних засобів, оскільки всі необхідні інструменти для роботи з даними (WEB-браузери) стали частиною стандартного програмного забезпечення більшості персональних комп'ютерів. Від користувача потрібно виконати тільки ту роботу, яка відноситься до тематики продукту, що розробляється: підготувати тексти, намалювати малюнки, створити HTML-сторінок і продумати зв'язок між ними.
HTML, як основа створення WEB-сторінок, має пряме відношення і до нового напряму образотворчого мистецтва - WEB-дизайн. Художникові в Інтернеті недостатньо просто намалювати красиві картинки, оригінальний логотип, створити новий фірмовий стиль. Він повинен ще помістити все це в Мережі, продумати зв'язок між WEB-сторінками, щоб все рухалося, відгукувалася на дію користувача, вражало уяву, викликало бажання створити що-небудь своє, оригінальне в цій області.
Історія 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'і, ви створюєте документ для власного споживання, у вас немає проблем. Немає проблем і тоді, коли ви посилаєте свою роботу в світ як друкарську копію. Якщо ж ваш партнер, видавець або колега просить прислати електронну версію - починаються проблеми.
Для того, щоб документ з'явився на екрані у абонента, необхідно, щоб його комп'ютер і операційна система (платформа) дозволяли запустити ваш улюблений редактор.
Для того, щоб документ завантажився в 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>
<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").
Якщо посилання утворюють вкладений ланцюжок, то кнопки "Назад і вперед" можна використовувати для руху по пройденому посилальному шляху в обидві сторони. Вони працюють як традиційні операції "вікатка" і "накатка" в більшості прикладних програм.
У нижчеприведеному прикладі використовується ланцюжок вкладених посилань. Зробите невелику подорож. Спочатку, клацаючи посилання, дістаньтеся до тексту, в якому посилань вже немає. Потім, користуючись навігаційними кнопками браузера, "прогуляйтеся" по пройденому шляху вперед і назад.
Посилання можуть відводити не тільки в різні документи, але завантажувати на екран різні фрагменти одного і того ж тексту. У останньому випадку навігаційні засоби браузера працюють також.
Перехід усередині одного документа
Для завдання гіпертекстового переходу усередині документа використовують дві команди <A>. Перша команда з атрибутом href є джерелом переходу, друга з атрибутом name - приймачем.
Загальний вид програми
...<A href=#метка>текст</A>......<A name=метка></A>... |
Завдання переходу по мітціНа екран виводиться посилання:Влучна. Сюди браузер приходить по посиланню.На екрані нічого не відображається. |
Для організації переходу усередині документа потрібно:
Вибрати ім'я для мітки
Ім'я повинне бути унікальним в HTML-програмі. Це означає, що інших міток з таким ім'ям в програмі бути не повинно. А що буде, якщо не послухатися цієї ради? Коли однакових міток декілька, браузер виконує перехід на найпершу мітку в програмі.
Ім'я може полягати в лапки
Ім'я може складатися з будь-яких символів. У тому випадку, коли ім'я містить пропуски або ключові символи HTML, лапки обов'язкові.
Запрограмувати перехід по мітці. У місці переходу потрібно написати команду
<A href=#метка>текст</A>
Тут: # -- ключовий символ;
влучно - вибране ім'я для мітки;
текст - запис, який виглядатиме на екрані браузера як посилання.
Встановити тег міткою в потрібному місці HTML-програми. Перед фрагментом HTML-программы, на який повинен виконатися перехід записати команду-мітку
<A name=метка></A>
При цьому: ім'я мітки повинне бути те ж саме, що і в команді, задаючій перехід; на екрані тег-мітка <A name=метка> ніяких зображень не будує.
Перехід до іншого документа
Для того, щоб браузер завантажив в своє вікно новий HTML-документ, потрібно записати в програмі посилання за допомогою команди <A> з атрибутом href=имя_файла.
Загальний вид програми
...<A href=имя_файла>текст</A>... |
Виконати файл "имя_файла".На екран виводиться посилання:При клацанні користувача на посиланнібраузер будує на екрані документза програмою, заданою у файлі"имя_файла". |
Документ Программа (файл doc1.htm) Программа, на яку налаштовано посилання в документі (файл doc2.htm)
Перехід до мітки іншого документа
Ми навчилися вирішувати такі завдання:
передавати управління в іншу частину документа;
передавати управління в іншу програму (HTML-файл).
Ці два методи можна об'єднати і передати управління з одного документа до мітки усередині іншого.
Загальний вид програми
Перший HTML-файл...<A href=имя_файла#метка>текст</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-й пункт 12-го параграфа 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 Express в текст сторінки автоматично додається конструкція типу 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 |
½ |
½ |
Одна друга |
Ѕ |
Для відділення символу від подальшого тексту треба вводити крапку з комою.
Мнемонічні символи бувають дуже корисні, особливо для тих символів, які не можна ввести з клавіатури. Наприклад, для вказівки дозволу екрану можна використовувати таку конструкцію:
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:
Подобные документы
Основи Web-програмування. Використання мови HTML. Базові елементи HTML. Форматування тексту. Вирівнювання тексту та горизонтальна лінія. Значення RGB- коду. Таблиці та списки, посилання та робота з ними. Створення посилань на документи і файли.
курсовая работа [40,9 K], добавлен 12.02.2009Javascript як мова програмування, заснована на об'єктах: і мовні засоби, і можливості середовища представляються об'єктами. Структура програм на мові Javascript. Декларація змінних та сфер їх впливу. Типи даних та їх використання. Пріоритети операцій.
курсовая работа [51,4 K], добавлен 12.12.2010Дослідження та аналіз об’єкту програмування. Основні архітектурні риси JavaScript. Переваги CSS розмітки. Структура HTML-документа. Вимоги до апаратного та програмного забезпечення. Опис програми та її алгоритмів. Оцінка вартості програмного продукту.
дипломная работа [1,0 M], добавлен 01.09.2016Історія розвитку та теорія Web-дизайну. Ефективність програмно-апаратних засобів. Створення Web-сторінки за допомогою мови HTML. Розробка концептуальної моделі підручника. Структура HTML документу, його інформаційних потоків. Форматування тексту, фрейми.
курсовая работа [1,3 M], добавлен 29.05.2012История html. Гипертекст. Структура web-страницы. Переход внутри одного документа. Переход к другому документу. Правила синтаксиса. Кодирование символов. Использование символов. Управление цветом. Конструктор документов. Способы определения таблиц стилей.
дипломная работа [911,3 K], добавлен 25.02.2005Назначение и применение JavaScript, общие сведения. Понятие объектной модели применительно к JavaScript. Размещение кода на HTML-странице. URL-схема. Вставка (контейнер SCRIPT, принудительный вызов интерпретатора). Программирование свойств окна браузера.
лекция [517,1 K], добавлен 09.03.2009Особливості експлуатації протоколу HTML (гіпертексту). Засоби обміну інформацією у ньому і підготовка даних у форматі HTML з використанням розширених засобів форматування даних. Основи використання таблиць каскадних стилів і активних елементів JavaScript.
реферат [32,4 K], добавлен 26.04.2011Опис мови програмування PHP. Стратегія Open Source. Мова розмітки гіпертекстових документів HTML. Бази даних MySQL. Обґрунтування потреби віддаленого доступу до БД. Веб-сервер Apache. Реалізація системи. Інструкція користувача і введення в експлуатацію.
курсовая работа [42,9 K], добавлен 21.12.2012Примеры динамического построения html-страницы при помощи JavaScript. Использование цикла For, когда заранее известно, сколько раз должны повториться циклические действия. Выполнение циклических операторов входа и выхода, прерывание текущей итерации.
лабораторная работа [52,4 K], добавлен 19.09.2019Язык маркировки гипертекстов HTML, основа создания web-страниц. История спецификаций, каскадные таблицы стилей CSS. Способы определения таблиц стилей (стилевого шаблона). Язык подготовки сценариев JavaScript, его использование. Программный код web сайта.
курсовая работа [26,9 K], добавлен 05.07.2009
