Учебное пособие: Глобальні інформаційні мережі

ПОРЯДОК РОБОТИ

1.  Відкрити пошукові сайти і ознайомитися з їх структурою, налаштуваннями та довідковою системою.

2.  Провести пошук за ключовими словами та фразами.

3.  Застосувати для пошуку оператори мови пошуку.

4.  Ознайомитись з результатами пошуку.

5.  Порівняти можливості пошукових систем.

ЗМІСТ ЗВІТУ

1.  Назва та мета виконання лабораторної роботи.

2.  Організація пошукового сервісу.

3.  Основні пошукові сайти Інтернет.

4.  Аналіз результатів пошуку.

5.  Висновки.

ЗАСОБИ СТВОРЕННЯ WEB-СТОРІНОК

Web-сторінки є базовими документами World Wide Web і створються у HTML (HyperText Markup Language).

Сторінки можуть бути як частиною Web-сайту, так і самостійними документами.

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

РІВНІ СТВОРЕННЯ WEB-СТОРІНОК

До створення Web-сторінок існує три загальних підходи:

1.  Високий рівень - створення документу звичайними засобами з наступною його конвертацією в HTML,

2.  Середній рівень - створення Web-сторінки в спеціалізованому HTML-редакторі,

3.  Низький рівень - створення Web-сторінки безпосередньо в HTML-кодах.

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

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

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

ОГЛЯД РЕДАКТОРІВ ДЛЯ ВЕРСТКИ ВЕБ-СТОРІНОК

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

Редактори для верстання веб-сторінок є двох типів: візуальні і текстові.

Візуальні редактори не вимагають знань html, css та інших технологій для розмітки сторінок. У візуальному редакторі різні елементи сайту розташовуються, неначе на листі паперу, а редактор пише код самостійно. Саме тому візуальні редактори ще називають WYSIWYG-редакторами.

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

Якого ж типу обрати редактор? Якщо за мету ставиться вивчення html, css або інших технологій для розмітки сторінок, якщо потрібно навчитися створювати якісні сторінки і бути професійним кодером, то безумовно потрібний текстовий редактор. Якщо ж таких завдань не ставиться, то звісно кращим вибором буде візуальний редактор, бо він економить час і сили. А краще всього мати у себе на комп'ютері і візуальний, і текстовий редактори для різних потреб.

ВІЗУАЛЬНІ РЕДАКТОРИ

MACROMEDIA DREAMWEAVER MX

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

Розробники стверджують, що Macromedia Dreamweaver MX призначена для проектування, розробки і адміністрування професійних web-сайтів і додатків. Окрім того Dreamweaver легко інтегрується з іншими програмами від Macromedia, наприклад, такими, як Flash. Dreamweaver є значно більшим, ніж просто візуальний редактор, це достатньо могутній і складний інструмент, а всякий складний інструмент вимагає, щоб на його освоєння було витрачено якийсь час, перш, ніж користувач зможе працювати в нім.

·  Офіційна сторінка та опис програми Dreamweaver

·  Завантажити Dreamweaver (48,2 Мб)

·  Підручник Dreamweaver 4

·  Підручник DreamWeaver MX

·  Підручник Macromedia Flash & Dreamweaver

ADOBE GOLIVE І LIVEMOTION

Можливо, Adobe GoLive сподобається тим, хто любить програми від Adobe, і багато з ними працюває: знайоме середовище, в якому легко розібратися. Всі програми від Adobe є сумісними між собою і доповнюють один одного. GoLive є лише візуальним редактором для верстання веб-сторінок і підтримує технологій Html, Dhtml, CSS, XML та декілька готових Javascript’ів. Вбудований редактор коду (текстовий) в цій програмі є добрим. GoLive це є оптимальне поєднання візуального і текстового редактора (два в одному).

Варто використовувати з GoLive таку програму, як Adobe LiveMotion (в попередніх версіях вона називалося Image Styler). Хоча, LiveMotion є графічним редактором, в якому можна створювати нескладну, але якісну графіку для своїх веб-сайтів, він також вміє верстати веб-сторінки, на основі того, що намальовано. LiveMotion сам розподіляє готовий макет на багато картинок, які потім можна використати при верстанні сайту в GoLive.

·  Офіційна сторінка та опис програми Golive

·  Завантажити Golive (106 Мб)

·  Огляд-підручник GoLive

·  Підручник: інтеграція шаблонів Golive

·  Офіційна сторінка та опис програми LiveMotion

·  Завантажити LiveMotion (65,5 Мб)

·  Завантажити Image Styler (попередня версія LiveMotion) (15 Мб)

·  Навчання роботі з Image Styler

MICROSOFT FRONTPAGE

Програма FrontPage дозволяє створювати веб-сторінки у форматах Html, Css, Dhtml, Javascript. Надає широкі можливості по управлінню зображеннями і flash-роликами. FrontPage сумісний з технологіями ASP, XML, VBScript, XSL. В останній версії FrontPage створює більш чистий код (раніше FrontPage вставляв в код багато непотрібних коментарів та іншої зайвої інформації).

·  Офіційна сторінка та опис програми FrontPage

·  FrontPage 98 - Підручник

·  Основи роботи з FrontPage 2000

HOTDOG

Програма має простій і зрозумілий користувачеві інтерфейс. Hotdog є дружнім до користувача, сумісним з Flash, SQL, PHP, ASP, може працювати з GIF-зображеннями (оптимізація, анімація), містить Html-компресор, може створювати файли довідки (CHM).

·  Офіційна сторінка та опис програми Hotdog

·  Завантажити Hotdog (11,3 Мб)

ТЕКСТОВІ РЕДАКТОРИ

HOMESITE

Цей редактор, мабуть, найпопулярніший і могутніший серед текстових редакторів. В ньому легко працювати не лише з Html-кодом. Користувачеві надається широка допомога: перелік різних атрибутів до всіх тегів, перевірка коду (правильність перевіряється за вимогами W3C.org), підтримка XHTML, CSS-редактор, тощо.

·  Офіційна сторінка та опис програми Homesite

·  Завантажити Homesite (11,3 Мб)

·  Все про html-редактор Homesite 4.5

HTML PAD

HTMLPad підтримує JavaScript, VBScript, SSI, ASP і Perl, вміє створювати макроси (на подобі Word’a і Excel'а), містить довідкові матеріали по CSS і Html, і багато іншого.

·  Офіційна сторінка та опис програми HTML Pad

·  Завантажити HTML Pad (3 Мб)

·  Як працювати з HtmlPad

NOTEPAD

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

ПОРЯДОК РОБОТИ

1.  Запустити програму DreamWeaver (Start -> Programs -> Macromedia -> Macromedia Dreamweaver MX.

2.  Відкрити підручник з DreamWeaver.

3.  Вивчити методику створення Web-сайту за допомогою MacroMedia DreamWeaver.

4.  Створити фрагмент у візуальному режимі, перейти у текстовий режим і проаналізувати створене.

5.  Зробити виправлення у текстовому режимі, перейти у візуальний режим і проаналізувати результат

6.  Дослідити можливості у створенні таблиць

7.  Додати до створеної сторінки стилі

ЗМІСТ ЗВІТУ

1.  Назва та мета виконання лабораторної роботи.

2.  Порівняльний аналіз популярних редакторів.

3.  Характеристика та основні можливості по створенню Web-сторінок за допомогою DreamWeaver.

4.  Додати скрін створеного фрагменту та його код.

5.  Висновки.

СТВОРЕННЯ ВЕБ САЙТУ

Створення сайту завжди починається з ідеї. Але до її реалізації існують усталені етапи для того, щоб створити працездатний якісний сайт.

1.  Ідея

2.  Розробка структури сайту

3.  Розробка оформлення сайту

4.  Кодинг, програмування

5.  Тестування і доопрацювання

6.  Просування, реклама

7.  Подальша підтримка і оновлення

Перші п'ять етапів відносяться безпосередньо до створення сайту, останні потрібні для подальшого існування сайту.

ІДЕЯ

Перш, ніж приступити до роботи над сайтом, потрібно чітко уявляти, що в результаті має бути, а також перспективи розвитку сайту.

Отже, потрібно вирішити:

·  Навіщо створювати сайт (чи потрібно це взагалі)

·  Про що буде сайт (тематика)

·  Що це буде (домашня сторінка, портал, або щось ще)

·  Відмінність від сайтів з такою ж тематикою (якщо це не домашня сторінка)

·  Яка буде аудиторія сайту (стать, вік, інтереси і т.д.)

·  Якого роду сервіси будуть присутні на сайті (форум, каталог, пошта і т.д.)

·  Плани на найближче майбутнє

·  Плани подальшого розвитку (перспективи)

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

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

РОЗРОБКА СТРУКТУРИ

Щоб створити сайт потрібний план. Чітко розписаний, що, де буде розташовано. План цей малюється на папері, і називається це розробка структури сайту.

Структуру сайту можна умовно розділити на зовнішню і внутрішню.

ВНУТРІШНЯ СТРУКТУРА САЙТУ

Залежить від того, яка інформація буде розміщена, які є матеріали. Слід вирішити, які будуть на сайті розділи, підрозділи, тобто скласти дерево сайту.

Розглянемо розробку внутрішньої структури на прикладі домашньої сторінки. Яку інформацію можна на ній розмістити? Розповідь про себе (на головній сторінці), свої фотографії, контактну інформацію - це як мінімум. Отже, внутрішня структура домашньої сторіночки буде такою:

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

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

ЗОВНІШНЯ СТРУКТУРА

Це розташування основних важливих елементів на кожній сторінці. Треба вирішити, де і як буде розташовано меню, можливо, пошук, основний зміст, певні анонси про нові розділи сайту, оновлення, лічильник та банери, якщо вони передбачені на сайті. Для прикладу візьмемо типову зовнішню структуру сайту:

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

ОФОРМЛЕННЯ САЙТУ

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

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

Не вірте, що дизайн – це справа смаку: що хочу, то і зроблю. Це не правда. Дизайн – це ціла наука. Щоб опанувати їй, доведеться ознайомитися з такими поняттями, як колористика (теорія кольору), композиція, шрифт, і багатьма іншими. Дизайн підпорядкований усталеним законам і правилам, і дизайн сайту - не виключення.

Крім теорії потрібно буде також опанувати багатьма програмами, для втілення задумок в життя. Оформлення сайтів на перевірку виявляється складною наукою: багато чого треба вміти і багато чого знати, щоб створити якісний дизайн для сайту.

КОДИНГ І ПРОГРАМУВАННЯ

Тепер маємо оболонку (макет зовнішнього вигляду сайту) і план дій (структуру). Але, що стоїть за оболонкою? А за оболонкою знаходиться каркас, на якому ця оболонка тримається, це є код сторінки. Він відповідає за те, як в певній послідовності на сторінці відображається текст і картинки.

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

Але HTML і CSS відповідають лише за розмітку зовнішнього вигляду документа (сторінки), а для того, щоб реалізувати складніші речі, наприклад, на зразок гостьової книги, або пошуку по сайту, або форуму, потрібні вже інші засоби. Потрібно знати мови програмування для веб – PERL, PHP, ASP або інші.

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

Отже, якщо HTML і CSS - це каркас на якому все тримається, то програми-скрипти (на PERL, PHP, ASP) - це механізм, розташований усередині цього каркаса. Веб-програмування вже складніший для освоєння предмет, ніж HTML або CSS, проте, тут знову ж таки немає нічого складного, адже є готові рішення, так звані готові програми-скрипти, які розповсюджуються в Інтернет, як на безкоштовній, так і платній основі.

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

ТЕСТУВАННЯ І ДООПРАЦЮВАННЯ

Коли сайт готовий, його викладають в мережу (Інтернет). Для цього потрібно зареєструвати для сайту доменне ім'я (адреса), і визначитися з хостингом (місце на сервері провайдера, де буде знаходитися сторінка). Процедура розміщення сайту в Інтернет не дуже складна, дізнатися все про це можна в Інтернеті.

Коли сайт розміщено в Інтернеті, то перш, ніж його просувати і рекламувати, слід перевірити сайт на працездатність. Можливо, якісь скрипти виконуються з помилками. Можливо, десь пропущена важлива і цінна інформація або потрібна картинка.

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

Даний пункт в житті сайту достатньо важливий: здавалося б, подумаєш – дрібниці. Проте коли таких дрібниць накопичується багато - це дуже погано. Що зробить відвідувач, якщо не зможе додати запис у форум, або якщо стаття, що цікавить його, буде не доступна, внаслідок того, що до неї неправильно прописали шлях? Правильно, він може піти і більше не повернутися.

ПРОСУВАННЯ, РЕКЛАМА

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

Перш, ніж зайнятися рекламою сайту, варто подумати – а чи потрібно це? Якщо потрібно, то навіщо. Що зміниться від того, що на сайті стане десятком відвідувачів більше?

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

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

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

Докладніше про методи просування і реклами сайту можна прочитати в Інтернет.

ПОДАЛЬША ПІДТРИМКА І ОНОВЛЕННЯ

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

Але, відвідувача цікавить не лише нова інформація. Важливо також підтримувати зв'язок з відвідувачами: спілкування на форумі або в гостьовій книзі, які розташовуються на сайті, по можливості, відповідати на всі листи відвідувачів.

При розвитку ресурсу іноді необхідно орієнтуватися на думку відвідувача: запитувати у відвідувачів, в яких матеріалах вони зацікавлені, що їм хотілося б побачити на сайті найближчим часом. Опитування можуть допомогти в розвитку сайту.

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

ПРОГРАМИ, ЩО ПОТРІБНІ ДЛЯ WEB-МАСТЕРИНГУ

Для виготовлення професійних сторінок доведеться вивчити декілька професійних програм.

ВІЗУАЛЬНІ РЕДАКТОРИ

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

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

ПРОГРАМИ ОБРОБКИ РАСТРОВОЇ ГРАФІКИ

Це одні з найважливіших програм, які доведеться освоїти.

Вона нададуть змогу веб-розробнику здійснити:

·  Сканування фотографій;

·  Корекція відсканованих і готових фотографій, зокрема - тонова і колірна корекція;

·  Ретуш фотографій;

·  Розуміння відмінностей у форматах графічних файлів;

·  Грамотне використання фільтрів;

Як конкретні програми можна привести наступні:

·  Adobe PhotoShop - дана програма є лідером в області графічних програм такого роду.

·  Adobe ImageReady - підтримує фільтри від Adobe PhotoShop і є незамінною для створення анімованих Gif-зображень.

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

ПРОГРАМИ ОБРОБКИ ВЕКТОРНОЇ ГРАФІКИ

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

Типовими представниками даного класу є Corel DRAW і Adobe Illustrator - обидва є лідерами в своїх областях і, відповідно, мають останні досягнення в області векторної графіки. На противагу ним можна порадити програму Corel Xara. Дана програма, на відміну від двох попередніх, є швидкою і маленькою, але деякі ефекти і дії, що є доступними в інших програмах, в ній зробити або важко, або взагалі неможливо.

ПРОГРАМИ ПЕРЕГЛЯДАННЯ WEB-СТОРІНОК

Це браузери - в даний час популярними є три браузера - це Microsoft Internet Explorer, Opera та Mozilla FireFox. Для контролю зовнішнього вигляду сторінок доведеться скористатися власне ними. Якісна веб-сторінка повинна однаково виглядати в будь-якому з цих браузерів.

ПРОСТИЙ ТЕКСТОВИЙ РЕДАКТОР

Знадобиться для ручного виправлення і додавання HTML-коду, оскільки існуючі візуальні редактори не можуть повністю контролювати процес створення web-сторінки. Як приклад підійде звичайний Блокнот із стандартного постачання Windows або один HTML-редакторів, які мають вбудовані команди на перевірку правильності тегів і структури документів.

ТЕКСТОВИЙ ПРОЦЕСОР

Потрібен для набору тексту, перевірки орфографії і виправлення помилок в розпізнаних текстах. Як приклад - звичайний Microsoft Word.

ПРОГРАМИ РОЗПІЗНАВАННЯ ТЕКСТУ

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

СПЕЦІАЛІЗОВАНІ ПРОГРАМИ

Дозволять виконати певні ефекти і справитися з такими завданнями, які іншими способами не можливо виконати.

·  Ulead GIF Animator – програма для створення анімованих GIF-зображень. Має потужні засоби оптимізації.

·  Фільтри для Adobe PhotoShop - їх кількість просто величезна, але реально знадобиться небагато. Вони здатні істотно підвищити роботу і двома-трьома натисненнями створити вражаючі ефекти.

·  Macromedia Flash - стандарт для використання в web анімованих зображень. Має власне середовище розробки і дозволяє створювати вражаючу векторну анімацію.

·  3D-программы – створення тривимірних композицій і експортування в графічні формати, що застосовуються у веб. Як приклад – 3D Studio Max.

·  Програми для обробки звуку - можуть знадобитися, якщо того вимагає сторінка. Це програми взагалі окремого класу, але для простої обробки звуку, наприклад, підійде CoolEdit.

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

МОВА РОЗМІТКИ ГІПЕРТЕКСТОВИХ СТОРІНОК HTML

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

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

ІНСТРУМЕНТАРІЙ РЕДАГУВАННЯ HTML

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

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

ТЕГИ HTML

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

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

Контейнери

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

The weather is <I>gorgeous</I>today.

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

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

Кінцевий тег ніколи не містить атрибутів.

Автономні теги

Деякі теги не мають кінцевих елементів. Одним з них є тег зображення <img>, він просто розміщує графіку в текст сторінки. Інші автономні теги – це розрив рядка (<br>), горизонтальна лінія (<hr>) і теги, що містять інформацію про документ і не впливають на вміст, що виводиться на екран, такі як <meta> і <base>.

Атрибути

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

Правила запису значення є наступними:

·  якщо значення є одним словом або числом і складається лише з літер (a-z), цифр (0-9) і спеціальних символів (точка <.> або дефіс <->), то можна помістити його після знаку рівності без лапок;

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

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

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

The Weather is <B><I>gorgeous</I></B> today.

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

Найпоширенішою помилкою є перекриття тегов. Деякі браузери лояльно ставляться до того, але, багато з низ не дозволяють порушувати це правило, тому важливо розміщувати теги правильно. Наступний приклад показує невірне вкладення тегов (відмітьте, що тег <В> закривається перед закриттям <I>):

The weather is <B><I>gorgeous</B></I>today – дана інформація, що ігнорується браузерами.

ІНФОРМАЦІЯ, ЩО ІГНОРУЄТЬСЯ БРАУЗЕРАМИ

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

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

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

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

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

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

Мета-теги є командами для web-сервера або браузера, які не впливають на відображення сторінки. З погляду оптимізації мета-теги є важливими об'єктами, правильна робота з якими – запорука успіху при створенні ефективного сайту.

ОПТИМІЗАЦІЯ РОЗДІЛУ HEAD

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

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

Особливо грішать надмірним кодом розділу Head сторінки, що створені у візуальних HTML-редакторах. Структура документа, що автоматично генерується, поповнюється тегами, які оголошують про використаний програмний засіб, містять різні коментарі, інформацію про автора або організацію, до якої належить сайт (тег Copyright), тощо. Досить часто розробники сторінок додають в розділ Head мета-теги, що чітко регламентують роботу індексуючого павука з даною сторінкою (Robots (управління поведінкою пошукових роботів на сторінці), Revisit (управління повторними відвідинами сторінки роботом) і ін. Проте сучасні роботи часто не прислухаються до виписаних рекомендацій і сканують мережні ресурси за своїми методиками.

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

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

ТЕГ ЗАГОЛОВКУ СТОРІНКИ TITLE

Вміст тегу Title є найважливішим чинником, що враховується при розрахунку релевантності сторінки. Він має розташовуватися якомога ближче до початку сторінки. Головне правило при оптимізації тегів заголовків сторінок полягає в тому, що кожна сторінка повинна мати свій унікальний Title. Оптимальна довжина вмісту тега – до 80 символів. Довший текст заголовка не приносить користі для відвідувача сайту, оскільки він продовжується за видиму область вікна браузера, а також може бути сприйнятий пошуковою машиною як спам.

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

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

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

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

Страницы: 1, 2, 3, 4, 5, 6