Поняття мови розмітки гіпертексту
Поняття мови розмітки гіпертексту from russoua
Текстові документи створюють за
допомогою текстових редакторів, наприклад, MS Word, WordStar тощо, зберігають у
файлах, виводять на екран для візуального перегляду і роздруковують на папері.
Гіпертекстові документи, на відміну від звичайних текстових документів, не
призначені для виведення на папір. Головне їхнє застосування - подання
інформації на екран комп'ютера.
Під час створення гіпертекстового
документа інформацію ретельно добирають, оскільки великі за обсягом тексти
читати з екрана незручно. Зазвичай такі тексти зберігають не в одному, а у
декількох файлах. Інформацію з цих файлів користувач виводить на екран лише
тоді, коли вона йому потрібна, і у такій послідовності, яка його найліпше
влаштовує. Робить він це за допомогою гіперпосилань.
Основні поняття:
Гіпертекст – це електронний документ, який
містить гіперпосилання на інші документи. Термін
«гіпертекст» у 1969 році запровадив Тед
Нельсон, хоча принцип організації інформації з використанням посилань
відомий віддавна. Ідею
гіпертекстових інформаційних систем на теоретичному рівні сформулював В.Буш у 1945 році.
Гіпертекстова технологія – це інформаційна технологія, що
базується на використанні гіпертекстів. Її застосовують у комп’ютерних
енциклопедіях і навчальних програмах, у прикладних програмах для роботи з
довідковою інформацією, а також для організації доступу до інформації у WWW – просторі.
Web-документ – це текст, написаний мовою HTML чи іншою, який призначений для
перегляду електронної інформації на екрані комп’ютера за допомогою браузера. Web-документи зберігаються і
пересилаються як текстові файли з розширенням htm і html тощо.
Відмінність між звичайним
гіпертекстовим документом й web-документом
гіпертекстовий документ
|
web-документ
|
Зберігаються на одному диску
|
web-документи однієї тематики
можуть розміщуватись на комп’ютерах-серверах у різних кінцях світу.
|
Web-вузол (web-сайт) – декілька документів на одну тему, що є на деякому
комп’ютері чи належать одному власникові. Web-вузоли створюють
Web-дизайнери.
Web-дизайн – це сукупність правил і
рекомендацій, якими мають користуватись автори, якщо вони хочуть, щоб їхні
сторінки були інформативними і виглядали привабливо.
Правила Web-дизайну:
1. Одне з найважливіших правил
полягає у структуризації інформації, вдалому поділі її на окремі частини і
налагодження зв’язків між ними.
Розглянемо структуру Web-документу.
Простий Web-документ
|
Більш складні Web-документи
|
1. З тестових блоків:
- короткі текстові абзаци;
- списки;
- таблиці.
2. 2-3 малюнків невеликих
розмірів.
3. Горизонтальних ліній.
4. Гіперпосилань.
|
1. Фрейми – рамки, в яких
одночасно відображаються різні сторінки.
2. Елементи керування – кнопки,
перемикачі, поля діалогу.
3. Динамічні ефекти.
4. графічні рухомі об’єкти ActivX чи Flash.
|
2. Абзаци на класичні web-сторінці відокремлюються порожнім рядком і не мають
відступів у першому рядку. Може бути вирівняний до одного з країв або до центру
екрана.
3. Особлива зручність перегляду
інформації зумовлена тим, що в нормальному режимі web-сторінка не має горизонтальної смуги прокручування, а вертикальна смуга
може бути.
4. Інформація на сторінці
традиційно подається на сірому чи на білому фоні, але її можна розмістити і на
кольоровому тлі чи на тлі картинки з деякого графічного файлу
5. Створюючи web-документ, потрібно стежити, щоб
обсяг усіх його файлів, зокрема, графічних, відео був невеликим. Варто
враховувати пропускну спроможність наявної лінії зв’язку.
Для створення web-сторінок
послуговуються гіпертекстовими редакторами, наприклад, HotMetalPRO, Hot Dog Professional,
Netscape Editor, webedit,
HTMLWriter, HTML Assistant, HTMLed, де використовується мова HTML -Hyper Text Markup Language (мова для розмічування гіпер-текстових
документів). Сучасні редактори, такі як FrontPage,
Dream Viewer, MS Word тощо, дають змогу
створювати web-сторінки методом
конструювання, тобто без
застосування кодів мови HTML. Вони генерують цей код автоматично.
Ми вивчатимемо два способи створення web-сторінки:
- за допомогою мови HTML;
- методом візуального конструювання
засобами програм MS Word і FrontPage.
Розглянемо перший спосіб.
Для підготовки html-файлу можна використати любий найпростіший текстовий
редактор. Після написання html-файл потрібно зберегти на диску з деякою назвою з розширенням назви
htm чи html.
Як виконується розмітка документа за допомогою
HTML? Як ми знаємо документ розбивається на елементи.
Елементи HTML - це пари тегів і символьні дані (текст або
код), вміщені між ними.
Для кожного елементу задається команда мови HTML, названа
тегом (або дескриптором). Ця команда містить інформацію про те, який
вигляд повинен мати даний елемент на Web-сторінці, які зв'язки
він має з іншими елементами або документами тощо.
Тег (у перекладі tag - покажчик, мітка) - це фрагмент
коду, що описує певні елементи документа HTML і вміщений у кутові дужки <
>. Теги бувають одинарними і парними. Більшість парних тегів називають
інакше контейнерами.
Найпростішим тегом є, наприклад, тег з ім'ям HTML.
Тег <HTML> визначає початок HTML-документа. Початковому тегу <HTML>
відповідає кінцевий тег </HTML> із тим самим ім'ям, але з косою рискою
«/». Отже, початок і кінець HTML- документа позначаються парою тегів:
<HTML>... </HTML>
HTML-документ умовно можна
розбити на три частини:
1. Службова інформація
для броузера, що вміщена у рядок з тегом
<!DOCTYPE>.
<!DOCTYPE>.
2. Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів,
описи невеликих програм-сценаріїв. Ця частина документа
міститься між тегами <HEAD> і </HEAD>.
3. Тіло документа, що обмежене тегами <BODY> ... </BODY> (іноді замість тегів <body> можуть використовуватися теги фреймової структури <frameset>, які тут не розглядаються).
Простий приклад Web-сторінки
Що таке Web-сторінка, ви відразу зрозумієте з найпростішого прикладу:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN">
<HTML> . . ,,
<HTML> . . ,,
<HEAD>
</HEAD> <BODY>
Це приклад HTML- документа
</BODY>
</HTML>
Усі елементи, передбачені в HTML, можна умовно
поділити на кілька категорій:
- структурні - елементи, обов'язкові
для документа, що відповідає стандарту HTML (наприклад, html, head, body і
title);
- блокові - елементи, призначені
для форматування цілих текстових блоків (наприклад, DIV, НІ, Н2 , НЗ , Н4 , Н5
, нб, Р, PRE); часто блокові елементи відокремлюються переведенням рядка від
іншої частини документа;
- текстові - елементи, що задають
розмітку шрифту (І, В, U, BIG, SMALL і
ін.), розмітку тексту (STRONG, CODE, VAR, СІТЕ
і ін.);
- спеціальні - елементи
порожнього рядка (BR,HR), якірний елемент А, впроваджені елементи (IMG, OBJECT, MAP
і ін.), елементи таблиці (TABLE) тощо.
Атрибути тегів
Часто теги, окрім імені, містять додаткові
елементи, які називаються атрибутами.
Наприклад, якщо в тег тіла документа <BODY> ввести додатковий елемент:
<BODY
bgcolor="yellow">
то це означатиме, що документ має відображатися на
жовтому тлі. Слово bgcolor є атрибутом,
a yellow - значенням атрибута.
Атрибути - це компоненти тегу, що містить вказівки про
те, як броузер має сприйняти й обробити тег. Атрибут записується після імені
тегу перед дужкою > і складається, як правило, із пари «ім'я
атрибута-значення».
Значення атрибута записується після імені атрибута
через знак рівності =. Всі значення атрибутів за умовчанням мають братися в
подвійні (") або одинарні (') лапки. Імена атрибутів можуть набиратися як
малими, так і великими літерами, - броузер інтерпретуватиме їх однаково. У тега
може бути кілька атрибутів, тоді вони відокремлюються один від одного
пробілами.
Коментар
Часто при створенні Web-сторінок виникає
необхідність пояснити ту або іншу особливість HTML-коду або наміри розробника,
але так, щоб ці пояснення не відображалися у вікні броузера. У таких випадках
незамінним є коментар.
Коментар означає фрагмент коду, що не виконується і
розташований між групами символів <!- і —>.
Наприклад, на екрані не відображатимуться такі
елементи:
<!—
Коментар, що займає
один рядок —> або
<!—
Коментар можна розташовувати
в двох рядках —>
Коментарі
Дописати коментар