Зміст
1. Підготовка до створення Web документа.
1.1. Мета і місце розміщення документа Web
2. Мова гіпертекстової розмітки.
2.1. Структура тексту Web документа
2.2. Гіпертекстові посилання
2.3. Редактори Web документів
3. Створення документів в стандарті HTML
3.1. Заголовки
3.2. Оформлення, зміна стилів
3.3. Списки
1.1. Мета і місце розміщення документа Web
Глобальна Мережа не тільки з'єднала користувачів всього світу, але й утвердилася у вигляді нових технологій на наших персональних комп'ютерах. Дійсно, користувач, який придбав і встановив на своїй машині Microsoft Office 97, стає володарем Internet-технології в готовому вигляді, незалежно від того, його комп'ютер підключений до Мережі чи ні.
Іншими словами, кошти, призначені для роботи з Мережею, стали використовуватися і в інших цілях, не пов'язаних з нею, а серед програмного забезпечення, що встановлюється на більшість персональних комп'ютерів, додатки для Internet зайняли своє почесне місце.
У результаті робота багатьох користувачів стала мати більше відношення до Мережі, ніж вони самі того, може бути бажали. Так, одним із способів самовираження стало розміщення особистих сторінок в Internet. Багато комерційні фірми стали використовувати Мережа для реклами та збуту своєї продукції. Людям, зайнятим пошуком роботи, став доступний і такий сервіс: скласти резюме у форматі Web-сторінки і розмістити цю інформацію в Мережі. Існує величезний список серверів, що дають простір для розміщення вашої станиці в глобальній мережі, однак при віртуальному підписання договору між двома сторонами, обговорюється той факт, що Ви не маєте права використовувати ваш сайт в рекламних цілях, а також додавати до нього чужу рекламу (умови та послуги на всіх серверах різні). Найбільш популярними є Geocities, Chat.ru, Fortunecity та інші.
Важливу роль Internet став грати для наукових, навчальних та громадських організацій. Підтвердження цьому легко знайти, вийшовши на простори кіберпростору.
1.2. Сценарій та структура Web-документа.
Для того, щоб зрозуміти структуру і сценарій Web-документа, ми повинні розглянути кілька Web-сторінок і виявити загальні елементи.
Будь-який Web-документ складається з тегів? , Причому зазвичай початкові теги пишуться великими літерами, а кінцеві - маленькими.
Отже, розглянемо основні теги, що входять в кожен Web-документ. Перш за все це
Відмітний ознака HTML-документа. Одним із принципів мови є багаторівневе вкладення елементів. HTML є самим зовнішнім, так як між його стартовим і кінцевим тегами повинна знаходитися вся Web-сторінка.
Також основним тегом є
Область заголовка Web-сторінки. Іншими словами, її перша частина. Так само як і HTML, HEAD служить тільки для формування загальної структури документа.
Цей елемент містить в собі гіпертекст, який визначає власне Web-сторінку. Ця та частина документа, яку розробляє автор сторінки і яка відображається броузером. Відповідно, кінцевий тег цього елементу треба шукати в кінці HTML-файлу. Всередині BODY можна використовувати всі елементи, призначені для дизайну Web-сторінки. Всередині стартового тега елемента BODY можна розташувати ряд атрибутів, що забезпечують установки для всієї сторінки повністю.
Без цих тегів неможливо створити жодну 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-сторінки
(див. 2.1.)
На рис. 3.1. видно як зміниться вигляд заголовка розміру 2 після такого перевизначення. Природно, що для кожного елемента існує стильове оформлення за замовчуванням, тому вживання STYLE необов'язково.
Цікаво, як синтаксис в HTML відображає історію розвитку обчислювальної техніки. Наприклад, старий, а тепер майже забутий елемент BLINK нагадує про ті часи, коли використовувалися дисплеї, що мали тільки текстовий режим. При такому стані речей мерехтіння тексту (BLINK) було, мабуть, єдиним доступним візуальним ефектом. На противагу цьому, елемент STYLE, введений зовсім недавно, викликає асоціації з програмами для Windows, тому що в них вперше з'явилося стильове оформлення тексту, яке тепер неймовірно популярно і без нього вже немислима робота у таких програмах, як Word або Excel.
3.3. Списки
Списки (list) були додані в HTML, безсумнівно, під впливом успіху текстових редакторів. Список відрізняється від звичайного тексту перш за все тим, що користувачу не треба думати про нумерації його пунктів: це завдання бере на себе програма. Якщо список додається новими пунктами або укарачівается, нумерації коректується автоматично. У разі ненумерованих списків програма ставить перед кожним пунктом маркери: кружальця, прямокутники, росби або інші зображення. У результаті список приймає легкий для читання, «фірмовий вигляд». Теги для створення списків можна умовно розділити на дві групи: одні визначають загальний вигляд списку (і дозволяють використовувати атрибути), а інші ставлять його внутрішню сторуктуру. Існує кілька різновидів списків.
Найпростіший ненумерований список (unordered list). Його шаблон представлений нижче:
Пункт 1 списку
Пункт 2 списку
Пункт 3 списку
Елемент UL є своєрідним обрамленням списку. Він дозволяє відокремлювати один список від іншого. Елемент LI позначає кожен з пунктів. Вид ненумерованого списку показано на рис. 3.3.
* Пункт 1 списку
* Пункт 2 списку
* Пункт 3 списку
Ріс.3.3. Ненумерований список.
Структура нумерованого списку схожа на попередню:
Пункт 1
Пункт 2
Пункт 3
Пункт 4
Нумерований список використовує інший зовнішній тег: OL. У цьому випадку кожен пункт нумерується елементом впорядкованої послідовності: арабськими або римськими числами, літерами латинського алфавіту. На рис. 3.4. показаний приклад списку, що відповідає наведеним вище лістингу.
I. Пункт 1
II. Пункт 2
III. Пункт 3
IV. Пункт 4
Рис. 3.4. Нумерований список.
Спосіб нумерації задається за допомогою атрибута type. У табл. 3.1. приведені всі способи нумерації.
Атрибут
Послідовність нумерації
type =''1''
1, 2, 3, 4, ...
type =''i''
i, ii, iii, iv, ...
type =''I''
I, II, III, IV, ...
type =''a''
a, b, c, d, ...
type =''A''
A, B, C, D, ...
Табл. 3.1. Значення атрибуту type
Списки до визначень (definition lists) створюються за допомогою тегів трьох видів:
Пункт 1
Визначення пункту 1
Інше визначення пункту 1
Пункт 2
Визначення пункту 2
Пункт 3
Визначення пункту 3
Наочне уявлення ос писку з визначеннями дає рис. 3.5. Кожен пункт списку може бути доповнений одним або кількома блоками тексту за допомогою тега (тегів) DD. Кожен блок автоматично розміщується з нового рядка. Термін «визначення» носить умовний характер. Абзаци, розміщені в списку, можуть бути визначеннями, доповненнями, роз'ясненнями пунктів. По суті, пункт являє собою заголовок, а визначення - довільний текст під заголовком.
Пункт 1
Визначення пункту 1
Інше визначення пункту 1
Пункт 2
Визначення пункту 2
Пункт 3
Визначення пункту 3
Ріс.3.5. Список з визначеннями
Інший спосіб створення складних списків - використання принципу вкладення. Кожен елемент, що визначає пункт списку, може містити ще один список. Вкладений список розташовується з невеликим відступом вправо щодо списку верхнього рівня. Кожен із списків може бути створений і налагоджений окремо, а потім всі складові можуть бути об'єднані в один великий список. У тому випадку, коли структура списку ясна, зручно скористатися шаблоном. У ньому мають бути вказані всі пункти на всіх рівнях. Доопрацювання такого шаблону зводитися до вписуванню конкретних рядків тексту у відповідні пункти. Нижче дано приклад такого шаблону:
Пункт 1
Пункт 1.1
Пункт 1.2
Пункт 2
Пункт 2.1
Пункт 2.2
Пункт 3
Пункт 3.1
Пункт 3.2
У ньому нумеровані списки розміщені всередині пунктів ненумерованого списку. Рис 3.6. дає уявлення про те, як виглядає така конструкція.
- Пункт 1
1. Пункт 1.1
2. Пункт 1.2
- Пункт 2
1. Пункт 2.1
2. Пункт 2.2
- Пункт 3
1. Пункт 3.1
- Пункт 3.2
Мої роботи:
www.baltnet.ru/wbas www.baltnet.ru/wbas/radio.htm www.baltnet.ru/wbas/fith_av.htm business.fortunecity.com/koch/726
E-mail:
[email protected]
? Тег - стартовий або кінцевий маркери елемента. Теги визначають межі дії елементів і відокремлюють елементи один від одного. У тексті Web-сторінки теги полягають у кутові дужки,. А кінцевий завжди забезпечується косою рисою
1 Броузер (browser) - програма для перегляду Web-сторінки
2 Тег (tag) - стартовий або кінцевий маркери елемента. Теги визначають межі дії елементів і відокремлюють елементи один від одного. У тексті Web-сторінки теги полягають у кутові дужки, а кінцевий тег завжди забезпечується косою рискою.
3 Елемент (element) - конструкція мови HTML. Це контейнер, що містить дані та дозволяє відформатувати їх певним чином. Будь-який Web-документ являє собою набір елементів. Одна з основних ідей гіпертексту - можливість вкладення елементів.
4 Атрибут (attribute) - параметр чи властивість елементу. Це, по суті, змінна, яка має стандартну ім'я і якій надається певний набір значень: стандартних чи довільних. Атрибути розташовуються всередині стартового тега і відокремлюються один від одного пробілами.
5 WWW, World Wide Web - Всесвітня Павутина, розподілена система доступу до гіпертекстових документів, що існує в Internet.
6 Гіперпосилання - фрагмент тексту, який є дороговказом на інший файл або об'єкт. Гіперпосилання необхідні для того, щоб забезпечити можливість переходу від одного документа до іншого.
7 URL (Uniform Resource Locator) - адреса деякого об'єкта в Internet
8 Код HTML - гіпертекстовий документ у своєму початковому вигляді, коли видно всі елементи та атрибути, тобто, по суті справи, текстовий файл, що містить набір елементів HTML.
9 Сайт (site) - набір Web-сторінок, що належать одному власникові.
10 Користувацький агент (user agent) - броузер або інша програма, що працює на комп'ютері-клієнті.
