Міністерство освіти Російської Федерації

Самарський державний університет

Механіко-математичний факультет

Кафедра вищої математики та інформатики

ДИПЛОМНА РОБОТА

Студента 5 курсу денного відділення

Кондрахіна Сергія Сергійовича

ПРОЕКТУВАННЯ ТА СТВОРЕННЯ

СУЧАСНОГО WEB-САЙТУ

Допущена до захисту: Науковий керівник,
8 червня 2001 к.ф.-м.н., доцент
Зав.кафедри, д.ф.-м.н., Ігнатьєв В.А.професор Сараєв Л.А.
______________________

Оцінка: ______________

Голова ДАК
______________________

"___" __________ 2001

Самара 2001

ЗМІСТ

Вступ 3

1 . СУЧАСНІ ІНТЕРНЕТ-ТЕХНОЛОГІЇ 4

1.1. Web-дизайн і браузери 4

1.2. Мова розмітки гіпертекстових сторінок HTML 8

1.3. Забезпечення доступності Web-сторінки 14

1.4. Представлення тексту на Web-сторінках 19

1.5. Представлення графіки на Web-сторінках 22

1.6. Web-сервери 25

2. ОСНОВНІ ПРАВИЛА ТА ЕТАПИ СТВОРЕННЯ САЙТУ 35

2.1. Вплив дисплеїв на Web-дизайн 36

2.2. Стандартні розміри та дозволи дисплеїв 37

2.3. Альтернативні дисплеї 38

3. ВИБІР СТРУКТУРИ WEB-СТОРІНКИ 41

3.1. Створення фіксованих і гнучких Web-сторінок 41

3.2. Розробка комбінованих Web-сторінок 43

3.3. Macromedia Flash 44

3.4. Стратегія розробки Web-сайту 49

Висновки 52

Література 53

Додаток 54
Введення

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

Через десять років, за прогнозами фахівців, близько 50 відсотківсімей (безумовно, поки лише в розвинених країнах) будуть використовувати йогощодня. Телебачення і радіоприймачі не будуть замінені комп'ютерами, алебудуть мати потужний процесор, більшу пам'ять і фактично самі стануть вдеякому відношенні комп'ютерами.

Це буде час, коли будь-яка людина, що володіє комп'ютером, зможе
"завантажити" з його допомогою статті, ілюстрації, відео-або аудіоінформацію побудь-який цікавить його темі. Він зможе отримати цю інформацію тоді, коливін цього забажає. Через якийсь час системи штучного інтелекту --паралельний машинний переклад, а також ідентифікація і розпізнавання голосузламають останні національні й мовні бар'єри і зроблять можливимвільний транснаціональний обмін інформацією.

Кожен з нас вже зараз може зробити свій внесок у розвиток
Internet. Для цього досить створити свій веб-сайт і розмістити його в
Мережі. Але як це зробити? Відповідь на це питання ми спробуємо дати у ційроботі.

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

- ознайомитися з сучасними Інтернет-технологіями і, заможливості, використовувати їх у своїй розробці;

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

- виявити і врахувати методи і способи представлення на Web-сторінкахрізних видів інформації, що не перешкоджають їх доступності;

- ознайомитися з основними правилами і рекомендаціями по розробціі створенню Web-сайтів і неухильно дотримуватися їх у своїй практиці;

- визначитися зі структурою Web-сторінок;

- вибрати стратегію розробки та створення Web-сайту. < p> 1. СУЧАСНІ ІНТЕРНЕТ-ТЕХНОЛОГІЇ

1.1. Web-дизайн і браузери

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

Як зробити дизайн Web-сторінки естетично і технічно цікавим,не ігноруючи при цьому власників попередніх версій браузерів? Невже Web -сторінка, розрахована на те, щоб функціонувати на будь-яких браузерах,повинна бути обов'язково нудною? Чи можна догодити всім? І якщо ні, то депровести межу? Скільки старих версій буде працювати з вашою сторінкою?

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

Браузери Netscape Navigator і Microsoft Internet Explorer. На ринкудомінують два основних браузера: Netscape Navigator і Microsoft Internet
Explorer. Разом вони, включаючи всі їх версією, становить приблизно 90%
(або більше) використовуються сьогодні браузерів.

Ці два браузера конкурують між собою за панування на ринку.
Результатом їхньої боротьби стала колекція фірмових HTML-тегів, а такожнесумісні реалізації різних технологій (сумнозвісний Dynamic
HTML, а також JavaScript і Cascading Style Sheets - каскадні таблицістилів). З іншого боку, конкуренція між Netscape і Microsoft в ціломусприяла більш швидкому розвитку середовища Web.

Більшість Web-авторів у своїй роботі орієнтуються на Navigator і
Internet Explorer, оскільки вони займають левову частку ринку. Тим не менше,існує ряд інших браузерів, які ви можете брати до уваги.

У версії Internet Explorer 4.0 для комп'ютерів Macintosh відсутнійзначна частина функціональних можливостей версії, створеної для
Windows, тому використання ряду особливих можливостей версії 4.0 можевиключити з гри деяких користувачів.

Деякі документовані відмінності включають: відсутність підтримкивбудованих шрифтів; відсутність підтримки фільтрів CSS і переходів
(візуальних ефектів, таких як тіні, відкидаємо об'єктом, яківикористовуються для елементів тексту); відсутність елементів управліннямультимедіа (ефекти переходів і анімації, зазвичай створюються авторськимимультимедійними програмними засобами); проблеми з реалізацією DHTML.

Не дивлячись на заяви Microsoft, що DHTML підтримується всімаплатформами, він особливо ненадійний на комп'ютерах платформи Масintosh.

Браузери America Online. Користувачі America Online (AOL)використовують один з семи можливих браузерів (залежно від платформи іверсії програмного забезпечення AOL), деякі з них забезпечують тількисаму мінімальну підтримку HTML.

Остання версія America Online для PC - це версія 3.0, використовуєадаптовану версію браузера Microsoft Interne Explorer 3.0. Тим неменше, не завжди можна цілком покластися на цю версію так само, як настандартний варіант MS Internet Explorer 3.0. (Функціональність особливообмежена для користувачів комп'ютерів Macintosh). Багато розроблювачів
Web не раз дивувались, побачивши дизайн свого сайту (який чудовопрацював в більшості основних браузерів), після того як він був запущений всистемі AOL і відображений одним з їхніх браузерів.

Проблеми частково виникають через те, що AOL покладається на проксі -сервери та методи стиску зображень. Відомо, що використовуваний метод AOLстиснення зображення має проблеми з відображенням JPEG-графіки,проявляються в появі плям і кольорових смуг. Були відзначені проблеми іпри виведенні фонових зображень.

Крім того, деякі технології, такі як Java і Cascading Style
Sheets (каскадні таблиці стилів), не доступні для користувачів Windows
3.0 (приблизно 40% користувачів AOL). Власники комп'ютерів Macintosh незможуть використовувати JavaScript і ряд інших можливостей (приблизно 8%користувачів).

На щастя, створено спеціальний сайт в допомогу тим Web-дизайнерам,які прагнуть зробити свої сторінки цікавими і доступними длякористувачів AOL. Особливої уваги заслуговує таблиця браузерів, де визнайдете спеціальний список для кожного з браузерів (за версіями іплатформ), перелік технологій і підтримуваних функцій, а також відсотокзбоїв для кожного з браузерів. (Адреса сайту AOL для Web-дизайнерів:http://webmaster.info.aol.com).

WebTV. WebTV приводить в наші квартири Web через звичайнийтелевізор з пультом дистанційного керування (також, за бажанням, можнавикористовувати клавіатуру). Для перегляду Web-сторінок WebTV використовуєвласний спеціалізований браузер. Він здійснює синтаксичнийаналіз відповідно - до стандарту HTML 3.2, але не надаєможливостей відображення фреймів, Java, JavaScript, ActiveX або будь-якогоіншого формату, який вимагає вбудованих додатків (за виняткомвбудованих Shockwave і RealAudio 3.0). Також створено багато нових фірмових
HTML-теги, які використовуються тільки в WebTV.

Оскільки WebTV виводить зображення на екран телевізора,пред'являються нові вимоги до характеристик кольору і параметрами екрану.

Opera. Opera - це маленький і простенький браузер, створенийнорвезькою компанією Opera Software в Осло. Цей браузер маєвиключно малим часом завантаження і мінімальними вимогами до обсягудиска. Перевагою Opera є повна відповідність стандартам HTML.
Неточності у написанні тегів (наприклад, пропущені закривають теги,неправильне вкладення і т. д.), які пропускають солідніші браузери,не будуть правильно відображатися цим браузером. Opera 5.0 підтримує
Java, каскадні таблиці стилів та DHTML.

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

Lynx. Lynx - це розповсюджується безкоштовно браузер, що забезпечуєперегляд тільки тексту, пропонує вам швидкий і надійний доступ до Web. Вінзаслужив популярність як найменший спільний знаменник стандарту, придатнийдля тестування Web-сторінки з базових функціональних характеристиках.
Незважаючи на простоту, цей браузер не старіє. Lynx постійноудосконалюється і модернізується. Зараз він забезпечує підтримкутаблиць, форм і навіть JavaScript!

Люди дійсно використовують Lynx, тому не варто дивуватися,якщо клієнт замовить розробку сайту для Lynx. Цей браузер також важливий дляінвалідів по зору: вони використовують Lynx разом з мовними пристроями.

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

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

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

1.2. Мова розмітки гіпертекстових сторінок HTML

Мова розмітки гіпертекстових сторінок (HTML - Hypertext Markup
Language) є мова, розроблений спеціально для створення
Web-документів. Він визначає синтаксис і розміщення спеціальних інструкцій
(тегів), які не виводяться на екран, але вказують браузеру, яквідображати вміст документа. Він також використовується для створення посиланьна інші документи, локальні або мережні, наприклад, що знаходяться в мережі
Інтернет.

Стандарт HTML і інші стандарти для Web розроблені підкерівництвом консорціуму W3C (World Wide Web Consortium). Стандарти,специфікації та проекти нових пропозицій можна знайти на сайтіhttp://www.3w.org/. В даний час діє специфікація HTML 4.0,підтримка якої з боку основних браузерів постійно зростає.

На практиці на стандарт HTML великий вплив має наявністьтегів, запропонованих і підтримуються найбільш відомими браузерами, такимияк Microsoft Internet Explorer і Netscape Navigator. Ці мітки в даниймомент можуть як входити, так і не входити до складу діючоїспецифікації HTML.

Інформації про тегах HTML Compendium (короткий посібник з HTML)Створено Ron Woodall. Компендіум містить список тегів та їх атрибутів валфавітному порядку, а також оновлену інформацію про підтримку кожного зних з боку браузерів. Компендиум HTML розміщено на сайтіhttp://www.htmlcompendium.org.

Інструментарій редагування HTML. Документи HTML є звичайнимитекстовими ASCII-файлами. Це означає, що для їх створення можнавикористовувати будь-який текстовий редактор, навіть з мінімальними можливостями.
Існують засоби редагування, розроблені спеціально для написання
HTML. Вони дозволяють економити час, тому що містять клавіші швидкогодоступу для виконання повторюваних операцій, наприклад, завдання початковихустановок документів, таблиць або просто застосування стилів до тексту.
Редактори HTML відрізняються від авторського WYSIWYG-інструментарію
(що розглядається далі) тим, що вимагають знання правил складання HTMLвручну, редактори лише спрощують і прискорюють цей процес.

Користувачам Windows безумовно слід перевірити HomeSite, потужнийі недорогий редактор HTML компанії Allaire Corporation. У ньому єзасоби для виділення квітами синтаксичних конструкцій HTML, функція
FTP, контроль синтаксису і правопису, многофайловий пошук і заміщення.
Крім того, він містить спеціальні команди та шаблони для створення більшскладних елементів (фреймів, сценаріїв JavaScript і DHTML). Інформація тадемонстраційна програма для завантаження знаходяться за адресоюhttр:// www.allaire.com/.

Під час роботи на комп'ютерах Macintosh звертають увагу на BBEdit,комерційний HTML-редактор компанії Bare Bones Software, Inc. Віндійсно має вагу серед Web-розробників для для комп'ютерів
Macintosh. До його складу входять зручні і швидкі HTML-інструменти,многофайловий пошук і заміна, вбудована FTP-функція, підтримка 13 мовпрограмування, будівник таблиць, контроль синтаксису HTML і щебезліч функцій. Додаткові відомості та демонстраційну програмуможна знайти за адресою http://www.bbedit.com.

Авторський інструментарій WYSIWYG. Останні роки характеризуютьсярізким зростанням ринку авторських інструментів. HTML-редактори класу WYSIWYG
(What You See Is What You Get - що бачиш, те й одержиш) маютьграфічні інтерфейси, які роблять написання HTML більше схожим напрограму редагування текстів та розмітки сторінки. Первісноюметою цих програм було звільнення користувачів від тегів HTML,на зразок того, як програми розмітки сторінок захищають від розробниканабору команд мови PostScript. Сьогодні їх значимість зросла, так як вонипідвищують ефективність і рівень автоматизації виробництва документів,забезпечуючи в той же час доступ до початкового тексту HTML.

Найбільш популярними нині WYSIWYG-редакторами є:
Macromedia Dreamweaver, Golive CyberStudio (тільки для комп'ютерів
Macintosh), Microsoft FrontPage, FileMaker Claris, Home Page, Adobe
PageMill.

Теги HTML. Документ HTML містить текст (вміст сторінки) івбудовані теги - інструкціями про структуру, зовнішній вигляд та функціївмісту. Документ HTML розділяється на дві основні частини: заголовок --head і тіло - body. Заголовок містить такі відомості про документ, як йогоназва та методична інформація, що описує вміст. У тілізнаходиться саме утримуємо документа (те, що виводиться у вікні браузера).

Кожен тег складається з імені, за яким може слідувати списокнеобов'язкових атрибутів, всі вони знаходяться всередині кутових дужок <>.
Вміст дужок ніколи не виводиться у вікні браузера. Назва тега, якправило, є абревіатурою його функції, що полегшує йогозапам'ятовування. Атрибути є властивостями, які розширюють або уточнюютьфункцію тега. Як правило, ім'я та атрибути всередині тегу не чутливі дорегістру. Тег буде працювати так само, як. Однак значення певних атрибутів можуть бутичутливі до реєстру. Це стосується, зокрема, до імен файлів і
URL.

Контейнери. Більшість тегів є контейнерами. Це означає,що в них є початковий (що відкриває або стартовий) і кінцевий
(закриває) теги. Текст, що знаходиться між тегами, буде виконуватищо містяться в них інструкції. Наприклад:

The weather is gorgeoustoday.

Результат: The weather is gorgeous today.

Кінцевий тег має те жім'я, що й початковий, але перед ним стоїтьслеш (/). Його можна розглядати як "вимикач" тега. Кінцевий тегніколи не містить атрибутів.

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

Автономні теги. Деякі теги не має завершальних тегів, томущо вони використовуються для розміщення окремих (автономних) елементів насторінці. Одним з них є тег зображення, він просто поміщаєграфіку в потік сторінки. Інші автономні теги - це розрив рядка
(), Горизонтальна лінія () і теги, що містять інформацію продокументі і не впливають на вміст, що виводиться на екран, такі як в.

Атрибути. Атрибути додаються в тег для розширення або модифікаціїйого дій. До одного тегу можна додати кілька атрибутів. Якщоатрибути тега прямують після імені тега, вони розділяються одним абодекількома пропусками. Порядок проходження не важливий. Більшість атрибутівмають значення, які йдуть за знаком рівності (=), що знаходиться післяімені атрибута. Довжина значень обмежена 1024 символами. Значення можутьбути чутливі до реєстру. Іноді значення повинні перебувати в лапках
(подвійних або одинарних). Правила запису значення наступні:

- якщо значення являє собою одне слово або число і складаєтьсятільки з літер (az), цифр (0-9) та спеціальні символи (крапка абодефіс), то можна помістити його після знаку рівності без лапок;

- якщо значення містить кілька слів, розділених комами абопробілами, або містить спеціальні символи, відмінні від точки та тире,тоді його необхідно помістити в лапки. Наприклад, URL вимагають лапок,тому що вони містять символи "://". Також лапки необхідні при завданнізначень кольорів з використанням формату "# rrggbb".

Якщо ви не впевнені, чи варто використовувати лапки, використовуйте їхзавжди для всіх значень.

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

The Weather is gorgeous today.

Результат: The weather is gorgeous today.

Часто зустрічається помилкою є перекриття тегів. Хоча частинабраузерів відображають вміст, який позначено таким чином, багато хто недозволяють порушувати правила, тому важливо розмішати теги правильно.
Наступний приклад показує невірне вкладення тегів (зауважте, що тег закривається перед закриттям):

The weather is gorgeoustoday - дана інформація,ігнорованих браузерами.

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

- розриви рядків. Символи кінця рядків у документі HTML ігноруються.
Текст і елементи будуть переноситися до тих пір, поки в потоці текстудокумента не зустрінеться тег або. Розриви рядків виводяться, якщотекст позначений як текст із заданим форматом ();

- символи табуляції і множинні пробіли. Коли браузер зустрічаєв документі HTML символ табуляції і кілька послідовних символівпропуску, він виводить тільки один пробіл. Таким чином, якщо документмістить: "far, far away", браузер виведе "far, far away".
Додаткові пробіли можна додати текстовий потік, використовуючи символнерозривного пробілу (Snbsp;). Крім того, всі прогалини виводяться, якщотекст є форматувати (знаходиться в тегах);

- множинні-теги. Послідовність тегів, неперериваються текстом, усіма браузерами інтерпретується як надлишкова.
Вміст буде виводитися так, як якщо б був тільки один тег.
Більшість браузерів виведе декілька тегів у вигляді декількохпереходів на новий рядок;

- нераспознаваемие теги. Якщо браузер не розуміє тег або той бувневірно заданий, то браузер його просто ігнорує. Залежно від тега ібраузера це може призвести до різних результатів. Або браузер нічого невиведе, або він може відобразити вміст тега як звичайний текст;

- текст в коментарях. Браузери не виводять текст між спеціальнимиелементами, які використовуються для позначення коментарів.
Після символів початку коментаря і перед символами закінчення обов'язковоповинен бути пробіл. В сам коментар можна поміщати практично все.
Коментарі не можна вкладати. У Microsoft Internet Explorer єфірмовий тег, що позначає коментарі .... Проте, вінне підтримується іншими браузерами.

1.3. Забезпечення доступності Web-сторінки

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

Більшість дизайнерів рекомендують розробляти сторінки в форматі
640x480, щоб при перегляді користувачам не довелося застосовуватигоризонтальну прокрутку. Горизонтальна прокрутка завжди ускладнюєсприйняття, тому дизайнери традиційно її відкидають.

Все більше число розробників вважає стандартним дозвіл
800x600. І зовсім одиниці розробляють сторінки для ще більш високихдозволів. Звичайно, ваше рішення буде, в першу чергу, залежатиме відаудиторії. Наприклад, якщо сайт ресурсів для дизайнерів графіки, то вважаємо,що вони мають дисплеї, принаймні, з роздільною здатністю 800x600 або вище, ввідповідно до чого і розробляється сторінка. Якщо сайт призначенийспеціально для WebTV або якогось іншого пристрою відображення, слідорієнтуватися на цей конкретний пристрій.

Гідний поваги Web-дизайн включає розробку сторінок, доступнихдля користувачів з обмеженими можливостями, зокрема по зору іслуху. Консорціум World Wide Web оголосив про ініціативу Web Accessibility
Initiative (WAI), яка ставить за мету зробити Web більш доступним для всіхкористувачів. Однак успіх даної ініціативи залежить від участі в нійрядових розробників, які можуть (або не можуть) створити Web-сайти ввідповідності з поставленими завданнями.

Користувачі з обмеженими можливостями зору можуть використовуватиспеціальні пристрої для збільшення зображення, що знаходиться на екрані.
У цьому випадку до дизайну не пред'являється ніяких спеціальних вимог.
Багато людей з проблемами зору використовують текстові браузери (такі як
Lynx) разом з програмним забезпеченням, яке голосно читає вмістсторінки. У будь-якому випадку основна увага приділяється структурі документа ійого тексту. Графічне вміст може бути просто втрачено.

Засоби HTML 4.0. Специфікація HTML 4.0 запроваджує низку нових атрибутіві тегів, створених спеціально для того, щоб зробити Web-документидоступними для більш широкого кола користувачів. Резюме перерахуємодеякі нові можливості HTML 4.0. (Розширений список можливостейрозміщений на сайті http://www.w3.org/WAI/References/HTML4-access, а повніспецифікації даної версії - на сайті http://www.w3.org/TR/REC-html40).

HTML 4.0 пропонує наступні нові можливості, що забезпечуютьдоступність:

- подальший поділ структури документа і його зовнішньогоподання. Інформацію про стиль HTML 4.0 пропонує розміщувати в каскаднихтаблицях стилів;

- навігаційна допомога, наприклад, клавіші доступу та індексуванняпорядку табуляції для доступу до елементів сторінки з використанням тількиклавіатури;

- рекомендації, що стосуються нової клієнтської карти-зображення,що об'єднує графічні та текстові посилання;

- нові теги і, які допомагають мовним та іншимпристроїв інтерпретувати абревіатури та акроніми;

- можливість логічно групувати рядки і стовпчики таблиць,забезпечувати їх заголовками, резюме та довгими описами вмісту, полегшуючиінтерпретацію таблиць;

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

- покращений механізм створення альтернативного тексту. Атрибут altтепер обов'язковий для тега. Щоб забезпечити зв'язок з більш довгимитекстовими поясненнями до зображень, введений атрибут longdesc.

Для додавання інформації про будь-який елемент, можна використовуватиатрибут title.

Засоби CSS. Каскадні таблиці стилів або CSS (від англійського
Cascading Style Sheets) є наслідком подальшого розвитку HTML ідають нам можливість перейти на наступний рівень представлення інформації.
Таблиці стилів дозволяють розділити смислове вміст сторінки і йогооформлення.

У перших версіях стандарту HTML не було передбачено ніякихзасобів для керування зовнішнім виглядом інформації. Загальна концепціягіпертексту була спрямована на доступність інформації для будь-яких пристроїв,здатних відтворювати текст. Для розмітки рекомендувалося використовуватитільки логічні теги, які визначають заголовки, підзаголовки, списки,абзаци, цитати і т.д. - Тобто, ті елементи, які і складаютьструктуру документа. Інтерпретація ж зовнішнього вигляду залишалася повністю насовісті кінцевого терміналу.

Однак з тих пір багато що змінилося, і стандарт HTML втративпервісну стрункість. Спочатку Netscape додав "поліпшені теги",які дозволили більш широко керувати зовнішнім виглядом що представляєтьсяінформації. Нововведення прижилося, і всі розширення Netscape сталистандартом de facto. Потім точно так само вчинила Microsoft. Колисхаменулися, то HTML являв собою жахливу суміш логічних іоформлювальних тегів, несумісних розширень і повністю переставвідповідати початкової концепції - подавати інформацію на будь-якомупристрої незалежно від його характеристик з виведення інформації.

Тоді була зроблена широкомасштабна стандартизація. У результатічого на світ з'явився стандарт HTML 3.2. Він не був революційним, а лишерозставив по місцях всі нововведення і виробив загальні рекомендації длявиробників браузерів. Революційні зміни були введені в новомустандарті - HTML 4.0 або, як його стали називати, Dynamic HTML. В обігбули введені шари, таблиці стилів і універсальна об'єктна модельбраузера.

У новому стандарті спробували повернутися до витоків концепції HTML.
Четверта версія, як і перший, рекомендує створювати сторінки такимчином, щоб вони могли бути відтворені на будь-якому пристрої - будь це
21 "дисплей або маленький чорно-білий екран стільникового телефону.

Яким же чином була вирішена проблема з поданням зовнішнього виглядуінформації? У цьому й полягає революційність підходу. Все оформленнярекомендується винести в зовнішній стильовий файл. Основна ж сторінка будемістити лише інформацію і посилання на необхідні стилі.

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

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

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

CSS2 (Cascading Style Sheets, Level 2) - сама останнярекомендація з каскадним таблицях стилів, надає механізми дляполіпшеною інтерпретації сторінок неграфіческімі і не візуальнимипристроями. Удосконалення включають:

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

- спеціалізована підтримка для завантаження шрифтів - такимчином зменшується тенденція поміщати текст у графіку для поліпшеннязовнішнього вигляду сторінки;

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

- засоби керування для звукового виводу доставленої по Webінформації;

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

Джерела розробки доступних сторінок

1). Офіційний сайт WAI. На ньому є ряд корисних посилань доджерелами, пов'язаним із проблемою доступності (http://www.w3.org/WAI).

2). Дуже хороше джерело статей та посібників для авторів HTMLрозташований на сайті Фонду сліпих Юрія Рубинського, який єсвоєрідним зброєю боротьби за права інвалідів на розширений доступ дотехнологіями (http://www.уun.org/Webable).

1.4. Представлення тексту на Web-сторінках

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

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

Пропорційний шрифт - інакше "розмір змінної ширини" для кожногосимволу виділяє різну кількість місця в залежності від його накреслення.
Наприклад, у пропорційному шрифті заголовна "W" займає більше місця врядку по горизонталі, ніж прописна "I". Такі гарінітури, як: Times,
Helvetica і Arial є прикладами пропорційних шрифтів.

Web-браузери для більшості текстів на Web-сторінці, включаючиосновний текст, заголовки, списки, цитати і т. д., використовуютьпропорційні шрифти. Як правило, великі уривки основного текстузручніше читати, коли вони надруковані пропорційними шрифтами. Оскількибільшість користувачів не мають часу замінити шрифти, встановленіза замовчуванням, з великою ймовірністю можна припустити, що текст на вашійсторінці буде відображено шрифтом Times розміром 10 або 12 пунктів (поумовчанням в Netscape) або Helvetica (за замовчуванням в Microsoft Internet
Explorer). Але це всього лише загальне правило.

Шрифт з фіксованою шириною надає однакове місце длявсіх символів шрифту. Головна "W" займає не більше місця, ніж прописна
"I". Прикладами шрифтів фіксованої ширини є гарнітури Courier і
Monaco. У Web-браузерах шрифти фіксованої ширини використовуються длявідображення будь-якого тексту в наступних HTML-тегів:,,,
,,.

Оскільки багато людей не змінюють налаштування шрифтів, встановлену зазамовчуванням, текст, що знаходиться в зазначених тегах, буде виведений одним зшрифтів типу Courier.

Текст в зображеннях. Дизайнери швидко зрозуміли, що найвірнішийспосіб абсолютного контролю над шрифтами - розмістити текст?? зображення.
Можна часто бачити заголовки, підзаголовки і оголошення, виконані у виглядіфайлів GIF. Багато Web-сторінки представлені виключно в графіку,яка містить всередині себе весь текст сторінки.

Переваги використання графіки замість HTML-тексту абсолютноочевидні:

- можна визначати тип шрифту, розмір, інтерліньяж, проміжок міжлітерами, колір і вирівнювання - всі атрибути, які викликають складностітільки в HTML;

- ваша сторінка буде однакова при виведенні у всіх графічнихбраузерах.

Але у цього методу є ряд недоліків:

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

- в неграфіческіх браузерах зміст втрачається. Користувачі,які не можуть (або не хочуть) переглядати графіком, не побачать і тексту.
Альтернативний текст (використовується атрибут Alt) на місці графічногозображення допомагає, але його можливості обмежені і це не завждинадійний спосіб ототожнення відсутньої графічної інформації;

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

Розмір шрифту. Звичайно розмір шрифту визначається в пунктах (72пункту (пт) = 1 дюйм висоти шрифту) але, на жаль, ці розміри недосить точно переводяться між платформами. Частково це відбуваєтьсятому, що їх операційні системи керують дисплеями з різнимидозволами. Зазвичай Windows використовує дозвіл екрана 96 крапок/дюйм, a
MacOS - 72 крапок/дюйм. Монітори MultiScan допускай більш високудозвіл.

Шрифт на екрані дисплея Масintosh має точно такий же розмір, як іпід час друку (наприклад, 12 пт Times на екрані виглядає так само, як 12 пт
Times на папері).

Для шрифтів Microsoft подібна угода не виконується, і розміршрифту при виведенні на екран більше, що полегшує читання з екрана. Урезультаті шрифт розміром 12 пт на Windows більше схожий на друкарський шрифт в
16 пунктів. Щоб отримати на Windows друкований розмір 12 пт, вам потрібновибрати розмір шрифту 9 пунктів (але тоді користувачі комп'ютерів
Масintosh побачать текст майже нерозбірливим, так як він буде відображенийшрифтом розміром всього 6,75 пт).

1.5. Представлення графіки на Web-сторінках

На даний момент майже всі зображення в Web, представлені в двохформатах: GIF і JPEG. Третій суперник, що заслуговує згадки, формат
PNG, бореться за підтримку та увагу браузерів. Далі - короткий огляд
"великої трійки" онлайнових графічних форматів. Більш детальнаінформація представлена в розділах, присвячених кожному з форматів.

GIF. GIF - Grafic Interchange Format можна назвати традиційнимформатом файлів Web. Він був першим форматом файлів, який підтримувався
Web-браузерами, і до цього дня продовжує залишатися основним графічнимформатом Web.

Його властивості полягають у наступному:

- підтримує не більше 256 кольорів (менше можна і часто потрібно);

- використовує палітру кольорів;

- використовує стиснення без втрати інформації з ме