Методична розробка лекції на тему Основи Веб-дизайну з навчальної дисципліни Інформатика, НУДПСУ
« Назад ДЕРЖАВНА ПОДАТКОВА СЛУЖБА УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ ДЕРЖАВНОЇ ПОДАТКОВОЇ СЛУЖБИ УКРАЇНИКафедра інформаційних систем і технологійМетодична розробка лекціїна тему «Основи Веб-дизайну»з навчальної дисципліни "Інформатика"галузь знань 0305 «Економіка і підприємництво»напрям підготовки 6.030509 «Облік і аудит»денної (заочної) форми навчання Ірпінь – 2010 Методична розробка лекційного заняття з навчальної дисципліни "Інформатика" розроблені на основі робочої навчальної програми, затвердженої у 2010 році. Зміст Мета лекції План лекції Зміст лекції 1. Етапи проектування та розробки веб-сайту 2. Структура веб-сторінки та її об’єкти 3. Основні теги мови HTML 4. Використання фреймів 5. Створення списків, таблиць, графічних об’єктів 6. Оформлення тексту, створення заголовків 7. Гіперпосилання на веб-сторінці 8. Динамічні ефекти та засоби їх створення 9. Розробка, публікація та підтримка сайту в мережі Інтернет 10. Поняття про інтерактивні веб-сторінки та засоби розробки сценаріїв Рекомендована література РЕСУРСИ МЕРЕЖІ ІНТЕРНЕТ Мета лекціїОгляд програмних засобів для створення веб-сторінок та веб-вузлів з подальшою публікацією їх в мережі Інтернет, ознайомлення студентів з основами мови розмітки текстів HTML, з можливостями використання засобів редагування, просування та підтримки створених сайтів з метою ефективного використання сучасних інформаційно-комунікаційних технологій у професійній діяльності.
План лекції
Зміст лекції1. Етапи проектування та розробки веб-сайту Навіщо потрібний сайт? Сайти створюються для різних цілей. Але оскільки Інтернет став середовищем для економічної діяльності, то сайти в основному створюються для ведення бізнесу, тобто здобуття прибуло. Відомо, що в даний час існує два основні напрями використання Інтернет в бізнесі: Internet як засіб комунікації, джерело довідкової інформації, засіб реклами і маркетингу для ведення бізнесу (господарській діяльності) поза електронними мережами і Internet як інструмент ведення електронного бізнесу, заснованого на принципах мережевої економіки. У першому випадку сайти створюються для формування іміджу компанії, ведення ефективної реклами і маркетингових досліджень з метою пошуку нових покупців і збільшення об'єму продажів, а також для інформаційної і сервісної підтримки клієнтів. Крім того, сайти можуть бути використані як інформаційні канали обміну інформації з партнерами. Сайти також використовуються як засіб підтримки очного і заочного учбового процесу і підвищення кваліфікації по певному курсу. У другому випадку – сайти виконують всі вищезгадані функції і, крім того, є інструментом ведення електронного або мережевого бізнесу. В цьому випадку сайти виконують функції торгівельних майданчиків, до яких відносяться: Інтернет - біржі, аукціони і. т.д. Сайти використовуються для надання фінансових послуг (онлайнові платіжні системи, змінні пункти і тому подібне) і так далі. Крім того, сайти необхідні при дистанційному навчанні, яке є одній з форм здобування вищої освіти. Таким чином, ведення електронного бізнесу (електронній комерції) без сайту не можливо. Що таке сайт? Web - сайт – це набір Web-страниц і файлів зв'язаних між собою гіперпосиланнями. Web-страницы або гіпертекстові документи є текстом, в якому містяться спеціальні команди, звані тегами (tags). Ці теги забезпечують форматування елементів сторінки і дозволяють розміщувати на ній графічні об'єкти, малюнки, гіперпосилання і т.д. Web-страницы створюються за допомогою спеціальної мови HTML. HTML або Hyper Text Markup Language є мовою розмітки гіпертексту, розмітка здійснюється за допомогою тегов. Сьогодні окрім HTML застосовуються та інші мови розмітки: WML, XML. Для створення Веб-сайту компанії необхідно: – визначити мету створення сайту; – розробити ТЗ; – зареєструвати домен сайту в певній зоні (com, ru, ua, net і так далі); – розробити сайт; – розмістити сайт на хостингу; – зареєструвати в пошукових системах і тематичних каталогах; – виконати пошукову оптимізацію сайту; – здійснювати постійну підтримку сайту. Визначення мети створення сайту. Сайти створюються для різних цілей, наприклад: для ведення електронного бізнесу, для підтримки учбового процесу, для надання інформації, надання фінансових послуг і так далі Розробка технічного завдання. У технічному завданні враховуються всі етапи розробки і супроводу сайту, цілі і призначення сайту, його дизайн, методи навігації, вказується мова розмітки сторінок і так далі Зазвичай сайт повинен включати:
Розробка сайту - найважливіший етап створення сайту. Розробка сайту це складний і трудомісткий процес. При розробці сайту необхідно приділяти велику увагу вмісту, структурі і дизайну (графічному оформленню) Web-страниц, а також структурі Web-сайта і методам навігації по Web-узлу. Головне на сайті – це його вміст або контент, структурованість інформації, навігація, а потім графічне оформлення або дизайн сайту. Іншими словами дизайн сайту визначається вмістом матеріалів, які на нім публікуватимуться. Для розробки сайту використовуються різні засоби: конструктори сайтів (дизайнери), WebCoder 1.6.0.0, професійні застосування: Macromedia HomeSite Plus v5.1 for Windows XP, Macromedia Dreamweaver, Microsoft FrontPage, Microsoft Publisher і так далі. У редакторові FrontPage існують майстри, які дозволяють легко створювати Web-сайт, і шаблони Web-страниц і Web-узлов, розмітку (структуру), що містять, і дизайн необхідні для швидкого створення як Web-страниц, так і Web-сайтов. За допомогою FrontPage можна також створювати Web-страницы і Web-сайты на базі порожньої сторінки і порожнього Web-узла. Програма MS Publisher допомогає працівникам малого бізнесу створювати і розповсюджувати професійно виконані рекламні матеріали і документи для ділової переписки. Publisher є програма, що дозволяє створювати рекламні матеріали для друку, публікації в Інтернеті та розсилання електронною поштою. Publisher містить розширений набір типів особистих публікацій таких, як особисті бланки, професійно макетовані візитні картки і запрошення. При створенні сайту необхідно оптимізувати його для пошукових систем, оскільки цільовий відвідувач приходить на сайти в основному з пошукових систем, тому необхідно прагнути до високого рейтингу в пошукових системах. Особливу увагу необхідно приділяти таким мета - тегам як Тitle (заголовок), Keywords (ключові слова) і Description (опис), а також розташуванню ключових слів в тексті Web-страниц Службу Інтернет, яка управляє передаванням таких документів, називають World Wide Web (Web, WWW). Цим же терміном або простором WEB називають сукупність Web-документів, між якими існують гіпертекстові зв’язки. Поняття «гіпертекст» має досить давню історію. Воно виникло на стику філософії та комп’ютерних технологій ще у середині XX ст. Теоретичною основою гіпертексту стали сформульовані В. Бушем (1945 p.) принципи нелінійного письма, які він докладно висвітлив у роботі «Як ми могли б мислити». У 60-х роках Т. Нельсон і Д. Енгельбарт, застосовуючи комп’ютерні технології опрацювання інформації, розробили нову технологію, яку назвали «гіпертекст». У гіпертексті є посилання на інші сторінки або документи. В більшості броузерів (програм для завантаження та перегляду Web-документів) ці посилання підкреслюються або виділяються іншим кольором. Якщо клацнути лівою кнопкою миші на гіперпосиланні, то програма перегляду гіпертексту завантажить документ, на який вказує посилання. Таким чином, сторінка набуває властивості інтерактивності. У деякому розумінні, завдяки гіпертексту, інформація у WWW організована за тим самим принципом, що і в людському мозку. Окремі документи, які складають простір Web, називають Web-сторінками. Web-сторінки зберігаються на жорстких дисках Web-серверів. Web-сервери — це спеціалізовані комп’ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web-сторінок; це програмне забезпечення також називається Web-сервером. Групу сторінок, присвячену певній темі та розміщену в певному каталозі Web-сервера, називають Web-вузлом або Web-сайтом. Один фізичний Web-сервер може містити кілька Web-сайтів. 2. Структура веб-сторінки та її об’єктиВсі документи у форматі HTML мають однакову загальну структуру і складаються з трьох частин:
Перед кожним елементом або після кожного елемента може бути порожній простір (пропуски, перехід на новий рядок, табуляції та коментарі). Розділи 2 і 3 відокремлюють елементом HTML. Ось приклад простого документа HTML, праворуч показано відображення цього коду броузером. <HTML> <HEAD> <TITLE> Назва WEB-сторінки </TITLE> </HEAD> <BODY> “Тіло “ – це вміст WEB-сторінки: текст, графіка, гіперпосилання </BODY> </HTML> Контейнер <HTML></HTML> є ознакою того, що даний файл містить документ HTML. У HTML-документах є «голова» (заголовок) і «тіло» (основна частина). Розділ <HEAD></HEAD> містить дескриптори, які описують документ в цілому. Зокрема, тут вказується назва документа. Контейнер <TITLE></TITLE> служить для визначення назви документа. Текст, включений в нього, відображається у верхній частині вікна броузера. Назва сторінки — це один з елементів, які мають важливе значення для привернення уваги «відвідувачів». Вона повинна відображати зміст сторінки. Системи пошуку орієнтуються саме на назву сторінки, тому сторінка із змістовною назвою має більше шансів бути вибраною у процесі проведення пошуку інформації з конкретної теми. Контейнер <B0DY></B0DY> задає основну частину документа — його «тіло». Інформація, розміщена між дескрипторами <BODY> та </BODY>, відображається в області документа. Крім контейнера <TITLE>…</TITLE> у заголовок документа (контейнер <HEAD>…. </HEAD>) часто включаються дескриптори <BASE>, <META>. Дескриптор <BASE> використовується для вказування повної URL адреси документа. Це дозволяє підтримувати відносні гіперпосилання в робочому стані при переміщенні документа в інший каталог і навіть на інший комп’ютер. <BASE HREF=”http://www.ia.net/~rmeegan”> Дескриптор <МЕТА> дозволяє автору документа описати інформацію або виконати дії, які ще не підтримуються офіційною версією HTML. Він найчастіше використовується завдяки його властивості Keywords (ключові слова). У багатьох пошукових системах використовуються слова, визначені в цьому елементі для складання вказівника документа. Наприклад, <МЕТА NAME=”Keywords” CONTENT =”внз, університет, фізика, математика, інформатика”> <МЕТА NAME=”Description” CONTENT=”Броузера фізико-метематичного факультету”> Цей дескриптор дозволяє також задати метаінформацію про кодову сторінку, яка використовується для кодування літер кирилиці: <МЕТА content=”text/html; charset=Windows-1251” http-equiv=Content-Type> Контейнер <BODY> має велику кількість атрибутів, важливих для визначення загального виду документа. Основні з цих атрибутів задано в таблиці 1.1. Таблиця 1.1.
Створити просту сторінку можна, наприклад, так:
В наступному прикладі наводиться код сторінки з синім фоном: <НТМL> <HEAD> <TITLE> Сторінка з фоном </ТITLE> </HEAD> <BODY BGCOLOR=”blue”> Білий текст на синьому фоні </BODY> </НТМL>
3. Основні теги мови HTMLWeb-сторінки мають вигляд звичайних текстових документів, в які введено вказівки, форматування. Принцип роботи броузера полягає в інтерпретації цих вказівок. При відображені таких документів броузером самі вказівки не відображаються, проте впливають на спосіб відображення решти частини документу. Згадані вказівки називають дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розмітки гіпертексту-HTML {HyperText Markup Language). Наприклад, вигляд головної сторінки сайта Ukr.Net та її код подано на рис. Документи, розмічені за допомогою цієї мови, називають HTML-документами. HTML-документи мають розширення .htm або .html. Інколи процес розробки Web-документів засобами мови HTML називають Web-програмуванням. Проте слід розуміти, що HTML не є мовою програмування у звичайному розумінні, а є мовою розмітки (опису). Термін Web-програмування мовою HTML має історичне походження. Під терміном Web-програмування будемо розуміти процес розробки Web-документів (і не лише засобами HTML). Мова HTML розроблена спеціально для Web. Її популярність забезпечують зокрема такі властивості: — документ, створений за допомогою деякої програми, наприклад текстового редактора, часто важко (а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною; — HTML — це відкритий стандарт; — HTML не є власністю якої-небудь фірми; — можливість використання гіпертексту; — HTML підтримує мультимедіа. У мові HTML використовуються поняття контейнера. Контейнер — це дескрипторна пара, яка складається з початкового і кінцевого дескрипторів (тегів). Початковий дескриптор має вигляд <TAG>, де TAG ім’я певного HTML-дескриптора. Кінцевий дескриптор має вигляд </TAG>. Наприклад, <В> Програми для перегляду Web-сторінок називаються броузерами </В> Контейнер <В></B> дає вказівку броузеру відображати текст «Програми для перегляду Web-сторінок називаються броузерами» напівжирним шрифтом. Тобто, контейнери впливають на частину документа, розміщену між ними. Зазначимо, що контейнери можуть бути вкладені. Одиночний дескриптор, звичайно, має самостійне завдання, не пов’язане з конкретним текстом. Наприклад, дескриптор <HR> (від слів Horisontal Line) служить для створення і відображення горизонтальної лінії. Дію дескриптора можна дещо змінити, задаючи певні атрибути {параметри). Атрибути — це додаткові ключові слова, які відокремлюються від ключового слова, що визначає дескриптор, пропуском і розміщуються до символа «>». У контейнерах атрибути додаються тільки до початкового дескриптора. Атрибути задаються своїми значеннями. Наприклад, <Н1 ALIGN=»LEFT»>Tpaнcпopний рівень моделі ТСР/ІР</Н1> — це вказівка броузеру відобразити текст «Транспортний рівень моделі TCP/ IP» у вигляді заголовка та вирівняти його по лівому краю. HTML-код Web-сторінки може містити коментарі, тобто деякий текст, який не відображається броузером і служить для пояснення призначення сторінки або частини її коду. Текст, що повинен служити коментарем, необхідно помістити між символами «<!--» і «à». Наприклад, <HR> <!—створюємо горизонтальну лінію à Коментар можна поставити у будь-яке місце коду сторінки, де дозволяються пропуски.
4. Використання фреймівМова HTML дозволяє поділити вікно браузера на окремі секції, які називаються фреймами (рамки). Вміст кожного фрейму знаходиться в окремому HTML-файлі. Кожен фрейм можна переглядати або змінювати не залежно від решти фреймів. Браузер, який “розпізнає” фрейми, завантажує різні сторінки у різні секції свого вікна. Наприклад, можна побудувати сторінку так, що фірмовий знак буде зафіксовано у верхній частині вікна, збоку буде розміщено панель навігації сторінками сервера, а в решту вікна будуть завантажуватися різні сторінки, які користувач зможе переглядати звичайним чином. Коли користувач клацає кнопкою мишки на гіперпосиланні – змінюється лише частина вікна, а система навігації і фірмовий знак залишаються нерухомими. Подібну структуру має сторінка, вигляд якої подано на Рис.3. Код даної сторінки наведено нижче: <HTML> <HEAD> <TITLE>Приклад фреймової структури документа</TITLE></HEAD> <frameset cols="30%,70%"> <frame src="a1.htm"> <frame src="a2.htm"> </frameset> </BODY> </HTML> Файл a1.htm <HTML> <HEAD> <TITLE>Приклад фреймової структури документа</TITLE> </HEAD> <BODY bgcolor="silver" text="black" link="#ff0000"> <h3> На цій сторінці фреймової структури, як правило, розміщують зміст Web-сайта</h3> </BODY> </HTML> Файл a2.htm <HTML> <HEAD> <TITLE>Приклад фреймової структури документа</TITLE> </HEAD> <BODY bgcolor="silver" text="black" link="#ff0000"> <h3> На цій сторінці фреймової структури, як правило, розміщують вміст вибраного у змісті розділу</h3> </BODY> </HTML>
5. Створення списків, таблиць, графічних об’єктівДля створення списків використовують теги, що задають тип списку. Нумерований список починаються тегом <OL> і завершується тегом </OL>, наприклад:
Тег <OL> може мати такі параметри: TYPE - вид лічильника: START - встановлює число, з якого буде починатися відлік, наприклад:
Неномерований список починається тегом <UL> и завершується тегом </UL>. Кожен елемент списку починається з тегу <LI>, наприклад:
Тег <UL> може включати параметр TYPE із значеннями disc, circle, square
Дані значення – це зовнішній вид маркера, який за замовчуванням ставиться у вигляді диску, тобто disc. Списки визначень мають такий вид:
Таблиці у WEB-документах застосовуються не тільки для розміщення табличних даних, а й для вставки зображень і посилань, для раціонального компонування WEB- сторінки. Елементи таблицьТаблиці будуються за принципом вкладання і вводяться на WEB-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE> …</TABLE> можуть вставлятися такі елементи: TR – елемент створення рядка; TD – елемент, що визначає вміст комірки даних; TH – елемент, що визначає комірку заголовка. Наприклад, для створення таблиці 3*2 використовується такий шаблон: <TABLE> <TR><TD>…. </TD><TD> … </TD></TR> <TR><TD>…. </TD><TD> … </TD></TR> <TR><TD>…. </TD><TD> … </TD></TR> </TABLE> де крапками позначений вміст кожної комірки. Приклад таблиці:
Таблиця починається тегом <TABLE> и завершується тегом </TABLE>.
Таблиця може включати заголовок, який розміщується між тегами <CAPTION></CAPTION>. Він має бути безпосередньо після тега <TITLE>. До заголовку можна застосувати атрибут ALIGN, що визначає його положення відносно таблиці: TOP – значення за замовчуванням, заголовок над таблицею по центру. Рядки таблиці починаються тегом <TR> и завершаються тегом </TR>, а кожна клітинка таблиці починається тегом <TD> и завершується </TD>. Дані теги можуть мати такі атрибути:
Крім цього, будь яка клітинка таблиці може бути визначена не тегами <TD></TD>, а тегами <TH></TH> - Table Header (заголовок таблиці). В принципі, це звичайна клітинка, але текст між цими тегами буде виділений напівжирним шрифтом і відцентрований. Якщо клітинка порожня, то навколо неї рамка не малюється. Якщо рамка все ж потрібна навколо порожньої клітинки, то в неї треба ввести символьний об’єкт (non-breaking space – нерозривний пропуск). Клітинка буде порожня, а рамка навколо неї буде ( - обов’язково треба набирати малими буквами і закриватися символом «крапка з комою»). Теги, що встановлюють шрифт (<B>, <I>, <FONT SIZE="n", FONT COLOR="#FFFFFF"), необхідно повторювати для кожної клітинки.
6. Оформлення тексту, створення заголовківФорматування тексту передбачає створення заголовків, абзаців, вирівнювання тексту, вибір стилів шрифту (напівжирний, курсив, підкреслений), зміну розміру шрифту. У HTML існує шість рівнів заголовків і кожному з них відповідає свій розмір шрифту. За допомогою заголовків різних рівнів можна створювати чітку ієрархічну структуру документа. Заголовку І рівня відповідає найбільший розмір шрифту. Синтаксис HTML-коду, що створює заголовки різного рівня та відображення цього коду броузером показано на Рис.4. <Н1> Заголовок першого рівня </Н1> <Н2> Заголовок другого рівня </Н2> <Н3> Заголовок третього рівня </Н3> <Н4> Заголовок четвертого рівня </Н4> <Н5> Заголовок п’ятого рівня </Н5> <Н6> Заголовок шостого рівня </Н6> Рис.4. Заголовки різного рівня Для кращого сприйняття сторінки користувачем не слід пропускати рівні заголовків. Для відображення тексту в HTML немає спеціального дескриптора. Текст вводиться у будь-якому місці між дескрипторами <BODY></BODY>. У текст не потрібно вставляти ні порожні рядки, ні символи переведення рядка, оскільки при відображенні сторінки броузером вони не враховуються. Текст автоматично розміщується за шириною вікна броузера. Якщо ж необхідно на Web-сторінці помістити порожній рядок або забезпечити в потрібному місці перехід до наступного рядка, слід використовувати спеціальні дескриптори: - дескриптор розриву абзацу <Р></Р>; - дескриптор розриву рядка <BR>. Дескриптор розриву абзацу дає команду броузеру закінчити поточний абзац і помістити порожній рядок перед наступним абзацом. Дескриптор розриву рядка вказує про закінчення поточного рядка і переходу до наступного. Для дескриптора розриву абзацу використовувати закриваючий дескриптор </Р> не обов’язково. Використання згаданих дескрипторів розглянуто на прикладі: <HTML> <HEAD> <TITLE> Приклад використання дескрипторів розриву рядка та абзацу </TITLE> </HEAD> <BODY> Дескриптор розриву абзацу дає команду роузера вставити порожній рядок перед початком наступного абзацу. <Р> Дескриптор розриву рядка дає команду броузеру <BR> перейти у наступний рядок. </Р> </BODY> </HTML> Відображення сторінки з таким кодом подано на Рис.5. Текст абзацу чи заголовка може бути вирівняний по лівому краю, по правому краю, або по центру вікна броузера. Для вирівнювання тексту використовується параметр ALIGN=вирівнювання, де вирівнювання може приймати значення: LEFT для вирівнювання по лівому краю, RIGHT для вирівнювання по правому краю, CENTER для вирівнювання по центру. Найчастіше параметр ALIGN використовується в дескрипторах розриву абзацу та визначення заголовка. Наприклад: <HTML> <HEAD> <ТІTLЕ> Приклад вирівнювання тексту </ТITLE> </HEAD> <BODY> <Н2 ALIGN=CENTER>Цей заголовок буде розміщено посередині</Н2> <!-- Наступний абзац буде вирівняно по правому краю à <Р ALIGN=RIGHT> Цей абзац вирівняно по правому краю Вивчення HTML невдовзі стане такою ж необхідністю, як вміння ввімкнути комп’ютер, скопіювати файл чи скористатися текстовим редактором. Якщо користувач вміє набирати текст, то зможе освоїти і використання HTML. </Р> </BODY> </HTML> Відображення сторінки з таким кодом подано на Рис.6 У HTML є контейнер, в який можна помістити заздалегідь відформатований текст. Контейнер <PRE>…</PRE> використовується для відображення відформатованого текстовим редактором блоку тексту, який складно було б прочитати, якщо б броузер переформатував його (наприклад, блоки програмного коду мовою C++). Цей контейнер дозволяє зберегти розбиття тексту на рядки (символи переходу на новий рядок, отримані в результаті натискування клавіші <Enter>, інтерпретуються як розриви рядка), пропуски всередині тексту інтерпретуються у точній відповідності з їх розміщенням у текстовому редакторі. Недоліком такого підходу є втрата гнучкості, а також те, що броузера, зазвичай, виділяють відформатований заздалегідь текст із допомогою моноширинного шрифту. Це призводить до того, що довгі фрагменти тексту зливаються. У наступному прикладі створюється сторінка із заздалегідь відформатованим текстом: <HTML> <HEAD> <TITLE> Приклад заздалегідь відформатованого тексту </TITLE> </HEAD> <BODY> <Н1 ALIGN=CENTER> Книги про HTML </H1> <PRE> НАЗВА АВТОР ВИДАВНИЦТВО РІК Использование HTML М.Браун «ВИЛЬЯМС» 2000 </PRE> </B0DY> </HTML> Відображення документа з таким кодом у броузера подано на Рис.7. Мова HTML надає можливість вибирати для написання фрагментів тексту різні стилі: напівжирний, курсив, підкреслення тощо. Для цього в HTML існують спеціальні дескриптори, які називають дескрипторами стилів. Всі дескриптори стилів є контейнерами. Основні дескриптори стилів подано у таблиці 1.2. Таблиця 1.2. Основні дескриптори стилів
Використання дескрипторів стилів розглянуто в наступному прикладі: <HTML> <HEAD> <TITLE> Приклади виділення тексту дескрипторами стилів </TITLE> </HEAD> <BODY> Приклад виділення тексту <В> напівжирним шрифтом</В><BR><BR> Можна також виділити текст <I>курсивом</I> <BR><BR> Особливо важливі місця можна <U>підкреслити</U><BR><BR> Можна створити <SUP> надрядковий </SUP> або <SUB> підрядковий </SUB> текст<BR><BR> Крім того, текст можна <STRIKE>перекреслити</STRIKE>. </BODY> </HTML> Відображення сторінки з таким кодом подано на Рис.8 Для вибору шрифту, його розміру та кольору в HTML служить контейнер <FONT>…. </FONT>. Розмір шрифту можна визначити за допомогою атрибута SIZE дескриптора <FONT>: <FONT SIZE=”значення”> Атрибут SIZE дозволяє вказувати абсолютний (значення від 1 до 7) та відносний (значення від –4 до +4) розміри шрифту по відношенню до розміру основного шрифту, що використовується в основній частині сторінки. Для зміни розміру основного шрифту використовується елемент <BASEFONT SIZE=значення>. Значення атрибута SIZE може бути число від 1 до 7. Для броузера стандартним є розмір шрифту 3. Атрибут FACE дескриптора <F0NT> дозволяє вказати броузеру шрифт, яким необхідно відображати документ. Якщо розробник сторінки не знає, які шрифти можуть бути на комп’ютері користувача, то в атрибуті FACE можна вказати через кому декілька назв шрифтів, наприклад: <FONT FACE=”Verdana”, “Arial”, “Helvetica”> Броузер переглядає список шрифтів зліва направо і використовує перший, який встановлено на комп’ютері користувача. Якщо броузер не знаходить на комп’ютері користувача жодного шрифту, що вказані в атрибуті FACE, документ відображається шрифтом, який задано в роузера користувача за замовчуванням. За допомогою дескриптора <FONT> можна також змінити колір шрифту. Для цього використовується атрибут COLOR, наприклад, код <FONT COLOR=”GREEN”>текст</FONT> задає вказівку броузеру відобразити слово «текст» зеленим кольором. Детальніше про використання кольору у Web-документах розглянуто в розділі Web-графіка. Крім дескрипторів у мові HTML існують також спеціальні символи форматування. Одним з таких символів є — нероздільний пропуск — . Використання цього символу в коді HTML-файла забезпечує появу на Web-сторінці одного пропуску. Наприклад, за кодом: poзмір шрифту броузер між словами «розмір» і «шрифту» помістить 6 пропусків* У таблиці 1.3 описано коди деяких спеціальних символів. Таблиця 1.3. Коди спеціальних символів
Графічні об’єктиВажливу роль в оформленні Web-сторінок відіграють графічні зображення. Включення їх у HTML-документи дозволяє надати сторінці «настрою» (ліричного, гумористичного, ділового), подати інформацію, яку неможливо отримати з тексту, розбити сторінку на «теми», що дозволить користувачеві краще орієнтуватися в матеріалі. Для того, щоб сторінка подобалась відвідувачам, необхідно добитись оптимального співвідношення форми (дизайну) і змісту. Швидкість появи зображення на екрані залежить від розміру файла зображення. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт. На HTML-сторінках графіку можна розміщувати різними способами. Вбудовані зображення — це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки (справа від тексту чи іншого об’єкта, що безпосередньо передує зображенню) і не обрамлюються текстом. Для того, щоб помістити на Web-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_3o6paження>. Дескриптор <IMG> є одиночним. В атрибуті SRC (від слова source) необхідно вказати повну або відносну URL-адресу файла зображення. Наприклад, код: <Р>Це зображення нової моделі модема <IMG SRC=”modem8.jpg”>цей текст розміщується одразу після малюнка використано для розміщення на сторінці зображення, файл якого знаходиться в тому самому каталозі, що і сам HTML-файл (Рис.9). За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN. Нижче наведені значення, які можна присвоїти цьому атрибуту:
Наведемо код документа, що вміщує три зображення, для кожного з яких використовується один з варіантів вирівнювання. На Рис.10 подано Web-сторінку, створену на основі цього, коду. <HTML> <HEAD> <TITLE> Використання атрибута ALIGN в дескрипторі IMG </TITLE> </HEAD> <BODY> <P> <IMG SRC=”modem.jpg” ALIGN=TOP> Цей текст вирівнюється по верхньому краю зображення </P> <P> <IMG SRC=”modem.jpg” ALIGN=MIDDLE> Цей текст вирівнюється по середній частині зображення </P> <P> <IMG SRC=”modem.jpg” ALIGN=BOTTOM> Цей текст вирівнюється по нижньому краю зображення </P> </BODY> </HTML> Плаваючі зображення — це зображення, що не прив’язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом. Для створення плаваючих зображень використовується дескриптор <IMG> з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути LEFT (зображення плаває вздовж лівого краю тексту) або RIGHT (зображення плаває вздовж правого краю тексту). Наприклад: <IMG SRC=”amd.jpg” ALIGN=LEFT> Нижче наводиться код HTML-документа, в якому поміщено плаваюче зображення. <HEAD> <TITLE> Використання атрибута ALIGN в дескрипторі IMG </TITLE> </HEAD> <BODY> <P> <IMG SRC=”modem.jpg” ALIGN=LEFT></P> Цей текст розміщується праворуч від зображення і нижче <BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче<BR> Цей текст розміщується праворуч від зображення і нижче </BODY> </HTML> На Рис.11 подано інтерпретацію цього коду броузером. У дескрипторі <IMG> можна використовувати атрибути HEIGHT і WIDTH для визначення висоти та ширини зображення. За допомогою цих атрибутів «повідомляється» розмір зображення. Це дозволяє броузеру підготувати макет сторінки та розмістити текст до того, як будуть завантажені всі зображення. За Допомогою цих атрибутів можна також змінювати розміри зображення. Так, наприклад, для збільшення зображення необхідно в атрибутах HEIGHT і WIDTH вказати більші величини, ніж реальні розміри зображення (які можна визначити з допомогою графічного редактора). Зауважимо, що зменшувати розмір зображення таким методом не доцільно, оскільки розмір файла, а отже і час завантаження при цьому не змінюються. За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має такий формат: <BODY BGCOLOR=#rrggbb> rr, gg, bb — двоцифрові шістнадцяткові числа, які визначають відповідно червону, зелену та голубу складові кольору фону. Наприклад: <BODY BGCOLOR=#000000><!—задається чорний колір фонуà <BODY BGCOLOR=#ffffff><!—задається білий колір фону à <BODY BGCOLOR=#ffOOOO><!—задається червоний колір фонуà <BODY BGCOLOR=#00ff00><!—задається зелений колір фону à <BODY BGCOLOR=#0000ff><!—задається синій колір фону à Для визначення основних кольорів можна використовувати також зарезервовані імена (таблиця 1.4). Таблиця 1.4. Зарезервовані імена кольорів
Наприклад, <BODY BGCOLOR=”RED”> <!—задається червоний колір фону à Для створення графічного фону використовується атрибут BACKGROUND дескриптора <BODY>. У цьому атрибуті потрібно вказати ім’я файла графічного зображення. Наприклад: <BODY BACKGROUND=”my_picture.gif”> Колір основного тексту можна змінити за допомогою атрибута TEXT дескриптора <BODY>. Колір задається так, як і у випадку зміни кольору фону. Зображення-гіперпосилання — це зображення на Web-сторінці, клацнувши на якому, можна відкрити нову Web-сторінку або службу Internet. Наприклад, можна помістити на Web-сторінці зображення поштової скриньки, клацнувши на якому користувачі зможуть відправляти повідомлення електронної пошти. HTML-код зображення-гіперпосилання має вигляд: <А HREF=”URL”><IMG SRC=”URL-файла зображення”></А> Із ціллю швидшого завантаження Web-сторінки має сенс створювати зменшені копії зображень (мініатюри зображень), які є гіперпосиланнями на відповідні їм зображення-оригінали. Мініатюри завантажуються швидко, даючи користувачеві уявлення про зображення-оригінали. Доступ до зображення-оригіналу можна отримати у будь-який момент, клацнувши лівою кнопкою миші на зображенні-гіперпосиланні. Щоб використовувати мініатюри, необхідно мати дві копії зображення — велике зображення-оригінал і зменшене зображення. Для зменшення розмірів зображень використовують можливості графічних програм. Щоб зв’язати мініатюру з оригіналом необхідно помістити дескриптор, що задає мініатюру, всередині дескриптора <А HREF> </A>, який є гіперпосиланням на велике зображення, наприклад: <А HREF=”big.gif”><IMG SRC=”small.gif”></A> Тут задано вказівку роузера розмістити на Web-сторінці зображення (файл small.gif), що є гіперпосиланням на зображення, задане файлом big. Gif. 7. Гіперпосиланнянавеб-сторінціГіперпосилання — це основа HTML. За допомогою гіперпосилань користувачі можуть переходити з однієї сторінки до іншої. Існує три основних типи гіперпосилань: внутрішні, зовнішні та відносні. Внутрішні гіперпосилання — це посилання на об’єкти в межах одного документа. З їх допомогою користувач може переміщатись всередині однієї Web-сторінки. Такі посилання доцільно використовувати на довгих сторінках, щоб мати можливість швидко переміщуватись між їх розділами. Зовнішні гіперпосилання — це посилання на сторінки, розміщені на іншому Web-сервері. Відносні або локальні посилання — це посилання на Web-сторінки, розміщені на тому ж сервері. Адреси цих посилань задаються відносно адреси Web-сторінки, на якій вони поміщені. У HTML для зовнішніх гіперпосилань використовується синтаксис: <А HREF=»URL»>TeKCT посилання </А> де URL — повна адреса документа, на який здійснюється посилання. Текст, поміщений у контейнер <А HREF=»URL»> </A>, зображається в роузера з підкресленням та іншим кольором (найчастіше синім). Клацнувши на ньому лівою кнопкою миші, даємо вказівку броузеру завантажити сторінку, розміщену за адресою URL. Наприклад, вказівкою: <А HREF=»http://www.firma.com/ibm/computers.html»> Комп’ютери компанії IBM </A> створюється гіперпосилання на Web-сторінку, розміщену за адресою http://www.ibm.com/ibm/computers.html. Зв’язуючи гіперпосиланнями сторінки одного сервера, немає необхідності включати в URL доменне ім’я. Наприклад, вказівкою: <А HREF=”computers.htm”>Koмn’ютери виробництва ІВМ</А> створюється гіперпосилання на файл computers.htm, який повинен знаходитися на тому самому сервері і в тому самому підкаталозі, що і файл, в якому знаходиться це гіперпосилання. Якщо файл знаходиться в іншому підкаталозі, то необхідно вказати шлях до нього, наприклад: <А HREF=”ibm/computers.htm”>Kомn’ютери виробництва ІВМ</А> Є й інші можливості для спрощення записів довгих адрес URL. Так, наприклад, HTML-код: <НТМL> <HEAD> <TITLE> Основні розділи Web-сайта НПУ ро.М.П.Драгоманова</TITLE> </HEAD> <BODY> <А HREF=”http://www.npu.kiev.ua/REKT0RAT/in-rek.htm”>Peктоpaт</A> <А HREF=”http://www.npu.kiev.ua/FAKULT/in-fak.Іііт”>Факультети</А> <A HREF=”http://www.npu.kiev.ua/ASPIRANT/index.htm”>Acnipaнтypa</A> <A HREF=”http://www.npu.kiev.ua/ABITUR/abit-beg.htm”>Aбітурієнту</A> </BODY> </HTML> можна записати компактніше: <HTML> <HEAD> <TITLE> Основні розділи Web-сайта НПУ імені М.П. Драгоманова</ТIТLE> <BASE HREF=”http://www.npu.kiev.ua/”> </HEAD> <BODY> <A HREF=”REKTORAT/in-rek.htm”>Peкторат</A> <A HREF=”FAKULT/in-fak.htm”>Факультети</А> <A HREF=”ASPIRANT/index.htm”>Acnipaнтypa</A> <A HREF=”ABITUR/abit-beg.htm”>Aбітурієнту</A> </BODY> </HTML> Тут використовується дескриптор <BASE>, в якому вказано базову адресу URL, відносно якої подаються всі інші відносні адреси Web-сторінок. Зазначимо, що цей дескриптор використовується всередині контейнера <HEAD> </HEAD>, областю дії його є вся сторінка. Створюючи великі Web-сторінки, необхідно також забезпечити можливість для користувача легко переміщуватись з одного їх розділу до іншого. Це досягається завдяки внутрішнім гіперпосиланням. Для реалізації такого посилання необхідні два елементи: посилання, яке вказує, куди треба перейти, і мітка, яка фіксує місце переходу. Посилання задається кодом: <А HREF=»#Haзвa мітки”>Текст посилання</А> Мітка також використовує контейнер <А></А> і задається так: <А NAME =”#назва мітки”>текст</А> Назва мітки — це довільний текст, який не появляється на екрані й однозначно визначає місце переходу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви. Символ «#» при описі посилання вказує, що за ним записана назва мітки, а не назва файла. Приклад використання внутрішніх гіперпосилань: <HTML> <HEAD> <ТITLЕ>Колекція програм мовою VisualBasic</TITLE> </HEAD> <BODY> Нижче наводяться програми мовою VisualBasic: <BR> <!—далі створюємо внутрішні гіперпосилання à <А HREF=”#графік”>Побудова графіків функцій</А><BR> <А HREF=”#масив”>Сортування масиву</А><BR> <А HREF=”#рівняння”>Розв’язування квадратних рівнянь</А> <BR> <Р> <!—далі описуємо місця, на які здійснюються посиланняà <А NAME=»графік”> Побудова графіків функцій – приклад програми</А> <BR> (текст програми) <BR><BR> <А NАМЕ=”масив”> Впорядкування масиву - приклад програми</А> <BR> (текст програми) <BR><BR> <А NАМЕ=”рівняння”> Розв’язування квадратних рівнянь – приклад програми</А> <BR> (текст програми) </BODY> </HTML> Можна зробити так, щоб після натискування на деякому посиланні звучала музика або відтворювався відеофільм. Посилання на мультимедійні файли .avi, .wav створюються так само, як посилання на HTML-документи. В атрибуті HREF контейнера <А></А> необхідно вказати ім’я файла, в якому міститься потрібна мелодія або відеофільм. Наприклад: <Р>Натисніть<А HREF=”my_music.wav”>TyT</A>, щоб почути мою улюблену композицію Файл my_music.wav повинен знаходитись на тому самому сервері, у тому самому каталозі, що і HTML-файл, з якого він викликається. Для створення гіперпосилань на файли мультимедіа, розміщені на інших серверах Internet, використовуються повні URL-адреси. Часто виникає необхідність включити у Web-сторінку посилання на адресу електронної пошти. Для цього в атрибуті HREF необхідно задати адресу електронної пошти у вигляді «mailto: адреса». Наприклад, щоб створити посилання на адресу moi@npu. Kiev. Ua, необхідно у код сторінки помістити такий дескриптор: <А HREF=”mailto: moi@npu.kiev.ua”>moi@npu.kiev.ua</A> згідно з яким роузера відображає текст «moi@npu.kiev.ua» як гіперпосилання. Якщо клацнути на ньому лівою кнопкою миші, броузер відкриє поштову програму в режимі створення листа, і в полі «Адреса:» помістить адресу moi@npu.kiev.ua. Текст, що поміщається в контейнер <А></А>, може бути будь-яким, проте доцільно використовувати адресу E-mail, оскільки не всі користувачі сторінки можуть користуватися поштовими програмами, налагодженими на комп’ютері, з якого переглядається сторінка. Їм необхідно прочитати реальну адресу електронної пошти.
8. Динамічні ефекти та засоби їх створенняДинамічними називаються ефекти, коли графічні зображення на Web-сторінці змінюються з часом, елементи сторінки змінюють розміри або навіть свій зміст після клацання над ними мишею, текст «біжить» уздовж екрана тощо. Розглянемо ефект рухомого тексту у смузі, що має висоту HEIGHT ="висота в пікселах" і фон BGCOLOR = "колір фону". Ефект створюється за допомогою парного тега <MARQUEE>...</MARQUEE>, а саме: <MARQUEE BGCOLOR="aqua" HEIGHT = 40> Особиста сторінка Ваше прізвище та ім’я</ MARQUEE>. За допомогою цього тега можна заставити рухатись і графічний об’єкт. Текст "Особиста сторінка Ваше прізвище та ім’я" буде пробігати у смузі справа наліво, заходитиме за край екрана і з'являтимуться знову справа. Даний тег рекомендують застосовувати до заголовків сторінки. Ефект відбивання від країв екрана забезпечує параметр BEHAVIOR = "alternate", а зупинити рядок біля лівого краю екрана може значення цього параметра "slide". Значення "right" параметра DIRECTION забезпечить ефект руху у протилежний бік. Обмеження кількості проходів задається параметром LOOP=число, де цифра - кількість проходів. Смугу можна центрувати за допомогою параметрів HSPASE і VSPACE. Швидкість руху задає параметр SCROLLAMOUNT=число, де число – величина швидкості руху, де конкретне значення вибирають з діапазону від 1 (повільно) до 10 (швидко). Приклад. У тексті коду веб-сторінки у файлі file1.htm вставте рухомий рядок, наприклад, такого змісту: 1) <MARQUEE BGCOLOR="aqua" HEIGHT = 40 LOOP=5> Приватна сторінка Ваше прізвище та ім’я</ MARQUEE>. 2) Далі змініть цей рядок на такий: <MARQUEE BGCOLOR="aqua" HEIGHT = 50 LOOP=4 DIRECTION =”rihgt” SCROLLAMOUNT=5> <FONT FACE = "Courier" SIZE = +4 COLOR = "red"> Особиста сторінка Ваше прізвище та ім’я </FONT></MARQUEE> перегляньте веб-сторінку.
9. Розробка, публікація та підтримка сайту в мережі ІнтернетВище було розглянуто основні конструкції мови HTML і можливості її використання для створення Web-сторінок. Тепер потрібно з окремих сторінок сконструювати свій Web-сайт і розмістити його в Інтернеті. Розглянемо спочатку етапи планування і створення сайту на жорсткому диску вашого комп'ютера. Процес створення Web-сайта можна умовно поділити на ряд етапів:
Приступаючи до розробки свого сайту, потрібно чітко уявити собі його призначення. Звичайно сайти створюються для того, щоб заявити про себе чи про свою організацію, повідомити про результати роботи чи про свої досягнення, налагодити ділові зв'язки, дати рекламу про освітні послуги тощо. Крім призначення сайту, потрібно визначити коло його потенційних відвідувачів, тобто аудиторію, на котру розрахований ваш сайт. Чи то будуть школярі, студенти, чи люди різних віків? У який час вони будуть відвідувати ваш сайт і на яких мовах вони будуть говорити? Якими броузерами вони будуть користуватися? Наступним етапом буде підбір матеріалу. Не весь матеріал по тематиці сайту, що ви маєте, варто публікувати в Інтернеті. Потрібно оцінити якість матеріалу та його цікавість для відвідувачів. Відібраний матеріал розділіть по темах - ці теми будуть визначати розділи майбутнього сайту. Якщо матеріалу по кожній темі набирається досить багато, розсортуйте його за ступенем важливості. Матеріали, що ви плануєте опублікувати на сайті, потрібно організувати за деякою структурою. Найчастіше для Web-сайтів обирається деревоподібна структура організації інформації (Рис.2.2.11, а, б). На верхньому рівні знаходиться початкова сторінка сайту, з якої відвідувач за допомогою меню чи посилань і може переходити на сторінки наступного рівня. Деревоподібна структура може складатися з декількох рівнів підпорядкування. Дуже важливо визначити оптимальне співвідношення між кількістю рівнів (глибиною коренів чи висотою дерева) і кількістю варіантів вибору на кожному рівні (шириною дерева). Якщо дерево виявиться дуже широким (рис. 12, а), то відвідувачеві важко буде орієнтуватися в поданій інформації й утримувати у пам'яті безліч варіантів вибору. Якщо ж рівнів буде багато, то відвідувачу доведеться довго «докопуватися» до потрібної йому інформації (рис.12, б). Для цього він має зробити безліч клацань мишею і дочекатися завантаження проміжних сторінок. Щоб полегшити подорож усередину сайту, на сторінках верхнього рівня розміщають посилання, що можуть перевести відвідувача відразу ж до сторінок нижнього рівня. На глибоких сторінках також можуть розміщуватися посилання для зворотного переходу вгору по ієрархічних рівнях сайту. Іноді для сайту замість деревоподібної структури доцільно вибрати структуру у вигляді простого ланцюжка (лінійна структура). При цьому перехід з кожної сторінки може здійснюватися тільки в двох напрямках: на наступну і на попередню сторінки (рис.2.2.12, а). Для цього на сторінках розташовуються кнопки Вперед та Назад, - за допомогою їх легко переглядати розділи книги чи набір фотографій. На практиці лінійна структура застосовується в поєднанні з різними відгалуженнями й альтернативними переходами (рис.13, б). Відвідувач може скласти уявлення про структуру сайту за допомогою засобів навігації: списків-посилань, меню і т.д. Для кращої орієнтації відвідувачів до складу сайту може бути включена окрема сторінка, так звана карта сайту. Схема розроблюваного сайту може бути такою, як на рис.14. Збирання файлів Web-сайтуКоли ви підготували матеріали і подали у вигляді схеми структуру вашого сайту, можете приступати безпосередньо до розробки, тобто до складання HTML-коду. Саме цей етап роботи над сайтом був описаний вище. У результаті на диску вашого комп'ютера будуть створені файли Web-сторінок, а також будуть розміщуватися файли впроваджених об'єктів (зображень, аудіо, відео). Скопіюйте всі файли в окрему папку і назвіть її, наприклад, Website (рис.15). У цій лапці має. бути файл index.html, що подає початкову сторінку сайту. Інші файли папки Website містять HTML-код інших сторінок (файли з розширенням .html). У розглянутому прикладі в папці Website розміщений також файл із розширенням .ess, який містить аркуші каскадних стилів (на початковому етапі знайомства з HTML цей файл можна не створювати). Імена усіх файлів повинні бути набрані малими латинськими буквами. У папці сайту бажано передбачити папку (у даному прикладі - img), у якій будуть зберігатися зображення у форматі GIF чи JPEG. Якщо при формуванні папки сайту ви перейменовували файли, простежте, щоб відповідні зміни були внесені й у код HTML сторінок. Після цього завантажте початкову сторінку сайту в броузер (Internet Explorer або Netscape Navigator) і переконайтеся, що всі переходи на інші сторінки сайту працюють, сторінки відображаються потрібним чином, а малюнки виводяться на сторінки. Якщо яка-небудь сторінка чи малюнок не відображаються, то, мабуть, ви помилилися у написанні імен файлів. Виправте ці помилки, і ще раз перевірте роботу сайту. Вибір Web-серверуОтже, ви створили свій невеликий сайт. Тепер вам потрібно вибрати Web-сервер, на якому цей сайт буде розміщений. Web-сервер виконує збереження, пошук і обмін файлами в WWW. Наприклад, коли клієнт Web запитує файл із WWW, програма броузера відправляє цей запит на Web-сервер, на якому знаходиться даний файл. Сервер відшукує файл на своїх дисках і відправляє його комп'ютеру-клієнту, від якого був отриманий запит. Обмін інформацією між клієнтом і Web-сервером відбувається відповідно до протоколу HTTP - загального протоколу, що відповідає за функціонування World Wide Web. Web-сервер - це комп'ютер, що працює під керуванням однієї з операційних систем UNIX, Windows NT, Macintosh і на який установлена спеціальна програма Web-cepeepy. Найбільш поширеною програмою Web-серверу є Apache Server, яка працює швидко і встановлюється безкоштовно (див. вузол www.apache.org). Часто використовуються також програми TomCat, Microsoft IIS, NCSA та ін. За допомогою однієї з таких програм свій Web-сервер може створити будь-яка організація, школа і навіть приватна особа. Однак це не завжди виправдано, оскільки повноцінний Web-сервер повинен мати швидке з'єднання з Інтернетом (наприклад, через виділену лінію) і повинен працювати цілодобово. Тому користувачі вирішують проблему Web-серверу за допомогою сторонніх організацій - фірми вашого провайдера чи спеціалізованих фірм, які займаються хостингом. Хостинг (від англ. слова hosting - спільне розміщення) - це розміщення Web-caumy на обладнанні компанії. Ресурси серверу і лінії зв'язку використовуються спільно безліччю клієнтів. При виборі стороннього Web-серверу керуються двома основними критеріями: ціною і продуктивністю. У професійних розробників Web-сайтів вибір визначається можливостями замовника і стосунками з компаніями, що володіють Інтернет-серверами. Нині з'являється усе більше Web-серверів, що здійснюють безкоштовний хостинг (наприклад, сервери www.bigmir.net, www.chat.ru, www.da.ru, www.narod.ru, www.boom.ru). Такі сервери не вимагають оплати за підтримку Web-сайтів клієнтів і існують за рахунок рекламодавців. Зареєстрованому клієнту дається обмежений, але достатній простір на диску серверу - від 5 до 50 Мбайт. На ньому клієнт може розмістити як невеликий, так і солідний сайт. Єдине зобов'язання, що бере на себе клієнт безкоштовного Web-серверу, це розміщення на своєму сайті банерів' - маленьких помітних зображень (часто анімованих), призначених для реклами. Утім, згоди клієнта на це, як правило, не запитують - банери вставляються й обновляються без участі власника сайту. Безкоштовні Web-сервери мають також обмеження у наданому сервісі: вони, як правило, не підтримують сучасні Інтернет-технології PHP, JSP. ASP та ін. Однак свій сайт, що містить звичайні файли HTML, ви зможете розмістити на безкоштовному сервері без особливих проблем. (Термін «банер» (від англ banner - прапор) прийшов в WWW із поліграфії, де він означає газетний заголовок великими літерами на всю ширину смуги - так звану «шапку») Розміщення Web-сайту в мережі Інтернет та його редагуванняСтворений сайт почне «діяти», якщо розмістити його на Web-сервері. Після цього відвідувачі зможуть «заходити» на наш сайт і знайомитися з поданими на ньому матеріалами. Для передачі файлів на Web-сервер існує кілька можливостей. Розглянемо найпростіший спосіб розміщення сайту - на одному з безкоштовних Web-серверів, наприклад, www.boom.ru. На цьому сервері користувачеві дається зручний інтерфейс для операцій розміщення і редагування сайту, а також до 50 Мбайт вільного простору на диску. При передачі файлів на безкоштовний сервер використовується протокол HTTP, тобто протокол, за допомогою якого здійснюється звичайний обмін файлами в WWW. Розглянемо послідовність дій при розміщенні Web-сайту.
Задані вами файли будуть скопійовані на диск Web-серверу. Для редагування вмісту папок вашого сайту на сервері, можна використати кнопки на сторінці вмісту. Наприклад, для видалення якого-небудь файлу слід поставити поруч з ним прапорець і натиснути кнопку Удалить. Далі треба підтвердити видалення в наступному діалозі. Для переміщення файла слід клацнути на кнопці Переместить і у діалоговому вікні визначити папку для переміщення. Для перевірки роботи створеного сайту в Інтернет слід у вікні броузера набрати адресу створеного сайту і уважно переглянути всі Web- сторінки, перевірити всі можливі переходи між ними. Після того як ви розмістили свій сайт на Web-сервері, ви можете до нього звертатися для редагування вмісту (додавати, видаляти, обновляти файли). Якщо ви користуєтеся безкоштовним хостингом, то змінювати файловий склад можна за допомогою передбаченого для цього інтерфейсу. Після зміни файлового складу сайту не відключайтеся від Інтернету, а завантажте програму броузера і зайдіть на сайт, що редагується. Перегляньте уважно, як позначилися внесені вами зміни на зовнішньому вигляді і роботі Web-сайту. Після розміщення сайта на сервері його необхідно “розкрутити”, тобто досягти якнайбільшої відвідуваності користувачами. Цей процес, як правило передбачає використання банерної реклами, розміщення інформації про сайт на пошукових серверах та участь у різноманітних рейтингах. Реєстрація сайта в пошукових системах є однією з найважливіших частин процесу “розкрути”, оскільки майже всі користувачі для пошуку деякої інформації спочатку звертаються саме до пошукових серверів. Процедура реєстрації для кожного серверу різна. Перехід на сторінку реєстрації сайта здійснюється за допомогою гіперпосилання на головній сторінці пошукового сервера, яке в україномовних пошукових системах може бути “Додати сайт”, “Додати URL”. Потім заповнюється форма, у якій рзміщується інформація про зміст сайта, його адреси, дані про організацію, яка підтримує цей сайт. Після створення сайту, розміщення його на сервері, “розкрутки” настає процес підтримки, що передбачає постійне оновлення й актуалізацію поданої інформації. Причому чим частіше Ви оновлюватимете інформацію на сайті, тим більше буде цільових відвідувачів сайту і природно споживачів Вашої продукції або послуг Контроль відвідуваності сайту здійснюється по лічильниках. Пошукові машини, як правило, мають рейтингові системи, які ранжирують ресурси по їх відвідуваності. Для участі в рейтингу слід встановити на головній сторінці свого сайту лічильники рейтингів.
10. Поняття про інтерактивні веб-сторінки та засоби розробки сценаріївВ даний час для створення інтерактивних сайтів застосовуються різні сучасні технології: PHP, ASP, Perl, JSP, CSS, бази даних DB2, MSSQL, Oracle, Access і так далі Сучасні сайти, як правило, керовані сайти, тобто сайти, які оснащені CMS (Системою Управління Контентом - Content Management Systems). Керовані сайти створюються розробниками для того, щоб інформаційну підтримку і супровід сайту (наприклад, оновлення вмісту або контента сайту) міг здійснювати сам власник сайту. Залежно від технології створення можна виділити наступні типи сайтів:
Сайти по взаємодії користувача з ресурсами веб-сторінки можна розділити на пасивні та активні або інтерактивні. Пасивні сайти - це сайти з пасивними веб-сторінками. У пасивних сайтах користувач має можливість тільки переглядати інформацію на веб-сторінках. Інтерактивні сайти - це сайти з активними веб-сторінками. При роботі з інтерактивними веб-сторінками користувач має можливість обмінюватися даними з сервером, брати участь в інтерактивному діалозі. Статичні сайти з пасивними веб-сторінками Технологія створення веб-сторінки статичних сайтів: мова HTML (Hyper Text Markup Language), яка є мовою розмітки гіпертексту та каскадні таблиці стилів CSS (Cascading Style Sheets). CSS використовується для оформлення та форматування різних елементів веб-сторінок, в результаті чого значно знижують розміри веб-сторінок. Створення веб-сторінок статичних сайтів - це трудомісткий процес. Статичні сайти з пасивними веб-сторінками створюються вручну, за допомогою будь - якого редактора HTML у файловій системі комп'ютера, потім завантажуються на сайт. Створення нових веб-сторінок або редагування існуючих сторінок користувач виконує на ПК в редакторі, а потім знову завантажує на Web-сайт. В основному статичні сайти з пасивними веб-сторінками застосовуються для створення невеликих і середніх сайтів з постійною структурою і зовнішнім виглядом сторінок (але кожна сторінка може мати свій шаблон оформлення), які можна розміщувати на будь-яких хостингах, у тому числі на безкоштовних, які не підтримують роботу скриптів. Навчання школярів і студентів основам створення сайтів доцільно починати зі створення статичних сайтів з пасивними сторінками, тобто з вивчення мови розмітки HTML і каскадних таблиць стилів CSS. Для створення сайту використовують різні засоби: редактори тексту типу Блокнот, візуальні редактори типу Microsoft FrontPage, Macromedia Dreamweaver і безліч інших редакторів, а також конструктори сайтів (дизайнери). Конструктори веб-сайтів розміщуються на деяких сайтах в мережі Інтернет. Для навчання доцільно використовувати редактор Microsoft FrontPage - це візуальний HTML редактор, який входить до складу додатків Microsoft Office. Але створення реального сайту краще виконувати в русифікованому редакторі Macromedia Dreamweaver 8 з використанням технології CSS. Необхідно відзначити, що з метою швидкої завантаження веб-сторінок їх розміри не повинні перевищувати 20 Кбайт. Статичні сайти з інтерактивними веб-сторінкамиДля додання статичним веб-сторінок інтерактивності і динамічності в веб-сторінку можна вставляти скрипти на сценаріях javascript і VBScript, виконуваних на стороні клієнта. Скрипти на javascript і VBScript можуть виконуватися або за наявності будь-яких дій користувача або автоматично під час завантаження веб-сторінки. Крім того, в HTML документ можна вставляти елементи DHTML (динамічний HTML). DHTML - це спосіб створення інтерактивного веб-сайту. Динамічний HTML побудований на мові програмування javascript, каскадних таблицях стилів CSS і DOM (об'єктній моделі документа). У документ HTML можна вставляти флеш-фрагменти або Flаsh-ролики (swf-файли). У документ HTML можна вставляти Flash-форми аналогічні HTML формам. Флеш забезпечує інтерактивність за рахунок інтерактивної векторної анімації для Web. Для створення Флеш використовується мова сценаріїв ActionScript. Для обміну даними між користувачем і сервером веб-сторінку можна вставити веб-додаток, зване HTML формою (form). Форма це частина веб-сторінки, в якій користувач може вводити свою інформацію. Запити в формі можуть виконуватися методами GET або POST. У зв'язку з тим, що скрипти, що виконуються на стороні клієнта, збільшують обсяг веб-сторінок, їх кількість і розмір на сторінці повинно бути обмеженим. Створення статичних сайтів з інтерактивними веб-сторінками доцільно виконувати в редакторі Macromedia Dreamweaver 8. Динамічні сайти, веб-сторінки яких генеруються або формуються з даних зберігаються на сервері в базі даних В даний час для створення динамічних сайтів застосовуються різні веб-додатки. Для розробки веб-додатків застосовуються різні технології, які забезпечують створення динамічних веб-сторінок. Динамічні сайти здатні реагувати на запроваджену користувачем інформацію, тобто можуть бути інтерактивними, тому динамічні сайти, як правило, є інтерактивними. Для розробки веб-додатків використовують два підходи: на основі компіляції модулів; на основі інтерпретуються сценаріїв. Компіляції модулі компільований модулі - це модулі типу CGI, які транслюються в виконувані файли і виконуються веб-сервером. Першими веб-додатками для створення динамічних сайтів були окремі модулі CGI (сценарії, створені в основному на мові Perl), які виконувалися на сервері. CGI-сценарії є звичайними програмами. Результатом виконання модуля є сторінка в форматі HTML. В Інтернет можна безкоштовно завантажити модулі CGI або CGI-скрипти (гостьові книги, зворотний зв'язок, каталоги посилань, пошук по сайту і т.д.), які виконуються на Web-сервер за запитом користувача. З іншого боку Common Gateway Interface (CGI) - це стандартний інтерфейс обміну даних, який визначає спосіб взаємодії клієнтського програми та веб-сервера. CGI забезпечує запуск скрипта на сервері і взаємодія з ним. У подальшому для реалізації цього підходу стали застосовувати інтерфейси (серверні розширення) ISAPI і NSAPI. Підхід на основі інтерпретуються сценаріїв У цьому випадку для створення сайту застосовуються серверні скрипти так звані мови сценаріїв. Код сценаріїв, як і НТML-код, є інтерпретованою кодом, тому HTML і сценарії можна комбінувати. Найбільш поширені мови серверних скриптів: Perl, ASP, JSP, PHP, Cold Fusion, Python. Сценарії взаємодіють з об'єктами на сервері і генерують вихідну інформацію у форматі HTML. Тип серверного скрипта визначається з розширення імені файлу (. Php,. Asp,. Aspx,. Jsp,. Cfm). Якщо Web-сервер отримує запит на сторінку такого типу, то він інтерпретує всі містять в ній сценарії, в результаті чого генерується веб-сторінка у форматі HTML, яка передається назад браузеру. Найбільш популярними технологіями (середовищем розробки) створення динамічних веб-сторінок є: CGI, PHP, ASP, ASP.NET, JSP, Cold Fusion, AJAX, Python, CSS, бази даних DB2, MsSQL, Oracle, Access і т.д. Залежно від розв'язуваних завдань для створення сайту вибирають ту чи іншу мову серверних скриптів. Для створення малих і середніх інтерактивних сайтів доцільно застосувати мова сценаріїв PHP. Конкурентами PHP є технології ASP, JSP, Cold Fusion, Perl. Гідністю мови PHP є те, що він є безкоштовним, має відкриті вихідні коди і працює майже на всіх платформах. Для створення (розробки) і супроводу динамічних сайтів використовують CMS (Content Management System) - Систему управління сайтом, яку називають движком сайту. В даний час популярними системами управління є Drupal, Joomla та WordPress. На основі цих CMS можна створювати функціональні і легко керовані PHP-сайти. Движки для Drupal, Joomla та WordPress є безкоштовними. Засоби розробки сайтів забезпечують поділ змістовної частини (контенту) від дизайну (шаблону веб-сторінки), що дозволяє змінювати зміст веб-сторінок, не зачіпаючи їх дизайну і змінювати шаблон сайту не зачіпаючи змісту його сторінок. Для підтримки навчального процесу традиційного навчання школярів і студентів доцільно створювати динамічні інтерактивні сайти, наприклад, за допомогою движка Joomla. Цей движок має безліч модулів: форуми, гостьові книги, поштові розсилки, контакти, опитування, форми реєстрації, форми пошуку, систему обміну повідомленнями користувачів сайту та інші товари, які перетворюють сайт із засобу інформації в засіб комунікації. У цьому випадку сайт буде місцем активного обміну інформацією між користувачами Інтернет (учнями або студентами і викладачами). На такий сайт користувачі можуть самостійно додавати електронні навчальні матеріали, статті, фотографії, відео, безкоштовно викачувати освітні ресурси, тобто користувачі має можливість обмінюватися даними з сервером. Крім того, учні або студенти через опитування можуть оцінювати роботу викладачів, висловлювати свою думку з різних питань, спілкуватися між собою, тобто брати участь в інтерактивному діалозі. Динамічні сайти, веб-сторінки яких генеруються на стороні клієнтського додатку Динамічні сайти, веб-сторінки яких генеруються на стороні клієнтського застосування. Для створення таких сайтів використовують мови сценаріїв javascript і VBScript, а також Java-аплети і технологія ActiveX. В Інтернеті можна скачати движок для сайту на javascript. Flash-сайтиТехнологія Flash призначена для створення векторних графічних додатків. За допомогою Flash можна створити повноцінну сторінку-ролик для Web, але при цьому інформація розбивається на великі файли, для завантаження яких потрібно багато часу. В даний час більш доцільним є застосування Flash в якості елементів дизайну в HTML-документах (наприклад, для створення логотипів, флеш-меню, інформерів і інших анімаційних графічних елементів), як анімованих flash-банерів і вхідних flash-заставок. Flash доцільно використовувати там, де мало тексту, але де потрібні звукові або анімаційні ефекти, тобто там, де флеш забезпечує створення векторних анімаційних файлів з невеликим часом завантаження. Основні недоліки цієї технології створення повноцінних Flash-сайтів: велика вага веб-сторінок і висока вартість розробки сайтів. Крім того, сайти, створені повністю на основі Flash, погано індексують пошукові системи. Флеш-технології в основному застосовуються для створення престижних сайтів. Для створення флеш-анімацій застосовують технологію Adobe Flash, що забезпечує можливість працювати з мовами: ActionScript і ActionScript 2.0. Використання сценаріївСценарії використовуються для надання Web-сторінкам динамічності. Наприклад, за допомогою сценаріїв можна перевіряти правильність введених у форму даних перед тим, як відправити них на сервер. Якщо ви що-небудь можете помістити на Web-сторінку, то до нього можна приєднати сценарій, або керувати їм за допомогою сценарію. Найпоширенішою та найпершою мовою сценаріїв є мова JavaScript, хоча, лідерство в неї прехоплює мова VBScript, розроблена фірмою MicroSoft на основі мові Visual Basic. Але, по-перше, мову підтримують JavaScript і Internet Explorer. По-друге, JavaScript — могутня мова сценаріїв, що задовольняє більшість виникаючих вимог. VBScript є альтернативною мовою сценаріїв, і вона являє собою спрощену версію мови Visual Basic. Для додавання VBScript, JavaScript на Web-сторінку використовується дескриптор <SCRIPT>, що має один-єдиний атрибут LANGUAGE. Привласніть цьому атрибутові значення VBSCRIPT, щоб вибрати мову VBScript. Оскільки дескриптор <SCRIPT> є контейнером, необхідно використовувати завершальний дескриптор </SCRIPT>. От як це виглядає: <SCRIPT LANGUAGE= VBSCRIPT > I Оператори VBScript I </SCRIPT> Можна і не використовувати атрибут LANGUAGE. Якщо ви не вкажете цей атрибут, то більшість браузерів буде використовувати мова JavaScript, хоча це і не визначено ні консорціумом W3C, ні яким-небудь стандартом. Якщо Web-браузер, не підтримує VBScript чи JavaScript, то він ігнорує дескриптори <SCRIPT> і </SCRIPT>, однак відображає усе, що знаходиться між ними, припускаючи, що там розміщено якийсь текст HTML. Для того щоб сховати текст сценарію, використовуйте коментар. Перед блоком коду сценарію необхідно коментар відкрити, а після останнього оператора — закрити. Web-6poyзepы, що підтримують JavaScript, ігнорують коментарі, а інші — ігнорують усе, що в них знаходиться. <SCRIPT LANGUAGE=JAVASCRIPT> <! - - function AddSeries(last) intTotal = 0; for(j = 1; j <= last; j++) { intTotal+=j; alert(intTotal); } return intTotal; } document.write("Howdy") ; //--> </SCRIPT> Уміння вбудовувати сценарії в Web-сторінки і завантажувати них через Internet недостатньо адже іноді вам потрібно буде перехопити якась подія від об'єктів, поміщених на Web-сторінку. Для цього потрібно навчитися підключати сценарії до подій. Більшість об'єктів на Web-сторінці має події. Таблиця 9.5 - Основні події HTML
Об'єкти, події й оброблювачі подій взаємодіють. Оброблювач подій зв'язується з об'єктом, використовуючи подію. Зв'язування здійснюється за допомогою додаткових атрибутів подій, яким привласнюється один оператор, що виконує функцію. Наприклад, для зв'язку функції на JavaScript, що називається MyFunction (), з подією onclick кнопки, необхідно, щоб дескриптор <INPUT> виглядав у такий спосіб: <INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction"> Так само просто зв'язується оброблювач подій і з іншими подіями. У нашому випадку атрибут події — onClick. Можна додати оброблювач ще однієї події і зв'язати його з якою-небудь подією: <INPUT TYPE=BUTTON NAME=BUTTON onClick="MyFunction()" onMouseOut="ByeMouse()"> Припустимо, ви завантажили сценарій, що відображає в рядку стану повідомлення, коли користувач наводить покажчик миші на яке-небудь посилання на сторінці. Ви поміщаєте цей сценарій на свою сторінку, а він не працює. Проблема полягає в тім, що він не зв'язаний з подіями. Необхідно зв'язати функцію Message () з подією onMouseOver для кожного дескриптора <А> у файлі HTML, як показано нижче. <SCRIPT LANGUAGE=JAVASCRIPT> <!-- function Message () { window.status = "Покажчик миші розташований над посиланням!"; } //--> </SCRIPT> Зв’язування нового сценарію. <HTML> <HEAD> <ТIТLЕ>Зв'язування нового сценарію</ТIТLЕ> </HEAD> <BODY> <А HREF="more.htm" onMouseOver="Message()">Уперед</А> <А HREF="less.htm" onMouseOver="Message()">Назад</А> </BODY> </HTML> Створення інтерактивних Web-сторінок з допомогою мови сценаріїв VBScript. VBScript – це мова Web-сценаріїв. Він є одним з діалектів мови VBA і також вбудований в додатки MS Office, як іVBA. Редактор VBScript можна викликати в додатках MS Office, виконавши команду Сервис|Макрос|Редактор Сценариев або натиснувши сполучення клавіш Alt+Shift+F11. VBScript дозволяє: 1. Вставляти в HTML–документи програми обробки зі сторони клієнта. 2. Одержувати доступ до властивостей, методів і подій 2.1. Елементів HTML-документів. 2.2. Active-X елементів HTML-документів. 2.3. Об’єктів Internet Explorer. VBScript – інтерпритатор, який вбудований в браузер, і відповідно браузер може запускати програми написані на VBScript. Тобто ці сценарії виконуються на стороні клієнта. На відміну від сценаріїв VBScript, ASP-сценарії (Active Service Page) дозволяють створювати сценарії, які будуть виконуватись на стороні сервера, тобто ASP-сценарії передають в браузер не саму програму, а тільки тест і HTML-дескриптори згенеровані Web-сервером. При допомозі моделі ADO (AvtiveX Data Object) ASP також доступні бази даних, які зберігаються на сервері. Але для використання ASP-сценаріїв недостатньо офісних додатків, редакторів Visual Basic for Application і редактора сценаріїв VBScript. Для цього необхідно встановити також Web-сервер Internet Information Server, який би міг інтерпретувати ASP-сценарії, а також якщо потрібний доступ до даних які зберігаються в базі даних, бажано встановити систему управління базами даних Microsoft SQL Server. На сьогоднішній день досить велика кількість Web-серверів і Web-сайтів працюють на платформі Windows, з використанням Internet Information Server і відповідно створено велику кількість програм з допомогою ASP для доступу до інформаційних ресурсів Internet. Рекомендована література
З повагою ІЦ “KURSOVIKS”! |