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

Мета і місце розміщення документа Web

Глобальна Мережа не тільки з'єднала користувачів всього світу, але і утвердилася у вигляді нових технологій на наших персональних комп'ютерах. Дійсно, користувач, який придбав і встановив на своїй машині Microsoft Office 97, стає володарем Internet-технології в готовому вигляді, незалежно від того, підключений його комп'ютер до Мережі чи ні.

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

1.2. Сценарій і структура Web-документа.

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

Будь-Web-документ складається з тегів, причому зазвичай початкові теги пишуться великими літерами, а кінцеві - маленькими.

Отже, розглянемо основні теги, що входять в кожен Web-документ. Перш за все це

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

Також основним тегом є

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа.

Без цих тегів неможливо створити жодну Web-сторінка. Більш детально ці та інші теги ми розглянемо в параграфі 2.1.

2.1. Структура тексту Web-документа

Якщо порівняти вихідні тексти різних Web-сторінок, можна легко побачити схожість їх структур. Це пояснюється тим, що документи створюються за певними правилами. В основу синтаксису мови HTML ліг стандарт ISO 8879: 1986 "Information processing. Text and office systems. Standard Generalized Markup Language (SGML) ". Правда, існує велика різниця між стандартом офіційним і стандартом фактичним.

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

Для того щоб зрозуміти структуру Web-сторінки, нам необхідно докладно розглянути всі елементи, що входять до наведеного лістинг.

Тут повинен розташовуватися оригінальний текст Web-сторінки

перехід в початок документа

Усередині подібної конструкції можна поміщати і теги: вони не будуть сприйматися броузером.

Відмітна ознака HTML-документа. Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка. В принципі, цей елемент можна розглядати як формальність. Він має атрибути version, lang і dir, якими в даному випадку мало хто користується і допускає вкладення елементів HEAD, BODY і PLAINTEXT, що визначають загальну структуру Web-сторінки. Природно, що кінцевим тегом закінчуються всі гіпертекстові документи.

Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа. Цей елемент може мати атрибути lang і dir і допускається вкладення елементів TITLE, ISINDEX, BASE, META, LINK, NEXTID.

Опис стилю деяких елементів Web-сторінки. У вище наведеному прикладі призначені шрифти для елементів Н2 і CODE. Природно, що для кожного елемента існує стильове оформлення за замовчуванням, тому вживання STYLE не обов'язково.

Дата, що позначає "термін придатності" документа:

Вказівка ​​додатки, в якому був створений Web-документ:

Атрибут name використовується додатком-клієнтом для отримання додаткової інформації про Web-сторінки і їх упорядкування. Цей атрибут часто замінюють атрибутом http-equiv. Він використовується сервером для створення додаткових полів при виконанні запиту.

Крім цього, елемент МЕТА може містити URL. Шаблон відповідного атрибута такий:

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

background = '' Шлях до файлу фону ''

Більш просте оформлення фону зводитися до завдання його кольору:

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

Обидва перерахованих вище ознаки не є альтернативними і часто використовуються спільно.

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

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

Також можна задати колір для використаних гіперпосилань:

Гіпертекст, розташований всередині елемента BODY, може мати довільну структуру. Її визначають в першу чергу призначення Web-сторінки і фантазія розробника.

HTML-документ може бути дуже великим, і в цьому випадку користувачеві повинна бути надана можливість швидко переміщатися до потрібного розділу сторінки. Для цього можна використовувати механізм гіперпосилань. Необхідно також в потрібних місцях тексту розставити відповідні мітки. Детально гіперпосилання ми обговоримо в параграфі 2.2. а тут ми розглянемо тільки шаблон для створення міток:

В цьому випадку для переходу всередині документа можна використовувати наступну конструкцію:

Перехід до мітці

Кілька подібних рядків можуть утворити своєрідне зміст Web-сторінки, яке можна розмістити на початку і в кінці документа.

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

У вираженні абсолютної посилання можна також опустити вказівку на схему доступу (file: //). В цьому випадку будуть враховуватися тільки ліва частина абсолютного посилання до першого лівого символу "\", тобто ім'я локального диска.

Інші конструкції ми розглянемо нижче.

Одним з найважливіших елементів мови, що забезпечує створення гіперпосилань є:

Найчастіше використовується такий шаблон:

file: // Диск: \ Шлях до файлу

file: /// Диск: / Шлях до файлу

Подібно до багатьох інших елементів мови, елемент А вимагає використання атрибутів. Атрибут гіперпосилання ми вже знаємо, шаблон його такий:

WWW, як найсучасніша система, повинна забезпечувати сумісність з більш ранніми, тому від старих протоколів не відмовляються, а намагаються пристосувати їх до сучасних потреб (наприклад, ftp). Існують наступні схеми доступу:

file - доступ до файлу на локальному диску;

ftp - доступ до архівів файлів за допомогою протоколу передачі файлів (file transfer protocol);

gopher - доступ до системи Gopher;

http - доступ до WWW;

mailto - відправлення повідомлень по електронній пошті;

news - доступ до новин USENET;

nntp - доступ до новин USENET з використанням протоколу NNTP;

telnet - підключення по протоколу telnet;

wais - підключення до системи WAIS.

У тому випадку, коли використовуються переходи всередині поточної сторінки, на ній повинні бути розставлені мітки:

HoTMetaL PRO 3.0.

Коротко розглянемо створення гіпертекстового документа шляхом порівняння.

HotDog Professional 3

Microsoft Word 97

Основним інструментом для створення HTML-документів в Word 97 є майстер Web-сторінок. Він запускається під час створення нового файлу. Користувачеві пропонується вибрати тему Web-сторінки. На другому кроці пропонується вибрати стиль оформлення сторінки. На цьому робота майстра закінчується, і користувачеві надається можливість заповнити документ корисною інформацією.

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

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

На згаданій вище вкладці Webpages є шаблон "Нова Web-сторінка", якому відповідає файл HTML.DOT. Він дозволяє створити порожній файл, і користувач повинен заповнити його інформацією від початку до кінця.

В Word 97 не передбачені спеціальні інструмент для форматування Web-сторінок, але можна використовувати ті, що призначені для звичайного редагування. Багато кнопки дозволяють створювати адекватні ефекти в гіпертексті. Це, в першу чергу, інструменти, що дозволяють форматувати текст: виділення напівжирним і курсивом, зміна розміру і кольору букв, створення ефекту підкреслення і т. П. Чи вдається створювати і абзацний відступи таким же способом, як це робиться в Netscape Editor. Тільки в даному випадку використовується елемент DIR.

Створення документів в стандарті HTML.

У цьому параграфі ми розглянемо створення заголовків, форматування і зміна стилю документа, а також списки на прикладі наведеному в 2.1.

У прикладі для заголовка використовуються теги.

Існує шість рівнів заголовків, які позначаються Н1. Н6. Тема рівня 1 найбільший, а рівень 6 забезпечує найменший заголовок. Подання про відносні розміри заголовків в них дає рис.3.1. Для заголовків можна використовувати атрибут, що задає вирівнювання вліво, по центру або вправо:

Рис.3.1. Заголовки, що створюються за допомогою елементів Н1. Н2

Елемент FONT може з успіхом замінювати елементи заголовка Н1. Н6. Для останніх, наприклад, не передбачена можливість вказівки кольору букв. Щоб заголовок, створений на основі елемента FONT, добре виглядав, цей елемент необхідно комбінувати з іншими: CENTER, B, I, P і т. Д. (Див. 3.2.)