Мета Web-дизайну
•Web-дизайном називається процес створення привабливих і корисних веб-сторінок. Його частинами є НТМL, графічний дизайн, дизайн інформації та інші технології, схожі на програмування. Для опису всього процесу планування і створення Web- вузла найкраще підходить термін «публікація».
•Мета Web-дизайну полягає в розробці Web- вузла, що може бути представлений користувачеві в прийнятному виді, буде зрозумілий йому і приведе до бажаного результату. Web-дизайн повинен оцінюватися не тільки по естетичних параметрах, але і по загальному сприйняттю його користувачем у контексті визначеної задачі або проблеми.
•Web-сторінка (іноді ще говорять, html-сторінка) - це текстовий файл написаний мовою HTML у визначеному кодуванні і з визначеним розширенням.
Процес створення Web- сайтов.
Планування, організація і оформлення Web- сайта
набагато важливіше,ніж робота з НТМ. Проектування
Web- сайта проходить наступні етапи:
•Визначення мети Web-сайту (основні види призначення Web-сайтів – це налагодження ділових
зв'язків, комерція, розваги, маркетинг, дослідження,
обробка даних, технічна підтримка).
•Визначення аудиторії Web-сайта
•Визначення джерел фінансування Web-сайта. (Оплата виробляється за рахунок творця, стягування з відвідувача плати за перегляд сайта, використання посередника між власниками вузла і його відвідувачів)
•Визначення дизайну сайта
•Підбір матеріалів для Web-сайта.
•Організація інформації на Web-сайте.
•Розробка компонентів сайту.
Поняття «HTML»
•HTML (HyperText Markup Language, Мова розмітки гіпертексту) – стандартна мова розмітки документів у всесвітній павутині
•Розроблена Тімом Бернерсом-Лі в 1991 року в CERN
•Є розвитком мови SGML (стандартної узагальненої мови розмітки)
24
Деяка інформація про
•HTML-документ складається«HTML»з тексту, який є інформаційним вмістом і спеціальних засобів мови HTML, — тегів розмітки, які визначають структуру і зовнішній вигляд документа при його відображенні браузером. Структура HTML-документа досить проста:
•Опис документа починается з вказівки його типа (секція DOCTYPE).
•Текст документа розміщується в тегу <html>. Текст документа складається із заголовка і тіла, які виділяються відповідно тегами <head> і <body>.
•У заголовку (<head>) вказують назва HTML- документа і інші параметри, які браузер використовуватиме при відображенні документа.
•Тіло документа (<body>) — це та частина, в яку поміщається власне вміст HTML-документа. Тіло включає призначений для відображення
25
Структура HTML- документу
Структура HTML-
• HTML – цедокументутегова мова розмітки документів
•Тег – це конструкція вигляду:
“<“ щось “>”
•Весь HTML-документ є вкладеним
набором елементів розмітки. Сінтаксіс тегу:
<тег параметр1="значення"
параметр2="значення">...</тег>
27
Заголовок документу <HEAD>
• Метатеги (<META>) – зберігання інформації,
призначеної для браузеров і пошукових систем
<meta name="keywords" content="HTML, CSS, DTD, теги" />
•Заголовок сторінки (<TITLE>) – назва сайту <title>Тестова сторінка</title>
•Посилання (<LINK>) – зв'язок із зовнішнім документом, або програмним додатком
<link type="text/css" href="main.css" rel="Stylesheet" />
• Скрипти (<SCRIPT>) – опис скриптів
<script type="text/javascript" src="jquery- 1.3.2.min.js"></script>
28
Теги <META http-equiv>
Мета-теги розміщують в блоці <head>...</head> веб-сторінки. Вони не є обов'язковими елементами, але можуть бути корисні.
Приклад опису метаданих:
•<head>
•<meta name="author" content="строка"> — автор веб-документа
•<meta name="date" content="дата"> — дата останньої зміни веб- сторінки
•<meta name="copyright" content="строка"> — авторські права
•<meta name="keywords" content="строка"> — список ключових слів
•<meta name="description" content="строка"> — короткий опис (реферат)
•<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — заборона на індексування
•<meta http-equiv="content-type" content="text/html; charset=UTF-8">
— тип і кодування
•<meta http-equiv="expires" content="число"> — управління кешуванням
•<meta http-equiv="refresh" content="число; URL=адрес"> — перенаправлення
•</head>
Теги <META http-equiv>
•<meta http-equiv="Cache-Control" content="private">
-документ кешується браузером, але не кешується proxy- сервером.
•<meta http-equiv="Cache-Control" content="no-cache">
-повна заборона на кеш (документ не кешується ні proxy- сервером, ні браузером).
•<meta http-equiv="Cache-Control" content="no-store">
-документ кешується, але не зберігається в архів.
•<meta http-equiv="Cache-Control" content="public">
-документ кешується, навіть якщо і не повинен, начебто, при звичайних обставинах.
•<meta http-equiv="Cache-Control" content="max-age=ххх, must- revalidate">
-документ оновлюється браузером при параметрі max-age, в якому вказано, на скільки секунд кешується документ.
•<meta http-equiv="Cache-Control" content="max-age=ххх, proxy- revalidate">
-то ж для проксі-сервера.
Тегі:
•<html>...</html> — контейнер гіпертексту
•<head>...</head> — контейнер заголовка документа
•<title>...</title> — назва документа (те, що відображується в заголовку вікна браузеру)
•<body>...</body> — контейнер тіла документа
•<div>...</div> — контейнер загального призначення (структурний блок)
•<hN>...</hN> — заголовок N-ного рівня (N = 1...6)
•<p>...</p> — основний текст (абзац)
•<а>...</a> — гіперпосилання
•<br> — примусовий перехід рядка
31
Тегі:
•<ol>...</ol> — нумерований список
•<ul>...</ul> — маркірований список
•<li>...</li> — елемент списку
•<table>...</table> — контейнер таблиці
•<tr>...</tr> — рядок таблиці
•<td>...</td> — елемент таблиці
•<img>...</img> — зображення
•<form>...</form> — форма
•<i>...</i> — відображення тексту курсивом
•<b>...</b> — відображення тексту напівжирним шрифтом
•<em>...</em> — виділення (курсивом)
•<strong>...</strong> — посилення (напівжирним шрифтом)
32