Процес створення документа на мові HTML часто називають проектуванням (або дизайном) Web-сторінок.

Тема:Основи Web-дизайну

Мета: Ознайомлення з основами проектування Web-сторінок

ПЛАН

1. Поняття про зміст документа, його структуру та стиль.

2. Технологія і засоби проектування Web-сторінок.

3. Введення в HTML

Будь-який документ має три складові:

· Зміст;

· Структуру;

· Стиль.

Зміст документа на папері може бути суто текстовим, а також містити зображення. Якщо документ представлений в електронному вигляді, він може містити і мультимедійні дані, а також гіперпосилання на інші документи. Хоча зміст різних документів різний, їх можна класифікувати за типом, наприклад, книга або залізничний квиток.

Зазвичай зміст документа подається не в довільному порядку, а має певну структуру. Структура – це склад і порядок розміщення частин (блоків) документа.

Стиль документа визначає форму виведення його змісту на той або інший пристрій. У поняття стиль входять характеристики шрифту (найменування, розмір, колір) всього документа або окремих його блоків, порядок розбиття на сторінки та інші параметри. Один і той же документ може виводитися різними стилями як на різні носії, так і на один і той самий носій.

Мови розмітки документів є штучними мовами, призначеними для опису структури документа відносин між різними об’єктами структури. Дані розмітки називаються також метаданими.

Перша версія мови гіпертекстової розмітки – HTML, так само, як і сама технологія Web, була розроблена в 1991 році Тімом Бернерсом Лі. Програми обробки документів HTML називаються Web-броузерами. Результатом обробки документа є Web-сторінка, що виводиться на екран дисплея.

Процес створення документа на мові HTML часто називають проектуванням (або дизайном) Web-сторінок.

Проектування Web-сторінок можна проводити як в текстовому, так і в графічному режимі. У першому випадку операції з редагування проводяться над документом HTML, в другому випадку – безпосередньо над Web-сторінкою, тобто обробленим Web-броузером документом HTML. Другий режим називають також графічним режимом або режимом WYSIWIG (What You See Is What You Get – що ви бачите, то і отримаєте).

Документ HTML зберігається як файл з розширенням.htm.

Працюючи з HTML, треба розуміти поняття «тег» або «теги». Це команди, що вказують на правила, за якими форматуються документи.

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

Спеціалізовані текстові редактори HTML, разом з функціями звичайних текстових редакторів, надають наступні можливості:

· Автоматична вставка і виділення тегів в тексті документа HTML;

· Синтаксичний контроль тегів HTML та інших компонентів;

· Імпорт документів з інших текстових редакторів;

· Вбудовані довідкові і навчальні засоби.

Прикладом спеціалізованого текстового редактора є редактор CuteHTML для Windows. Для проектування Web-сторінок в цьому редакторі використовуються спадні меню і панелі інструментів, що забезпечують підтримку всіх загальноприйнятих тегів HTML, включаючи форми і таблиці. У складі цього редактора є досить детальні довідкові системи з елементами навчання.

Для вставки розмітки в документ HTML використовуються теги. Теги розміщаються в кутових дужках «< «та «>» і містять тільки текстові символи.

Існує два типи тегів: контейнери і одинарні теги.

Контейнер – це пара тегів, тобто початковий і кінцевий теги, що мають відповідний вигляд:

<ім’я атрибути> і </ім’я>, де ім’я – це ім’я тега, а атрибути – параметри тега. Початковий і кінцевий теги контейнера разом з їхнім вмістом є елементом документа HTML.

Одинарний тег HTML відрізняється від контейнера тим, що це фактично тільки початковий тег. Цей дескриптор не пов’язаний з діями над текстом.

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

· Імені атрибута, наприклад width;

· Знак рівності (=);

· Значення атрибута, яке задається рядком символів, наприклад, 80.

Атрибути діляться на дві групи: обов’язкові і необов’язкові. Обов’язковий атрибут повинен бути заданий в тезі (інакше ігнорується весь тег). Необов’язковий атрибут може бути пропущений, в цьому випадку передбачається, що атрибут має деяке значення за замовчуванням. Деякі атрибути можуть мати тільки одне фіксоване значення, що співпадає з іменем атрибута. В цьому випадку в HTML прийнято задавати тільки ім’я атрибута без знака рівності і значення атрибута.

Атрибути, як і теги, можна записувати як рядковими, так і прописними буквами.

Якщо значення атрибутів містять пропуски, то ці значення повинні бути розміщені в одинарні (‘) або подвійні (“) лапки.

Деякі атрибути використовуються в різних тегах (наприклад, атрибут color для задання кольору використовується і в тезі <font>, і в тезі <hr>).

У будь-якому місці документа HTML можуть бути вставлені коментарі, які так само, як і в текстах програм, служать для пояснення виконуваних дій і не виводяться на екран Web-броузера. Коментарі записуються в наступному вигляді:

<!- -Текст коментаря - - >

Текст коментаря може бути записаний в будь-якому допустимому кодуванні і займати декілька рядків.

Контрольні запитання

1. З яких складових складається документ?

2. Перелічіть додаткові можливості спеціалізованих текстових редакторів HTML.

3. Які теги використовують для вставки розмітки в документ HTML?

Література:

1.Інформатика. Комп’ютерна техніка. Комп’ютерні технології. Підручник. 2-ге вид.- К.:Каравела, 2008.-640с.

2. Інформатика. Комп’ютерна техніка. Комп’ютерні технології. Підручник для студентів ВНЗ/За ред.О.І.Пушкаря-К.:Видавничий центр «Академія»,2003.-704с.

3. Інформатика і комп’ютерна техніка. Навч.пос. з баз. Підготовки для студ. екон. і техн.. спеціальностей ден. і заоч. форм навчання/Н.М.Войтюшенко, А.І.Остапець.-К.:Центр навчальної літератури, 2006. – 568с.

Не нашли, что искали? Воспользуйтесь поиском: