Home » ЗАНЯТТЯ 18

ЗАНЯТТЯ 18

24 Червня, 2024

ЗАНЯТТЯ 18

Тема: Розробка персональної web-сторінки. Розміщення найпростішої web-сторінки в мережі Internet.

Internet, безумовно, не був створений у тім виді, у якому він існує зараз, у формі тисячі мереж і з’єднань. Історія Internet іде в 1969 рік, коли була створена перша мережа комутації пакетів, мережа ARPANET, називана іноді “матір’ю” Internet.

Створення ARPANET було експериментом уряду США в області мереж комутації пакетів. ARPA, Department of Defense (DOD) Advanced Research Projects Agency, Агенство Перспективних досліджень Міністерства оборони США, що пізніше став називатися DARPA, Defense Advanced Research Projects Agency, об’єднало дослідників, давши їм можливість спільно використовувати апаратні і програмні ресурси, бази даних, іншу інформацію.

Через деякий час до ARPANET були підключені інші експериментальні мережі: PRNET (packet radio) і SATNET (packet satellite). Об’єднання мереж було реалізовано з використанням розробленої спеціально для цих цілей технології міжсіткової взаємодії TCP/IP, фінансованої DARPA. До слова, усі три ці мережі вже не існують, однак TCP/IP усе ще живе.

На початку 1980 років ARPANET була розбита на двох мереж: власне ARPANET і MILNET, але з’єднання, зроблене між мережами, дозволило їм взаємодіяти між собою. Це перше міжсіткове з’єднання було названо DARPA Internet, пізніше перше слово було опущено і таке міжсіткове з’єднання стало називатися Internet.

Велике значення для розвитку ARPAnet зробило появу Ethernet технології – технології локальних мереж. Це дозволило підключити до ARPANET не лише окремі комп’ютери, але і локальні, корпоративні мережі великих організацій.

Доступ до ARPANET у ранній період був обмежений військовими, організаціями працюючими за контрактом з військовими, університетами, що виконують військові замовлення. Наприкінці 1970х років були створені нові глобальні мережі, що обслуговували університетське суспільство і частково комерційні організації: UUCP, мережа комп’ютерів, що працюють під керуванням операційної системи UNIX і USENET – всесвітня мережа телеконференцій.

На початку 1980х років з’явилися такі мережі як Computer Science Network (CSNET) і BITNET, що стали забезпечувати мережний доступ академічному і дослідницькому суспільству. Ці мережі не були частиною Internet, але завдяки спеціальним з’єднанням, називаним шлюзами, дозволили обмінюватися інформацією між різними мережами.

Наступний великий момент у розвитку Internet зв’язаний зі створенням у 1986 році мережі Національного Наукового Фонду США, мережі NSFNET (National Science Foundation Network). Використовуючи існуючу ARPANET-технологію, NSFNET об’єднала дослідників усієї країни п’ятьма суперкомп’ютерними центрами, зв’язавши їх між собою 56 Kbps телефонними каналами зв’язку, що на той період часу було неймовірно швидко.

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

Таким чином, NSFNET по суті замінила, витиснула ARPANET як дослідницьку мережу. ARPANET виконавши, вичерпавши свої функції, була припинена в березні 1990 року. Така ж доля осягла і CSNET, абоненти якої, в основному computer science department, масово переключилися на NSFNET. CSNET припинила своє існування в 1991 році.

Значний ріст мережного трафіка і кількості підключених до мережі абонентів привів до необхідності технічної реорганізації мережі.

У 1987 році з Merit Network Inc. був підписаний контракт на керування і розвиток NSFNET. Merit Network Inc. разом з IBM Corporation і MCI Communication Corporation провела реорганізацію NSFNET, у результаті чого був створений NSFNET Backbone (базова частина мережі), що складає з 13 територіально розподілених центрів, об’єднаних між собою вже цифровими швидкодіючими каналами зв’язку T1 швидкістю 1.45 Mbps.

Через деякий час контракт на керування і розвиток NSFNET одержала безприбуткова корпорація ANS (Advanced Network & Services, Inc), створена трьома компаніями, що брали участь у реорганізації NSFNET: Merit Network Inc, IBM Corporation, MCI Communication Corporation.

На сьогодні NSFNET представляє головну мережу Internet, фінансується урядом США. Державний супровід опорного вузла NSFNET і мережних послуг обходиться приблизно в 18 млн. доларів у рік, опорна частина мережі функціонує на каналах зв’язку T3 швидкістю 45 Mbps.

Кілька статистичних цифр. З часу створення NSFNET, відбувся бурхливий ріст Internet. Були підключені національні, регіональні, наукові мережі усього світу. Якщо у січні 1989 року у світі до Internet було підключено 80 000 комп’ютерів, у січні 1992 року – 727 000, а ще через два роки – у 1994 році – вже 2 217 000 комп’ютерів. На сьогодні кількість підключених до Internet комп’ютерів складає приблизно ________.

Аудиторія користувачів Internet

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

На сьогоднішній день з мереж підключених до Internet:

55% комерційних мереж

35% науково-освітніх мереж

10% урядових мереж

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

У зв’язку з прийняттям у 1991 році в США законопроекту “High-Performance Computing Act of 1991” по створенню національної високошвидкісної мережі, відомої як NREN (National Research and Education Network), технологія Internet, широко доступна для багатьох вчених і дослідників, повинна стати широко доступна у всіх життєво важливих сферах людської діяльності і повинна стати основою для побудови національної суспільної мережі США, що об’єднає школи, коледжі, бібліотеки, медичні заклади, університети, урядові установи, виробничі установи по всій країні.

Internet – протокол

Комп’ютери в мережі взаємодіють між собою за допомогою спеціальних правил, угод, називаних протоколами. Існує безліч найрізноманітніших протокольних стандартів, називаних частіше протокольними наборами, таких як DECnet, SNA, Novell/IPX, Appletalk, але для того щоб взаємодіяти в мережі, комп’ютери повинні використовувати той самий протокольний набір одночасно, по обидва боки. Для роботи комп’ютера в Internet він повинний уміти говорити на “мові” TCP/IP – протокольному наборі, що використовується для об’єднання комп’ютерів у мережу Internet.

TCP/IP – Transmission Control Protocol/Internet Protocol (протокол керування передачею/міжсітковий протокол) – інакше називають технологією міжсіткової взаємодії, технологією internet.

TCP/IP – це загальноприйняте скорочення, що позначає набір протоколів передачі даних (близько 100), використовуваних для об’єднання комп’ютерів і устаткування передачі даних у єдину мережу. До складу сімейства входять протоколи SMTP (email), Telnet, FTP, Gopher, WAIS, Archie, WWW і багато хто інші.

Розроблений DARPA у 1970 році, TCP/IP був частиною експерименту в області міжсіткової взаємодії – взаємодії різних типів мереж і комп’ютерних систем. Уперше TCP/IP був використаний у ARPANET у 1983 році. До початку 90-х років став фактичним стандартом.

В даний час сімейство протоколів TCP/IP широко застосовується в усьому світі для об’єднання комп’ютерів у мережу Internet.

Сервіси, доступні в Internet

Три найбільш важливих і найбільше часто використовуваних у Internet сервісу:

 Email – електронна пошта

 Telnet (remote login) – термінальна програма, доступ до вилучених даних

 Ftp – передача файлів

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

Електронна пошта.

Елетрона пошта, чи email – найбільш важливий і найбільше часто використовуваний сервіс у Internet. Це – швидкий, легкий і недорогий спосіб взаємодії з іншими користувачами Internet і з користувачами інших незалежних мереж, таких як Compuserve, Applelink, Prodigy і ін.

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

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

Ще одним з видів електронних комунікацій, що здобувають останнім часом усе велику популярність, є e-journal, “електронні журнали”.

Діалоговий сервіс Telnet

Telnet, що інакше називається Remote login – діалоговий сервіс, що дозволяє Вам одержати доступ до вилученим даної, програмам і сервісам. Усередині протокольного набору TCP/IP даний сервіс називається Telnet. Використовуючи Telnet, користувач може одержати доступ до безлічі виділених баз даних, каталогам бібліотек, різним архівам даних, файлам даних (статистичним даним, метеоданим, географічним даним), а також іншим online сервісам.

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

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

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

Сервіс FTP

File transfer, чи FTP, File Transfer Protocol,- останній з основної трійки сервісів, дозволяє передавати файли з одного комп’ютера на іншій. Файлами можуть бути і різні документи, і програмне забезпечення, і електронні таблиці, і графічні дані, навіть звукові дані. Наприклад, Вам може бути цікава інформація про Чорнобиль, що міститься в сховище “Гласність” Бібліотеки Конгресу США, у якому зберігаються багато матеріалів про події в країнах колишнього СРСР. Використовуючи ftp, ви можете передати цю інформацію з комп’ютера, де вона розташовується, на Ваш локальний комп’ютер, де Ви можете прочитати її, роздрукувати і т.д.

Багато адміністраторів комп’ютерних систем дозволяють доступ до визначеної частини даних на їхній машині, роблячи їх доступними для всіх користувачів Internet-а, що можуть запросити цікавлячу інформацію, використовуючи FTP. Такі архівні місця підтримують анонімні входи в систему і при цьому не вимагають знання пароля. Такі архівні місця тому називаються анонімними FTP системами. (anonymous FTP sites). Список анонімних FTP систем можна одержати в будь-якому вузловому центрі.

Сучасні інформаційні сервіси

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

Інформаційні сервіси нового покоління, такі як Gopher, WAIS, World Wide Web дають можливість спрощеного доступу до розподіленої інформації і її зручного використання.

Gopher – проект, розроблений у University of Minnesota, являє собою менюшний інтерфейс до різних інформаційних джерел і online сервісам, територіально розподілених по Internet.

The Wide Area Information Servers (WAIS) – проект, розроблений Thinking Machines, Apple Computer, Dow Jones & Co., KPMG Peat Marwick, надає загальний інтерфейс до безлічі баз даних, доступних у Internet.

World Wide Web, гіпертекстовий інтерфейс до інформаційних ресурсів Internet, розроблений CERN у Швейцарії в 1993 році. Це найбільш могутній дружній інтерфейс до глобально розподілених інформаційних ресурсів Internet.

Останнім часом спостерігається швидке розширення спектра послуг у Internet. З’являються і значно розширюються нові сервіси:

 електронні газети, електронні мультимедіа – “журнали, що говорять”.

 щотижневі радіопередачі, трансльовані по Internet (ITR).

 відеоконференції.

 технічна підтримка компаніями своїх продуктів.

 електронні покупки і електронна комерція (e–shopping, e–commerce).

Взаємодія локальної комп’ютерної мережі з мережею Internet

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

Proxy сервер – це програма, призначена для надання доступу до ресурсів мережі Internet з локальної мережі охоронюваної Firewall. Під Firewall мається на увазі комп’ютер, що знаходиться на границі між локальною мережею і мережею Internet. Його задачею є охорона локальної мережі й інформації на комп’ютерах цієї мережі від нападів з відносного небезпечного Interneta. Ця охорона здійснюється декількома способами, найчастіше шляхом заборони напрямку пакетів на комп’ютері, що виконує функцію firewall. Це означає, що неможливо потрапити в локальну мережу з IP рівня (рівень фізичної адреси комп’ютера в мережі), а саме проникнення з цього рівня є самими небезпечними. Недоліком такого рішення є відсутність прямого доступу до мережі Internet c комп’ютера в локальній мережі. Наступний малюнок ( рис. 1 ) описує ситуацію, що часто зустрічається:

Рисунок 1 . Взаємодія локальної мережі та Internet через firewall

Якщо комп’ютер A хоче зв’язатися з комп’ютером B, то спочатку повинний зв’язатися з комп’ютером C. Після встановлення зв’язку комп’ютер A посилає комп’ютеру C запит з вимогою зв’язку з комп’ютером B. Комп’ютер C зв’яжеться з комп’ютером B, після чого може початися обмін даними між комп’ютерами A і B. Формат запиту, що приходить до комп’ютера C може бути різним і залежить від вище зазначених доступів. Також задача комп’ютера C при обміні даними між комп’ютерами A і B відрізняється в залежності від використовуваного доступу. У простих випадках комп’ютер C в обміні даними участь не приймає, у більш складних – може трансформувати протоколи.

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

Щоб не можна було зв’язатися зворотнім шляхом, тобто комп’ютер у Internete не міг приєднатися до комп’ютера в локальній мережі через комп’ютер C, WinProxy дозволяє установити так називаний безпечний мережний чи інтерфейс інтервал IP адрес, з яких можна користатися послугами WinProxy. Таким чином, зв’язок з комп’ютером C можливий лише з локальної мережі.

Зазначена модель крім збільшення безпеки надає й інші цікаві можливості:

1) Необхідність лише одного IP адреси

Комп’ютери складові локальну мережу можуть мати довільно обрані IP адреси. Дійсний Internetовський адрес потрібно лише один – у комп’ютера C. Найбільше поширеними є ситуації :

-Локальна мережа з декількома комп’ютерами, до одного підключений модем для доступу до Internet.

-Локальна мережа з декількома комп’ютерами, один з них має два мережних інтерфейси, для прикладу ethernet. Одним підключений до локальної мережі, іншим – до зовнішнього сегмента ( рис.2 ).

Рисунок 2 . Підключення –сервера за допомогою другої сіткової карти.

2) Збереження минаючих об’єктів у загальної cache пам’яті

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

Мережа з декількома сегментами

Proxy-сервер можна використовувати й у мережах з декількома сегментами та телефонним зв’язком з Internet. На малюнку ( Рисунок 3 ) розглядається мережа з 2 сегментами:

Рисунок 3 . Підключення до Internet мережі з двома сегментами

Мережі зв’язані через роутер. Один з комп’ютерів першого сегмента мережі використовується для зв’язку з Internet за допомогою модему. У цьому випадку трохи збільшується складність процесу настроювання Proxy-сервера.

Як ввійти в WWW.

Довільний споживач, що має діалогове (online– онлайнове) з’єднання з Internet, може з’єднатися з довільним Web-сервером за допомогою програми перегляду WWW(Web-броузера). Для цього потрібно вказати лише електронну адресу Web-сервера.

Перегляд WWW.

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

Механізм функціонування WWW ґрунтується на тому, що всі сторінки Web описуються у вигляді текстових файлів на спеціальній мові HTML (HyperText Markup Language – мова розмітки гіпертекcтів). Команди цієї мови можуть вказувати вигляд і розміщення надписів, малюнків, вказувати посилання на інші ресурси Web, що відповідають надписам-посиланням і ін. При зверненні до Web-сервера він передає програмі перегляду (Web-броузеру) опис сторінки Web на мові HTML, а Web-броузер будує зображення цієї сторінки і показує її споживачу.

Вступ до HTML

Для початку розглянемо поняття веб-сайт та веб-сторінка. Ось означення з Вікіпедії — вільної Інтернет-енциклопедії:

• Веб-сторінка (англ. Web–page) — інформаційний ресурс, доступний у мережі World Wide Web, який можна переглянути у веб-браузері. Зазвичай ця інформація записана у форматі НТМL або ХНТМL і може містити гіпертекст із навігаційними гіперпосиланнями на інші веб-сторінки.

• Веб-сайт (англ, website, місце, майданчик в Інтернеті), також сайт (англ. site, місце, майданчик) — сукупність веб-сторінок, доступних в Інтернеті, які об’єднані як за змістом, так і навігаційно. Фізично сайт може розміщуватися як на одному, так і на кількох серверах.

• Веб-сервер — це підключений до Інтернету комп’ютер, який приймає запити на отримання певних даних, обробляє їх та видає результати, використовуючи протокол НТТР (Нуреr Техt Тrаnsfer Рrotocol —протокол передавання гіпертексту).

• Сукупність веб-сторінок, тематично пов’язаних між собою і розроблених як єдине ціле, називають веб-сайтом.

Тини сайтів

Статичні веб-сайти

Веб-спільноти

Інтернет-магазини

Портали

Блоги

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

Сайти можна класифікувати за доступністю сервісів, фізичним розташуванням і призначенням.

За доступністю сервісів їх поділяють на:

• Відкриті – усі сервіси повністю доступні для будь-яких відвідувачів і користувачів;

• Напіввідкриті – для доступу потрібно зареєструватися (зазвичай безкоштовно);

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

За фізичним розташуванням

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

За призначенням сайти поділяють на:

• Бізнес-сайти – сайти, що містять інформацію про компанії та їхні послуги, здійснюють функцію електронної торгівлі;

• Інформаційні сайти – призначені для інформування відвідувачів, поширення новин, тематичні сайти, енциклопедії, словники тощо;

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

• Веб-портали – універсальні сайти, через які можна вийти на інші ресурси Інтернету;

• Сайти сервісів – сайти служб, які існують у мережі Інтернет, зокрема, сайти пошукових служб (Google, Bing ), поштові сайти, веб-форуми, он-лайнові сховища даних (Skydrive), сайти служб онлайнового документообігу (Google Docs), зберігання та обробки фотографій ( Picnik, ImageShack, Panoramio, Photobucket), зберігання відео (You Tube).

Можна навести приклади веб-сторінок :

Тини веб-сторінок

Домашня(головна)

Веб-каталог

Форум

Чат

Сторінка розділу веб-сайту

Як створити веб-сайт?

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

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

Структура веб-сайтів

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

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

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

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

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

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

Наведемо додатково чотири приклади структур сайту. Кожна із цих структур має свої недоліки та переваги у проектуванні веб-сайту.

Стандартна

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

Каскад

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

Хмарочос

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

Павутина

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

Етапи створення сайту

Створення сайту умовно можна розділити на такі етапи:

1. Попередній етап розробки сайту.

На цьому етапі розв’язуються питання загального характеру. Обговорюється загальна концепція сайту, формулюються та фіксуються цілі створення сайту.

2. Етап проектування сайту.

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

3. Етап розробки й тестування сайту

4. Розміщення сайту

5. Розвиток ресурсу.

Можна виділити такі варіанти створення веб-сайтів:

І-ий спосіб (програма Блокнот)

Програмування сайту мовою HTML

Так як Веб-сторінки — це документи, розмічені з використанням мови НТМL, то файли веб-сторінок зазвичай мають імена з розширенням .html чи .htm.

Коди мови НТМL, за допомогою яких розмічають вихідний текст, називають тегами. Теги починаються із символу < і закінчуються символом >.

Теги бувають парними і непарними. Парні теги можуть мати атрибути, за допомогою яких задаються їхні додаткові параметри.

НТМL– документ має чітко визначену структуру і складається з двох розділів — заголовків і тіла документа.

(Перегляд матеріалу про створення найпростішого Html –документа. )

Можна просто переглянути теги або програмку створення Html –документа.

Сервіси Веб 2.0

Веб 2.0 (Web 2.0 ) — поняття, яким користуються для позначення ряду технологій та послуг Інтернету. Окрім цього, цим поняттям описують зміну сприйняття Інтернету користувачами.

Термін було запроваджено 2005 року американським видавцем О’Рейлі (О’Rеіllу Меdіа) для означення сукупності прогресивних тенденцій у розвитку веб-технологій (на противагу технології Веб 1.0, яка показала свою нежиттєдайність).

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

Які риси сервісу Веб 2.0?

1.Веб 2.0 — це платформа, до якої є вільний доступ, її структура універсальна та спрощена.

2.Учасники сервісу — співрозробники та співавтори, тобто стороння регламентуюча (модераційна) сторона скасовується.

3.Після поповнення бази даних стають доступними кожному.

4.Дані організовуються не таксономічно (ієрархія рубрик), а фолксономічно («хмара тегів»). Дані зберігаються не в каталогах чи бібліотеках, а в АРІ-інтерфейсах.

5.Сайти не статичні, а динамічні. Представлені не персональними сторінками, а блогами, динамічними сторінками.

6.Для сприйняття контенту не потребується відвідування сайту, є можливість читати RSS-стрічки.

7.«Вільна» ліцензія GNU FDL.

8.Підтримка програмного забезпечення відбувається через відділ технічної підтримки.

9.Спільний контент створюється кожним учасником.

Веб 2.0 можна також охарактеризувати його складовими компонентами, тобто тими новими можливостями й застосуваннями, надають веб нового забарвлення: веб-сервіси, веб-синдикація, mash–up (змішування), мітки(теги), «розумні (динамічні) помічники».

Приклади Веб 2.0 проектів

Вікіпедія — вільна багатомовна енциклопедія.

GoogleEarth — google-карти.

Flickr — онлайн-фотоальбом.

Netvibes — персональний робочий стіл.

Digg.com – ресурс новин.

UcoZ — веб-хостинг.

Веб хостинг UcoZ

UcoZ — це безкоштовний веб-хостинг із вбудованою системою і керування сайтом. Модулі UcoZ можуть використовуватися як у єдиній зв’язці для створення повнофункціонального сайту, так і окремо, наприклад, як блог-платформи, веб-форуми та ін.

Фактично UcoZ — це веб-сервіс, що працює за принципами Веб 2.0 і дозволяє, в першу чергу, створювати сайти різного рівня складності та досить сильно відрізняється від традиційних безкоштовних хостингів. Під час реєстрування користувачеві надається можливість вибрати домен для свого проекту. В системі існують також і домени, спеціально розраховані на українську аудиторію — name.ucoz.ua, name.at.ua.

Під час реєстрування кожен користувач отримує 400 Мб дискового обсягу. Дисковий обсяг постійно збільшується пропорційно до зростання кількості відвідувачів сайту.

Основні можливості

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

• Можливість створити власний дизайн (шаблон) або переробити будь-який зі стандартних.

• Доступ по FТР.

• Безкоштовна технічна підтримка.

• WYSIWYG online редактор.

• Візуальний конструктор блоків.

• Версія сайту для КПК.

• Резервне копіювання.

• Лайтбокс — рекламний щит.

• Загальна авторизація — uID.
Модулі системи

• Користувачі — керування списком користувачів сайту.

• Форум — створення та керування форумами.

• Щоденник (блог) — створення та керування блогом.

• Фотоальбоми — створення фотоальбомів.

• Гостьова книга — керування гостьовою книгою.

• Каталог статей — керування статтями на сайті.

• Міні-чат — модуль для маленьких повідомлень, які можуть містити смайлики.

• Шаблони — модуль містить дизайни па будь-який смак.

• Новини сайту — модуль, що дозволяє користувачеві слідкувати за оновленням сайту.

• Інтернет-статистика — перегляд статистики відвідувань сайту.

• Каталог файлів — каталог файлів, які були додані користувачами сайту.

• Каталог лінків — список веб-адрес, які були додані користувачами сайту.

• Оголошення — створення дошки оголошень.

• FАQ. — список найчастіших запитань та відповідей на них.

• Опитування — опитування різного спрямування.

• Е- mail форми — організація зворотного зв’язку з адміністрацією сайту.

• Онлайн-ігри — модуль, у якому представлені ігри різних напрямків — від стратегій до настільних ігор.

• Інтернет-магазин — модуль системи, який є оптимальним рішенням у галузі електронної торгівлі.

Технологія створення сайту в системі UcoZ

В Інтернет-браузері відкриваємо сторінку www.ucoz.ua. Натискаємо на кнопці Створити сайт. Потрапляємо на реєстраційну форму користувача, яку заповнюємо, відповідно до запропонованих запитань.

Наступний крок — натиснути на кнопці Реєстрація.

Після заповнення форми ви отримаєте глобальний профіль у системі uNet, що дасть вам можливість створювати будь-яку кількість сайтів у системі UcoZ.

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

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

На наступному кроці потрібно придумати та вписати адресу сайту, вибравши той хостинг, який пропонує UcoZ . До речі, він налічує 18 імен і містить українські домени.

Усе, ваш сайт успішно створено, про що й повідомить система.

Термінологія веб-дизайну

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

Основи веб-дизайну

Слід виділити такі елементи, які використовують для створення стилю:

• шрифт — у межах одного веб-сайту він не повинен мати багато розбіжностей за такими характеристиками, як гарнітура (написання), кегль (розмір букв), колір;

• абзац — бажано, щоб мав перевагу який-небудь один з видів вирівнювання на сторінці, наприклад відступ з лівого краю або вирівнювання вліво;

• графічне оформлення сайту має пов’язуватись із загальною кольоровою гамою. Для цього треба продумати його концепцію. Усі графічні елементи можна поділити на два великі класи:
мальовані і фото, які не треба змішувати. Якщо ви використовуєте фотокартки, необхідно попередньо здійснити їх обробку, тонову і кольорову корекцію, кадрування, вибрати розмір зображення;

• навігація веб-сторінкою — власне вона не дає змогу користувачеві загубитися на сайті. Завжди потрібно залишати відвідувачеві можливість перейти на головну сторінку сайту. Не слід забувати, що більшість користувачів потрапляють на сторінки через пошукові системи, тобто не на першу сторінку, і гарний сайт завжди дозволяє перейти на першу сторінку, тому необхідно дублювати навігаційну систему на всіх сторінках і забезпечити перехід на головну сторінку. Якщо навігаційна панель виконується графічними засобами, обов’язково треба зробити текстову копію і розмістити її внизу (текстовий матеріал у будь-якому випадку завантажується швидше за графіку);

• кольорова гама — вона починається з вибору тих трьох кольорів сторінки, які використовуються для падання основного тексту, звичайних і відвіданих посилань. Кольорова гама повторюється, і таким чином у користувача створюється почуття зв’язності, єдності сайту. Дотримання цих правил дозволить надати/сторінкам професійного вигляду і зробить інформацію офіційного сайту доступною і корисною.

Як дібрати кольори для сайту?

Щоб визначити колірне рішення, важливо пам’ятати про таке:

• яскравість, тон і насиченість кольору мають відповідати фірмовому стилю сайту;

• колір слід добирати з урахуванням орієнтування на аудиторію цього ресурсу;

• кількість використовуваних кольорів за можливості не повинна перевищувати трьох;

• кольори, що використовуються на сайті, повинні взаємодіяти і гармоніювати між собою;

• вживання кольору повинно відповідати елементарним правилам логіки.

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

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

Можливі такі методи поєднання кольорів:

• метод використання прилеглих кольорів;

• метод використання протилежних кольорів, контрастність;

• метод використання природних поєднань кольорів;

• метод використання кольору різного ступеня насиченості;

Метод використання прилеглих кольорів.

Маються на увазі довколишні кольори в колірному колі. Це традиційне добирання кольору за візуальною сумісністю.

Метод використання протилежних кольорів, контрастність

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

Метод використання природних поєднань кольорів

Часом несподівані колірні рішення нам дає сама природа. Тому, щоб дібрати відтінки, достатньо добре поглянути по сторонах і скористатися тим, що існує в природі.

Метод використання кольору різного ступеня насиченості

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

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

Правила дизайнерів

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

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

Третє правило — потрібно використовувати тільки стандартні шрифти, які поставляються з Windows і гарантовано знаходяться на машині клієнта. Це Аrіаl, Times New Roman, Courier. Недотримання цього правила призводить до некоректного відображення вмісту сторінки.

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

В основному дескриптори мають такий формат:

<ДЕСКРИПТОР>Текст, на який він діє</ДЕСКРИПТОР>

Елемент ДЕСКРИПТОР є кодом (переважно одна-дві букви), що визначає вигляд бажаного ефекту.

Наприклад, щоб виділити напівтовстим шрифтом фразу Бережіть здоров’я, в документі потрібно набрати:

<B>Бережіть здоров”я</B>

Коса риска (/) позначає закриваючий дескриптор, який повідомляє броузер, що потрібно виключити ефект.

HTML є набором найрізноманітніших дескрипторів.

Стандартна структура Web-сторінок

HTML-файли завжди починаються з дескриптору <HTML>. Цей дескриптор нічого не робить, крім того, що повідомляє Web-броузер, що він має справу з файлом, що містить HTML-коди. Останній рядок HTML-документу містить дескриптор </HTML>, який можна уявити як слово “кінець” на мові HTML.

Наступні елементи HTML розділяють документ на дві частини: заголовок і тіло. Заголовок є вступом до сторінки. Web-броузери використовують його для отримання різноманітної інформації про сторінку. Щоб визначити заголовок, вставляються дескриптори <HEAD> і </HEAD> відразу під дескриптором <HTML>.

В тіло документу вводиться текст і інші дескриптори, які будуть проявлятися на Web-сторінці. Для означення тіла документу, відразу після заголовку (тобто після дескриптору </HEAD>) поміщаються дескриптори <BODY> і </BODY>.

Стандартна структура Web-сторінки:

<HTML>

<HEAD>

Тут поміщаються дескриптори заголовку

</HEAD>

<BODY>

Текст Web-сторінки і дескриптори вводяться тут

</BODY>

</HTML>

Введення назви

Щоб визначити назву, потрібно оточити її текст дескрипторами <TITLE> і </TITLE>. Наприклад:

<HTML>

<HEAD>

<TITLE>Моя улюблена сторінка</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Текст і параграфи

Броузери ігнорують натиснення Enter. Дескриптор <P> вказує броузеру, що треба перейти на новий абзац:

<HTML>

<HEAD>

<TITLE>Моя улюблена сторінка</TITLE>

</HEAD>

<BODY>

Цей текст з’явиться в тілі Web-сторінки

<P>

Цей текст перемістить в новий абзац

</BODY>

</HTML>

Вставка форматування і заголовків

HTML має багато дескрипторів, які прикрасять Web-сторінку. Слово або фраза, оточена дескрипторами <B> і </B>, в броузері з’являється напівтовстим шрифтом; <I> та </I> – курсивом; <TT> і </TT> – моноширинним шрифтом.

Примітка. Internet Explorer підтримує дескриптор <FONT> (шрифт):

Тут SIZE – розмір шрифта, FACE – назва шрифта, COLOR – колір тексту.

Щоб розділити розділи Web-сторінок, можна застосовувати заголовки. В ідеалі ці заголовки працюють як своєрідні назви, що відображають вміст даного розділу. Всього є 6 дескрипторів заголовку, починаючи з <H1> , що використовує найбільший шрифт, і закінчуючи <H6> з найдрібнішим шрифтом. Приклад:

<BODY>

<H1> H1 заголовок</H1>

<H6> H6 заголовок</H6>

</BODY>

Робота з гіперзв’язками

Гіпертекст – це динамічний текст, в якому задані зв’язки з іншим документом.

Зв’язки встановлюються HTML-дескрипторами <A> і </A>. Дескриптор <A> трохи відрізняється від інших, про які мова йшла раніше. Його не можна використовувати ізольовано – треба вказувати адресу документу, з яким повинен бути зв’язок. Наприклад:

Тут HREF – скорочення від hypertext reference (гіпертекстове посилання). Потрібно просто замінити “адреса” дійсною адресою Web-сторінки, з якою повинен бути зв’язок (і не забути заключити адресу в лапки). Наприклад:

Це ще не все. Далі потрібно подати читачу деякий текст, що пояснює даний зв’язок. Потрібний текст знаходиться між дескрипторами <A> і </A>. Приклад:

<A HREF=”адреса”> Зв”язаний текст знаходиться тут </A>

Вставка зображень

Більшість броузерів працює лише з двома форматами: GIF і JPEG. Internet Explorer працює також з власними форматами Windows: BMP і DIB.

Дескриптор <IMG> заставляє броузер показати зображення. він виглядає так:

Інколи відключають графіку в броузерах. Тоді можна ввести текстовий опис малюнку, включивши атрибут ALT в дескриптор <IMG>:

. Тeги HTML та їх використання. Структура документу HTML

Коди мови HTML, з допомогою яких виконується розмітка вихідного тексту, називаються тегами.

Тег (у перекладі tag — покажчик, мітка) — це набір символів, що описує певні елементи документа HTML і вміщений у кутові дужки <>.

HTML-теги можуть бути умовно розділені на дві категорії:

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

·        теги, що описують загальні властивості документа, такі як заголовок або автор документа.

Всі теги починаються з символу “менше” (<) і закінчуються символом “більше” (>). Після відкриваючої кутової дужки розміщене ключове слово, що визначає тег.

Кожен тег в мові HTML має спеціальне призначення. Регістр літер в назвах тегів не має значення.

Як правило один тег діє тільки на частину документа, наприклад на абзац. В таких випадках використовують парні теги: відкриваючий і закриваючий. Відкриваючий тег створює ефект, а закриваючий — припиняє його дію. Закриваючий тег прочинається із символа (/).

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

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

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

Приклади тегів HTML:

<title>, <Body>, <TABLE>, </A>

Приклади парних тегів HTML:

<HTML>   </HTML>, <B>   </B>

Приклади одинарних тегів:

<BR>, <Frame>, <META>

1.2. Атрибути тегів

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

Атрибути — це компоненти тегу, що містять вказівки про те, як броузер має сприйняти й обробити тег. Атрибут записується після імені тегу перед дужкою > і складається, як правило, із пари “ім’я атрибута — значення”.

Деякі атрибути вимагають вказати значення атрибуту. Це значення відділяється від ключового слова знаком рівності (=). Значення атрибуту має міститись в лапках (“”), але в багатьох випадках ці лапки можуть ігноруватись без будь-якої шкоди.

Закриваючі теги ніколи не містять атрибути.

Приклад

Приклади тегів HTML з атрибутами:

 <Body BGCOLOR=”#000000” TEXT=”#FFFFFF”>,

 <Frame SRC=”file.html” NORESIZE>

1.3. Коментарі

В мовах програмування загальноприйняте використання коментарів.

Коментар — текстова стрічка, яка не є частиною програми і служить для пояснення..

Коментарі в мові HTML починаються із спеціального тегу <!–. Слід звернути увагу на відсутність закриваючої кутової дужки. Будь-який текст, який розміщується після цього тегу, розглядається як коментар і не відображається при відображенні сторінки у броузері. Закінчується коментар символом –>. Коментар може містити будь-які символи, крім символа “більше” (>), і, таким чином не може містити теги.

1.4. Елементи HTML

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

Елементи HTML — це пари тегів і символьні дані (текст або код), вміщені між ними.

Елемент називається звичайно за іменем тегу (без кутових дужок).

Усі елементи, передбачені в HTML, можна умовно поділити на кілька категорій:

· структурні — елементи, обов’язкові для документа, що відповідає стандарту HTML (наприклад, HTML, HEAD, BODY і TITLE);

· блокові — елементи, призначені для форматування цілих текстових блоків (наприклад, DIV, НІ, Н2 , НЗ , Н4, Н5, Нб, Р, PRE); часто блокові елементи відокремлюються переведенням рядка від іншої частини документа;

· текстові — елементи, що задають розмітку шрифту (І, В, U, BIG, SMALL і ін.), розмітку тексту (STRONG, CODE, VAR, СІТЕ і ін.);

· спеціальні — елементи порожнього рядка (BR,HR), якірний елемент А, впроваджені елементи (IMG, OBJECT, map і ін.), елементи таблиці (TABLE) тощо.

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

1.5. Структура документу HTML

Документ повинен починатись з тегу <HTML> і закінчуватись тегом </HTML>. Дана пара повідомляє WEB-броузеру, що ваш документ написаний з використанням мови HTML.

HTML-документ умовно можна розбити на три частини:

· Службова інформація для броузера, що вміщена у рядок з тегом <!DOCTYPE>.

· Заголовна частина документа, до якої вміщена назва документа, а також службова інформація для серверів, описи невеликих програм-сценаріїв. Ця частина документа міститься між тегами <HEAD> і </HEAD>. Безпосередній заголовок документа, обмежений тегами <TITLE> і </TITLE>, розміщається усередині <HEAD>-тегів Більшість WEB-броузеров відображають вміст тега <TITLE> у заголовку вікна, що містить документ і у файлі закладок, якщо він підтримується WEB-броузером. Заголовок документа не з’являється при відображенні самого документа у вікні.

· Тіло документа, що обмежене тегами <BODY> … </BODY> (іноді замість тегів <BODY> можуть використовуватися теги фреймової структури <FRAMESET>, які тут не розглядаються).

Приклад найпростішого веб-документу:

<HTML>

           <HEAD>

                       <TITLE>Моя перша сторінка </TITLE>

            </HEAD>

            <BODY>

Привіт! Це моя перша сторінка.

             </BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

§2. Оформлення тексту

2.1. Задання заголовків

Заголовки поділяють HTML-документ на логічно закінчені блоки. Завдяки заголовкам відвідувач Web-сторінки може отримати уявлення про її вміст. Для задання заголовків використовуються парні теги <Н1> (заголовок 1-го, найвищого рівня), <Н2> (заголовок 2-го рівня) тощо. Усього передбачено 6 рівнів заголовків. Заголовки вище шостого рівня не є стандартом і можуть не підтримуватися броузером.

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

Приклад

<H1> Заголовок першого рівня </H1>

Заголовки іншого рівня можуть бути представлені в загальному випадку так:

<Hx> Заголовок x-го рівня </Hx>, де x — цифра від 1 до 6, що визначає рівень заголовка.

2.2. Форматування абзаців і рядків

Тег абзацу <P>

Броузер розділяє абзаци тільки при наявності тега <P>. Якщо ви не розділите абзаци тегом <P>, ваш документ буде виглядати як один великий абзац. Використання кінцевого тегу </Р> в елементі абзацу не є обов’язковим.

Додаткові атрибути тега <P>: <P ALIGN=left center right> дозволяють вирівнювати абзац по лівому краю, центру й правому краю відповідно.

Розрив рядка — тег <BR>

Тег <BR> сповіщає броузер про розрив рядка. Найкращий приклад використання даного тега — форматування адреси або будь-яка інша послідовність рядків, де броузер повинен відображати їх один під одним.

Приклад

ВПУ№4 м. Вінниці <BR>
вул. Червоноармійська, 5 <BR>

Додатковий атрибут дозволяє розширити можливості тега <BR>.

<BR CLEAR=left right all >. Даний атрибут дозволяє виконати не просто перенесення рядка, а розмістити наступний рядок, починаючи із точно лівої (left), правої (right) або обох (all) границь вікна броузера.

Нерозривний рядок — <NOBR>

Якщо ви не хочете, щоб броузер автоматично переносив рядок, то можете позначити його тегами <NOBR> і </NOBR>. У цьому випадку броузер не буде переносити рядок навіть якщо він виходить за межі екрана; замість цього броузер дозволить горизонтально прокручувати вікно.

Якщо ж ви бажаєте все-таки дозволити розбивку даного рядка на два, але в строго запланованому місці, то вставте тег <WBR> у це місце.

Цитата — тег <BLOCKQUOTE>

Даний тег призначений для позначення в документі цитати з іншого джерела. Текст, позначений тегами <BLOCKQUOTE> і </BLOCKQUOTE> відступає від лівого краю документа на 8 пробілів.

Горизонтальна лінія — тег <HR>

Важливим засобом створення роздільників в тексті є горизонтальні лінії, які візуально відділяють різні частини документа одну від одної. Горизонтальна лінія створюється одинарним тегом <HR>.

Формат тега:

<HR SIZE=number WIDTH=number percent ALIGN=left right center NOSHADE>

Параметри тега:

SIZE — товщина лінії в пікселах.

WIDTH — ширина лінії в пікселах або відсотках від ширини вікна броузера.

ALIGN — розташування на екрані (ліворуч по центру праворуч).

NOSHADE — за замовчуванням лінія представлена в 3D вигляді з тінню. NOSHADE дозволяє побудувати лінію просто однотонною темною смужкою.

Таблиця 1. Список базових тегів HTML

Відкриваючий тег

Закриваючий тег

Призначення тегу

<HTML>

</HTML>

Позначення HTML-документа

<HEAD>

</HEAD>

Заголовна частина документа

<TITLE>

</TITLE>

Заголовок документа

<BODY>

</BODY>

Тіло документа

<H1>

</H1>

Заголовок абзацу першого рівня

<H2>

</H2>

Заголовок абзацу другого рівня

<H3>

</H3>

Заголовок абзацу третього рівня

<H4>

</H4>

Заголовок абзацу четвертого рівня

<H5>

</H5>

Заголовок абзацу п’ятого рівня

<H6>

</H6>

Заголовок абзацу шостого рівня

<P>

</P>

Абзац

<HR>.

Горизонтальна лінія

<BR>

Перенесення рядка без кінця абзацу

<NOBR>

</NOBR>

Нерозривний рядок

</BLOCKQUOTE>

Цитата

Приклад

<HTML>

<HEAD>

<TITLE>Байка «Ведмежий суд»</TITLE>

</HEAD>

<BODY>

<P>

<H1 ALIGN=”CENTER”>Ведмежий суд</H1></P>

Лисичка подала у суд таку 6yмaгy:<BR>

Що бачила вона, як попелястий Biл<BR>

На панській винниці пив, як мошенник, брагу,<BR>

їв сіно, і овес, і сіль. <BR>

<HR>

Є. П. Гребінка

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

2.3. Форматування символів

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

· face (гарнітура шрифту або список допустимих шрифтів);

· color (колір шрифту);

· size (розмір шрифту).

HTML дозволяє використати різні стилі шрифтів для виділення текстової інформації у ваших документах.

Таблиця 2. Основні стилі шрифтів

Стиль

Елемент або тег

Результат

Bold (напівжирний)

<B> Цей текст напівжирний </B>

Цей текст напівжирний

Italic (курсир)

<I> Цей текст похилий </I>

Цей текст похилий

Підкреслений

<U> Цей текст підкреслений</U>

Цей текст підкреслений

Викреслений

<S>Цей текст викреслений</S>

~~Цей текст викреслений~~

Big (великий)

Цей текст <BIG> великий </BIG>

Цей текст великий

Small (малий)

Цей текст <SMALL> маленький </SMALL>

Цей текст маленький

Sub (підстрічковий)

Цей текст <SUB> підстрічковий </SUB>

Цей текст _{підстрічковий}

Sup (надстрічковий)

Цей текст <SUP> надстрічковий </SUP>

Цей текст ^{надстрічковий}

Комбінування стилів дозволяє вам відображати в одному рядку кілька елементів різними стилями.

Приклад

<b>Життя</b> — <i>це <b>пісня!</b></i>

Результат:

Життя — це пісня!

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

Текст у документі HTML може бути виділений одним з наступних способів:

<CITE> — цитата — </CITE>

<CODE> — програмний код — </CODE>

<DFN> — визначення — </DFN>

<EM> — логічний акцент — </EM>

<KBD> — введення з клавіатури — </KBD>

<SAMP> — повідомлення комп'ютера — </SAMP>

<STRONG> — сильний акцент — </STRONG>

<VAR> — перемінні — </VAR>

Приклад

<HTML>

<HEAD>

<TITLE>Байка «Ведмежий суд»</TITLE>

</HEAD>

<BODY>

<P>

<H1 ALIGN=”CENTER”>Ведмежий суд</H1></P>

Лисичка подала у суд таку 6yмaгy:<BR>

Що бачила вона, як попелястий Biл<BR>

На панській винниці пив, як мошенник, брагу,<BR>

їв сіно, і овес, і сіль. <BR>

<HR>

<P ALIGN=”RIGHT”><I>Є. П. Гребінка</I> <HR>

Цей текст <BIG> великий </BIG> <BR>

Цей текст <SMALL> маленький </SMALL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

2.4. Спеціальні символи

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

·        ліва кутова дужка — <;

·        права кутова дужка — >;

·        амперсанд — &;

·        подвійні лапки —".

Дужки використовуються для позначення початку і кінця HTML тегів, а амперсанд використовується для позначення так званої escape-послідовності. Для використання одного з цих символів уведіть одну з наступних escape-послідовностей:

·        < — &lt;

·        > — &gt;

·        & — &amp;

·        " — &quot;

Існує велика кількість escape-послідовностей для позначення спеціальних символів, наприклад “&copy — для позначення знака © і &reg — для значка ®, що з’явилися в HTML 2.0.

Escape-послідовності чутливі до регістра: не можна використати &LT; замість &lt;.

§3. Створення списків

Мова HTML має у своєму розпорядженні спеціальні елементи, що дозволяють подавати текстову інформацію у вигляді списків. Існує три основних види списків в HTML-документі:

·        нумеровані;

·        марковані;

·        списки термінів

3.1. Нумеровані списки

У нумерованому списку броузер автоматично вставляє номери елементів один за одним.

Нумерований список починається тегом <OL> і завершується тегом </OL>. Кожний елемент списку починається з тега <LI>.

Приклад

<HTML>

<HEAD>

<TITLE>Нумерований список</TITLE>

</HEAD>

<BODY>

<OL>

<LI> Програмування

<LI> Алгоритмізація

<LI> Проектування

</OL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

Тег <OL> може мати параметри:

TYPE — вид лічильника:

·        A — великі латинські літери (A,B,C...)

·        a — маленькі латинські літери (a,b,c...)

·        I — великі римські цифри (I,II,III...)

·        i — маленькі римські цифри (i,ii,iii...)

·        1 — звичайні цифри (1,2,3...)

START=n — число, з якого починається відлік

Приклад

<HTML>

<HEAD>

<TITLE>Нумерований список</TITLE>

</HEAD>

<BODY>

<OL TYPE=I START=15>

<LI> Програмування

<LI> Алгоритмізація

<LI> Проектування

</OL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

3.2. Марковані списки

Для маркованих списків броузер звичайно використає маркери для позначки елемента списку.

Маркований список починається стартовим тегом <UL> і завершується тегом </UL>. Кожний елемент списку починається з тега <LI>.

Тег <UL> може мати параметр:

TYPE — тип тега <UL> визначає зовнішній вигляд маркера:

·        disc — вид за замовчуванням,

·        circle — круглий,

·        square — квадратний.

Приклад

<HTML>

<HEAD>

<TITLE>Маркований список</TITLE>

</HEAD>

<BODY>

<UL TYPE=square>

<LI> Програмування

<LI> Алгоритмізація

<LI> Проектування

</UL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

Розглянемо приклад поєднання нумерованих та маркованих списків — вкладених списків.

Приклад

<HTML>

<HEAD>

<TITLE> Список співробітників </TITLE>

</HEAD>

<BODY>

<H2> Список співробітників нашої фірми </H2>

<H3> Складено : 30 липня 2006 року </H3>

Даний список містить прізвища, імена та по батькові всіх співробітників нашої компанії. <P>

Список може бути використаний тільки в службових цілях. <P>

<OL>

<LI> Дирекція

<UL>

<LI> Іванов И. И.

<LI> Петров К. В.

</UL>

<LI> Відділ маркетингу

<UL>

<LI> Варшавська Е. Л.

<LI> Самсонов Д. М.

</UL>

</OL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

3.3. Список термінів

Список термінів починається з тега <DL> і завершується тегом </DL>. Даний список служить для створення списків типу “термін”-“опис”. Кожний термін починається тегом <DT> , а опис — тегом <DD>.

Приклад

<HTML>

<HEAD>

<TITLE> Список термінів </TITLE>

</HEAD>

<BODY>

<DL>

<DT> <B> Відділ маркетингу </B>

<DD> Даний відділ займається просуванням продуктів і послуг

<DT> <B> Фінансовий відділ </B>

<DD> Даний відділ займається всіма фінансовими операціями

<DT> <B> Відділ кадрів </B>

<DD> Даний відділ займається обліком і набором нових співробітників фірми, розподілом відпусток, відстеженням лікарняних аркушів і т. д.

</DL>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

§4. Використання гіперпосилань.

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

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

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

Ви можете використати посилання як для переміщення по документу, так і для переміщення від одного документа до іншого. Однак, HTML не підтримує повернення на попереднє посилання, якщо переміщення відбувалося усередині документа. Якщо ви використаєте посилання усередині документа, а потім натискаєте на клавішу Back, то ви не перейдете на попереднє посилання, а повернетеся на ту частину документа, що ви переглядали до цього.

4.1. Використання URL

HTML використовує URL (Uniform Resource Locator) для подання гіпертекстових посилань і посилань на мережні сервіси усередині HTML-документа. Перша частина URL (до двокрапки) описує метод доступу або мережний сервіс. Інша частина URL (після двокрапки) інтерпретується залежно від методу доступу. Звичайно, два прямих слеша (//) після двокрапки позначають ім’я комп’ютера в мережі:

Приклад

Наступний приклад являє собою виклик HTML-документа index.php із сервера www.softexpress.com з використанням HTTP протоколу:

http://www.softexpress.com/index.php

Uniform Resource Locator має наступний формат:

method://servername:port/pathname#anchor

Опишемо кожний з компонентів URL:

METHOD — ім‘я операції, що буде виконуватися при інтерпретації даного URL. Найбільше часто використовувані методи:

· file: читання файлу з локального диска. Ім’я файлу інтерпретується для локального комп’ютера користувача. Даний метод використається для відображення якого-небудь файлу, що перебуває на комп’ютері користувача.

Приклад

file:/home/alex/index.php

Дане посилання відображає файл index.php з каталогу /home/alex на користувацькому комп’ютері

· http: доступ до WEB-сторінки в мережі з використанням HTTP-протоколу. (Це найбільш часто використовуваний метод доступу до якого-небудь HTML-документа в мережі).

Приклад

http://www.softexpress.com/

Дане посилання відображає доступ до Home-сторінки компанії SoftExpress

·        ftp: запит файлу з деякого FTP-сервера.

Приклад

ftp://hostname/directory/filename

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

Приклад

mailto:[email protected]

Дане посилання активізує сесію посилки повідомлення користувачеві info на комп’ютері softexpress.com, якщо броузер підтримує запуск електронної пошти.

·        telnet: звертання до служби telnet

·        news: виклик служби новин, якщо броузер її підтримує.

SERVERNAME — необов'язковий параметр, що описує повне мережне ім'я комп’ютера.

PORT — номер порту TCP на якому функціонує WEB-сервер. Даний параметр (port) не використається в переважній більшості URL.

PATHNAME — частковий або повний шлях до документа, що повинен викликатися в результаті інтерпретації URL.

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

4.2. Структура гіперпосилань в HTML-документі

Синтаксис HTML, що дозволяє виконати гіперпосилання:

<A HREF="URL"> текст, який буде виділятись як гіперпосилання </A>

Відправна точка посилання задається тегом <А>. Ім’я цього тегу походить від першої літери слова anchor — якір. Сам елемент А називається елементом прив’язки або якірним елементом. Усередині тегу <А> ставиться обов’язковийатрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами <А> і </А> розміщується текст посилання або елемент малюнка.

Приклад

<А href=”rest.html”>Moi канікули</А>

На Web-сторінці це посилання відображатиметься у вигляді тексту “Мої канікули”. При клацанні мишею по цьому посиланню буде завантажуватися HTML-файл rest. html.

Зверніть увагу, що в атрибуті href зазначене лише ім’я файла, що відповідає відносному посиланню на файл, який розміщений у тій самій папці, що і вихідний документ. Якщо потрібно посилатися на ресурс, розміщений у World Wide Web, то в атрибуті href указується URL цього ресурсу.

Приклад

<А href=”http://www.Samsung.com“> Продукція фірми Samsung </A>

Як атрибут href можна вказати ресурс mail to (виклик протоколу електронної пошти SMPT).

Приклад

Посилання вигляду:

<А href=”mailto://[email protected]а”>Лист Гарику</А>

дозволить відвідувачеві вашої сторінки безпосередньо перейти до створення і відправлення повідомлення за адресою:
[email protected].

4.3. Види посилань

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

Локатор URL ресурсу, на який вказує посилання, може бути абсолютним і відносним. Абсолютний URL містить усі компоненти, необхідні для того, щоб броузер зміг знайти Web-сторінку в неосяжній мережі WWW. Але якщо посилання вказує на ресурс, що міститься на тому самому вузлі, що і вихідний документ, зручніше користуватися скороченим записом URL, у якому вказується тільки папка і файл. Такий запис адреси називається відносним URL. Прикладом відносного URL є значення атрибута href=”rest. html”.

4.4. Створення внутрішнього посилання

Для переходів з однієї частини документа до іншої служать внутрішні посилання. Цей вид посилань доцільно використовувати, коли всі частини великого документа не відображаються цілком у вікні броузера. Внутрішнє посилання, як і зовнішнє, задається за допомогою елемента якірного тегу <А> з атрибутом href. Але, на відміну від зовнішнього посилання, у значенні атрибута href указується не URL, а ім’я мітки (мітка позначається знаком #).

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

1. Створіть мітку розділу:

<A NAME="named_anchor"> Текст, який має відобразитись у першій стрічці броузера</A>

2. Створіть посилання на дану мітку:

<A HREF="#named_anchor"> Текст </A>

Приклад

<HTML>

<HEAD>

<TITLE>Моя перша сторінка </TITLE>

</HEAD>

<BODY>

<p><b>Список розділів</b></p>

<ul> <li><a href=”#ex1″>Розділ 1</a></li>

<li><a href=”#ex2″>Розділ 2</a></li> </ul>

<p><a name=”ex1″></a>Розділ 1</p>

<ul> <p>Текст розділу 1</p> </ul>

<p><a name=”ex2″></a>Розділ 2</p>

<ul> <p>Текст розділу 2 <br></p>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

Символи “#ex1” повідомляє вашому броузеру, що необхідно знайти в даному HTML-документі мітку з ім’ям “ex1”. Коли користувач клацне мишею на рядку “Розділ 1”, броузер перейде відразу до розділу 1.

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

§5. Використання графіки на Web-сторінках. Вставка звуку

5.1. Графічні формати зображень для Web-сторінок

Основними форматами малюнків, що відображаються програмами броузерів, є GIF (скорочення від Graphics Interchange Format — графічний формат обміну) і JPEG (скорочення від Joint Photographic Experts Group — об’єднана група експертів фотографії).

Файли формату GIF (розширення .gif) мають малий обсяг завдяки тому, що в них використовується палітра з 256 кольорів і застосовується алгоритм стиснення без утрат Лемпеля – Зіва – Велча. Цей алгоритм особливо ефективний при обробці простих ілюстрацій з великими ділянками одного кольору. Формат GIF широко застосовується для створення «прозорих» малюнків, а також зображень, що завантажуються черезрядковим методом. Приклади черезрядкового завантаження ви напевно бачили при перегляді Web-сторінок в Інтернеті: спочатку завантажується простий варіант малюнка з великим розміром точок зображення, потім у процесі завантаження малюнка точки зображення зменшуються, і малюнок ніби виявляється. Ще однією перевагою GIF-формату є можливість використання анімації. У файлі GIF можна створити послідовність малюнків — кадрів «мультфільму», що є найпростішим способом додавання анімації на Web-сторінки.

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

Існує ще один формат створення малюнків для Web-сторінок, це — PNG (скорочення від Portable Network Graphics — мережна графіка, що переноситься). Подання зображень у виді PNG-файлів застосовується як альтернатива формату GIF і є перспективним для застосування в мережних додатках. Перевагою цього формату порівняно з форматом GIF є компактність файлів і достатня якість передачі кольорів. На жаль, формат PNG підтримується поки що не всіма броузерами.

5.2. Вставка зображення

Важко знайти в WWW сторінку, яка не мала б зображень. Вставка зображення на Web-сторінку виконується одиночним тегом <IMG>. Усередині цього тегу обов’язково записується атрибут SRC, що вміщує URL зображення. Назва цього атрибута походить від слова source — джерело.

Існує два способи використання графіки в HTML-документах. Перший — це впровадження графічних образів у документ, що дозволяє користувачеві бачити зображення безпосередньо в контексті інших елементів документа. Це найбільш використовувана техніка при проектуванні документів, яка іноді називається “inline image”.

Синтаксис тега:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top middle bottom texttop ISMAP>

Опишемо елементи синтаксису тега:

URL. Обов’язковий параметр, що має такий же синтаксис, як і стандартний URL. Даний URL указує броузеру де перебуває малюнок. Малюнок повинен зберігатися в графічному форматі, підтримуваному броузером. На сьогоднішній день формати GIF і JPG підтримуються більшістю броузеров.

ALT=”text”. Даний необов’язковий елемент задає текст, що буде відображений броузером, який не підтримує відображення графіки або з відключеним відображенням зображень. Як правило, це короткий опис зображення, яке користувач міг би або зможе побачити на екрані. Якщо даний параметр відсутній, то на місці малюнка більшість броузеров виводить піктограму (іконку), активізувавши яку, користувач може побачити зображення.

HEIGTH=n1. Даний необов’язковий параметр використовується для вказівки висоти малюнка в пикселах. Якщо даний параметр не зазначений, то відображується оригінальна висота малюнка. Цей параметр дозволяє стискати або розтягувати зображення по вертикалі, що дозволяє більш чітко визначати зовнішній вигляд документа. Однак, деякі броузери не підтримують даний параметр.

WIDTH=n2. Параметр також необов’язковий, як і попередній. Дозволяє задати абсолютну ширину малюнка в пикселах.

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

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

З версії HTML 2.0 у тега <IMG> з'явилися додаткові параметри:

<IMG SRC=”URL” ALT=”text” HEIGHT=n1 WIDTH=n2 ALIGN=top middle bottom texttop absmiddle baseline absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Нові параметри:

BORDER. Даний параметр дозволяє визначити ширину рамки навколо малюнка.

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

HSPACE. Те ж саме, що й VSPACE, але тільки по горизонталі.

Приклад

<HTML>

<HEAD>

<TITLE>Моя перша сторінка </TITLE>

</HEAD>

<BODY>

<H2> Вставка зображення </H2><BR>

<IMG src=”zahid.jpg” ALT=”захід” HEIGHT=50% WIDTH=50% BORDER=5>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

5.3. Використання фонових малюнків

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

Опис фонового малюнка включається в тег BODY і виглядає так:

<BODY BACKGROUND="picture.gif">

5.4. Використання кольору для оформлення сторінки

Щоб задати кольори тіла документу, його тексту та гіперпосилань, необхідно включити в тег <BODY> додаткові параметри:

<BODY BGCOLOR=”#XXXXXX” TEXT=”#XXXXXX” LINK=”#XXXXXX”>, де кожний з параметрів визначає кольори того або іншого елемента. Опишемо ці параметри:

BGCOLOR — колір тіла документу.

TEXT — колір простого тексту документа.

LINK — колір посилання.

Кольори задаються шестизначним числом у шістнадцятковому форматі за схемою RGB (Red, Green, Blue). Колір #000000 відповідає чорному, а колір #FFFFFF — білому.

Приклад

<BODY BGCOLOR=”#000000″ TEXT=”#FFFFFF” LINK=”#9690CC”>

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

5.5. Використання звуку

Для того, щоб вставити у вашу сторінку звуковий файл, наприклад, midi-файл, використовуйте наступну конструкцію:

<EMBED SRC=”bob1.mid” WIDTH=”140″ HEIGHT=”50″ ALIGN=”MIDDLE” BORDER=”0″ AUTOSTART=TRUE>

У цьому тезі були використані наступні атрибути:

WIDTH — параметр, що визначає ширину midi-плеєра.

HEIGHT — параметр, що визначає висоту midi-плеєра.

BORDER — ширина рамки midi-плеєра.

AUTOSTART — запустити midi-плеєр відразу після того, як завантажиться документ HTML.

§6. Робота з таблицями

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

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

6.1. Елементи таблиці.

Таблиці будуються за принципом вкладення і вводяться на Web-сторінку за допомогою ряду елементів. Кожна таблиця починається тегом <TABLE> і закінчується тегом </TABLE>. Створювана таблиця ніби розгортається по рядках, а рядки заповнюються комірками. При цьому всередину тегів <TABLE>…</TABLE> можуть вставлятися такі елементи:

·        TR — елемент створення рядка;

·        TD — елемент, що визначає вміст комірки даних;

·        TH — елемент, що визначає комірку заголовка.

6.2. Задання параметрів таблиці

Атрибути елемента TABLE

· WIDTH — задає ширину таблиці. Його значення виражається у пікселах або у відсотках (від повної ширини вікна броузера).

Приклад

<TABLE WIDTH=”40%”>

Даний тег задає таблицю з довжиною всіх рядків, що дорівнює 40% від ширини вікна.

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

· ALIGN — задає вирівнювання таблиці у документі. Цей атрибут може набувати одне із значень: left (розміщення таблиці уздовж лівого краю документа), center (по центру документа) і right (уздовж правого краю).

· BORDER — це вже відомий вам атрибут, що задає вивід рамок таблиці. Якщо значення цього атрибута не визначено, наприклад, <table border>, усі рамки матимуть товщину 1 піксел. Якщо ж значення задане (наприклад, border=5 ), то товщина 5 пікселів буде тільки для зовнішньої рамки. Товщина внутрішніх рамок, як і раніше, дорівнюватиме 1 пікселу.

Атрибути елементів рядків і стовпців

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

· WIDTH і HEIGHT — установлюють розміри комірок рядка: ширину і висоту. Ці атрибути можуть використовуватися у тегах <TR>, <TD>.

· ALIGN — вирівнює вміст у комірках і вводиться в теги <TR> або <TD>. Цей атрибут може набувати значень: left, right, center і justify (вирівнювання по лівому і правому краях).

· VALIGN — вирівнюють вміст по вертикалі. Цей атрибут застосовується з такими значеннями: top (вирівнювання по верхньому краю комірок), bottom (по нижньому краю), middle (центрування по вертикалі).

Колір у таблицях

Наведемо атрибути, що визначають колір таблиць.

· BGCOLOR — колір фону в таблиці. Залежно від того, до якого тегу цей атрибут вводиться (<TABLE>, <TR>, <TH> або <TD>), задаватиметься фон всієї таблиці, рядка, комірки заголовка або даних.

Приклад

<TABLE BGCOLOR = “red”>

Даний тег призначає червоний фон всієї таблиці.

<TD BGCOLOR=”yellow”>

Даний тег задає жовтий фон комірки даних.

· BORDERCOLOR — колір рамок таблиці. Якщо атрибут bordercolor вставити в тег <table>, то він діятиме, коли в таблиці є рамки, тобто за наявності атрибута border. Якщо ж потрібно задати колір лише визначених комірок, атрибут bordercolor розташовуємо в тегах <TR>, <ТН> або <TD>.

6.3. Об’єднання комірок таблиці

У мові HTML передбачена можливість об’єднання суміжних комірок. Для цього в початкових тегах <ТН> або <TD> застосовуються такі атрибути.

·        ROWSPAN — об'єднує комірки суміжних рядків. Значення атрибута задає кількість об'єднаних комірок.

·        COLSPAN — об'єднує комірки суміжних стовпців.

Якщо застосувати водночас обидва атрибути rowspan і colspan, отримаємо об’єднану комірку із суміжних рядків і стовпців.

Приклад

<TD ROWSPAN=2 COLSPAN=4>

Даний тег задає комірку, розташовану на перетині двох рядків і чотирьох стовпців.

6.4. Створення підпису.

Підпис: <CAPTION>...</CAPTION> .

Даний тег описує назву таблиці (підпис). Тег <CAPTION> повинен бути присутнім усередині <TABLE>…</TABLE>, але зовні опису якого-небудь рядка або комірки. За замовчуванням <CAPTION> має атрибут ALIGN=top (розміщення над таблицею), але може бути встановлений ALIGN=bottom (розміщення під таблицею).

Приклад

<HTML>

<HEAD>

<TITLE>Таблиця</TITLE>

</HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION ALIGN=bottom> Таблиця №1 </CAPTION>

<TR> <TD ROWSPAN=2></TD>

<TH COLSPAN=2>Середнє значення</TH> </TR>

<TR> <TH>Ріст</TH>

<TH>Вага</TH> </TR>

<TR> <TD>Чоловіка</TD>

<TD ALIGN=center>174</TD>

<TD ALIGN=center>78</TD> </TR>

<TR> <TD>Жінки</TD>

<TD ALIGN=center>165</TD>

<TD ALIGN=center>56</TD> </TR>

</TABLE>

</BODY>

</HTML>

Відображення даного документу у броузері Internet Explorer:

§7. Створення і використання фреймів

Мова HTML дозволяє розбити вікно програми броузера на декілька частин і в кожній з них відобразити окремий документ. Такі області називаються фреймами.

 Кожне підвікно, або фрейм, може мати наступні властивості:

·  Кожен фрейм має свою URL адресу, що дозволяє завантажувати його незалежно від інших фреймів.

·  Кожен фрейм має власне ім'я (параметр NAME), що дозволяє переходити до нього з іншого фрейма.

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

Формат документу, у якому використовуються фрейми, зовні дуже нагадує формат звичайного документа, тільки замість тега BODY використовується тег FRAMESET, який містить опис внутрішніх HTML-документів. Тобто:

Приклад

Розглянемо загальний вигляд опису фреймів:

<FRAMESET COLS="value"   ROWS="value">

<FRAME SRC="url_1">

<FRAME ...>

...

</FRAMESET>

Загальний тег FRAMESET описує всі фрейми, на які ділиться екран. Ви можете розділити екран на вертикальні або горизонтальні фрейми. Тег FRAME описує кожний фрейм окремо. Розглянемо більш детально кожний компонент.

7.1. FRAMESET

<FRAMESET [COLS="value"   ROWS="value"]>

Тег <FRAMESET> має закриваючий тег </FRAMESET>. Усе, що може перебувати між цими двома тегами, це тег <FRAME>, вкладені теги <FRAMESET> і </FRAMESET>, а також контейнер з тегів <NOFRAME> і </NOFRAME>, що дозволяє будувати подвійні документи для броузерів, які підтримують фрейми і для броузерів, які не підтримують фрейми.

Даний тег має два взаємовиключних параметри: ROWS і COLS.

ROWS="список-властивостей-горизонтальних-підвікон"

Даний тег містить опис деякої кількості підвікон, розділені комами. Кожний опис являє собою числове значення розміру підвікна в пікселах або відсотках від усього розміру вікна. Кількість підвікон визначається кількістю значень у списку. Загальна сума висот підвікон повинна становити висоту всього вікна (у будь-яких вимірюваних величинах). Відсутність атрибута ROWS визначає один фрейм, величиною в вікно броузера.

Розглянемо синтаксис використовуваних видів опису величин підвікон:

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

· value%. Значення величини підвікна у відсотках від 1 до 100. Якщо загальна сума відсотків описуваних підвікон перевищує 100, то розміри всіх фреймів пропорційно зменшуються до суми 100%. Якщо, відповідно, сума менше 100, то розміри пропорційно збільшуються.

· value*. Значення value у даному описі є необов’язковим. Символ “*” вказує на те, що все місце, що залишилося, буде належати даному фрейму. Якщо вказується два або більше фрейма з описом “*” (наприклад “*,*”), то простір, що залишився, ділиться порівно між цими фреймами. Якщо перед зірочкою стоїть цифра, то вона вказує пропорцію для даного фрейм.

Приклад

Опис “3*,*,*”, говорить, що буде створено три фрейма з розмірами 3/5 вільного простору для першого фрейма й по 1/5 для двох інших.

COLS="список-властивостей-вертикальних-підвікон"

Те ж саме, що й ROWS, але ділить вікно по вертикалі, а не по горизонталі.

Приклад

1. <FRAMESET COLS=”50,*,50″> — описує три фрейма, два по 50 пікселів праворуч і ліворуч, і один усередині цих смужок.

2. <FRAMESET ROWS=”20%,3*,*”> — описує три фрейма, перший з яких займає 20% площі зверху екрана, другий 3/4 залишеного від першого фрейма місця (тобто 60% всієї площі вікна), а останній 1/4 (тобто 20% всієї площі вікна).

3. <FRAMESET ROWS=”*,60%,*”> — аналогічно попередньому прикладу.

4. Теги <FRAMESET> можуть бути вкладеними, тобто:

<FRAMESET ROWS=”50%,50%”>

<FRAMESET COLS=”*,*”

</FRAMESET>

7.2. FRAME

<FRAME SRC=”url” [NAME=”frame_name”] [MARGINWIDTH=”nw”] [MARGINHEIGHT=”nh”] [SCROLLING=yes no auto] [NORESIZE]>

Даний тег визначає фрейм усередині <FRAMESET>…</FRAMESET>.

SRC="url"

Описує URL документа, який буде відображений усередині даного фрейма. Якщо він відсутній, то буде відображений порожній фрейм.

NAME="frame_name"

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

MARGINWIDTH="value"

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

MARGINHEIGHT="value"

Те ж саме, що й MARGINWIDTH, але для верхніх і нижніх величин розділових смуг.

SCROLLING="yes   no   auto"

Цей атрибут дозволяє задавати наявність смуг прокручування у фреймах. Параметр yes вказує, що смуги прокручування будуть використані у фреймі, параметр no навпаки, що смуг прокручування не буде. Auto визначає наявність смуг прокручування тільки при їхній необхідності (значення за замовчуванням).

NORESIZE

Даний атрибут дозволяє створювати фреймы без можливості зміни розмірів. За замовчуванням, розмір фрейма можна змінити за допомогою миші так само просто, як і розмір вікна Windows. NORESIZE скасовує дану можливість. Якщо в одного фрейма встановлений атрибут NORESIZE, то в сусідніх фреймах теж не можна буде змінювати розмір.

7.3. NOFRAMES

Даний тег використовується у випадку, якщо ви створюєте документ, що може проглядатися як броузерами, що підтримують фрейми, так і броузерами, що їх не підтримують. Даний тег розміщується всередині <FRAMESET>…</FRAMESET>, а все, що перебуває усередині тегов <NOFRAMES> і </NOFRAMES> ігнорується броузерами, що підтримують фрейми.

Приклад

<HTML>

<HEAD>

<TITLE>Фрейми</TITLE>

</HEAD>

<FRAMESET ROWS=”*,*”>

<NOFRAMES>

<H1>Ваша версія WEB-броузера не підтримує фреймы!</H1>

</NOFRAMES>

<FRAMESET COLS=”65%,35%”>

<FRAME SRC=”1.html”>

<FRAME SRC=”2.html”>

</FRAMESET>

<FRAMESET COLS=”*,40%,*”>

<FRAME SRC=”3.html”>

<FRAME SRC=”4.html”>

<FRAME SRC=”5.html”>

</FRAMESET>

</HTML>

Відображення даного документу у броузері Internet Explorer:

7.4. Використання атрибута TARGET

Формат даного атрибута наступний:

TARGET="windows_name"

Даний атрибут може зустрічатися усередині різних тегів:

TARGET у тезі A

Це саме пряме використання TARGET. Зазвичай, при активізації користувачем посилання відповідний документ з’являється в тому ж вікні (або фреймі), що й вихідний документ, у якому було посилання. Додавання атрибута TARGET дозволяє зробити вивід документа в інший фрейм.

Приклад

<A HREF=”mydoc.php” TARGET=”Frame1″> Перехід у фрейм № 1 </A>

TARGET у тезі BASE

Розміщення TARGET у тезі BASE дозволить вам не вказувати при описі кожного посилання фрейм-приємник документів, що викликликаються посиланнями. Це дуже зручно, якщо в одному фреймі у вас перебуває меню, а в іншій — виводиться інформація.

Приклад

Документ № 1.

<HTML>

<HEAD>

<TITLE>Фрейми</TITLE>

</HEAD>

<FRAMESET COLS=”50,*”>

<FRAME SRC=”doc2.html” NAME=”Frame1″>

<FRAME SRC=”3.html” NAME=”Frame2″>

</FRAMESET>

</HTML>

Документ № 2 (doc2.html).

<HTML>

<HEAD>

<BASE TARGET=”Frame2″>

</HEAD>

<BODY>

<A HREF=”url1″> Перша частина</A>

<A HREF=”url2″> Друга частина</A>

</BODY>

</HTML>

Використання зарезервованих імен фреймів:

TARGET=”_blank”. Дане значення визначає, що документ, отриманий по посиланню буде відображатися в новому вікні броузера.

TARGET=”_self”. Дане значення визначає, що документ, отриманий по посиланню буде відображатися в тому ж фреймі, у якому перебуває посилання.

TARGET=”_parent”. Дане значення визначає, що документ, отриманий по посиланню буде відображатися в батьківському вікні, поза залежністю від параметрів FRAMESET. Якщо батьківського вікна немає, то дане ім’я аналогічно “_self”.

TARGET=”_top”. Дане значення визначає, що документ, отриманий по посиланню буде відображатися на всій поверхні вікна, незалежно від наявності фреймів. Використання даного параметра зручно у випадку вкладених фреймів.