Тема 1 Передумови створення html - документів Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ
« Назад
Тема 1. ПЕРЕДУМОВИ СТВОРЕННЯ HTML-ДОКУМЕНТІВ
1.1. Інтернет та WWWІнтернет (мережа Інтернет) – сукупність мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP (Transport Control Protocol/Internet Protocol), спільний простір імен та адрес для забезпечення доступу користувачів до інформаційних ресурсів мережі. Зазначимо, що TCP/IP – це множина комунікаційних протоколів, що визначають, як комп’ютери різноманітних типів з різноманітними операційними системами можуть спілкуватись між собою. Кожен комп’ютер, з’єднаний з мережею Інтернет, отримує у ній унікальну адресу (IP- адресу). Юридична або фізична особа, яка надає користувачам доступ до мережі Інтернет, називається провайдер. При низькій вартості послуг використання мережі Інтернет дозволяє одержати доступ до комерційних і некомерційних інформаційних служб та баз даних, користуватись швидким, надійним та конфіденційним глобальним зв’язком. Крім того, широке використання мережі Інтернет пояснюється дешевизною розміщення у ньому власної інформації, що доцільно як щодо проведення спільних робіт з територіально віддаленими користувачами Інтернет, так і стосовно реклами діяльності комерційних та некомерційних структур. Одна із найбільш популярних мереж, що входить до складу Інтернет, є WWW або Web (Word Wide Web - всесвітня павутина). Популярність даної мережі пояснюється зручністю роботи з різноманітними видами інформації, від простого тексту до мультимедійних роликів. У свою чергу зручність роботи забезпечується використанням посилань. Посилання (гіпертекстове посилання) – адреса іншого мережевого інформаційного ресурсу у форматі URL (Universal Resource Location), який тематично, логічно або будь-яким іншим способом пов’язаний з документом, у якому це посилання визначене. Окремий інформаційний ресурс мережі WWW, що має власну адресу, називають Web-сторінкою або Web-сайтом. Для передачі даних у мережі WWW використовується протокол прикладного рівня HTTP (Hyper Text Transfer Protocol). Програмне забезпечення, що надає користувачам інтерфейс для доступу до інформації Web-сторінок та їх перегляду, називають броузер або браузер. На сьогодні найбільш популярними та поширеними є браузери Microsoft Internet Explorer, Netscape Navigator та Opera. Інформаційні системи, призначені та пристосовані для використання у мережі WWW, називають Web-орієнтованими ІС. Як і вся мережа Інтернет, мережа WWW базується на багаторівневій архітектурі “клієнт-сервер” (див. рис. 1.1). Наведемо деякі пояснення щодо архітектури та функціонування мережі WWW. Клієнт мережі Інтернет (робоча станція) – окремий (персональний) комп’ютер або віддалений термінал мережі, з яких користувачі отримують доступ до ресурсів мережі Інтернет. Клієнт мережі WWW– браузер, що використовується клієнтом мережі Інтернет для доступу до ресурсів мережі WWW. Сервер – об’єкт комп’ютерної системи (програмний або програмно-апаратний засіб), що надає послуги іншим об’єктам за їх запитами. WEB-сервер – сервер, який обслуговує запити користувачів (клієнтів) згідно з протоколом HTTP, забезпечує актуалізацію, збереження інформації WEB-сторінки, зв’язок з іншими серверами. Для отримання доступу до певного інформаційного ресурсу мережі WWW (Web-сайта) клієнт (браузер) встановлює TCP-з’єднання з Web-сервером, що обслуговує даний сайт. З’єднання встановлюється за допомогою сервера провайдера та мережі Інтернет. Після цього браузер відсилає Web-сервер запит на доступ до ресурсу. Зазначимо, що кожен ресурс у мережі WWW має свою унікальну адресу (URL- адреса). Наступним етапом є опрацювання Web-сервером отриманого запиту. У найпростішому випадку опрацювання полягає у пошуку Web-сервером необхідного файлу. У більш складних випадках необхідний інформаційний ресурс повинен бути сформований на основі даних запиту. Під час опрацювання таких запитів Web-сервер досить часто використовує доступне йому прикладне програмне забезпечення та бази даних. Розробка такого програмного забезпечення отримала назву “програмування на стороні сервера”. У процесі розробки найчастіше використовуються технології: CGI, Active Server Pages, JavaServer Pages, Java Servlets, Server-Side JavaScript, SSi та Php. Використання цих технологій потребує професійних знань у галузі програмування. Це є основною причиною того, що програмування на стороні сервера не входить до компетенції більшості Web-дизайнерів. Після опрацювання запиту відповідь по мережі Інтернет відсилається клієнту. Відповідь надходить у вигляді HTML-документа, який після інтерпретації браузером відображається на екрані робочої станції. Розробка програмного коду HTML-документа, дістала назву “програмування на стороні клієнта” і є одним із основних завдань Web-дизайну. У процесі розробки, як правило, використовують HTML, CSS та JavaScript.
1.2. URL-адресаЗа допомогою URL-адресації реалізується механізм іменування та ідентифікації розміщення Web-сторінок. Для цього кожній Web-сторінці призначено уніфікований вказівник інформаційного ресурсу (URL, Uniform Resource Locator). URL-адреса складається із трьох частин: - протоколу, який також називають схемою; - DNS-імені комп’ютера, на якому знаходиться Web-сторінка; - локального імені, що ідентифікує Web-сторінку у межах комп’ютера. Звичайно, як локальне ім’я використовують ім’я файлу, що відповідає Web-сторінці. Окремі частини URL-адреси розділяються за допомогою спеціальних символів. Розглянемо приклад адреси головної сторінки Web-сайта пошукової системи META: http://www.meta.ua/index.htm Ця URL-адреса складається із трьох частин: протоколу (http), DNS-імені Web-сервера (www.meta.ua) та імені файлу (index.htm). Зазначимо, що під час реалізації запитів DNS-ім’я комп’ютера (задане людиною-користувачем у адресному рядку браузера або Web-дизайнером при визначенні гіперпосилання) замінюється відповідною IP-адресою. Використання DNS-імен пояснюється тим, що на відміну від цифрових IP - адрес їх застосування викликає у користувачів WWW набагато менше труднощів. Особливістю мережі WWW є її поділ на окремі зони, кожна з яких має певне ім’я. Зони визначають тематику Web-сайтів, що належать цим зонам. Деякі імена зон та відповідна тематика сайтів показана у табл. 1.1. Таблиця 1.1 Зони WWW та тематика Web-сайтів
Призначення DNS-імені комп’ютеру реалізується з урахуванням того, до якої зони належить тематика Web-сайта. Ім’я зони входить у DNS-ім’я суфікс. Наприклад, ім’я пошукової системи META, що входить до української зони WWW: www.meta.ua Крім наведеної абсолютної адресації, при визначенні гіпертекстових посилань досить часто використовують відносну URL-адресацію. У цьому випадку URL-адреса вказує на ресурс (файл) на тому ж комп’ютері, на якому знаходиться Web-сторінка з гіпертекстовим посиланням. Відносна URL-адреса може містити компоненти відносних шляхів та ідентифікатори фрагментів. Наприклад, вираз “../” означає, що ресурс знаходиться у ієрархії на один рівень вище від файлу, у якому визначене посилання.
1.3. Коротка характеристика мови HTMLHTML-документ – файл текстової або нетекстової природи (звук, відео, зображення), створений за допомогою мови гіпертекстової розмітки HTML (Hyper Text Mark-up Language). Застосування універсальної мови HTML зумовлене необхідністю представлення інформації для глобального використання комп’ютерами різноманітних типів, що працюють під управлінням різноманітних операційних систем. Існують стандарти мови HTML, які підтримуються практично всіма провідними компаніями-розробниками програмного та апаратного забезпечення. Ці стандарти передбачають, що HTML-документ буде однаково та коректно представлений будь-якому користувачеві мережі WWW. Мова HTML надає розробникам засоби для: - публікації HTML-документів з заголовками, текстом, таблицями, списками, рисунками та ін.; - навігації по HTML-документам за допомогою гіперпосилань; - розробки форм для обміну даними з відділеними службами, що можуть бути використані при пошуку інформації, у електронній комерції та ін.; - включення електронних таблиць, відео- та аудіокліпів та інших додатків безпосередньо у HTML-документи. Текстовий HTML-документ являє собою звичайний текстовий файл з розширенням HTML або HTM. Зазначимо, що у назві файлу можливо використовувати тільки символи латинського алфавіту, арабські цифри, символи дефісу ("-") та підкреслення ("_"). У цьому документі може міститись інформація двох типів: звичайний текст та команди (теги) мови HTML. Зміст HTML-документа інтерпретується браузером під час завантаження. Як правило, наслідком інтерпретації тексту є його відображення у вікні браузера. Результати інтерпретації тегів залежать від їх призначення. Наприклад, це може бути форматування тексту або відображення у вікні браузера певного рисунка. Всі теги мови HTML-документа виділяються обмежуючими символами (< та >), між якими записується ідентифікатор (ім’я) тегу. Розрізняють одинарні та парні теги. Наведемо приклад одинарного тегу для відображення у вікні браузера горизонтальної лінії <hr>. На відміну від одинарного для визначення парного тегу (тегу-контейнера) використовуються відкриваючий та закриваючий тег. Закриваючий тег відрізняється наявністю символа / перед іменем тегу. Наприклад: <td> Зміст тегу </td> Все, що записано між відкриваючим та закриваючим тегом називають змістом тегу. У деяких випадках закриваючий тег можливо не використовувати. Наприклад тег-контейнер <li> можливо використовувати без закриваючого тегу </li>. Теги можуть мати параметри (атрибути). Наприклад, для визначення розміру тексту у тезі <font> можливо використати атрибут size: <font size='12'> Кількість та номенклатура параметрів індивідуальні для кожного тегу. Якщо параметрів декілька, то вони відокремлюються між собою за допомогою пробілів. Наприклад: <font size=12 color='red'> Зазначимо, що як імена тегів, так і імена параметрів не чутливі до регістру символів, за допомогою яких вони визначені. Таким чином, визначення тегів <br> та <BR> рівнозначне. Розрізняють параметри тегів, які потребують запису значення та параметри, які використовуються без значення. Якщо параметр тегу не потребує запису значення, то використовується тільки назва параметра. Наприклад: <br noshade> Якщо параметр тегу потребує запису значення, то воно вказується після назви параметра після символу "=". Значення параметра може записуватись як у одинарних або подвійних лапках, так і взагалі без лапок. Наприклад: <td align='left'>; <td align="left">; <td align=left>. Проте рекомендується записувати значення параметра у одинарних або подвійних лапках. Крім одинарних та парних тегів, розрізняють теги рівня блоку та послідовні теги. Різниця між ними полягає у тому, що теги рівня блоку можуть містити послідовні теги та інші теги рівня блоку. Послідовні теги можуть містити тільки дані та інші послідовні теги. Наведемо приклади: - теги рівня блоку: <table></table>, <p></p>; - послідовні теги: <img>, <br>. Важливою особливістю мови HTML є те, що неправильно записані теги або параметри тегів ігноруються браузером. При цьому браузер не показує ніякого повідомлення та переходить до інтерпретації інших частин HTML-документа. Мова HTML передбачає можливість використання кольорового форматування HTML-документа. При цьому кольори визначаються або за допомогою англійських назв, або у форматі RGB (Red Green Blue). Приклади визначення кольорів за допомогою англійських назв: - green – зелений; - red – червоний; - blue – синій; - white – білий; - black – чорний. Хоча такий спосіб визначення кольору досить зручний, проте обмежений кількістю відповідних назв. Тому більш поширеним є спосіб визначення кольорів у форматі RGB, який дозволяє використовувати більш ніж 1,5 млн кольорів. Передумовою використання формату RGB є те, що будь-який колір можливо визначити за допомогою трьох кольорів: червоного (red), зеленого (green) та синього (blue). У форматі RGB кожному із цих кольорів може відповідати число від 0 до 256, записане у шістнадцятичному форматі. Відсутність даного кольору відповідає числу 0 (00), а максимальна насиченість числу 256 (ff). Синтаксис RGB передбачає використання знаку "#". Приклади визначення кольорів у форматі RGB: - червоний – #ff0000; - зелений – #00ff00; - синій – #0000ff; - чорний – #00000; - білий – #fffffff. Для створення HTML-документа достатньо використовувати текстовий редактор, який не вставляє у текст документа власних команд. Прикладом може бути редактор “Блокнот”, що входить у стандартну комплектацію операційної системи Windows. Технологія створення HTML-документа у випадку застосування “Блокнота” полягає у тому, що Web-програміст визначає текст HTML-документа та теги, що у ньому використовуються. Після цього HTML-документ зберігається у файлі формату html або htm та тестується за допомогою браузера. Після виправлення помилок HTML-документ може бути розміщений на Web-сервері. Хоча вказана технологія є досить простою та не потребує спеціального програмного забезпечення, але вона є не оптимальною щодо трудомісткості, виявлення помилок при визначенні тегів та високих вимог до кваліфікації Web-програміста. Високі вимоги пояснюються тим, що Web-програмісту необхідно пам’ятати великий обсяг інформації, пов’язаний з номенклатурою та синтаксисом тегів. Тому на сучасному етапі використовують спеціальні HTML-редактори, які дозволяють суттєво підвищити якість програмного коду та прискорити процес створення HTML-документів. Найбільш популярними серед вітчизняних Web-програмістів є HTML-редактори – Macromedia Homesite та Macromedia Dreamweaver. Популярність цих редакторів пояснюється дружнім інтерфейсом користувача, наявністю вбудованої у редактори бібліотеки тегів та синтаксичного аналізатора правильності програмного коду HTML-документа, а також можливістю застосування візуальної технології створення HTML-документів. Проте практичний досвід показує, що реалізація сучасного клієнтського забезпечення Web-сайта за допомогою будь-якого редактора неможлива без глибоких знань мови HTML, каскадних таблиць стилів, мови програмування JavaScript. Саме цим питанням і присвячені наступні лекції. Контрольні запитання
З повагою ІЦ “KURSOVIKS”! |