- •Тема 1. Технології Internet та основи створення Web-вузлів
- •2, Загальні принципи створення комерційних Web-сайтів
- •3. Загальні принципи створення окремої сторінки Web-сайту "
- •4. Розміщення Web-вузла в Internet та вивір провайдера
- •Тема 2. Структура html-документа й елементи розмітки заголовка документа
- •1. Історія розвитку мови розмітки гіпертексту html
- •2. Принципи гіпертекстової розмітки. Структура html-документа
- •3. Тега, що визначають структуру документа
- •4. Призначення та основні контейнери заголовка
- •Тема 3. Мова розмітки гіпертексту html
- •5. Федорчук а. Как создаются Web-сайты: краткий курс- сПб: Питер, 2000.-224с: ил.
- •1. Теги управління розміткою
- •2. Теги керування відображенням символів
- •3. Організація тексту всередині документу
- •4. Засоби опису таблиць у html
- •Тема 4. Топологія Web-сайту. Навігація на Web-сайті. Створення гіпертекстових переходів засобами html
- •1. Топологія Web-сайту
- •2. Створення загальних посилань засобами html
- •3. Створення контекстних посилань засобами html
- •4. Створення гіперпосилань засобами html
- •5. Html форми
- •Тема 5. Основи Web-дизайну
- •2. Офермлеяня Web-сторінки. Типи фонів. Текстури. Правила
- •3. Логотип
- •4. Шрифт і текст у Web-дизайні
- •5. Кольорове коло. Системи представлення кольорів. Підбір
- •Тема 6. Кольорове оформлення сторінок засобами html. Web-графіка План лекції
- •1. Атрибути body для кольерового оформленим Web-сторінок
- •2. Оформлення таблиць
- •3. Використання графіки в html
- •Тема 7. Каскадні таблиці стилів css (Cascading Style Stoeets)
- •1. Основи css
- •1.1. Призначення css
- •1.2. Додавання стилів на web-сторінку
- •1.3. Присвоєння стилів
- •2. Властивості елементів, керованих за допомогою css
- •2.2. Текст
- •2.3. Шрифти
- •1. Пошук інформації у Internet Повнота, достовірність та швидкість пошуку
- •Тема 1. Технології Internet та основи створення Web-вузлів
2. Принципи гіпертекстової розмітки. Структура html-документа
HTML-документ є текстовим файлом із розширенням *.htm (Unix-системи можуть містити файли з розширенням *.htmi). Текстовий редактор, наприклад, WordPad або Notepade (Блокнот) використовується для підготовки HTML-файлів, а оглядач, наприклад, Internet Explorer - як інструмент контролю за зробленим.
HTML є описовою мовою розмітки документів, у якій використовуються покажчики розмітки (теги). Теговая модель описує документ як сукупність контейнерів, кожний з яких починається й закінчується тегами, тобто документ HTML є звичайним ASCII-файлом, із доданими в нього керуючими HTML-кодами (тегами).
HTML-документ — це один великий контейнер, який починається з тега <HTML> і закінчується тегом </HTML>:
" <HTML>Вміст документа</НТМЬ>
"Контейнер HTML або гіпертекстовий документ складається з двох
інших вкладених контейнерів: заголовка документа (HEAD) і тіла
документа (BODY). ,
Уся інформація про форматування документа зосереджена в його фрагментах, що знаходяться між знаками "<" і ">". Такий фрагмент (наприклад, <html>) називається тегом (англійською — "tag"). Вкладені теги потрібно закривати, починаючи з останнього.
Більшість HTML-тегів - парні, на кожен тег, що відкривається <£ag>
є тег, що закривається </tag> із тим же ім'ям, але до'дається "/". " J>Jj
Теги можна вводити як великими, так і маленькими літерами.
Наприклад, теги <body>, <BODY> та <Body> будуть сприйматись
оглядачем однаково.
Багато тегів можуть містити атрибути - елементи, що дають додаткову інформацію про те, як оглядач повинен обробляти поточний тег. Кінцеві теги не містять атрибутів.
Загальна схема побудови контейнера у форматі HTML може бути записана в наступному вигляді: "конт єйнер" =
<"ім'я тега" "список атрибутів"> зміст контейнера </"ім'я тега">
В літературі, крім терміна "контейнер", ще використовується і термін "елемент".
Усі теги HTML за їх призначенням й областю дії розділяються на основні групи:
• теги, що визначають структуру документа;
• оформлення блоків гіпертексту (параграфи, списки, таблиці, картинки); |
І гіпертекстові посилання та закладки; і\Я,»■,
• форми для організації діалогу;
• виклик програм.
3. Тега, що визначають структуру документа
Тегами, що визначають структуру документа є; <htail> ... </html>. Тег <html> відкриває HTML-документ. Тег </html> - завершує HTML-документ.
<head> ... </head>. Ця пара тегів указує на початок і кінець заголовка документа.
<body> ... </body>. Ця пара тегів указує на початок і кінець "тіла" HTML-документа і визначає його вміст. Тег <body> має атрибути. Розглянемо найпростіший приклад web-документів. <html>
<head> *?5r''
<title>
' Приклад 1
</title> Л''?.':",
</head> <body> <P>
Це найпростіший приклад HTML-документа. </P> </body> </html>
4. Призначення та основні контейнери заголовка
В кожному документі є HTML-заголовок. Призначення заголовку HTML:
1. Задає назву документа, яка відображається у заголовку вікна поточного документа вікна оглядача.
2. Існує принципова різниця між заголовком і тілом документа при використанні елементу розмітки SCRIPT. Вона полягає у визначенні зони видимості функцій і змінних. Змінні і функції, визначені в заголовку документа, відносяться до всього вікна оглядача. Це означає, що до них можна звернутися з будь-якого місця документа і змінити їх значення. Фактично, це глобальні змінні. При роботі з багатошаровими документами змінні і функції тіла відносяться до шарів, що робить доступ до них незручним. 3. Управління HTTP-обміном через елемент розмітки МЕТА. При сучасній практиці розміщення Web-вузлів компаній на серверах провайдерів, адміністратори цих вузлів можуть не мати можливості управляти програмою-сервером. В цьому випадку для управління обміном залишається тільки одна можливість - через заголовок HTML-документа.
4і Заголовок HTML-документа є пошуковий образ документа для індексування роботами пошукових систем. Елемент МЕТА дозволяє зберігати списки ключових слів і описи документа, які будуть використовуватись для складання індексу пошукової системи і з'являтимуться як опис документа у разі видачі посилання на нього при пошуку за ключовими словами.
Основні контейнери заголовка - це елементи HTML-розмітки, які найчастіше зустрічаються в заголовку HTML-документа, тобто усередині елемента розмітки HEAD:
HEAD (елемент розмітки HEAD); TITLE (заголовок документа); BASE (база URL);
ISINDEX (пошуковий шаблон); *
МЕТА (метаінформація); LINK (загальні посилання); STYLE (описувачі стилів); SCRIPT (скрипта).
Найчастіше застосовуються елементи TITLE, МЕТА, SCRIPT^ STYLE. Використання елементу МЕТА говорить про обізнаність автора Щ правилами індексування документів у пошукових системах і можливості управління HTTP-обміном даними. BASE і ISINDEX Останнім часом практично не застосовуються. LINK указують тільки при використанні зовнішніх щодо даного документа описувачів стилів. Елемент розмітки <HEAD>...</HEAD>
Елемент розмітки HEAD містить заголовок HTML-документа. За замовчуванням елемент HEAD закривається, якщо зустрічається тег початку контейнера BODY або тег початку контейнера FRAMESET. Атрибутів у тега початку контейнера немає, хоча в DTD HTML один необов'язковий атрибут прописаний. Синтаксис контейнера HEAD у загальному:
<HEAD profile="http://www.intel.ru/help">Цє приклад з
документації
</HEAD>
Контейнер заголовка служить для розміщення інформації, що відноситься до всього документа в цілому. Не обов'язковий атрибут PROFILE вказує на зовнішній файл МЕТА-тегів. Значенням цього атрибуту є URL-адреса даного файлу.
Елемент розмітки <TITLE>...</TiTLE>
Усе, що знаходиться між мітками <title> і </title>, сприймається оглядачем як назва документа, яка відображається в заголовку вікна системним шрифтом поточного документа. Рекомендується назва не довша 64 символів. Тег початку елементу не має специфічних атрибутів.
Синтаксис контейнера TITLE:
<ТІТТЕ>Назва документу</ТІТТЕ>.
Роботи багатьох пошукових систем використовують зміст елементу TITLE для створення пошукового образу документа. Слова з TITLE потрапляють в індекс пошукової системи. З цих міркувань елемент TITLE завжди рекомендується використовувати на сторінках Web-вузла.
Елемент розмітки <МЕТА>...</МЕТА>
МЕТА містить інформацію, яку оглядач використовує для правильного відображення та обробки змісту тіла документа.
Для опису документа використовується два МЕТА-тега. Один визначає список ключових слів, а другий - реферат (короткий зміст документа), який відображається як пояснення до посилання на документ у звіті пошукової машини про виконаний запит. Контейнер TITLE тут також використовується як назва документа. <ТІТЬЕ>Основи №єЬ-дизайну</TITLE> <МЕТА NAME="description" http-equiv="description"
content="neKuiHHMPi курс Основи Web-дизайну. Тема: Заголовок HTML-документа. Елемент розмітки МЕТА. Дається короткий опис основних способів застосування контейнера МЕТА у заголовку HTML-документа. "> <МЕТА NAME="keywords" HTTP-EQUIV="keywords" СОЫТЕЫТ="лекц1йний курс; Web-технологія; web; технологія; HTML; мова гіпертекстової розмітки; заголовок HTML-документа; заголовок; HTML; документ; контейнер; МЕТА; елемент; HEAD; приклад; розмітка; методика">
При індексуванні такого документа вміст контейнера TITLE і атрибутів CONTENT контейнерів МЕТА після фільтрації потрапить в індекс пошукової машини і може бути використаний для складання запитів. Процес фільтрації відбракує так звані stop-слова і загальні слова. Вони не потраплять в індекс пошукової машини. Якщо йдеться про тематичний пошуковий індекс, наприклад, за технологіями World Wide Web, то в нього не потраплять: web, Web-технологія і т.п.
МЕТА-тегом користуються' і програми підготовки документів. Вони
розміщують у ньому свій ідентифікатор. У загальному випадку контейнер
МЕТА виглядає так: ?2г*«
<МЕТА [ пагае=імі я] [ НТТР-ЕОиіУ=ім'я_НТТР-оператора] CONTENT=TeKCT>
При індексуванні можна вказувати одночасно й атрибут NAME, і атрибут HTTP-EQUIV з однаковими значеннями. Це пов'язано з тим, що одні роботи індексування аналізують зміст МЕТА-елементу по атрибуту NAME, а інші - по атрибуту HTTP-EQUIV. '
За допомогою <МЕТА> також здійснюється механізм:
- побудови автоматичної послідовності сторінок, що перезавантажуються;
- управління кешуванням і зберіганням документа на стороні клієнта;
- установлення часу останньої модифікації (Last-Modified) або дати закінчення актуальності документа (Expire).
Елемент розмітки <STYLE>...</STYLE>
Елемент розмітки STYLE призначений для розміщення описувачів стилів. Описувачі стилів задають правила відображення контейнерів HTML-документа для всЙ сторінки.
<STYLE> може містити один атрибут TYPE, який задає тип описувача стилю. Це може бути або tent/ess, або text/javascript. У загальному вигляді запис елементу STYLE виглядає так: <STYLE ТУРЕ=тип_опису_стилів> опис стилю/стилів </STYLE>
Елемент розмітки <SCRIPT>...</SCRIPT> - М
Елемент розмітки SCRIPT служить для розміщення коду JavaScfiptju VBScript або JScript. SCRIPT можна використовувати не тільки в заголовку документа, але і в його тілі.
У загальному вигляді запис контейнера виглядає таким чином: <SCRIPT [ ТУРЕ=тип_мови програмування]
[ SRC=ORL] > JavaScript/VBScript-код </SCRIPT>
Існує декілька скриптових мов: JavaScript, VBScript, JScript.
Контрольні питання
1. Які технології використовує послуга Internet World Wide We$j£ '.,.
2. Дайте визначення гіпертекстовій базі даних у концепції WWW.
3. Дайте визначення HTML.
4. Опишіть загальну структуру HTML документа.
5. Визначте загальну схему побудови контейнера у форматі HTML.
6. В чому полягає відмінність між контейнером і тегом?
7. Для чого приначені атрибути тегів?
8. Які атрибути містять кінцеві теги?
9. Як класифікуються теги HTML за їх призначенням й областю дії?
10. Назвіть теги, що визначають структуру документів.
11. Яке призначення заголовка Web-документа?
12. Назвіть основні контейнери заголовка Web-документа та їх призначення.
. Теги тіла документу