МІНІСТЕРСТВО ОСВІТИ ТА НАУКИ УКРАЇНИ
КОЛЕДЖ ПОДІЛЬСЬКОГО ДЕРЖАВНОГО АГРАРНО-ТЕХНІЧНОГО
УНІВЕРСИТЕТУ
« СТВОРЕННЯ
WEB – САЙТІВ »
Навчальний електронний посібник
Номінація
Досвід
впровадження
інноваційних
технологій навчання
Кам’янець-Подільський
2015
Укладач Михайлюк
В.В. – викладач інформатики коледжу
Подільського аграрно-технічного університету.
Рецензент Костюченко Г.П. – викладач інформатики коледжу
Подільського аграрно-технічного університету.
В навчальному
посібнику розглянуто принципи та прийоми створення клієнтської частини
Web-сайту засобами HTML. Крім того значна увага приділяється питанням
забезпечення високої ефективності
функціонування корпоративного Web-сайту.
Для студентів
вищих навчальних закладів, які самостійно бажають освоїти вивчення основних
принципів, прийомів та технологій створення клієнтської частини Web-сайту.
Викладачем
розроблений Web-сайт – https://sites.google.com/site/informatica1kurs де розміщений
навчальний матеріал з дисципліни «Інформатика», який включає: лекції,
лабораторні роботи та питання самостійної роботи для студентів І курсів.
ЗМІСТ
Тема 1. ПЕРЕДУМОВИ СТВОРЕННЯ HTML - ДОКУМЕНТІВ
1.3. Коротка характеристика мови
HTML
Тема 2. ПРАВИЛА ПОБУДОВИ HTML - ДОКУМЕНТІВ
2.1. Визначення загальних
параметрів
2.3. Використання тегів
заголовків
2.4. Форматування
HTML-документу
2.5. Використання коментарів
та спеціальних символів
Тема 3. РИСУНКИ, ГІПЕРПОСИЛАННЯ, СПИСКИ
Тема 4. ВИКОРИСТАННЯ ТАБЛИЦЬ, ФОРМ ТА ФРЕЙМІВ
Тема 5. ВИКОРИСТАННЯ ДИНАМІЧНОГО HTML
5.1. Визначення динамічного
HTML.
5.2. Визначення каскадних
таблиць стилів.
5.3. Особливості запису
каскадних таблиць стилів.
5.5. Властивості форматування
елементів.
Тема 6. ЗАБЕЗПЕЧЕННЯ
ЕФЕКТИВНОСТІ WEB – САЙТІВ
6.2. Web - орієнтовані методи забезпечення
ефективності сайту
6.3.
Оптимізація структури та змісту сайту
6.4. Адаптація сайту до клієнтського
програмного забезпечення.
Лабораторна робота №2
Створення текстової HTML-сторінки
Лабораторна робота №3
Використання
рисунків, відео та звуку на HTML-сторінці
Лабораторна робота № 4 Створення
гіперпосилань
Лабораторна робота №5
Створення списків
Лабораторна робота №6
Створення таблиць
Лабораторна робота №7
Створення фреймів
Лабораторна робота №8 Форматування
елементів Web-сторінки за допомогою каскадних таблиць стилів
Лабораторна робота №5 Створення
інтерактивних Web-документів
Лабораторна робота №9
Публікація Web-сайту в мережі WWW
ВСТУП
Ефективне
управління виробництвом, формування оптимальних рішень у різноманітних сферах
економіки та бізнесу, сталий розвиток підприємства в значній мірі залежать від
рівня впровадження та використання інформаційних систем (ІС) і технологій. На
сучасному етапі розробка та впровадження досконалих ІС
неможлива без їх адаптації до використання в глобальній мережі Internet,
а також однієї з її основних частин мережі WWW. Характерною рисою адаптації є наявність в ІС
Web-сайту, доступного користувачам завдяки мережі WWW. Широке розповсюдження Web-сайтів призвело до
появи нового напрямку в галузі програмування – Web-дизайну.
В
сучасних умовах невеликі компанії нерідко створюють та підтримують Web-сайти
силами своїх працівників. Крім того, досвід впровадження сучасних складних
Web-орієнтованих систем свідчить про необхідність розробки подібних систем
шляхом активної взаємодії між компанією-розробником програмного забезпечення та
представниками замовника таких систем. Для цього необхідно знати принципи
проектування та розробки Web-сайтів, мати чітке уявлення про їх структуру,
принципи функціонування, місце і роль в організації роботи підприємства, мати
уявлення про перспективи подальшого
розвитку Web-систем, а також вміти їх використовувати на високому рівні.
Таким
чином, в сучасних умовах фахівці різного
профілю повинні опановувати Web-дизайн. Відзначимо, що на сьогодні по причині
своєї новизни напрям Web-дизайну не має чітких меж. Досить часто до цього
напрямку відносять розробку серверного
та клієнтського програмного забезпечення, адміністрування Web-сайту, реалізацію
заходів по підвищенню ефективності його функціонування та формування власне
самого дизайну Web-сайту. Проте, як свідчить практика, основним завданням
Web-дизайнера є розробка та підтримка клієнтського програмного забезпечення
Web-сайту для забезпечення високої ефективності його функціонування. Всі інші
завдання потребують достатньо глибоких професійних знань та навиків, і
вирішуються спеціалістами відповідного профілю. Тому основна увага в
навчальному посібнику спрямована на принципи та прийоми створення клієнтської
частини Web-сайту засобами HTML, CSS та JavaScript.
Навчальний
посібник складається з шести теоретичних тем та лабораторного практикуму, що
призначений для отримання практичних навичок створення клієнтського програмного
забезпечення Web-сайту, його публікації в мережі Інтернет та забезпечення
високої ефективності функціонування. Особливістю лабораторного практикуму є
орієнтація на виконання лабораторних робіт з використанням тільки текстового
редактора "Блокнот" та браузера, без застосування спеціальних
HTML-редакторів. Це дозволяє акцентувати увагу студентів на розробку
програмного забезпечення, а не розсіювати її на вивчення складного
інтерфейсу HTML-редактору, який змінюється
з кожною новою версією. До того ж практика свідчить, що знаючи HTML можна
освоїти інтерфейс HTML-редакторів без особливих труднощів. Оригінальною
частиною практикуму є лабораторні роботи, що дають змогу реально опублікувати
Web-сайт в мережі Інтернет та вплинути на його ієрархію в пошукових системах.
Навчальний
посібник орієнтований на самостійну
роботу студентів по закріпленню знань, що одержані під час проведення аудиторних занять.
Тема 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.
Рис. 1.1. Багаторівнева архітектура мережі WWW
Наведемо деякі пояснення стосовно архітектури та функціонування мережі 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-сайтів
|
Імена зон |
Тематика сайтів |
|
com |
Сайти комерційних структур |
|
edu |
Сайти організації освіти |
|
mil |
Сайти військових організацій |
|
net |
Сайти організацій, що займаються комп’ютерними мережами |
|
gov |
Сайти урядових організацій |
|
org |
Сайти не комерційних організацій |
|
ua |
Сайти, що тематично пов’язані з Україною |
|
ru |
Сайти, що тематично пов’язані з Росією |
|
de |
Сайти, що тематично пов’язані з ФРН |
Призначення DNS-імені комп’ютеру реалізується з врахуванням того, до якої
зони належить тематика Web-сайту. Ім’я зони входить в DNS-ім’я в якості
суфікса. Наприклад, ім’я пошукової системи META, що входить до української зони
WWW:
www.meta.ua
Крім наведеної абсолютної адресації при визначені гіпертекстових посилань
досить часто використовують відносну URL-адресацію. В цьому випадку URL-адреса
вказує на ресурс (файл) на тому ж комп’ютері, на якому знаходиться Web-сторінка з гіпертекстовим посиланням. Відносна
URL-адреса може містити компоненти відносних шляхів та ідентифікатори
фрагментів. Наприклад, вираз
"../" означає, що ресурс
знаходиться в ієрархії на один рівень вище від
файлу, в якому визначене посилання.
1.3.
Коротка характеристика мови HTML
HTML-документ – файл текстової або нетекстової природи (звук, відео, зображення),
створений за допомогою мови гіпертекстової розмітки 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. Саме цим питанням і присвячені наступні
лекції.
1.4.
Контрольні запитання
1.
Що
таке Інтернет та WWW?
2.
Що
таке протоколи TCP/IP?
3.
Що
таке гіпертекстове посилання?
4.
Архітектура
мережі Інтернет.
5.
Що
таке HTML-документ?
6.
Правила
запису URL- адреси.
7.
В
чому полягає різниця між абсолютною та відносною URL – адресами?
8.
Зони
мережі WWW.
9.
Основні
можливості мови HTML.
10.
Визначення
HTML – документу.
11.
Правила
запису тегів в HTML – документі.
12.
В
чому полягає різниця між парними та непарними тегами?
13.
В
чому полягає різниця між тегами рівня блоку
та послідовними тегами?
14.
Правила
визначення кольорів в мові HTML.
15.
Технологія
створення HTML – документів.
Тема 2. ПРАВИЛА ПОБУДОВИ HTML - ДОКУМЕНТІВ
2.1. Визначення
загальних параметрів
Першим тегом,
з якого слід починати опис HTML-документу, є тег <html>. Він завжди
повинен починати опис документу, а завершати опис повинен тег </html>.
Тобто тег <html> є тегом контейнером для всієї HTML-сторінки. Сам
документ є звичайним текстовим ASCII-файлом і може складатися із двох розділів - заголовка та змістовної частини.
Розділ
заголовка відкривається тегом <head> і закривається тегом </head>. Задачею заголовку є надання
браузеру інформації, необхідної для коректного відображення HTML-сторінки.
Теги, що знаходяться всередині розділу заголовку (крім назви документу), на екрані не відображаються. Назву документу
визначають за допомогою тегу контейнеру <title>. Наприклад:
<title>
Назва HTML-сторінки </title>
Змістовна частина документу, що не містить фреймів, визначається тегом
контейнером <body>. Тобто весь текст та всі теги
змістовної частини документу знаходиться
між тегами <body> та </body>.
Таким чином, для визначення простої HTML-сторінки досить написати:
<html><head><title>
Заголовок моєї Web-сторінки</title>
</head><body>
Зміст
Web-сторінки
</body></html>
Відображення цієї сторінки в вікні браузера показане на рис. 2.1.
Рис.2.1
Відображення простої HTML-сторінки браузером
2.2. Форматування
тексту
2.3. Використання
тегів заголовків
Теги заголовків (<h1>, <h2>,
<h3>, <h4>, <h5>, <h6>) призначені для
виділення на екрані користувача певних фрагментів тексту HTML-сторінки.
Виділення тексту реалізується за рахунок зміни розмірів та "жирності"
тексту. Тегу h1 відповідає найбільший розмір тексту, а h6 - найменший розмір.
Особливістю даних тегів є вставка порожнього рядка до і після виділеного фрагменту тексту. Наприклад, для виділення в тексті
HTML-сторінки трьох фрагментів тексту як заголовків 1, 3 та 6 рівнів необхідно:
<body>
Звичайний текст. <h1> Заголовок 1 рівня </h1>
Звичайний текст. <h3> Заголовок 3 рівня </h3>
Звичайний текст. <h6> Заголовок 6 рівня </h6>
Звичайний текст.
</body>
Відповідне відображення HTML-сторінки в вікні
браузера показане на рис. 2.4.
Рис. 2.4.
Використання тегів заголовків
Всі вказані теги є парними та можуть
використовуватись з необов’язковим параметром align, який служить для
горизонтального вирівнювання тексту.
Можливі значення параметру align показані в табл. 2.2.
Таблиця 2.2
Значення параметру align
|
Значення параметру |
Наслідки використання |
|
left |
Текст вирівнюється по лівій стороні вікна
браузера |
|
center |
Текст вирівнюється по центру вікна
браузера |
|
right |
Текст вирівнюється по правій
стороні вікна браузера |
|
justify |
Текст вирівнюється по ширині вікна
браузера. Візуально відрізняється від left тільки в тому випадку, коли текст
заголовку містить більш ніж два рядки тексту. |
Відзначимо, якщо параметр align не заданий, то використовується
вирівнювання заголовку по центру вікна браузера.
Розглянемо приклад визначення на HTML-сторінці
чотирьох заголовків третього рівня з різними параметрами вирівнювання. Для
цього в розділі необхідно записати:
<body> Звичайний текст.
<h3 align="center"> Заголовок вирівнюється по лівій стороні
вікна браузера</h3>
Звичайний текст.
<h3 align="center"> Заголовок вирівнюється по центру вікна
браузера</h3>
Звичайний текст.
<h3 align="right"> Заголовок вирівнюється по правій стороні
вікна браузера</h3>
Звичайний текст.
<h3 align="justify"> Заголовок вирівнюється по ширині вікна
браузера.
Візуально відрізняється від left тільки в тому випадку, коли текст
заголовку містить більш ніж два рядки тексту. </h3>
Звичайний текст. </body>
Відповідне відображення в вікні браузера показане
на рис. 2.5.
Рис. 2.5
Використання тегу заголовку третього рівня з різними параметрами вирівнювання.
2.4. Форматування
HTML-документу
Тег <br>
використовується для примусового переводу рядка. Необхідність використання даного
тегу пояснюється тим, що при відображенні текстових документів перенесення тексту із одного рядка в інший
відбувається автоматично та залежить в основному від розмірів шрифту та розмірів вікна браузера.
При цьому переведення рядка може здійснюватись тільки по символам, що
розділяють окремі слова.
Розглянемо приклад запису виразів "Перший
рядок" та "Другий рядок" в двох різних рядках. Відповідний
HTML-код такий:
<body>
Перший рядок <br> Другий рядок
</body>
Парний тег <nobr> на відміну від тегу
<br> використовується для заборони переводу рядка. Наприклад, для
гарантованого розміщення в одному рядку виразу "Цей текст повинен
відображатись в одному рядку" необхідно:
<nobr> Цей текст повинен відображатись в одному рядку </nobr>
Якщо даний текст не буде вміщуватись в одному
рядку, то в вікні браузера з’явиться горизонтальна смуга прокрутки.
Тег <p> призначений для розділу
тексту HTML-сторінки на окремі абзаци. Даний тег є тегом-контейнером та може
використовуватись з необов’язковим параметром align. Значення параметру align
та наслідки його використання для абзаців ті ж самі, що і для заголовків, див.
табл. 2.2. Відзначимо, що візуально в вікні браузера абзац буде відділятись від
іншого тексту за допомогою порожніх рядків та можливої зміни горизонтального вирівнювання.
Наведемо приклад використання тегу <p>:
<body>
Звичайний текст
<p align="center"> Абзац з горизонтальним вирівнюванням -
"по центру" </p> </body>
Відповідне вікно браузера показане на рис. 2.6.
Парний тег <center> призначений для
горизонтального вирівнювання елементів HTML-сторінки посередні вікна браузера.
Наведемо приклад його використання:
<body>
Звичайний текст
<center> Текст з горизонтальним вирівнюванням - "по центру"
</center>
Звичайний текст </body>
Відзначимо, що в специфікаціях діючих стандартів
HTML тег <center> позначений як не бажаний для використання, хоча і
підтримується практично всіма розповсюдженими браузерами.
Рис. 2.6
Використання тегу абзацу
Тег-контейнер <pre> використовується для
визначення попередньо відформатованого тексту. Текст, розміщений між тегами
<pre> та </pre>, буде виведений у вікні браузера із збереженням
деяких параметрів форматування, виконаних за допомогою текстових редакторів. Відзначимо, що в середині контейнеру
<pre> не можна використовувати деякі важливі та широко вживані теги. Тому
використання цього тегу досить обмежене.
Тег <hr> призначений для виведення в вікні браузера
горизонтальної лінії, до і після якої вставляються порожні рядки. Необов’язкові
параметри тегу <hr> та їх призначення наведені в табл. 2.3.
Таблиця 2.3
Параметри тегу <hr>
|
Параметр |
Призначення |
|
align |
Визначення горизонтального
вирівнювання лінії. Можливі значення: left
("по лівому краю"), center ("по центру"), right
("по правому краю"). Якщо параметр align не використаний то
застосовується вирівнювання "по центру" |
|
color |
Встановлює колір лінії |
|
noshed |
Відміняє рельєфність лінії |
|
size |
Визначає товщину лінії |
|
width |
Встановлює довжину лінії |
Наприклад, для визначення лінії червоного кольору,
товщиною 2 пікселі, довжиною 400 пікселів, без рельєфу необхідно:
<hr color="red" size=2 width=400 noshade>
2.5. Використання
коментарів та спеціальних символів
В деяких випадках необхідно не показувати у вікні
браузера частину HTML-коду сторінки, тобто "за коментувати" цей код.
Для цього використовуються теги коментарів <!-- та -->. Наприклад:
<!-- Цей текст не буде
відображатись у вікні браузера -->
2.7.
Контрольні запитання
1.
За допомогою
яких тегів визначаються загальні параметри HTML-документу?
2.
Як визначити
назву HTML- документу7
3.
Як визначити
змістовну частину HTML – документу?
4.
Навіщо
використовується тег <meta>?
5.
Основні
параметри тегу <body>.
6.
За допомогою
яких тегів реалізується форматування тексту?
7.
Чим
відрізняється тег <font> від тегу <basefont>?
8.
Назвіть
основні параметри тегів <font> та <basefont>.
9.
Поясніть
використання тегів заголовків.
10. Які теги відносяться до тегів форматування HTML –
документу?
11. Як визначити абзац?
12. За допомогою якого тегу можливо заборонити перенесення
об’єкту на інший рядок?
13. Навіщо використовується тег <pre>?
14. Як визначити коментар?
15. Наведіть приклади кодів найбільш використовуваних
спеціальних символів.
Тема 3. РИСУНКИ, ГІПЕРПОСИЛАННЯ, СПИСКИ
3.1. Рисунки
Для вставки рисунка в HTML-сторінку
використовується тег <img>. Основним параметром
цього тегу є параметр src, за допомогою якого вказується
адреса файлу, в якому і зберігається рисунок. Цей же тег також можливо
використовувати для показу відео-роликів. В цьому випадку використовується
параметр dynsrc, за допомогою якого вказується адреса відео
файлу. Найпоширенішими форматами файлів-рисунків є формати jpg, gif, png, а відео файлів - avi.
Відзначимо, що
адреса файлу-рисунка може бути вказана в абсолютному та
відносному форматі. При використані абсолютного формату в адресі повністю визначено комп’ютер, каталог та файл
рисунку.
Наприклад, для вставки рисунка, що зберігається в
файлі logo.gif за адресою
www.picture.com.ua/picture необхідно:
<img src=" www.picture.com.ua/picture/logo.gif">
При використанні відносного формату визначення місцезнаходження
файлу-рисунку відбувається з урахуванням місцезнаходження даної HTML-сторінки.
Наприклад, для вставки в HTML-сторінку prim.html рисунка, який зберігається в
файлі logo.gif, що знаходиться в
одному каталозі з файлом prim.html
необхідно:
<img src="logo.gif">
Графічні файли зручно зберігати в окремому
каталозі, наприклад, в каталозі з іменем img.
В цьому випадку для вставки в HTML-сторінку prim.html
рисунка logo.gif необхідно:
<img src="img/logo.gif">
Відзначимо, що каталог img та файл prim.html повинні
знаходитись в одному каталозі. Крім обов’язкового параметру src
тег <img> має декілька
необов’язкових параметрів, див. табл. 3.1.
Таблиця 3.1
Параметри тегу
<img>
|
Назва параметру |
Призначення |
|
alt |
Визначення альтернативного тексту |
|
width |
Ширину рисунку в пікселях |
|
height |
Висоту рисунку в пікселях |
|
hspace |
Відступ від рисунку до інших об’єктів на HTML-сторінці по вертикалі |
|
vspace |
Відступ від рисунку до інших об’єктів на HTML-сторінці по горизонталі |
|
border |
Товщина рамки навколо рисунку |
|
lowsrc |
Задає файл з альтернативним зображенням |
|
align |
Вирівнювання рисунку відносно інших об’єктів на HTML-сторінці |
|
src |
Адреса графічного файлу |
|
dynsrc |
Адреса відео файлу |
|
start |
Задає момент початку прокрутки відео ролика. Можливі значення: fileopen - ролик починається відразу після
завантаження відео файлу, mouseover - ролик починається при наведенні
миші на зображення. |
|
loop |
Задає кількість повторів відео - ролика. Якщо значення дорівнює –1,
то програвання відбувається безперервно |
Розглянемо призначення вказаних параметрів
докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують
браузер, що працює в режимі відключення завантаження зображень. Як відомо, цей
режим дозволяє зменшити час відображення HTML-сторінки в вікні браузера. В
цьому випадку замість зображення на екрані з’являється альтернативний текст,
заданий в параметрі alt. Крім цього альтернативний текст відображається в якості
підказки при знаходженні курсору "миші" в області рисунку. Приклад
використання параметру alt:
<img src="logo.gif"
alt="Альтернативний текст" >
Параметри width
та height призначені для визначення розмірів рисунку у вікні браузера.
Відзначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто
час завантаження рисунку не змінюється. Наведемо приклад застосування
параметрів alt, width
та height для одного і того рисунку:
<img src="logo.gif" width="184" height ="164" alt="Альтернативний
текст" >
<img src="logo.gif" width=" 92 " height =" 82" alt="Альтернативний
текст" >
<img src="logo.gif" width=" 150 " height ="40 " alt="Альтернативний
текст" >
Відповідне вікно браузера показане на рис. 3.1.
Рис. 3.1
Використання параметрів alt, width та height тегу <img>
Слід зазначити, що зміна розмірів рисунку може призвести
до втрати якості зображення, особливо за рахунок втрати пропорцій між
початковою висотою та шириною. Практичний досвід показує, що навіть при
дотримані пропорцій збільшення початкових розмірів зображень-фотографій більш
ніж на 10-15% призводить до чуттєвої втрати якості. При цьому зменшення
розмірів зображень позначається на якості їх відображення набагато менше, але
їх використання не оптимальне з точки зору часу завантаження.
Параметр border дозволяє визначити товщину
рамки навколо рисунку. Застосуємо цей параметр із значенням 2 для рисунків попереднього прикладу:
<img src="logo.gif"
width="184" height
="164"
border="2">
<img src="logo.gif"
width=" 92 " height
=" 82" border="2"
>
<img src="logo.gif"
width=" 150 " height
="40 " border="2">
Відповідне вікно браузера показане на рис. 3.2.
Рис. 3.2.
Використання параметрів border, width та
height тегу <img>
Параметри hspace та vspace дозволяють в
пікселях задавати відступи від рисунку до інших об’єктів на HTML-сторінці.
Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього
прикладу:
<img src="logo.gif"
width="184" height="164" hspace="20"
vspace="20" border="2">
<img src="logo.gif"
width=" 92 " height
=" 82" hspace="20"
vspace="20" border="2" >
<img src="logo.gif"
width=" 150 " height
="40 " hspace="20" vspace="20"
border="2">
Результат застосування показаний на рис. 3.3.
Рис. 3.3.
Використання параметрів hspace, vspace, border,
width та height тегу <img>
Параметр lowsrc дозволяє визначити файл з
альтернативним зображенням, яке з’являється у вікні браузера до появи основного зображення. Альтернативне
зображення, як правило, це рисунок того ж змісту, що і основний, але менш
якісний. По цій причині файл альтернативного зображення менший за розміром, а
тому завантажується набагато швидше ніж основний. Це дозволяє швидко показати
загальні риси зображення. Приклад використання:
<img src="logo.gif" width="184"
height="164" lowsrc ="small.gif">
Параметр align використовується для
визначення горизонтального або вертикального вирівнювання рисунку відносно
інших об’єктів на HTML-сторінці.
Параметри вирівнювання залежать від значень параметру align. При
використанні цього параметру із значеннями left або right рисунок
розміщується відповідно до лівої або правої
сторони вікна браузера, а текст "обтікає" зображення з протилежної
сторони. Відзначимо, що в цьому випадку текст може займати декілька рядків.
Приклад використання параметру align:
<body>
<img src="logo.gif" width="182"
height="162" border="1" align="right">
Приклад використання параметру align="right". Рисунок розміщений
біля правої сторони вікна браузера. Текст обтікає зображення з лівої
сторони.
</body>
Відповідне вікно браузера показане на рис. 3.4.
Рис. 3.4.
Приклад вирівнювання рисунка по правому краю вікна браузера
Крім left та right параметр aling
може приймати наступні значення:
-
top - верхня межа
зображення вирівнюється по найбільш високому елементу рядка;
-
texttop - верхня межа
зображення вирівнюється по найбільш високому текстовому елементу рядка;
-
middle - середина
зображення вирівнюється по базовій лінії рядка;
-
absmiddle - середина зображення вирівнюється по
середині рядка;
-
bottom - нижня межа
зображення вирівнюється по базовій лінії рядка;
-
absbottom - нижня межа
зображення вирівнюється по нижній межі рядка.
В цих випадках зображення можна розглядати як звичайний елемент рядка.
Відзначимо, що базова лінія тексту - це нижня
лінія рядка тексту без врахування нижньої частини деяких символів (р, j, y).
Наведемо приклад використання параметру align тегу
<img> з значеннями top, middle та bottom:
<body>
<img src="logo.gif" alt="" width="91"
height="81" border="1" align="top">
Приклад використання параметру align="top". <br>
<img src="logo.gif" alt="" width="91"
height="81" border="1" align="middle">
Приклад використання параметру align="middle". <br>
<img src="logo.gif" alt="" width="91"
height="81" border="1" align="bottom"> Приклад
використання параметру align="bottom".
</body>
Відповідне вікно браузера див. на рис. 3.5.
Рис. 3.5.
Приклад використання параметру align тегу <img> з значеннями top, middle
та bottom
3.2. Звук
Для програвання звуку на Web-сторінках можливо
використовувати тег <embed>, основним
параметром якого є src, що
дозволяє визначити адресу звукового файлу. Наприклад, для того, щоб при
перегляді в браузері Web-сторінки прозвучав звук, записаний в файлі 1.wav, необхідно записати такий HTML-код:
<embed src=1.wav >
Основні параметри цього тегу показані в табл.3.2.
Парметри тегу <embed>
|
Назва параметру |
Призначення |
|
width |
Ширину звукового програвача в
пікселях |
|
height |
Висоту звукового програвача в пікселях |
|
hspace |
Відступ від звукового
програвача до інших об’єктів на
HTML-сторінці по вертикалі |
|
vspace |
Відступ від звукового програвача до інших об’єктів на HTML-сторінці по
горизонталі |
|
hidden |
Дозволяє показувати/не показувати
(false/true) звуковий програвач у вікні браузера |
|
lowsrc |
Задає файл з альтернативним
зображенням |
|
align |
Вирівнювання рисунку відносно
інших об’єктів на HTML-сторінці |
|
src |
Адреса графічного файлу |
|
dynsrc |
Адреса відео файлу |
|
autostart |
Задає момент початку прокрутки
відео ролика. Можливі значення: true - програвання починається відразу після завантаження звукового файлу, false - програвання починається після команди користувача. |
|
loop |
Задає кількість повторів відео -
ролика. Можливі значення: true - програвання відбувається безперервно, false - кількість повторів визначається
користувачем. |
3.3. Гіперпосилання
Як відомо, гіперпосилання призначені для зв’язування
одного Web-ресурсу з іншим. Гіперпосилання складається із двох
частин. Перша частина – це об’єкт, який користувач бачить у вікні браузера, і
вибір якого призводить до переходу на цільовий Web-ресурс, URL-адреса якого
вказана в другій частині гіперпосилання.
В якості цього об’єкту можуть бути текст або/та зображення. В залежності
від цього класифікують текстові та графічні гіперпосилання. При типових
настройках браузера гіперпосилання виділяються на HTML-сторінці за допомогою
кольору. Крім того текст гіперпосилання виділений за допомогою підкреслення.
Для визначення гіперпосилання в коді HTML-сторінки використовують парний тег <a>.
Основним параметром цього тегу є параметр href, що задає URL-адресу
гіперпосилання. Синтаксис запису гіперпосилання такий:
<a href=" URL-адресу "> Текстовий або графічний об’єкт
</a>
Приклади запису текстового та графічного
гіперпосилання показані нижче:
<a href="www.meta.ua"> Текстове гіперпосилання </a>
<a href="www.meta.ua"> <img src="logo.gif">
</a>
Вказана URL-адреса може бути відносна або
абсолютна. При використанні відносної адреси
повний шлях до цільового ресурсу
не заданий. В цьому випадку визначення місцезнаходження цільового
ресурсу відбувається з урахуванням місцезнаходження HTML-сторінки, в якій
використане гіперпосилання. Наприклад, якщо в файлі 1.html визначене
гіперпосилання:
<a href="2.html "> Текстовий або графічний об’єкт
</a>
то мається
на увазі, що цільова HTML-сторінка 2.html
знаходиться в тому ж
каталозі того ж комп’ютера, в якому знаходиться і HTML-сторінка 1.html.
Абсолютною називається URL-адреса, в якій повністю
визначено комп’ютер, каталог та файл цільового ресурсу. Наприклад:
<a href="www.example.com/html/3.html"> Абсолютне
гіперпосилання</a>
Важливим параметром тегу <а> є параметр targer,
за допомогою якого можливо вказати вікно
браузеру, в яке повинен бути завантажений цільовий ресурс. Для завантаження
цільового ресурсу в нове вікно браузера значення цього параметру має бути
"_blank. Наприклад, для визначення текстового гіперпосилання,
вибір якого призводить до відображення в новому вікні браузера файлу 2.html,
необхідно:
<a href="2.html " target="_blank"> Текст
</a>
Відзначимо, що при відсутності параметру target
цільовий ресурс буде завантажуватись в вікно браузера, в якому відображається
HTML-сторінка з гіперпосиланням.
Цікавою є можливість гіперпосилань задати в якості
цільового ресурсу певну частину власної HTML-сторінки. Наприклад, зручно читати
великий документ, коли він має зміст з гіперпосиланнями на різні розділи. В
цьому випадку перехід по гіперпосиланню до деякого розділу (який може
знаходитись в кінці документу) призведе
до відображення цього розділу на екрані. Такі гіперпосилання називаються
внутрішніми. Для їх побудови необхідно за допомогою тегу <а> вказати
місце переходу (покажчик) та за допомогою параметру name тега <а>
присвоїти йому ім’я.
Наприклад, для переходу на 12 розділ документу на
початку тексту цього розділу розмістимо покажчик з іменем "go12":
<a
name="go12"></a>Текст розділу 12
Відзначимо, що в цьому випадку параметр href не використовується, а ім’я покажчика повинно бути записане за
допомогою літер англійського алфавіту та цифр.
Особливістю гіперпосилання для переходу в середині HTML-сторінки є
використання в параметрі href імені покажчика з перфіксом #. Наприклад:
<a
href="#go12">Перехід до розділу 12</a>
3.4. Списки
Списки - широко розповсюджена форма показу
даних як в електронних так і в
друкованих документах. Мовою HTML передбачено використання трьох стандартних
видів списків: маркірованого, нумерованого та списку визначень. Відзначимо, що
від інших елементів на HTML-сторінці стандартні списки відділяються порожніми
рядками.
Для визначення маркірованого списку
використовується тег-контейнер <ul>, в середині якого
розміщуються всі елементи списку. При цьому кожен пункт списку повинен починатись тегом <li>. Наведемо приклад HTML-коду маркірованого
списку:
<body> Звичайний текст
<ul>
<li> Перший пункт маркірованого списку
<li> Другий пункт маркірованого списку
<li> Третій пункт маркірованого списку
</ul>
Звичайний текст
</body>
Відображення маркірованого списку у вікні браузера
показане на рис. 3.6.
Як в тезі <ul>, так і в тезі <li> можливо використовувати
необов’язковий параметр type, за допомогою якого визначається тип
маркеру списку. Можливі значення цього параметру:
-
disc -
маркери відображаються заповненими колами;
-
circle -
маркери відображаються не заповненими колами;
-
square -маркери
відображаються заповненими квадратами.
Рис. 3.6
Відображення маркірованого списку
Приклад використання різних значень параметру type в тезі <li> маркірованого списку:
<ul>
<li
type="disc"> Перший пункт маркірованого списку.
type="disc"
<li
type="square"> Другий пункт маркірованого списку.
type="square"
<li
type="circle"> Третій пункт маркірованого списку.
type="circle"
</ul>
Відповідне відображення у вікні браузера показане на рис. 3.7.
Рис. 3.7 Використання різних
значень параметру type в тезі <li>
Якщо параметр type в тегах <ul> та <li> не використовується, то для всього
списку використовується маркер типу "disc".
Для визначення нумерованого списку використовується
тег-контейнер <ol>, в середині якого розміщуються всі елементи списку.
При цьому кожен пункт списку повинен
починатись тегом <li>. Наведемо приклад
HTML-коду нумерованого списку:
<ol>
<li>
Перший пункт нумерованого списку
<li>
Другий пункт нумерованого списку
<li>
Третій пункт нумерованого списку
</ol>
Відображення
такого нумерованого списку у вікні браузера показане на рис. 3.8.
Рис. 3.8 Відображення
нумерованого списку
Досить часто тег <ol> використовується з необов’язковими параметрами type та
start. При цьому параметр type використовується також в тезі
<li>. Його призначенням є визначення одного з стандартних типів маркера.
Відзначимо, що для нумерованого списку існує п’ять стандартних типів маркерів.
Використання цього параметру в тезі <ol> розповсюджується на весь список,
а використання в тезі <li> розповсюджується тільки на поточний пункт
списку. Можливі значення параметру type та відповідні цим значенням стандартні типи
маркерів показані в табл. 3.2.
Таблиця 3.2
Використання параметру type
|
Значення параметру type |
Тип маркеру |
|
1 |
у вигляді арабських цифр |
|
A |
у вигляді великих букв латинського алфавіту |
|
a |
у вигляді маленьких букв латинського алфавіту |
|
I |
у вигляді великих римських цифр |
|
i |
у вигляді маленьких римських цифр |
Наведемо приклад нумерованого списку з маркерами у вигляді великих римських
цифр. При цьому в другому пункті списку змінимо тип маркеру на "великі
латинські букви".
<ol
type="I">
<li>
Перший пункт нумерованого списку.
<li
type="A"> Другй пункт нумерованого списку. type="A"
<li>
Третій пункт нумерованого списку.
</ol>
Відображення цього списку у вікні браузера показане на рис. 3.9.
Рис. 3.9. Зміна типу маркерів в
нумерованому списку
Відзначимо, що нумерація пунктів нумерованого
списку не залежить від типу маркеру. Якщо параметр type в тегах <ol> та <li> не зазначено, то для всього списку
використовується маркер типу "1".
Параметр start призначений для зміни початку нумерації пунктів списку і
може використовуватись тільки в тезі <ol>. Для зміни нумерації пунктів в
середині списку в тезі <li> використовується параметр value.
Значеннями параметрів start та value можуть бути тільки натуральні числа.
Наведемо приклад визначення нумерованого списку, в якому нумерація пунктів
починається з п’яти, а в третьому рядку списку початок нумерації змінюється на
десять:
<ol
start="5">
<li>
Перший рядок нумерованого списку.
<li>
Другий рядок нумерованого списку.
<li
value="10"> Третій рядок нумерованого списку.
<li>
Четвертий рядок нумерованого списку.
</ol>
Відображення цього нумерованого списку показане на рис. 3.10.
Рис. 3.10 Зміна початку нумерації
пунктів нумерованого списку
Список визначень використовується
для розміщення на HTML-сторінці тексту, за змістом подібного до енциклопедії
або словника. Тобто тексту, в якому потрібно навести термін та пояснення цього
терміну, що може займати декілька рядків. На відміну від інших типів списків
кожен пункт списку визначень складається із двох частин. В першій частині
пункту записується термін, що потребує визначення. В другій частині пункту
записується текст, що пояснює зміст терміну.
Список визначень задається за допомогою тегу-контейнеру <dl>.
Для визначення терміну використовується тег <dt>, а для
визначення пояснення використовується тег <dd>. Наведемо приклад списку
визначень для розміщення на HTML-сторінці деяких стандартних термін в галузі
Web-програмування:
<dl>
<dt>Інтернет
(мережа Інтернет)
<dd>Сукупність
мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP
(Transport Control Protocol/Internet Protocol), спільний простір імен та адрес
для забезпечення доступу до інформаційних ресурсів мережі будь-якій особі;
<dt>Гіпертекстове
посилання
<dd>Адреса
іншого мережевого інформаційного ресурсу у форматі URL, який тематично, логічно
або будь-яким іншим способом пов'язаний з документом, у якому це посилання
визначене.
</dl>
Відображення цього списку визначень у вікні браузера показане на рис. 3.11.
Рис. 3.11. Список визначень
Як видно з рисунка 3.11, у вікні
браузера термін відділяється від свого пояснення за допомогою переводу рядка та
табуляції.
3.5.
Контрольні запитання
1.
Назвіть тег
вставки рисунка.
2.
Назвіть найпоширеніші формати графічних файлів.
3.
Параметри тегу
вставки рисунка.
4.
Як змінити розмір рисунку в HTML- документі?
5.
Навіщо
використовується параметр lowsrc?
6.
Правила запису
гіперпосилань.
7.
В чому різниця
між абсолютним та відносним гіперпосиланням?
8.
Як відкрити
гіперпосилання в новому вікні браузера7
9.
Що таке
"якір"?
10. Для чого використовуються списки в HTML- документі?
11. Як визначити маркірований список?
12. Як змінити маркер пункту списку?
13. Як визначити нумерований список?
14. Як змінити номер пункту списку?
15. Як визначити список визначень?
Тема 4. ВИКОРИСТАННЯ ТАБЛИЦЬ, ФОРМ ТА ФРЕЙМІВ
4.1. Таблиці
Особливість використання таблиць полягає в тому, що вони є основним засобом
форматування HTML-документів. Розміщення інформації в HTML-документі, виконане
за допомогою інших засобів (тегів), має або набагато менші можливості, або не
однаково відображається браузерами різних типів.
Для побудови таблиці необхідно використати теги-контейнери: тег таблиці <table>,
тег рядка <tr> та тег комірки даних <td> або тег
комірки заголовка <th>. При цьому таблиця має бути розміщена в тілі
HTML-документу, будується вона рядками, причому кількість комірок в рядках
повинна бути однакова. Таким чином одній таблиці відповідає один тег <table>
та стільки тегів <tr>, скільки рядків має таблиця. Якщо в таблиці немає об’єднання
комірок, то сумарна кількість тегів <td> та <th> дорівнює
добутку кількості рядків на кількість колонок таблиці. Різниця між тегами <td> та <th> полягає в форматуванні та вирівнюванні розміщеного в них
тексту. В тезі <td> текст
відображається стандартним шрифтом з горизонтальним вирівнюванням "по
лівому краю". В тезі <th> текст відображається напівжирним шрифтом з
горизонтальним вирівнюванням "по середині". Для розміщення інформації (тексту або графіки
) в середині таблиці необхідно помістити
її в тег комірки. Таблиця може мати заголовок, якому відповідає парний тег <caption>, він має
бути розміщений після тегу <table>
до першого тегу <tr>.
Наведемо приклад HTML-коду для визначення таблиці, яка складається із
заголовку та трьох рядків, в кожному із яких має бути дві комірки:
<table>
<caption>Заголовок
таблиці </caption>
<tr><th>Рядок
1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr>
<tr><td>Рядок
2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr>
<tr><td>Рядок
3. Комірка 1</td><td> Рядок 3. Комірка 2</td></tr>
</table>
Для зручності ідентифікації комірок в них розміщено текст, що відповідає
номеру рядка та номеру комірки в рядку. Відображення такої таблиці у вікні
браузера показано на рис. 4.1.
Рис. 4.1 Використання таблиць
При
відсутності параметру border у тегах, що визначають таблицю, її межі не
відображаються.
Розглянемо
призначення найбільш використовуваних параметрів тегів <table>, <caption>,
<tr>, <td> та <th>.
Тег <caption>
найчастіше використовується тільки з параметрами align та valign,
що визначають відповідно горизонтальне та вертикальне вирівнювання заголовка
таблиці.
Можливі значення параметру align тегу <caption>:
-
right - заголовок вирівнюється по правому краю таблиці;
-
center - заголовок вирівнюється по центру таблиці;
-
left - заголовок вирівнюється по лівому краю таблиці.
Параметр valign дозволяє
розміщувати заголовок над таблицею (значення top) або під таблицею
(значення bottom ). При відсутності параметрів align та valign
вирівняний по центру заголовок розміщується над таблицею, див. рис. 4.1.
Параметри тегу <table> та їх призначення наведені в
табл. 4.1.
Таблиця 4.1
Параметри тегу <table>
|
Параметр |
Призначення |
|
border |
Визначає товщину межі таблиці в пікселях |
|
bordercolor |
Визначає колір меж таблиці |
|
cellspacing |
Визначає відстань між комірками таблиці в пікселях |
|
cellpadding |
Визначає відстань від меж комірок до даних, що
знаходяться в цих комірках |
|
width |
Визначає ширину таблиці в пікселях або процентах від
ширини HTML-документу |
|
height |
Визначає висоту таблиці в пікселях |
|
align |
Визначає горизонтальне вирівнювання таблиці |
|
bgcolor |
Визначає колір фону таблиці |
|
background |
Визначає фоновий рисунок таблиці |
Розглянемо
типові приклади використання параметрів тегу таблиці.
Приклад 1. Побудуємо таблицю, що
складається з двох рядків та двох колонок шириною 400 пікселів, висотою 200
пікселів, з товщиною меж 5 пікселів, відстанню між комірками 7 пікселів та
відстанню від меж комірки до даних в комірках 3 пікселів. HTML-код, що
відповідає цій таблиці такий:
<table width=400
height=200 border=5 cellspacing=7
cellpadding=3 >
<tr><th>Рядок
1. Комірка 1</th><th> Рядок 1. Комірка 2</th></tr>
<tr><td>Рядок
2. Комірка 1</td><td> Рядок 2. Комірка 2</td></tr>
</table>
Відображення
такої таблиці у вікні браузера показане на рис. 4.2.
Рис. 4.2. Використання параметрів
тегу <table>
Якщо
розміри таблиці, визначені за допомогою параметрів width та height, не достатні для коректного
відображення розміщеної в ній інформації, то таблиця буде автоматично збільшена
браузером.
Приклад 2.
Розглянемо, як можна змінити взаємне розміщення таблиці і інших елементів на
HTML-сторінці за допомогою параметру align.
Можливі значення цього параметру для тегу <table>:
-
align="center"
- горизонтальне вирівнювання "по
центру", таблиця "не обтікається" текстом;
-
align="left"
- горизонтальне вирівнювання "по
лівому краю", таблиця "обтікається" текстом з правої сторони;
-
align="right" - горизонтальне вирівнювання "по правому
краю", таблиця "обтікається" текстом з лівої сторони.
HTML-код для розміщення в HTML-документі тексту та таблиці, вирівняної
"по правому краю":
<table
border="1" align="right">
<tr><th>Рядок
1. Комірка 1</th><th>Рядок 1. Комірка 2</th></tr>
<tr><td>Рядок
2. Комірка 1</td><td>Рядок 2. Комірка 2</td></tr>
</table>
Таблиця
вирівняна "по правому краю".
Відображення цієї таблиці та тексту в вікні браузера показане на рис 4.3.
Рис. 4.3. Спільне розміщення
таблиці та тексту при align="right"
Відзначимо, що наведені в табл. 4.1 параметри bordercolor, bgcolor та
background використовуються також в тегах рядків (<tr>) та комірок (<td>, <th>) для визначення кольору меж, кольору фону, фонових рисунків
рядків та комірок. Крім того як в тегах рядків, так і в тегах комірок для горизонтального та
вертикального вирівнювання розміщеної в них інформації можливо використовувати
параметри align та valign.
В тегах <tr>, <td> та <th> параметр align може приймати значення left,
center та right для
горизонтального вирівнювання інформації, відповідно "по лівому краю",
"по центру" та "по правому краю" комірок.
В тегах <tr>, <td> та <th> параметр valign може приймати значення top,
middle, bottom, та baseline для вертикального вирівнювання інформації,
відповідно "по верхньому краю", "по середині", "по
нижньому краю" та "по базовій
лінії тексту" комірок.
Якщо параметри bordercolor, bgcolor, background, align та valign визначені в тезі <tr>, то їх дія
розповсюджується на весь рядок таблиці, але ці параметри можуть бути
перевизначені в будь-якій комірці.
Особливістю тегів <td> та
<th> є можливість використання
параметрів rowspan та colspan для об’єднання декількох сусідніх комірок в одну.
Параметр rowspan використовується для об’єднання комірок "по
вертикалі", а параметр colspan - для об’єднання комірок "по горизонталі".
Синтаксис запису цих параметрів такий:
rowspan="n"
colspan="m"
де n та m -
кількість комірок, що об’єднуються.
При використанні параметру rowspan="n" необхідно в
наступних n-1 рядках таблиці
зменшити кількість комірок. При використанні параметру colspan="m"
необхідно в поточному рядку таблиці зменшити кількість наступних комірок на m-1.
Допускається сумісне використання параметрів rowspan та colspan
для однієї комірки.
Наведемо HTML-код таблиці, що складається із двох рядків та трьох колонок,
при цьому середня комірка займає обидва рядки:
<table
border="1" > <tr><td> Рядок 1. Комірка 1</td>
<td
rowspan="2"> Рядки 1,2. Комірка 2</td>
<td>
Рядок 1. Комірка 3</td></tr>
<tr><td>
Рядок 2. Комірка 1</td>
<td>
Рядок 2. Комірка 3</td></tr></table>
Відображення цієї таблиці в вікні браузера показане на рис. 4.4.
Рис. 4.4. Вертикальне об’єднання
комірок в таблиці
Наведемо HTML-код таблиці, що складається із двох рядків та трьох колонок,
при цьому всі комірки нижнього рядка об’єднані в одну:
<table
border="1" > <tr><td>Рядок 1. Комірка 1</td>
<td>Рядок
1. Комірка 2</td><td>Рядок 1. Комірка 3</td></tr>
<tr><td
colspan="3">Рядок 2. Комірки об'єднані в одну
1</td></tr>
</table>
Відображення цієї таблиці в вікні браузера показане на рис. 4.5.
Рис. 4.5. Горизонтальне
об’єднання комірок в таблиці
4.2.
Форми
Основною метою використання форм є передача
інформації від клієнта на Web-сервер. Як правило, результатом такої передачі є
відображення у клієнта нового HTML-документа, сформованого Web-сервером на
основі переданої інформації.
Форма визначається в HTML-документі за допомогою
тегу-контейнеру <form> та складається із набору полів вводу, що визначені
за допомогою тегів <input>, <select> та <textarea>.
Дані на Web-сервер передаються у вигляді:
змінна=значення
де змінна - ім’я поля вводу, задане за
допомогою параметру name, наприклад:
<input type="text" name="mytext">
Тег <form> у вікні браузера не
відображається, а поля вводу відображаються
за допомогою стандартних графічних елементів управління.
Основними параметрами тегу <form> є action,
enctype та method.
Обов’язковий параметр action визначає URL-адресу, куди передається
інформація.
Параметр enctype визначає формат кодування
даних при їх передачі. Можливими значеннями цього параметру є application/x-www-form-urlencoded
(використовується при стандартних установках) та multipart/form-data (використовується
при передачі файлів).
Параметр method визначає метод передачі
інформації. Можливими значеннями цього параметру є get та post.
Метод get рекомендується
використовувати, якщо обсяг інформації, що передається, не перевищує 255
символів. Метод post слід
застосовувати при передачі великого обсягу інформації.
Тег <input> використовується для
генерації таких елементів управління, як кнопки та поля для вводу тексту,
паролів, імен файлів. Основні параметри цього тегу представлені в табл. 4.2.
Таблиця 4.2
Основні параметри тегу <input>
|
Параметр |
Можливі значення |
|
|
name |
визначаються Web-програмістом |
Визначає ім’я елементу управління |
|
type |
text |
Створює поле для вводу рядка
тексту |
|
password |
Створює поле для вводу паролю |
|
|
file |
Створює поле для вводу імені файлу
на комп’ютері користувача |
|
|
submit |
Створює кнопку натискання якої
ініціює відправку даних форми |
|
|
reset |
Створює кнопку натискання якої
відновлюють значення полів форми які були на момент завантаження |
|
|
button |
Створює кнопку |
|
|
checkbox |
Створює елемент управління типу
checkbox |
|
|
radio |
Створює радіо-перемикач. Всі
елементи групи радіо-перемикачів повинні мати однакове значення параметру
name |
|
|
width, height |
визначаються Web-програмістом |
Задає ширину та висоту елемента
управління типу submit, reset, button |
|
size |
|
Задає максимальну кількість
символів що будуть відображатись в елементах управління типу text,
password та file |
|
maxlength |
|
Задає максимальну кількість
символів, які можна ввести в елементах управління типу text та
password |
|
value |
|
Початковий напис та початкове значення елементів управління |
Тег <select> призначений для того,
щоб організувати на формі вибору текстових елементів із декількох заданих
варіантів. Синтаксис запису цього тегу такий:
<select name="ім’я елементу" size="кількість видимих
рядків" multiple>
<option selected >елемент вибору 1</option>
<option>елемент вибору 2</option>
..............................................
</select>
На сервер відправляється список вибраних значень
під іменем "ім’я елементу".
Параметр size задає кількість елементів вибору, що можуть відображатись
одночасно. Якщо size=1, то
відображається випадаюче меню.
Наявність параметру
multiple означає
можливість одночасного вибору декількох
елементів із списку.
Елементи вибору задаються в середині тегу <select>
за допомогою тегу <option>. Для показу елементу, як вже вибраного, необхідно в тезі <option> використати параметр selected.
Тег <textarea> призначений для
створення в середині форми поля для вводу тексту із декількох рядків. Крім
обов’язкового параметру name в цьому тезі використовуються параметри cols
та rows.
Ці параметри дозволять визначити кількість колонок та рядків тексту, що
відображається в даному елементі управління.
Наведемо приклад HTML-коду для
визначення форми, що містить елементи
управління для вводу рядка тексту, паролю, кнопки типу submit для відправки даних на сервер та кнопки типу reset для відновлення початкового значення
полів:
<body><table>
<form action="password.php"
method="get">
<tr><td><input type="text"
name="login" size="21" maxlength="21">
Введіть ім'я </td></tr>
<tr><td><input type="password"
name="passw" size="21" maxlength="21">
Введіть пароль </td></tr>
<tr><td><input type="reset"
value="Очистити" width="50" height="30">
<input type="submit"
value="Відправити" width="50"
height="30"></td></tr>
</form>
</table></body>
Відображення такої форми у вікні браузеру показане на рис. 4. 6.
Рис.4.6. Використання форми вводу
ідентифікаційних даних
Особливості даної форми:
-
Призначена для ідентифікації користувача на Web-сервері за допомогою
персональних даних (імені та паролю);
-
Використання таблиці для розміщення елементів управління;
-
Використання текстових пояснень призначення елементів управління;
-
Дані форми передаються методом get та
призначені для обробки Web - додатком password.php, який знаходиться в тому ж
директорії, що і HTML-документ з формою.
4.3.
Фрейми
В
середині контейнеру <frameset> можуть
розміщуватись тільки теги визначення окремого фрейма <frame> або вкладені теги <frameset>.
Сумарна кількість цих тегів повинна бути рівною кількості фреймів, заданих
параметрами rows та cols контейнеру <frameset>. Параметри тегу <frame> представлені в табл. 4.3.
Таблиця 4.3
Параметри тегу <frame>
|
Призначення |
|
|
src |
Визначає URL- адресу документу, завантаженого в фрейм |
|
name |
|
|
frameborder |
|
|
bordercolor |
|
|
scrolling |
|
|
marginwidth |
|
|
marginheight |
|
|
noresize |
4.4.
Контрольні запитання
1.
Для чого
використовуються таблиці?
2.
Теги
визначення таблиць.
3.
Як об’єднати
декілька комірок таблиці?
4.
Параметри тегу
визначення рядка таблиці.
5.
Як змінити фон
окремої комірки таблиці?
6.
Для чого
використовуються форми?
7.
Параметри тегу
<form>.
8.
Що таке поля
вводу форми?
9.
Який метод
слід використовувати при передачі великого обсягу інформації?
10. Основні параметри тегу <input>.
11. Навіщо застосовуються фрейми?
12. Особливості HTML-документу з фреймовою
структурою.
13. Теги визначення фреймів.
14. Параметри тегів визначення фреймів.
15. Як організувати взаємодію між
фреймами?
Тема 5. ВИКОРИСТАННЯ ДИНАМІЧНОГО HTML
5.1. Визначення
динамічного HTML.
Динамічний HTML (DHTML) - це термін, який використовується для
позначення HTML-сторінок з динамічно змінюваним змістом.
Реалізація DHTML складається із трьох компонентів:
безпосередньо HTML, каскадних таблиць стилів (CSS) та мови сценаріїв
(JavaScript або VBScript). Вказані компоненти пов’язані між собою об’єктною
моделлю документу (Document Object Model - DOM), що по суті є інтерфейсом
прикладного програмування (API).
Використання DOM додає простій HTML-сторінці нову
якість - можливість динамічної зміни свого змісту без
перезавантаження. Об’єктна модель документу робить всі елементи сторінки
програмними об’єктами. За її допомогою можливо одержати доступ та керувати всім
змістом сторінки. Кожен елемент HTML-сторінки доступний як індивідуальний
об’єкт. Практично всі події, пов’язані з HTML-сторінкою (натиск на кнопці миші,
натиск клавіші клавіатури, тощо), можуть бути перехоплені та оброблені
процедурами сценарію. Відзначимо, що на сьогодні всі розповсюджені браузери
підтримують CSS та JavaScript, проте різні браузери реалізують власну об’єктну
модель документів. Таким чином сторінки з використанням DHTML можуть по-різному
відображатись в різних браузерах, що є основним недоліком DHTML.
5.2. Визначення
каскадних таблиць стилів.
Каскадні таблиці стилів (CSS) - це технологія визначення та
з’єднання стилів з HTML-сторінкою.
Для керування форматом однієї HTML-сторінки можливо
використати декілька таблиць стилів. При перегляді HTML-сторінки браузер по
визначеним правилам будує пріоритетність, "каскад" використання цих таблиць.
Стиль - це все те, що визначає зовнішній
вигляд HTML-сторінки при її відображенні в вікні браузера.
За допомогою стилів можливо змінювати більшість
властивостей тегів HTML-сторінки. Наприклад, для таблиці можна змінити шрифт,
колір фону, стиль, товщину та колір меж, видимість рядків та комірок, тощо.
Форматування тегу за допомогою стилів дещо нагадує зміну атрибутів тегу, але
можливості стилів набагато ширші.
Таблиця стилів - це шаблон, який керує форматуванням
тегів HTML-сторінки.
Концепція таблиці стилів для HTML-сторінки схоже на
використання стилів в текстовому редакторові Microsoft Word. Змінити зовнішній
вигляд документу Word можливо простою зміною з’єднаних з ним стилів. Таким же
чином змінити зовнішній вигляд HTML-сторінки можливо за допомогою зміни
з’єднаної з нею таблиці стилів. Наприклад,
для відображення тексту всіх абзаців червоним кольором на чорному фоні
необхідно в таблиці визначити правило, показане на рис. 5.1.
Рис. 5.1
Приклад запису правила таблиці стилів.
Правило каскадних таблиць стилів складається із
селектора та однієї або декількох декларацій.
Кожна декларація складається із властивості та її величини, розділених
знаком : та закінчується знаком ;. В прикладі, показаному на рис. 5.1,
селектором є тег P та визначено дві декларації, що записані в фігурних дужках.
Перша декларація color:red; друга background-color: black;. Перша декларація задає колір шрифта
(властивість color) як червоний (значення red).
Друга декларація задає колір фону (властивість background-color:) як
чорний (значення black). Запис декларація може бути реалізований тільки буквами
англійського алфавіту та арабськими цифрами і не чуттєвий до регістру.
З’єднати HTML-сторінку з таблицею стилів можливо за
допомогою:
1.
Зв’язування - дозволяє
використовувати одну таблицю стилів для форматування декількох HTML-сторінок.
При цьому таблиця стилів зберігається в окремому текстовому файлі з розширенням css. Зв’язування
реалізується за допомогою тегу link, визначеному в розділі head. Наприклад,
визначимо стиль, що задає чорний фон
HTML-сторінки.
HTML код на сторінці:
<head><link rel="stylesheet" type="text/css"
href="hi.css">
Правило стилю записане в файлі hi.css:
body {background-color: black;}
Особливістю запису правила стилю в файлі з
розширенням css є те, що тег <style> не використовується.
2.
Впровадження - дозволяє задати всі правила таблиці стилів
безпосередньо в самій HTML-сторінці. Для
цього також використовується тег link, визначений в розділі head:
<head><style type="text/css"> hr { width: 120px;
}</style>
На цій HTML-сторінці всі лінії, визначені за допомогою тегу
hr, будуть мати довжину 120 пунктів.
3.
Впровадження в
тег документу - дозволяє змінювати форматування конкретних
елементів HTML-сторінки. Такий стиль інколи називають інлайновим. Наприклад:
<td style="background-color: black; color: red;">
Текст, розміщений в цій комірці,
відображається червоним кольором на чорному фоні.
</td>.
При впровадженні в тег документу запис стилю має деякі особливості:
-
Селектором є сам тег;
-
Використовується параметр style, що є в кожному тезі;
-
Визначення повинні бути в одинарних
або подвійних лапках.
5.3. Особливості
запису каскадних таблиць стилів.
Якщо для різних селекторів задані однакові
декларації, то для зменшення розміру таблиці стилів використовується групування
селекторів. Наприклад, якщо для нумерованого та маркірованого списків
необхідно визначити розмір шрифта 24 пункта, то можливо це задати одним
правилом:
ol, ul {font-size: 24pt;}
Селектори в цьому випадку розділяються комами.
На HTML-сторінці можуть бути елементи, що вбудовані
в інші елементи. Якщо для елементів батьків визначені правила стилів, то
елементи нащадки можуть успадкувати
деякі із цих правил.
Наприклад, якщо для нумерованого списку визначено,
що текст списку буде червоного кольору:
<head><style type="text/css"> ol { color: Red;}</style></head>
то текст абзацу, розміщеного в такому списку, також
буде червоного кольору:
<body><ol><li><p>Текст абзацу червоного
кольору</p></ol>
В деяких випадках необхідно для формально однакових
елементів (тегів) застосувати різні стилі. При цьому використовувати в якості
селекторів теги, як це було в наведених
вище прикладах, не доцільно. В цих випадках для визначення правил стилів, які
можливо застосувати для одного або для всіх елементів HTML-сторінки можливо застосувати класи.
Ім’я класу використовується як селектор.
Якщо стиль буде застосовуватися тільки для одного тегу, то синтаксис запису
правила стилю такий - X.class.
Де X - ім’я тегу, а class - ім’я класу. Наприклад, необхідно
визначити два правила стилів для нумерованого списку. Правило a повинно визначити нумерований список з
шрифтом розміром 12 пунктів, а
правило b - з шрифтом розміром 16 пунктів:
<head><style type="text/css"> ol.a {font-size:
12pt;} ol.b {font-size:
16pt;}</style>
В тілі HTML-сторінки використання цих стилів відбувається
так::
<ol class="a"><li> Текст списку відображається
шрифтом розміром 12 пунктів </li></ol>
<ol class="b"><li> Текст списку відображається
шрифтом розміром 16 пунктів </li></ol>
Якщо необхідно передбачити можливість застосування
стилю для всіх тегів, то синтаксис запису правила стилю - .class.
Наприклад, визначимо стиль, що задає червоний колір
шрифту:
<head><style type="text/css"> .fontcolor {color:
red;}</style>
Використання цього стилю в тілі HTML-сторінки
відбувається таким чином:
<ol class="fontcolor"><li>Текст нумерованого списку
червоний</li></ol>
<ul class="fontcolor"><li>Текст маркірованого списку
червоний</li></ul>
Ще одним цікавим випадком є застосування контекстних
селекторів. Вони застосовуються
при необхідності визначення стилів для тегів, що вкладені в інші теги. Контекстний
селектор складається із декількох простих селекторів, розділених
пробілами:
a b c { визначення 1; визначення 2;...}.
В якості простих селекторів використовуються імена
тегів. Стиль з контекстним селектором застосовується для тегу c тільки в тому випадку, коли цей тег
знаходиться між тегами a та
b. Наприклад, необхідно, щоб відображались червоним кольором тільки ті
абзаци, які вкладені в нумеровані списки. В цьому випадку можливо використати
стиль:
ol P {color: Red;}
Альтернативою селектору class є селектор
id, який призначений для
того, щоб призначити кожному правилу стилю оригінальне ім’я. В цьому випадку
вказане для id правило стилю буде застосоване для кожного тегу з тим же id.
Якщо стиль передбачено використовувати для всіх тегів, то синтаксис визначення
правила стилю селектором id такий:
<head><style type="text/css"> #ім’я_id
{визначеня1;... } </style>
Якщо необхідно передбачити застосування правила
стилю тільки для конкретного тегу , то синтаксис запису наступний:
<head><style type="text/css"> ім’я_тегу#ім’я_id
{визначеня1;... } </style>
Для використання такої таблиці стилів в тілі
HTML-сторінки необхідно присвоїти атрибуту id, який є в кожному тегу, ім’я,
визначене в правилі стилів:
<ім’я тегу id= ім’я_id>
Наприклад, визначимо стиль для відображення
будь-якого елементу з id="ar" шрифтом Arial та стиль для відображення
абзаців з id="ver" шрифтом
Verdana.
<head>
<style type="text/css">
#ar { font-family: Arial; }
p#ver { font-family: Verdana; }
</style>
</head>
Застосування цих стилів реалізується так:
<h1 id="ar">Текст заголовку першого рівня відображається
шрифтом Arial </h1>
<p id="ver"> Текст абзацу відображається шрифтом Verdana
</p>
5.4.
Ієрархія стилів.
При призначенні стилів HTML-сторінкам та тегам може так статись, що різні
декларації призначають різні стильові рішення одним і тим самим тегам. В цьому
випадку реалізованим буде те стильове рішення, яке стоїть вище в ієрархії
стилів. Більш високим в цій ієрархії вважається те рішення, яке більш безпосередньо
відноситься до тегу, якому призначається визначений стиль. Таким чином,
ієрархія стилів виглядає наступним чином: інлайнові, впроваджені, зв’язані.
По цій причині в прикладі, де файл style1.css визначає стиль:
i {font-size: 30pt; color: red}
а інші правила
стилів задані як:
<head><link rel="stylesheet" type="text/css" href="style1.css"><style type="text/css"><i{color: blue; text-decoration: underline}></style></head><body><i style="font-size: 28pt; color: green">Ієрархія стилів</i></body>Виконуватись буде тільки декларація стилю, впровадженого в тег <i>.Бувають випадки, коли стильове рішення задається методами, які знаходяться на одному рівні ієрархії. При цьому виконуватись буде декларація того правила стилю, який був заданий пізніше. 5.5.
Властивості форматування елементів.
В каскадних таблицях стилів всі доступні властивості форматування елементів поділені на наступні категорії: шрифти, колір та фон, текст, блок, візуальне форматування, друк, фільтри та переходи, псевдокласи та інші властивості. Розглянемо ті категорії, які використовуються найчастіше. Категорія шрифтів - встановлює типографські властивості шрифтів. Відзначимо, що шрифти відрізняються між собою зовнішнім виглядом, розміром, стилем (прямий, курсив), "жирністю" (нормальний, напівжирний). Характеристика основних властивостей шрифтів представлена в табл. 5.1.
Таблиця 5.1Характеристика основних властивостей шрифтів
Властивість |
Можливі значення |
Призначення |
Приклад |
1 |
2 |
3 |
4 |
font-family |
Назви сімейств шрифтів, або назви шрифтів |
Задає пріоритетний список сімейств шрифтів |
<tr style="font-family: Arial;"> в рядку приоритетним буде використання шрифту Arial |
font-style |
normal (нормальний), italic (курсив), oblique (похилений) |
Визначає стиль шрифту |
<tr style=" font-style: italic;">в рядку текст буде виводитись курсивом |
font-weight |
100,200,…,900 |
Визначає жирність шрифту. 100 найтонший шрифт, 900 найжирніший |
<tr style="font-weight: 900;"> |
font-size |
Абсолютні (pt), або відносні (px,%,em) величини шрифтів |
Визначає розмір шрифту |
<tr style="font-size: 20pt;"> в рядку буде використано шрифт розміром 20 пунктів |
font |
Перелік всіх вказаних вище значень |
Визначення всіх властивостей |
<tr style="font: 20pt Arial;"> в рядку буде використано шрифт Arial, розміром 20pt |
Властивості категорії кольору та фону визначають колір та фон елементу. Для визначення кольору використовується властивість color. Наприклад, визначити сірий колір змісту (тексту) комірки таблиці можливо так: <td style="color: Gray;"> Фон можливо визначити в вигляді кольору або зображення. Колір фону визначається значенням властивості background-color. Зображення, що використовується в якості фону визначається властивістю background-image. В випадку використання зображення за допомогою властивостей background-repeat та background-attachment можливо вказати, як воно повторюється і фіксується. Наприклад, для визначення в якості фону зображення 1.gif, що буде прокручуватись в прокрутці рядка таблиці в вікні браузера і буде повторюватись по вертикалі, необхідно:<tr style="background-color: Green; background-image: 1.gif; background-attachment: scroll; background-repeat: repeat-y;">
Якщо зображення буде недоступним, то в якості фону
рядка буде використано зелений колір.
Властивості категорії блок визначають параметри блокових
елементів. Найбільш цікавими серед них є властивості, що визначають ширину
полів (margin), товщину (border-width), колір
(border-color) та стиль
(border-style) границь. Наприклад, визначення таблиці з подвійними границями
червоного кольору, товщиною 5 пунктів та полями в 50 пунктів можливо записати
так:
<table border="1"
style="border-color: red; border-style: double; border-width: 5pt; margin:
50 pt ;">
5.6.
Контрольні запитання
1.
Що таке
динамічний HTML?
2.
З чого
складається реалізація DHTML?
3.
Навіщо
використовується динамічний HTML?
4.
Що таке
каскадні таблиці стилів?
5.
Як визначити
каскадні таблиці стилів?
6.
Що таке
селектор?
7.
Як з’єднати
HTML-сторінку з таблицею стилів?
8.
Що таке
групування селекторів?
9.
Що таке
контекстний селектор?
10. Що таке ієрархія стилів?
11. Селектори class та id.
12. Категорії форматування
елементів.
13. Характеристика основних властивостей шрифтів.
14. Як за допомогою стилів визначити колір фону елементу?
15. Як за допомогою стилів визначити ширину полів елементу?
Тема 6. ЗАБЕЗПЕЧЕННЯ ЕФЕКТИВНОСТІ WEB – САЙТІВ
6.1.
Загальні положення
На сьогодні практично всі
корпоративні інформаційні системи ( КІС ) досить тісно інтегровані з
глобальною мережею Інтернет. При цьому представницьку роль КІС в мережі
Інтернет як правило відігріє Web - сайт.
Крім представницької ролі, сайт може забезпечувати: функціонування
електронного магазину, доступ до розподіленої бази даних, рекламу корпорації в
мережі Інтернет. Цей не повний перелік
функцій сайту вказує на значний вплив ефективності його функціонування на
ефективність функціонування всієї КІС, тим більше, що для його створення, розміщення в мережі та
підтримки потрібні досить значні фінансові витрати.
Проблема ускладнюється тим, що на сьогодні не існує загальноприйнятого критерію оцінки ефективності сайту. Це пояснюється
труднощами з визначенням прибутків корпорації завдяки наявності сайту. По
цій причині рекомендується проводити
оцінку ефективності сайту по кількості його відвідувачів. Така оцінка
ефективності отримала і практичне визнання. Більш того, наявність популярного
сайту дозволяє корпорації одержувати прибуток завдяки розміщенню на ньому
банерної реклами. Наприклад, по матеріалам сайту www.rambler.ru, в 2004 році
вартість розміщення в його верхній частині банерної реклами коштує близько
10000 доларів США. При цьому, кількість відвідувачів сайту становить більше
100000 на добу.
Забезпечити
достатню кількість відвідувачів сайту можливо за рахунок:
-
Реалізації
заходів спрямованих на те, щоб потенційні клієнти знали про сам факт існування
сайту.
-
Заохоченні клієнтів
повністю переглянути сайт при першому візиті та відвідувати його в наступному.
Відзначимо, що потенційні клієнти
можуть виявити сайт за допомогою реклами в традиційних джерелах інформації, або
за допомогою Інтернет -
орієнтованих шляхів виявлення сайту.
Досить поширеним методом реклами в традиційних джерелах інформації є
рекламування самого сайту та його адреси
в пресі та телебаченні. Хоча вказаний метод реклами досить ефективний,
але потребує значних витрат на реалізацію, що не завжди доцільно.
В
загальному випадку, виходячи з можливих Інтернет -
орієнтованих шляхів виявлення сайту потенційними користувачами, методика просування сайту може містити наступні
заходи: використання пошукових систем, каталогів та рейтингів, банерний обмін,
застосування систем активної реклами, використання дощок оголошень, поштових
розсилань, форумів та чатів.
6.2.
Web - орієнтовані методи забезпечення ефективності сайту
Відомо, що
пошукові системи, каталоги та рейтинги залучають від 20% до 60% відвідувачів
сайту. При пошуку сайтів користувач
вводить ключові слова, що, на його думку, найкраще відображають тему цікавлячого сайту. В деяких
випадках користувач може вказати загальну тематику пошуку. Результатом роботи
пошукової системи є список адрес сайтів, в яких зустрічаються ключові слова.
Крім адреси в списку відображаються заголовок та опис сайту. Зазначимо, що
список адрес формується в певній ієрархії та може відображатись на декількох
сторінках. Принциповим моментом є місце адреси ( рейтинг ) сайту в цій ієрархії.
Відомо, якщо адреса сайту знаходиться не на першій сторінці, то ймовірність
його відвідування практично дорівнює нулю. Для визначення методів підвищення
рейтингу сайту розглянемо механізми пошуку по ключовим словам та формування
рейтингу. На різних типах пошукових систем
вказані механізми дещо відрізняється і як правило офіційно не
документуються. Але скрізь пошук реалізований на основі: ключових слів та опису
сайту, що заносяться в базу даних при реєстрації сайту в пошуковій системі,
ключових слів в тілі сайту або ключових слів та опису сайту в його заголовку в
спеціальних тегах <meta>. Тому при реєстрації сайту в пошукових
системах слід вказати ключові слова, що
найбільш характерні для теми сайту, а також зробити відповідний опис сайту. В
описі необхідно також застосувати ключові слова. Використання механізму пошуку на базі
ключових слів та опису сайту в його заголовку можливо за рахунок наступної
програмної конструкції:
<head><tіtle>придуманий
вами заголовок</tіtle>
<meta
http—equіv="KEYWORDS" content="список ключових слів через
коми">
<meta
http—equіv="DESCRІPTІON" content="опис сторінки з декількох
фраз, з використанням ключових слів"></head>
Відзначимо, що ключові слова та опис сайту при реєстрації та в його
заголовку повинні співпадати. Як правило пошукові системи вимагають щоб ключові
слова та опис сайту не перевищували 200 знаків. Слід звернути увагу
на зміст заголовка сайту, що міститься між тегами <tіtle>. Саме він відображається в результатах запитів на
першому місці і має першорядне значення в справі залучення відвідувачів.
Довжина заголовка сайту не повинна перевищувати
75 знаків. Теги <meta> не видні при перегляді документа, але помітно
збільшують його розмір, тому їх додаткове застосування ( наприклад <meta
name ="tіtle" content="Ключові слова, словосполучення">
) недоцільне. Для застосування ключових слів в тілі сайту необхідно на головній
сторінці в перших 30-50
словах сформулювати основну тематику. Для збільшення кількості таких ключових
слів можливо записати їх на початку тіла сайту в тегах коментарів або (та)
кольором фону. Ці ключові слова не будуть відображені на сайту, але можливо
будуть використані пошуковою системою. Окремим питанням стоїть застосування
ключових слів, які по статистиці є взагалі найбільш використовуваними при
пошуку. На наш погляд недоцільно використовувати ключові слова пов’язані з
розвагами, як з етичних позицій, так із позицій використання не цільової аудиторії. Хоча використання
комп’ютерної, спортивної, радіотехнічної та автомобільної лексики доцільне. В тих пошукових системах які
передбачають процес реєстрації необхідно внести сайт в максимальну кількість
розділів. Слід зазначити, що на сьогодні
існує досить велика кількість пошукових систем. Реєстрація сайту в
кожній із них потребує певних матеріальних
витрат. Тому, на наш погляд доцільно провести реєстрацію сайту тільки в
загально популярних пошукових системах. До найбільш популярних пошукових систем
(серед вітчизняних користувачів) можна віднести – www.rambler.ru, www.aport.ru,
www.yandex.ru, www.meta.ua, www.google.com. Також, слід зареєструвати сайт в
пошукових системах якими користуються спеціалісти в галузі діяльності сайту.
Відзначимо, що декілька років тому були розроблені спеціальні
програми - павуки призначенням яких є автоматична реєстрація сайту в
великій кількості пошукових системах. Про те, в багатьох сучасних пошукових системах
вмонтовані засоби, що не дозволяють проводити автоматичну реєстрацію, тому
користуватись програмами - павуками не
доцільно. Для участі в рейтингу відвідувачів на сторінках сайту необхідно
розмістити банер (лічильник відвідувачів) пошукової системи. Наявність цих
банерів вповільнює завантаження сайту, тому слід їх розміщувати тільки на
вузлових сторінках. Деякі пошукові
системи не передбачають механізм реєстрації сайту його адміністратором. В таких
пошукових системах використовується спеціальна програма — робот яка автоматично
індексує сайти. Перешкодою для роботи такої програми може бути заборона на
індексацію встановлена на Web—сервері. Рекомендується цю заборону зняти, хоча
це дещо зменшує безпеку сервера.
Ще одним, загальновідомим, Інтернет - орієнтованим шляхом
рекламування сайту та адреси сайту є використання банерів. Банер
представляє із себе текстову або графічну рекламу сайту, розміщену на іншому сайту. Використання
банерів доцільне в тому випадку, коли сайт, носій банеру відвідується тими
клієнтами які є цільовою аудиторією сайту, що рекламується. Наприклад,
ефективність розміщення на сайту фірми продавця автомобілів банеру фірми
продавця автозапчастин може бути досить високою. Основним недоліком банерної
реклами є те, що по статистиці, кількість
відвідувачів, що знайшли сайт за допомогою банерної реклами становить близько
5% від загальної кількості відвідувачів. При цьому, реалізація банерної реклами
можлива або шляхом обміну банерами, або потребує матеріальних витрат для
публікації власних банерів на інших сайтах. Крім того, шлях обміну банерами
досить часто не доцільний з точки зору зміни дизайну сайту та появи на ньому не
тематичної інформації. Таким чином, в загальному випадку, використання банерної
реклами пов’язане з певними труднощами та принципово не в змозі стрімко
підвищити ефективність функціонування сайту.
Наступним можливим шляхом збільшення кількості відвідувачів може стати
розміщення на сайту цікавої динамічної інформації, наприклад чату, новин,
розкладу занять для сайту учбового закладу. Хоча здійснення цих заходів по
технічним причинам досить складне, але їх реалізація досить перспективна. Так
відвідуваність сайту www.gala.net можна пояснити саме розміщенням на ньому
досить популярного чату. Ще одним, вже
популярним шляхом збільшення кількості відвідувачів є застосування
автоматизованої системи розсилки електронної пошти, яка рекламує діяльність
корпорації.
6.3.
Оптимізація структури та змісту сайту
Після
того, як клієнт знайшов та вибрав адресу сайту необхідно, щоб він діждався відображення домашньої сторінки
сайту, повністю переглянув інші сторінки, а згодом знову відвідав сайт. Для
цього слід продумати змістову частину сторінок сайту, створити дизайн, що
відповідає направленості сайту та знищити технічні причини в наслідок яких
користувач може відмовитись від перегляду сайту. Найважливішою із причиною є
величина проміжку часу за який сайт буде завантажуватись.
Проведемо
аналіз проміжку часу який проходить від
подачі клієнтом запиту на перегляд сайту до його відображення на екрані. Будемо
мати на увазі, що сайт переглядається клієнтом при стандартних настройках
браузера, а також, що клієнту для перегляду необхідно використати мережу
WWW.
Вказаний
проміжок часу можливо розділити на проміжок часу для відображення основного та
допоміжних файлів Web – сторінки. Як правило в якості основного виступає HTML
файл. В якості допоміжних
виступають графічні, java
(class) файли та об¢єктні файли, до яких відносяться ActiveX та Flash. Важливим є той факт, що браузер спочатку робить
спробу знайти означені файли в тимчасовій пам’яті і тільки в разі негативного
результату робить запит в мережу WWW. Відзначимо, що негативним вважається
результат, коли файли не знайдені, або їх параметри не співпадають з
настройками браузера.
Час необхідний на відображення основного та кожного з допоміжних файлів
витрачається на втрати в мережі,
виконання серверної частини Web – сторінки, інтерпретацію браузером та на
відображення на екрані.
Втрати
в мережі складаються з проміжків часу на встановлення з¢єднання з сервером провайдера, встановлення з¢єднання сервера провайдера з сервером, що обслуговує
сайт, послідовну передачу основного файлу на сервер провайдера та на комп¢ютер клієнта. Для їх зменшення можливо застосувати
організаційні та програмні заходи. Організаційні заходи полягають в розміщені сайту на одному потужному сервері
який забезпечений потужними мережевими зв’язками. Як правило таким вимогам відповідають тільки
сервери спеціалізованих організацій - провайдерів.
На
Україні загальноприйнятою є схема, коли
організації, що мають власну локальну мережу, а відповідно і великий трафік та
з’єднані з мережею WWW малопотужним виділеним каналом, розміщують Web – сервер
на своїй території. Перевагами такої схеми є відносна дешевизна, дещо простіше
керування, використання практично будь – якого необхідного програмного
забезпечення, відсутність виходу в мережу WWW при перегляді власного сайту з
локальної мережі організації. Але така схема має серйозний недолік. В випадку
великого трафіку сайт стає практично недоступним для зовнішніх клієнтів. Крім цього, обслуговування Web – серверу
потребує залучення висококваліфікованого технічного персоналу. Тому, кращою є дзеркальна схема, коли сайт
розміщують на сервері спеціалізованої організації – провайдера, а його дублікат
( дзеркало ) розміщують на сервері, який знаходиться в середині локальної
мережі. Головними перевагами цієї схеми є незалежність доступності сайту від
трафіку організації та відсутність виходу в мережу WWW при перегляді власного
сайту.
Основним
програмним засобом зменшення втрат часу в мережі є зменшення загального обсягу
сторінок сайту. Можливо використання двох напрямків.
Перший
напрямок полягає в зменшенні обсягу кожної із сторінок за рахунок оптимізації
графіки та HMTL коду сторінки. Оптимізація графіки полягає в мінімізації
кількості графічного матеріалу, збереженні графічних файлів з достатньою якістю
та розмірами зображення, можливому використанні одного малюнка з різним
масштабом. Мінімізацію кількості графічного матеріалу можливо проводити шляхом
відмови від графічних меню, надписів та фонів. В якості альтернативи можливо
використовувати стилі. Графічні файли слід зберігати з безпечною кольоровою
гамою, розмірами які будуть використані на сайту та якістю достатньою для
відображенні на екрані комп¢ютера. Наприклад, при збереженні
графіки в редакторі PhotoShop в форматі jpg достатня якість для
фотокарток 2-3, для малюнків 2. Зауважимо, що для публікації в WWW
рекомендується виготовляти фотокартки з мінімальною кольоровою гамою з чіткими
переходами кольорів.
Оптимізацію
HTML коду слід проводити шляхом
врахування особливостей парних тегів, широкого застосування стилів, та відмовою від використання візуальних HTML
редакторів. Особливості парних тегів полягаю в тому, що багато з них не
потребують закриваючого тегу, хоча це і є відступом від стандарту. При цьому
такі теги коректно відображаються браузерами. Наприклад, можливо не
використовувати закриваючі ( парні ) теги рядка ( </tr> ) та комірки (
</td> ) таблиці, так як їх дія закінчується закриваючим тегом таблиці (
</table> ). Застосування стилів
доцільне при складному повторюваному форматуванні однотипних елементів сайту. В
цьому випадку необхідні параметри тегів слід визначити за допомогою стилів,
винесених в заголовок сторінки або в окремий css файл. Відмова від використання
візуальних редакторів пояснюється великим обсягом лишнього HTML коду, який
вставляється ними на сайт. Можливо рекомендувати використання редакторів типу
HomeSite або Microsoft Visual Studio, які дозволяють будувати оптимальний код
сайту.
Іншим
напрямком зменшення загального обсягу сторінок сайту є виділення спільної для
сайту інформації в окремі файли ( файл ). При першому відвідуванні сайту ці
файли завантажуються в тимчасову пам’ять комп’ютера клієнта ( кеш ). При
відвідуванні інших сторінок сайту з мережі завантажуються тільки файли з новою
інформацією. Його загальновідома реалізація є фреймова структура. Про те більшість комерційних організацій
відмовляються від фреймів по причинам трудомісткості їх модифікації та
складності реєстрації в пошуковими системами. Відзначимо, що в багатьох
пошукових системах дуже складно зробити посилання на сторінки сайту з фреймовою
структурою. Тому рекомендується використати пов’язаний з HTML - сторінками
сайту js - файл. В цьому випадку,
загальну для більшості сторінок сайту
інформацію можливо записати в вигляді винесених в окремий файл, функцій
мови програмування JavaScript. Таку
називати структуру сайту називають
динамічною. Як показує досвід, js - файл
коректно кешується загальнопоширеними браузерами, а час завантаження неосновних
сторінок такого сайту практично не відрізняється від сайту з фреймами.
Модифікація статичної частини сайту з динамічною структурою полягає в зміні
тільки одного js – файлу. Таким чином, до переваг сайту з динамічною структурою
слід віднести швидкість завантаження, низьку трудомісткість модифікації та
достатню адаптованість до пошукових систем.
Для
зменшення втрат часу, що пов’язані з встановленням з¢єднання браузера клієнта з сервером на якому розміщений
сайт рекомендується обмежити числом 12 кількість файлів з яких складається Web
– сторінка. Така кількість файлів обумовлена практичним досвідом, а також
рекомендується в літературі. В протилежному випадку втрати часу на з¢єднання непропорційно зростають, особливо при низькій
якості зв¢язку в мережі, що характерно для більшості телефонних ліній.
Ще один
шлях для зменшення втрат часу можна застосувати в випадку наявності на сайті
декількох невеликих за розмірами блоків інформації, що потребують логічного
розподілу на декілька сторінок, доступ до яких необхідно проводити за допомогою
різних пунктів меню. В цьому випадку можливо об¢єднати ці блоки інформації в одну сторінку, розділену на
частини за допомогою внутрішніх посилань ( якорів ), або за допомогою декількох
таблиць з різними значеннями параметра id та стилем display, що дорівнює none.
Стиль display відповідає за відображення елемента на екрані. Доступ до
необхідних блоків інформації можливо проводити за допомогою внутрішніх
посилань, або присвоюючи необхідній таблиці стиль display, що дорівнює block.
Вказати таблицю можливо за допомогою її ідентифікатора - id.
Для
зменшення втрат часу на виконання серверної частини сайту рекомендується будувати сайт з використанням тільки
клієнтських технологій програмування. Особливо це стосується основної сторінки
сайту, яка завантажується першою. В багатьох випадках застосування на першій
сторінці серверних технологій пояснюється реєстрацією відвідувачів сайту, але
така інформація фіксується Web – сервером і є доступною для Web -
адміністратора. В якості ще однієї альтернативи можливо запропонувати зовнішній
для сайту лічильник відвідувань. Відзначимо, що широке застосування серверних
технологій призводить до зменшення рівня безпеки Web – сервера з точки зору
реалізації атаки на відмову.
Розглянемо
втрати часу на інтерпретацію браузером сторінки сайту та відображення її на екрані. По специфікації
інтерпретація сторінки проводиться браузером послідовно зверху в низ. Але для
найбільш розповсюдженого браузера Microsoft Internet Explorer послідовна
інтерпретація та відображення мають місце тільки для тегів HTML. В випадку
використання на сторінці скриптових мов програмування, аплетів або Flash
об’єктів вказана послідовність порушується.
Це яскраво видно при перегляді сторінок сайтів в верхній частині яких є анімація, що в
багатьох випадках реалізована за допомогою викликів рекурсивних функцій. В таких випадках браузер не породжує новий
обчислювальний процес. Анімаційні обчислення проводяться в тому ж потоці
обчислень в якому проходить завантаження сторінки. Відбувається різке
навантаження на центральний процесор комп’ютера. Як показує досвід при
розміщенні в верхній частині сторінки трьох анімаційних об’єктів час її
відображення на екрані може зрости в 2-5 рази. Положення ускладнюється тим, що
для браузера Microsoft Internet Explorer
почати запуск анімації при здійсненні події
“Завершення завантаження сторінки” не вдається. По вказаним причинам рекомендується обмежити
кількість анімаційних ефектів на сторінці двома, затримати виконання анімації
на час достатній для завантаження всієї сторінки та проводити анімацію в
окремих обчислювальних потоках. Наприклад, затримати час виконання
анімації можливо за рахунок вставки в
анімаційну функцію animhead наступного
програмного коду:
time=0;
if (time==0)
setTimeout('anim()',7000);
else
setTimeout('anim()',100);
time=1;
Вказаний програмний код написаний на мові JavaScript і затримує виконання
анімації на 7 секунд, при виконанні анімації через 0,1 секунди.
6.4.
Адаптація сайту до клієнтського програмного забезпечення.
Адаптація сайту до клієнтського програмного забезпечення означає адаптацію
до параметрів екрану комп’ютера, типу та настройок браузера та операційної
системи користувача.
Для
проведення адаптації сайту до характеристик екрану необхідно в першу чергу його
пристосувати до перегляду на екранах з
різною кольоровою гамою та різною дозволяючою спроможністю. Хоча сучасні екрани як правило здатні
передавати більше 1500000 кольорів, але відображатись ці кольори можуть по
різному. По цій причині рекомендується на сайту використовувати так звані
“безпечні кольори”. Кількість цих кольорів 256 і вони гарантовано однаково
відображаються на всіх екранах.
Адаптацію
сайту до дозволяючої спроможності екрану провести більш складно. Погано адаптований сайт або займає лівій
верхній кут екрану, зоставляючи справа і знизу пусті місця, або далеко
виходить за межі екрану. По цим причинам
страждає дизайн сайту, крім того
ускладнюється навігація по сайту. Найпростішим методами адаптації є
оформлення сторінки сайту в вигляді таблиці, вирівняної по центру сторінки. В
випадку використання в заголовку малюнку має сенс розділити його на дві
частини. Першу частину, яка містить інформаційну частину малюнку вставити за
допомогою тегу <img> в рядок або комірку таблиці. Іншу, фонову частину
вставити як фоновий малюнок рядка або комірки таблиці. Це дозолить автоматично
розмножувати фонову частину малюнку в залежності від ширини сторінки.
Відзначимо, що інформаційна частина малюнку повинна коректно відображатись на
невеликих екранах, для цього її ширина повинна бути в межах 100 – 200 пікселів.
Ширина фонової частини малюнка повинна бути в межах 15-25 пікселів. Таким чином
заголовок сайту буде коректно виглядати на всіх екранах, а сумарний розмір його
графічних файлів буде становити 15 – 20 кілобайт. Пристосованість текстової
частини сайту до дозволяючої спроможності екрану можна здійснити шляхом
встановлення коефіцієнта пропорційності між розміром шрифту та дозволяючою
спроможністю екрану.
Для
коректного відображення сайту різними браузерами слід використовувати при його
розробці тільки стандартні теги HTML, а також не використовуючи ті теги, які не
сприймаються ведучими браузерами. Так, наприклад не рекомендується
використовувати стандартний тег шару <div>,
який некоректно сприймається браузером Netscape Navigator.
Адаптацію
сторінки до настройок браузера можливо проводити шляхом врахування розмірів
вікна браузера та встановлених клієнтом розмірів тексту. Погана адаптація до
вказаних настройок може негативно позначитися на дизайні сторінок сайту на яких
важливим є взаємне розміщення графічного та текстового матеріалу. Негативний вплив відбувається завдяки
переходу малюнків в не передбачені для них рядки. Щоб цього не сталось, можливо
за допомогою тегу <nobr> заборонити розрив найдовшого рядка на сторінці,
або взагалі заборонити зміну користувачем розмірів вікна браузера. В такому
випадку рекомендується відкрити вікно браузера на весь екран. Це можна зробити
обчисливши ширину ( w ) та висоту ( h
) екрану. Після цього слід сполучити
ліві верхні кути вікна браузера та
екрану та перерисувати вікно браузера відповідно до розмірів екрану.
Відповідний програмний код на мові програмування JavaScript
має вигляд:
h=window.screen.height; w=window.screen.width;
window.moveTo(0,0); window.resizeTo(w,h);
При
необхідності заборони користувачем розмірів тексту сайту можливо
встановити цей розмір за допомогою стилів. Наприклад:
<font
style="font-size: 14px;">приклад</font>.
Розміри
букв слова приклад практично завжди будуть 14 пікселів.
6.5.
Контрольні запитання
1.
Як провести
оцінку ефективності сайту?
2.
Шляхи
популяризації сайту.
3.
Назвіть
Інтернет – орієнтовані методи підвищення ефективності сайту?
4.
Перерахуйте
типові правила реєстрації сайту в пошукових системах.
5.
Як використати
тег <meta> для підвищення
ефективності сайту7
6.
Що таке банер?
7.
Як провести
оптимізацію структури сайту?
8.
Як приблизно
розрахувати проміжку часу який проходить від подачі клієнтом запиту на перегляд
сайту до його відображення на екрані?
9.
Назвіть типові
методи оптимізації графіки на сайті.
10. Як адаптувати сайт до клієнтського програмного
забезпечення?
ЛАБОРАТОРНИЙ ПРАКТИКУМ
Лабораторна робота №1 Використання ресурсів мережі Інтернет за допомогою браузеру Microsoft Internet Explorer
Мета роботи: опанувати основні прийоми роботи з
браузером Microsoft Internet Explorer.
Хід
роботи:
1.
Відкрити вікно браузера Microsoft Internet Explorer.
2.
Використавши команди браузера "Справка
–> О программе"
визначити версію браузера.
3.
Налагодити інтерфейс браузера. Для цього
можливо використовувати контекстне меню рядка меню або панелі інструментів
браузера (рис.1) та команду "Настройка" контекстного меню. Виконання
даної команди призводить до появи вікна настройки панелі інструментів браузера
(рис.2).
Рис.1 Основні
компоненти інтерфейсу браузера Microsoft Internet Explorer
Рис.2 Вікно настройки панелі інструментів браузера.
4.
Використавши команди "Сервис->Свойства обозревателя" відкрити вікно "Свойства обозревателя".
Перейти на вкладку "Подключения". За допомогою технічного персоналу
встановити з’єднання браузера з мережею Інтернет.
5.
Відвідати Web-сайти Кабінету міністрів
України (http://www.kmu.ua),
Верховної Ради України (http://www.rada.gov.ua),
пошукових систем Мeta (http://www.meta.ua) та Google (http://www.google.com.ua). Для
цього слід ввести в адресному рядку відповідну адресу. Відзначимо,
що вводити http:// необов’язково.
6. За
допомогою команди "Файл"->"Создать"->"Окно"
створити нове вікно браузера та відкрити в ньому сайт
конституційного суду України (http://www.ccu.gov.ua/).
7.
Ознайомитись з можливостями команди
"Вид"->"Кодировка". Після цього
встановити автоматичний вибір браузером кодування Web-сторінки.
8.
Ознайомитись з можливостями команди
"Вид"->"Размер шрифта". Встановити
найбільш зручний для вас розмір шрифту.
9.
Ще раз відвідати згадані сайти за
допомогою кнопок "Назад" та "Вперед".
10.
Ознайомитись з призначенням кнопок
"Обновить", "Домой" та "Стоп".
11.
Використавши кнопку "Избранное"
записати адреси відвіданих сайтів в теку вибраних адрес.
12.
Використавши кнопку "Журнал"
здійснити навігацію по сайтам, що вже були відвідані за допомогою даного
браузера.
13.
Використавши команди "Сервис->Свойства обозревателя" відкрити вікно "Свойства обозревателя".
Перейти на вкладку "Общие". Встановити параметри показані на рис. 3. Це
означає, що браузер буде відкриватись з порожньої сторінки, а адреси
переглянутих сторінок будуть зберігатись 20 днів.
Рис. 3 Настройка
загальних параметрів функціонування браузера
14.
Використавши вкладки
"Безопасность" та "Конфединциальность" вікна "Свойства обозревателя",
ознайомитись з параметрами, що визначають безпечний перегляд різних Web-сайтів.
15.
У вікні вікна "Свойства обозревателя"
перейти на вкладку "Содержание" та натиснути кнопку
"Включить" в полі "Ограничения доступа". За допомогою
нового вікна настройки "Ограничения доступа" (рис.4) обмежити доступ
до інформації отриманої з мережі Інтернет.
Рис. 4
Визначення обмежень доступу до інформації, що відображається в браузері.
16.
У
вікні вікна "Свойства обозревателя" перейти на вкладку
"Дополнительно". Знайти розділ "Мультимедиа" (рис.5).
Відмінити відображення рисунків в вікні браузера. Відвідати декілька вже
переглянутих сайтів. Впевнитись в тому, що час потрібний для відображення сайту
в вікні браузера зменшився.
17.
За допомогою контекстного меню в місці
призначеному для рисунку відобразити його на екрані.
18.
Відновити відображення рисунків.
19.
Освоїти можливості збереження Web-сайтів. Для цього можливо використати
команди меню "Файл"->"Сохранить как…" Ознайомитись з
різними типами файлів, що можуть бути використані при збереженні інформації із
Інтернет.
20.
Освоїти можливості збереження фрагментів Web
сайтів.
–
Рисунок можливо зберегти за допомогою
команди "Сохранить рисунок как…" відповідного контекстного меню.
–
Текст зберігаємо за допомогою копіювання
виділеного фрагменту в будь-який текстовий редактор.
21.
Записати на свій комп’ютер файл розміщений на
FTP-сервері. Для цього:
–
Записати в адресному рядку URL
визначеного FTP-серверу. Наприклад ftp://ftp.microsoft.com.
–
Для збереження файлу необхідно викликати
контекстне меню відповідного елемента у вікні браузера та вибрати команду
"Копировать в папку".
Завдання для самостійної роботи
1.
За допомогою пошукової системи META
знайти адресу сайту Міністерства освіти та науки України та записати її в папку
"Избранное" під назвою МОН України.
2.
Визначити яке кодування використовується
на сайті МОН України.
3.
Встановити сайт пошукової системи
META в якості домашньої сторінки.
4.
Відключити можливість показу відео
зображень на сайтах.
5.
Відключити можливість показу відео
зображень на сайтах.
6.
Відключити можливість програвання звуку
на сайтах.
7.
Відновити програвання відео та звуку.
8.
Оформити звіт.
Питання для самоперевірки
1.
Яке призначення кнопки
"Домой"?
2.
Як зберегти тільки текстову частину
Web-сторінки?
3.
Як повністю зберегти Web-сторінку?
4.
Як зберегти рисунок на Web-сторінці?
5.
Як зберегти фрагмент тексту на
Web-сторінці?
6.
Як відмінити можливість відображення
рисунків у вікні браузера?
7.
Назвіть основні параметри безпеки
браузера?
8.
Як заборонити доступ до певної
інформації, розміщеної в мережі Інтернет?
9.
Як змінити кодування Web-сторінки?
10.
Як реалізувати доступ до FTP-серверу за
допомогою браузеру?
Лабораторна робота №2 Створення текстової HTML-сторінки
Мета роботи: освоїти основні прийоми роботи створення
HTML-сторінки за допомогою текстового редактору "Блокнот" та методику
використання тегів форматування тексту та HTML-документу.
Хід
роботи:
1.
Підготовчі роботи:
–
Створюємо теку де будуть розміщуватись
HTML-файли. Наприклад на диску Е створюємо теку
HTML.
–
Встановлюємо настройки для відображення
розширень файлів. Для цього заходимо в нашу теку та вибираємо команди меню
"Сервис" –> "Свойства папки". У вікні "Свойства
папки" переходимо на вкладку "Вид" та знімаємо перемикач у рядку
"Скрывать расширения для зарегистрированных типов файлов" (рис.1).
Рис. 1
Настройка папки для відображень розширення файлів
2.
В теці HTML створюємо текстовий документ
з назвою text.html. При цьому повинно з’явитись вікно запиту зміни розширення
файлу (рис.2). В цьому вікні натискаємо на кнопку "Да". Іконка, файлу
text.html зміниться на таку, що відповідає браузеру.
Рис. 2. Вікно
запиту зміни розширення файлу
3.
Відкриваємо файл text.html за допомогою
браузеру (рис.3). Відзначимо, що на цей момент файл порожній.
Рис. 3
Відображення порожнього файлу text.html у вікно
браузера
4.
Для запису інформації у файл text.html
вибираємо наступні меню браузера, "Вид" –> "Просмотр
HTML-кода". У відповідь на це
відкривається вікно текстового редактора "Блокнот" з файлом
text.html.
5.
В редакторі "Блокнот"
записуємо HTML-код, що визначає основні розділи HTML-документу, встановлює
кодування Windows-1251 та встановлює назву документу
"Лабораторна робота №2". Відзначимо, що назва HTML-документу
відображається в рядку заголовку браузера.
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=windows-1251">
<title> Лабораторна робота
№2</title>
</head>
<body>
</body>
</html>
6.
Зберігаємо в блокноті записаний текст,
переходимо в браузер та за допомогою кнопки "Обновить" оновлюємо
сторінку text.html (рис.4).
Рис. 4 Відображення
назви HTML-документу
7.
Для визначення тексту напівжирними
символами, курсивом та підкресленими символами в тілі HTML-документу записуємо:
<body>
<b>напівжирні
символи</b>,
<i>курсив</i>,
<u>підкреслені
символами</u>,
<b><i><u>комбінація</u></i></b>
</body>
Зберігаємо
документ у "Блокноті" та оновлюємо його в браузері (рис. 5)
Рис. 5
Форматування тексту
8.
Додамо в HTML-документ формулу X2+X4 = Yi. Для цього в кінці тіла документу
допишемо:
…
<br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>
</body>
Відзначимо, що тег <br> використано для
запису формули з нового рядка.
9.
Додамо в наш документ HTML-код для
відображення тексту у вигляді заголовків:
…
<h1>Заголовок
1</h1>
<h2 align="center">Заголовок
2. Вирівнювання "по центру"</h2>
<h3 align="right">Заголовок 3.
Вирівнювання "по правому краю" </h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
Фрагмент вікна браузера з текстом у
вигляді заголовків показаний на рис.6.
10.
Додамо в документ три фрагменти тексту,
червоного кольору. Перший фрагмент запишемо шрифтом "Arial", розміром 7, другий шрифтом
"GothicG" розміром 3, "Verdana"
розміром 1. Для цього додамо наступний HTML-код:
…
<br><font
face="Arial" size="7" color="Red">Перший
фрагмент
тексту</font>
<br><font
face="GothicG" size="3" color="Red">Другий
фрагмент
тексту</font>
<br><font
face="Verdana" size="1" color="Red">Третій
фрагмент
тексту</font>
</body>
Відповідний фрагмент вікна браузера
показаний на рис. 7.
Рис. 6.
Відображення заголовків
Рис. 7.
Використання тегу <font>
11.
За допомогою тегів абзаців та ліній
розділимо наш HTML-документ на окремі частини. До того ж визначимо, що колір
фону сторінки сірий, а колір тексту коричневий. Крім того встановимо, що
горизонтальні відступи від об’єктів HTML-сторінки до границь вікна браузера
дорівнюють 3, а вертикальні 2 пікселі.
Для цього змінимо HTML-код наступним чином:
<body
leftmargin=2 topmargin=1 bgcolor="Silver" text="Maroon">
<p align="right">
<b>напівжирні символи</b>, <i>курсив</i>, <u>підкреслені
символами</u>,
<b><i><u>комбінація</u></i></b>
<br>X<sup>2</sup>+X<sup>4</sup>=Y<sub>i</sub>
</p>
<hr width="100%"
size="2" noshade>
<h1>Заголовок 1</h1>
<h2
align="center">Заголовок 2. Вирівнювання "по
центру"</h2>
<h3
align="right">Заголовок 3. Вирівнювання "по правому
краю" </h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
<hr width="70%"
size="3" noshade>
<p align="center">
<br><font
face="Arial" size="7" color="Red">Перший
фрагмент
тексту</font>
<br><font
face="GothicG" size="3" color="Red">Другий
фрагмент
тексту</font>
<br><font
face="Verdana" size="1" color="Red">Третій
фрагмент
тексту</font>
</p>
</body>
Відображення даної HTML-сторінки у вікні
браузера показане на рис. 8.
Рис. 8.
Використання форматування текстової частини HTML-документу
Завдання для самостійної роботи
1. Оформити у вигляді
HTML-документу титульну сторінку курсової роботи з вказаної викладачем
навчальної дисципліни.
2. Оформити звіт.
Питання для самоперевірки
1.
Як визначити розмір вертикального
відступу від тексту до границі браузера?
2.
Як визначити розмір горизонтального
відступу від тексту до границі браузера?
3.
Як визначити колір тексту для всього
документу?
4.
Як визначити колір фрагменту тексту?
5.
Як визначити шрифт, яким текст буде
відображуватись у вікні браузера?
6.
Як записати тег лінії з товщиною в 5
пікселів?
7.
Чи можливо задати лінію товщиною в 200
пікселів?
8.
Як записується тег заголовку 5 розміру з
вирівнюванням по центру?
9.
Як записується тег абзацу з
вирівнюванням по лівому краю?
10.
Яким чином задати обов’язкове відображення
фрагменту тексту з нового рядка?
Лабораторна робота №3 Використання рисунків, відео та звуку на HTML-сторінці
Мета роботи: освоїти методику використання рисунків
на HTML-сторінці.
Хід
роботи
1.
Копіюємо в теку HTML видані викладачем
графічні файли 1.jpg та 1a.gif.
2.
В теці HTML створюємо текстовий документ
з назвою picture.html, відкриваємо його за допомогою
браузеру та переходимо до редагування HTML-коду.
3.
Створимо заготовку для HTML-коду
Web-сторінки:
<html>
<head>
<title>Рисунки</title>
<META
http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body>
</body>
</html>
4.
Додамо HTML-код для відображення на
сторінці 4 однакових рисунків з різними розмірами:
<body>
<h2
align=center>Зміна розмірів рисунків</h2>
<img
src="1.jpg">
<img
src="1.jpg" width="260" height="220">
<img
src="1.jpg" width="130" height="110">
<img
src="1.jpg" width="300" height="250">
</body>
</html>
5.
Перегляд сторінки в браузері повинен
відповідати рис.3.1
Рис. 3.1.
Рисунки з різними розмірами
6.
Розглянемо можливість використання
границь навколо рисунків. Для цього додамо наступний HTML-код:
...
<h2 align=center>Границі
рисунків</h2>
<img src="1.jpg"
width="130" height="110" >
<img src="1.jpg"
width="130" height="110" border="1">
<img src="1.jpg"
width="130" height="110" border="3">
</body>
Відповідне
відображення у вікні браузера показане на рис. 3.2.
Рис. 3.2 Використання границь рисунків
7.
Розглянемо можливість визначення
альтернативного тексту в тегах рисунків. Для цього модифікуємо останній
фрагмент HTML-коду:
...
<img src="1.jpg"
width="130" height="110" alt="Рисунок. Границь
нема">
<img src="1.jpg"
width="130" height="110" border="1"
alt="Рисунок. Товщина границь 1 піксель">
<img src="1.jpg"
width="130" height="110" border="3"
alt="Рисунок. Товщина границь 3 пікселі">
</body>
Відключимо
показ рисунків у вікні браузеру та проведемо оновлення нашої сторінки
(рис.3.3).
Рис. 3.3 Відображення альтернативного
тексту при перегляді сайту з відключеним показом рисунків
8.
Відновимо показ рисунків в браузері та
проведемо оновлення нашої HTML-сторінки.
9.
Розглянемо можливості вертикального
вирівнювання рисунків відносно тексту.
- Додамо HTML-код для визначення тексту та рисунків
вирівняних відносно верхньої межі:
...
<h2
align=center>Вирівнювання рисунків відносно тексту </h2>
<h3 align=center>Вирівнювання
рисунків відносно верхнього межі рядка </h3>
<p>
<img
src="1.jpg" width="130" height="110"
border="3" alt="Вага">
<img
src="1.jpg" width="65" height="55"
border="3" alt="Вага" align="top">
По верхній межі найвищого елементу рядка
</p>
<p>
<img
src="1.jpg" width="130" height="110"
border="3" alt="Вага">
<img src="1.jpg"
width="65" height="55" border="3" alt="Вага"
align="texttop">
По верхній межі
найвищого текстового елементу рядка
</p>
</body>
Відповідне вікно браузера показане на
рис. 3.4.
Рис. 3.4 Вирівнювання рисунків відносно верхньої межі
- Додамо HTML-код для визначення тексту та рисунків
вирівняних відносно середини рядка:
...
<h3> Вирівнювання рисунків
відносно середини рядка </h3>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага">
<img src="1.jpg"
width="65" height="55" border="3"
alt="Вага" align="middle">
По базовій лінії рядка
</p>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага">
<img src="1.jpg"
width="65" height="55" border="3"
alt="Вага" align="absmiddle">
По середині рядка
</p>
</body>
Відповідне вікно браузера показане на
рис. 3.5.
Рис. 3.5 Вирівнювання рисунків відносно середини рядка
- Додамо HTML-код для визначення тексту та рисунків
вирівняних відносно нижньої межі:
...
<h3 align=center> Вирівнювання
рисунків відносно нижнього краю рядка </h3>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага">
<img src="1.jpg"
width="65" height="55" border="3"
alt="Вага" align="bottom">
Вирівнювання рисунків по базовій лінії
рядка
</p>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага">
<img src="1.jpg"
width="65" height="55" border="3"
alt="Вага" align="absbottom">
Вирівнювання рисунків по нижній межі
рядка
</p>
</body>
Відповідне вікно браузера показане на
рис. 3.6.
Рис. 3.6. Вирівнювання рисунків відносно нижньої межі рядка
10.
Розглянемо можливість визначення "плаваючих"
рисунків, тобто рисунків вирівняних по лівому або правому краю рядка. Для цього
додамо HTML-код:
...
<h3
align=center>"Плаваючі" рисунки</h3>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага" align="left">
По лівому краю рядка
</p>
<br><br><br><br><br>
<p>
<img src="1.jpg"
width="130" height="110" border="3"
alt="Вага" align="right">
По правому краю рядка
</p>
</body>
Відповідне вікно браузера показане на
рис. 3.7.
Рис. 3.7. "Плаваючі" рисунки
11.
Розглянемо можливості відокремлення тексту від
рисунків за рахунок визначення горизонтальних та ввертикальних відступів. Для
цього додамо HTML-код:
...
<h2
align="center">Відокремлення рисунків від тексту</h2>
<img src="1.jpg"
width="130" height="110" border="3"
hspace="20" vspace="20" align="top"
alt="Вага">
Відстань до тексту 20 пікселів
<br>
<img src="1.jpg"
width="130" height="110" border="3"
hspace="1" vspace="1" align="top"
alt="Вага">
Відстань до тексту 1 піксель
</body>
Відповідне вікно браузера показане на
рис. 3.8.
Рис. 3.8 Відокремлення
тексту від рисунків за рахунок відступів
12.
Додамо HTML-код для визначення альтернативного
зображення:
...
<h2>Використання
мініатюр</h2>
<img src="1.jpg"
lowsrc="1a.gif" width="130" height="110"
border="3" alt="Вага" >
</body>
13.
Розглянемо можливість використаня на сайтах
відео зображень. Для цього необхідно в папку HTML вставити файл з відео,
наприклад CLOCK.AVI та додати в файл picture.html HTML-код:
...
<h2>Використання
відеозображень</h2>
<img width="100"
height="100" border="2" dynsrc="CLOCK.AVI">
</body>
Моментальний
знімок перегляду відео з файлу показано на рис. 3.9.
Рис. 3.9
Перегляд відео у вікні браузера
14.
Модифікуємо HTML-код для того прокрутки відео
ролика CLOCK.AVI два рази:
<img width="100"
height="100" border="2" dynsrc="CLOCK.AVI"
loop="2">
Провести оновлення вікна браузера.
15.
Модифікуємо HTML-код для того прокрутки
відео ролика CLOCK.AVI два
рази, при цьому показ починався після наведення миші на рисунок:
<img width="100"
height="100" border="2" dynsrc="CLOCK.AVI"
loop="2" start="mouseover">
Провести оновлення вікна браузера.
16.
Модифікуємо HTML-код для того, щоб відео ролик CLOCK.AVI прокручувався
постійно:
<img width="100"
height="100" border="2" dynsrc="CLOCK.AVI"
loop="-1">
Провести оновлення вікна браузера.
17.
Розглянемо можливість використаня на сайтах
звуку. Для цього необхідно в папку HTML вставити звуковий файл, наприклад START.WAV
та додати в файл picture.html HTML-код:
...
<embed src="START.WAV"
hidden="true" autostart="true" loop="True">
</body>
Провести оновлення вікна браузера.
Завдання для самостійної роботи
1. Оформити у вигляді
HTML-документу фотоальбом з темитики вказаної викладачем.
2. Оформити звіт.
Питання для самоперевірки
1.
Як визначити розмір вертикального
відступу від тексту до границі рисунку?
2.
Як визначити розмір горизонтального
відступу від тексту до границі рисунку?
3.
В чому полягає специфіка плаваючого
вирівнювання рисунків?
4.
Навіщо потрібно записувати
альтернативний текст при визначенні рисунків?
5.
Навіщо потрібні мініатюри при визначенні
рисунків?
6.
Як вирівняти рисунок по верхньому краю
рядка?
7.
В чому полягає різниця між вирівнюванням
рисунку bottom та absbottom?
8.
В чому полягає різниця між вирівнюванням
рисунку absmiddle та middle?
9.
В чому полягає різниця між вирівнюванням
рисунку texttop та top?
10.
Як визначити товщину границі рисунка?
Лабораторна робота № 4 Створення гіперпосилань
Мета
роботи: навчитись
створювати гіперпосилання
Хід
роботи:
1. Скопіювати в теку HTML видані викладачем графічні
файли Eifel_small.jpg, Eifel.jpg,
Flower.jpg.
2. В теці
HTML створити текстовий документ з назвою Eifel.html,
та записати в ньому такий HTML-код:
<html>
<head>
<title>Ейфелева
вежа</title>
</head>
<body>
<img
src="Eifel.jpg" height="300" align="left">
</body>
</html>
3. В теці
HTML створити текстовий документ з назвою Link.html та
записати в ньому такий HTML-код:
<html>
<head><title>Створення
гіперпосилань</title></head>
<body>
У Франції є дуже багато
визначних пам’яток.Спочатку ми
відвідаємо Ейфелеву вежу.
</body>
</html>
4.
Визначимо в документі Link.html текстове гіперпосилання на документ Eifel.html, який розміщений в одному каталозі
з файлом Link.html. Для цього модифікуємо HTML-код та
переглянемо документ (рис.1):
...
У Франції є дуже багато визначних пам’яток.
Спочатку ми відвідаємо <a
href="Eifel.html">Ейфелеву вежу</a>
</body>
Гіперпосилання
буде завантажувати файл Eifel.html в те ж саме вікно браузера. Результат
виконання гіперпосилання показаний на рис. 2.
Рис. 1. Відображення
текстового гіперпосилання у вікні браузера
Рис. 2. Результат, отриманий при реалізації
текстового гіперпосилання
5. Визначимо
в документі Link.html
графічне гіперпосилання
теж на документ Eifel.html. Додамо для цього відповідний
HTML-код та переглянемо документ Link.html
(рис.3):
...
<a
href="Eifel.html"><img src="Eifel_small.jpg"></a>
</body>
Рис. 3. Відображення графічного гіперпосилання
у вікні браузера
Результат реалізації даного графічного
гіперпосилання не повинен відрізнятись від результату тестового гіперпосилання,
визначеного в п. 4 (рис.2).
6. Використання
відносної адресації в гіперпосиланнях.
6.1. Створимо в теці HTML теку A. В теці А створимо текстовий
документ з назвою Zamok.html.
6.2. В файлі Zamok.html визначимо наступний HTML-код:
<html>
<head>
<title>Замок</title>
</head>
<body>
<img
src="Zamok.jpg" height="300" align="left">
</body>
</html>
Переглянемо документ Zamok.html, рис.4.
Рис.4. HTML-документ Zamok.html
6.3.
Визначимо в документі Link.html текстове та графічне гіперпосилання на
документ Zamok.html:
...
<a
href="A/Zamok.html"><center>Замок</center></a>
<br><center><a href="A/Zamok.html"><img
src="Flower.jpg" width="150" height="150"></a></center>
</body>
Переглянемо оновлений документ Link.html, рис.5.
Рис.5. Відображення оновленого документу Link.html
Реалізація визначених нами відносних посилань
на документ Zamok.html показана
на рис.4.
6.4. На одному рівні з текою HTML створимо теку В. Наприклад, якщо тека HTML
знаходиться в корені диску E, то і теку В створимо в корені диску E. Скопіюємо файл Zamok.html в теку B.
В документі Link.html запишемо текстове гіперпосилання на документ Zamok.html, що знаходиться в теці В:
...
<br><a href="../B/Zamok.html">На документ Zamok.html, що знаходиться в теці
В</a>
</body>
Реалізація цього посилання буде відрізнятись
від представленого на рис.4 тільки тим, що в адресному рядку браузера буде
записано інший шлях - E:\B\Zamok.html.
7.
Використання абсолютної адресації в
гіперпосиланнях.
7.1.
Використовуючи абсолютну адресацію
додамо в документі Link.html текстове гіперпосилання на HTML-документ Zamok.html, що знаходиться в теці B, тобто за адресою E:\B\Zamok.html:
...
<br><a href="="E://B/Zamok.html">На документ Zamok.html, що знаходиться в теці В</a>
</body>
Реалізація цього посилання не повинна
відрізнятися від реалізації посилання, визначеного в п.6.4.
7.2. Визначимо в документі Link.html текстове та графічне гіперпосилання на сайт, що
знаходиться за адресою http//narod.yandex.ru:
...
<br><a href="http//narod.yandex.ru">Замок</a>
<br><a href="http//narod.yandex.ru"><img
src="Flower.jpg"></a>
</body>
Реалізація кожного з цих
посилань показана на рис.6.
Рис. 6.
Перехід по гіперпосиланню на сайт за адресою http//narod.yandex.ru
8. Використання
гіперпосилань в середині HTML-документу.
8.1. В теці HTML створимо текстовий документ з назвою Recepti.html та запишемо в ньому такий HTML-код:
<html>
<head><title>Створення
внутрішнього гіперпосилання</title></head>
<body>
<h1>Рецепти</h1>
<h3>1.
Кошики з кавовим кремом </h3>
<h3>2. Тістечка
"Наполеон"</h3>
<h3>3. Яблука в заварному тісті
</h3>
<h2
align="center">1. Кошики з кавовим кремом </h2>
<h3>Тісто:</h3>
<p
align="justify">
<h3>Крем:</h3>
<p
align="justify">1 ст. ложка борошна, 2 жовтки,
...
<h2
align="center">3. Яблука в заварному тісті </h2>
<h3>Тісто:</h3>
<p
align="justify">
<h3>Начинка:</h3>
<p
align="justify">
<h3>Приготування
</h3>
<p
align="justify">До гарячого розтопленого масла долити гарячої води
і закип'ятити...</p>
</body>
</html>
8.2. Створюємо в документі Recepti.html посилання на текст третього пункту
документу – "Яблука в заварному тісті". Для цього:
-
Розмістимо безпосередньо перед третім пунктом "якір" з ім’ям apple:
...
<a name= apple> </a><h2 align="center">3. Яблука в заварному тісті
</h2>
...
-
Модифікуємо HTML-код файлу Recepti.html для визначеня самого внутрішнього посилання.
При цьому в параметрі href вказуємо ім’я
"якоря" з префіксом #:
...
<h3><a href="#apple">3. Яблука в заварному тісті</a> </h3>
...
Відображення документу Recepti.html відразу
після завантаження та після реалізації визначеного нами внутрішнього посилання
показані на рис.7 та рис. 8.
Рис. 7. Відображення документу Recepti.html відразу
після завантаження
Рис. 8. Відображення документу Recepti.html після
реалізації внутрішнього посилання
11.
Визначимо в документі Link.html текстове гіперпосилання на рисунок Flower.jpg, що знаходиться в папці HTML:
...
<br><a href="Flower.jpg">Квіти</a>
</body>
Реалізація даного посилання показана на рис.9.
Рис. 9. Перехід по текстовому гіперпосиланню на
рисунок Flower.jpg
12.
Визначимо
в документі Link.html текстове гіперпосилання на адресу електронної
пошти:
...
<br><a href="mailto:pochta@ukr.net ">Пошта</a>
</body>
Реалізація даного посилання в
випадку використаня в якості поштового клієнту програми "Outlook Express" показана на рис. 10.
Рис. 10. Реалізація гіперпосилання на адресу
електронної пошти pochta@ukr.net
Завдання для самостійної роботи
1. Створити три теки з назвами A,B,C. В теці А створити HTML-документ 1.html, в теці В - 2.html, а в теці С - 3.html. В кожному із цих документів визначити
гіперпосилання на два інших документи як з абсолютною, так із відносною
адресацією. Крім того документ 1.html повинен завжди відкриватись в новому
вікні браузеру.
2. Оформити звіт.
Питання для самоперевірки
1.
Як відкрити гіперпосилання в новому
вікні браузеру?
2.
Як визначити якір в HTML-документі?
3.
Як використовується в гіперпосиланнях
абсолютна адресація?
4.
Як використовується в гіперпосиланнях
відносна адресація?
5.
Як відкрити гіперпосилання в тому ж
самому вікні браузера?
6.
Правила запису текстових гіперпосилань.
7.
Правила запису графічних гіперпосилань.
8.
Як визначити гіперпосилання на рисунок?
9.
Як визначити гіперпосилання в середині
HTML-документу?
10.
Як записати гіперпосилання на адресу електронної
пошти?
Лабораторна робота №5 Створення списків
Мета
роботи: опанувати
основні прийоми роботи зі створення списків
Хід
роботи:
1.
Скопіювати в теку HTML виданий
викладачем графічний файл star.jpg.
2.
В теці HTML створити текстовий документ
з назвою List.html, відкрити його за допомогою браузеру та перейти до
редагування HTML-коду
3.
Створимо маркірований список, елементами
якого будуть місяці року. Для цього в файлі List.html записуємо HTML-код:
<html>
<head>
<title>Створення списків</title>
</head>
<body>
<ul>
<b>Місяці року:</b>
<li>Січень
<li>Лютий
<li>Березень
<li>Квітень
<li>Травень
<li>Червень
<li>Липень
<li>Серпень
<li>Вересень
<li>Жовтень
<li>Листопад
<li>Грудень
</ul>
</body>
</html>
Перегляд списку в браузері повинен
відповідати рис. 1.
Рис. 1. Відображення браузером маркірованого списку
4.
Розглянемо можливість зміни типу
маркеру. Необхідно відобразити маркери заповненими квадратиками для перших
чотирьох елементів списку, відобразити маркери незаповненими колами для других
чотирьох елементів списку та відобразити маркери заповненими колами для
останніх чотирьох елементів списку. Реалізуємо зміну типу маркерів за допомогою
параметра type тега <li>. Для цього модифікуємо код списку:
…
<ul>
<b>Місяці року:</b>
<li
type="square">Січень
<li
type="square">Лютий
<li
type="square">Березень
<li
type="square">Квітень
<li
type="circle">Травень
<li
type="circle">Червень
<li
type="circle">Липень
<li
type="circle">Серпень
<li type="disk">Вересень
<li
type="disk">Жовтень
<li
type="disk">Листопад
<li
type="disk">Грудень
</ul>
</body>
Переглянемо
цей маркірований список у браузері
(рис.2)
Рис.2. Відображення маркірованого списку, для елементів якого визначено
різні значення параметра type
5.
Створимо список з графічними маркерами.
При цьому можна обійтись без тегів <li>. Перед кожним елементом
списку необхідно вставити графічне зображення. Тоді елементи списку
відокремлюємо один від одного за допомогою тегу примусового переводу строки <br>.
Графічний файл star.jpg повинен знаходиться в тому ж самому каталозі, що і наш
файл List.jpg, тобто в папці HTML на диску E. Записуємо HTML-код:
…
<ul>
<b>Місяці року:</b><br><br>
<img src="star.jpg">Січень<br>
<img src="star.jpg">Лютий<br>
<img src="star.jpg">Березень<br>
<img src="star.jpg">Квітень<br>
<img src="star.jpg">Травень<br>
<img src="star.jpg">Червень<br>
<img src="star.jpg">Липень<br>
<img src="star.jpg">Серпень<br>
<img src="star.jpg">Вересень<br>
<img src="star.jpg">Жовтень<br>
<img src="star.jpg">Листопад<br>
<img src="star.jpg">Грудень
</ul>
</body>
Переглянемо
цей маркірований список у браузері
(рис.3)
6.
Створимо нумерований список. Реалізуємо
це за допомогою тегу - контейнеру <ol> </ol>. Елементами
нумерованого списку будуть знову місяці року. Записуємо відповідний
HTML-код та переглянемо цей нумерований список у браузері (рис.4) :
…
<ol>
<b>Перший квартал включає
наступні місяці року:</b>
<li>Січень
<li>Лютий
<li>Березень
</ol>
</body>
Рис.3. Відображення маркірованого списку з графічними
маркерами
6. Визначимо різні види нумерації
списку. Реалізуємо це за допомогою параметру type тегу <li>.
Записуємо HTML-код для вказаного списку та переглянемо його у браузері (рис.
5):
...
<ol>
<b>Квартали включають наступні місяці року:</b>
<li type="I">Січень, лютий, березень
<li
type="i">Квітень, травень, червень
<li type="A">Липень, серпень,
вересень
<li type="a">Жовтень, листопад,
грудень
</ol>
</body>
Рис. 4. Відображення
нумерованого списку
Рис.5.
Відображення нумерованого списку, для якого визначено різні види нумерації
списку
7. Визначимо нумерований список,
який складається з п’яти елементів. В цьому списку нумерація починається з
1995, та в третьому рядку списку початок
нумерації змінюється на 2003. Записуємо відповідний HTML-код :
…
<ol start="1995">
<li>
<li>
<li value="2003">
<li>
<li>
</ol>
</body>
Переглянемо цей нумерований список у браузері (рис.6)
Рис. 6. Відображення нумерованого списку, для якого визначено
заміну початку нумерації списку та
заміну нумерації пунктів в середині списку
8. Створимо список визначень. В
першій частині пункту списку запишемо термін, який визначає темперамент людини.
Реалізуємо це за допомогою тегу <dt>. А в другій частині пункту
списку запишемо пояснення, яке розкриває значення терміну. Це реалізуємо за допомогою тегу <dd>.
Записуємо HTML-код для такого списку визначень :
…
<dl>
<h3 align="center"> Класифікація типових
темпераментів людини, <br> яка заснована на поглядах Гіппократа
</h3>
<dt> Флегматик
<dd> Пасивний, дуже працездатний, повільно пристосовується;
<br> настрій стійкий, мало піддається зовнішньому впливу; <br>
млявість емоційних реакцій та повільність у вольовій діяльності
<br><br>
<dt> Сангвінік
<dd> Активний, енергійний, легко пристосовується; <br>
живість та рухливість емоційних реакцій, швидкість та сила вольових проявів
<br><br>
<dt> Холерик
<dd> Активний, дуже енергійний, наполегливий; <br>
поривчастість та сила емоційних реакцій, бурні вольові прояви <br>
<br>
<dt> Меланхолік
<dd> Пасивний, легко
стомлюється, важко пристосовується; <br> слабість вольових проявів
та перевага подавленого настрою, невпевненість в собі
</dl>
</body>
Переглянемо
цей список визначень у браузері (рис. 7)
Рис. 7. Відображення списку визначень, який
розкриває класифікацію темпераментів людини
9. Створимо вкладений список, який
показує супутники деяких планет. Розглянемо випадок, коли в кожен елемент
маркірованого списку вкладений свій нумерований список. Записуємо відповідний
HTML-код:
…
<ul>
<b>Супутники деяких планет</b>
<li>Земля
<ol>
<li>Луна
</ol>
<li>Марс
<ol>
<li>Фобос
<li>Деймос
</ol>
<li>Уран
<ol>
<li>Аріель
<li>Умбрі ель
<li>Тітанія
<li>Оберон
<li>Міранда
</ol>
<li>Нептун
<ol>
<li>Тритон
<li>Нереїда
</ol>
</ul>
</body>
Переглянемо цей вкладений список у браузері (рис. 8)
Рис. 8. Відображення вкладеного
списку, який показує супутники деяких планет
Завдання для самостійної роботи
1. Визначити список відповідно
зразка, показаного на рис.9.
Рис. 9.
Зразок списку
2. Оформити звіт.
Питання для
самоперевірки
1.
Як визначається нумерований список?
2.
Як визначається маркірований список?
3.
Як визначається список визначень?
4.
Як змінити тип маркеру в маркірованому
списку?
5.
Як змінити тип порядок нумерації в
нумерованому списку?
6.
Як визначити список з маркерами у
вигляді рисунків?
7.
Як почати нумерований список з
довільного номеру?
8.
Як визначаються вкладені списки?
9.
Навіщо використовуються списки?
10.
Як пронумерувати список за допомогою
прописних англійських літер?
Лабораторна робота №6 Створення таблиць
Мета
роботи: навчитись
створювати таблиці
Хід
роботи:
1.
Скопіювати в теку
HTML видані викладачем графічні файли Zamok.jpg та Tochka.jpg, Yellow.jpg.
2. В теці
HTML створити текстовий документ з назвою Table.html,
відкрити його за допомогою браузеру та перейти до редагування HTML-коду.
3. Створимо таблицю, яка
складається із двох рядків та трьох стовпців та містить текстову
інформацію. Структура таблиці показана
на рис.1.
|
11 |
12 |
13 |
|
21 |
22 |
23 |
Рис. 1. Таблиця, яку необхідно відобразити у вікні браузера
Записуємо відповідний HTML-код файлу Table.html з цієї таблицею (границі поки що невидимі) та переглянемо її у браузері
(рис. 2):
<html>
<head>
<title>Створення таблиць
</title>
</head>
<body>
<table>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</ table>
</body>
</html>
Рис. 2.
Відображення таблиці, що складається із двох рядків та трьох стовпців у
вікні браузера
4. Визначимо границі таблиці.
Реалізуємо це за допомогою параметра border. Колір границі задається параметром bordercolor="колір_границі". Для визначення таблиці із границями чорного кольору, товщина яких
дорівнює 3 пікселі, необхідно записати наступний код:
...
<table border="3" bordercolor="#000000" >
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</ table>
</body>
Переглянемо цю таблицю у браузері (рис. 3)
Рис. 3. Відображення таблиці із границями товщиною 3 пікселі у вікні
браузера
5. Визначимо фон таблиці.
Реалізуємо за допомогою параметру bgcolor =" колір_фону". Записуємо
HTML-код для таблиці із сірим кольором фону та переглянемо її у браузері (рис.
4):
…
<table border="3" bordercolor="#000000" bgcolor="#999999">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
</ table>
</body>
Рис. 4. Відображення таблиці із сірим кольором фону
6. Записуємо HTML-код для таблиці
із білим та сірим кольором фону для сусідніх комірок та переглянемо її у браузері (рис. 5):
…
<table border="3" bordercolor="#000000">
<tr>
<td
bgcolor="#ffffff">11</td>
<td
bgcolor="#999999">12</td>
<td
bgcolor="#ffffff">13</td>
</tr>
<tr>
<td
bgcolor="#999999">21</td>
<td
bgcolor="#ffffff">22</td>
<td
bgcolor="#999999">23</td>
</tr>
</ table>
</body>
Рис. 5. Відображення таблиці із білим та сірим
кольором фону для сусідніх комірок
7. Визначимо висоту рядків та
ширину стовпців. Створимо таблицю із рядками висотою 40 та стовбцями шириною
стовбців 60 пікселів. Ширина стовпців та висота рядків задається за допомогою
параметрів width та height відповідно. Записуємо HTML-код
для заданої таблиці та переглянемо її у браузері (рис. 6):
…
<table border="3" bordercolor="#000000">
<tr>
<td height = "40" width = "60" bgcolor = "#ffffff">11</td>
<td width = "60" bgcolor =
"#999999">12</td>
<td width = "60" bgcolor =
"#ffffff">13</td>
</tr>
<tr>
<td height = "40" width =
"60" bgcolor = "#999999">21</td>
<td width = "60" bgcolor =
"#ffffff">22</td>
<td width = "60" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Рис. 6. Відображення таблиці із висотою рядків 40 та
шириною стовпців 60 пікселів
8. Визначимо висоту та ширину для
всієї таблиці, тоді всі комірки (стовпці) та рядки поділять даний їм простір
порівну, якщо не задавати їм особисто цього просторe у відсотках чи пікселях. Записуємо HTML-код
для такої таблиці та переглянемо її у
браузері (рис. 7 ):
…
<table border="3"
bordercolor="#000000" bgcolor = "#999999" height = "200" width = "200">
<tr>
<td>11</td><td>12</td><td>13</td>
</tr><tr>
<td>21</td><td>22</td><td>23</td>
</tr>
</table>
</body>
Рис. 7. Відображення таблиці із висотою 200 та шириною 200 пікселів
9. Для таблиці, представленої на
рис. 7, визначимо висоту рядків та
ширину стовбців у відсотках до висоти та ширини всієї таблиці. Записуємо необхідний HTML-код та переглянемо
таблицю у браузері (рис. 8 ):
…
<table border="3" bordercolor="#000000" height =
"200" width = "200" >
<tr>
<td height = "20%" width =
"20%" bgcolor = "#ffffff">11</td>
<td width = "30%" bgcolor =
"#999999">12</td>
<td width = "50%" bgcolor =
"#ffffff">13</td>
</tr><tr>
<td
height="80%" width= "20%" bgcolor =
"#999999">21 </td>
<td width = "30%" bgcolor =
"#ffffff">22</td>
<td width = "50%" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Рис. 8. Відображення таблиці із висотою та шириною стовпців, визначених у
відсотках до висоти та ширини всієї таблиці
10. Зробимо вертикальне та
горизонтальне вирівнювання змісту
таблиці. Таблиця, яку необхідно отримати
зображена на рис. 9.
Рис. 9. Таблиця, яку необхідно відобразити у вікні браузера
Реалізуємо це за допомогою параметру valign="middle" (top,
bottom) для вертикального вирівнювання та
параметру align="center" (left, right) для горизонтального вирівнювання. Записуємо HTML-код для заданої
таблиці та переглянемо її у браузері (рис. 10)
…
<table border="3" bordercolor="#000000" >
<tr>
<td height="40"
width="60" valign="top" align="left" bgcolor =
"#ffffff">11</td>
<td width="60"
valign="middle" align="center" bgcolor = "#999999">12</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#ffffff">13</td>
</tr>
<tr>
<td height="40"
width="60" valign="top" align="left" bgcolor
="#999999">21</td>
<td width="60"
valign="middle" align="center" bgcolor =
"#ffffff">22</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Рис. 10. Відображення таблиці з виконаним
вирівнюванням змісту її комірок у вікні браузера
11. Об’єднаємо у першому рядку
таблиці (рис.10) перші дві комірки та задамо для них сірий колір фону. Для цього використаємо параметр colspan, який визначає кількість
стовпців в об’єднаній комірці. Записуємо необхідний HTML-код:
…
<table border="3" bordercolor="#000000" >
<tr>
<td height="40"
colspan="2" valign="top" align="left" bgcolor =
"#999999">11</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#ffffff">13</td>
</tr>
<tr>
<td height="40"
width="60" valign="top" align="left" bgcolor
="#999999">21</td>
<td width="60"
valign="middle" align="center" bgcolor = "#ffffff">22</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Відповідна таблиця представлена на рис. 11.
Рис. 11. Відображення таблиці з
об’єднаними у першому рядку першими двома комірками, для яких заданий
сірий колір фону.
12. Використання параметрів cellspacing та cellspadding.
- Встановимо відстань між комірками таблиці, представленої
на рис. 11, рівною 0 пікселів (це білий простір між комірками таблиці). Реалізуємо це за допомогою параметру cellspacing. Записуємо необхідний HTML-код:
…
<table border="3" bordercolor="#000000"
cellspacing="0" >
<tr>
<td height="40"
colspan="2" valign="top" align="left" bgcolor =
"#999999">11</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#ffffff">13</td>
</tr>
<tr>
<td height="40"
width="60" valign="top" align="left" bgcolor
="#999999">21</td>
<td width="60"
valign="middle" align="center" bgcolor =
"#ffffff">22</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Відповідна
таблиця показана на рис. 12.
Рис. 12. Відображення таблиці, в
якої відстань між комірками дорівнює 0 пікселів
- Змінимо значення параметру
cellspacing з 0 на 7. Нова таблиця показана на рис. 13.
Рис. 13. Відображення таблиці, в
якої відстань між комірками дорівнює 7 пікселів
- Розглянемо наслыдки використання параметру
cellpadding, що визначає відстань між границями комірок і даними, що
знаходяться в цих комірках. Для наглядності результатів спочатку за допомогою
параметру valing вирівняємо зміст комірок верхнього ряду доверху, а
нижнього-донизу:
...
<table
border="3" bordercolor="#000000" cellpadding="0" >
<tr>
<td height="40"
colspan="2" valign="top" align="left" bgcolor =
"#999999">11</td>
<td width="60"
valign="top" align="right" bgcolor =
"#ffffff">13</td>
</tr>
<tr>
<td height="40"
width="60" valign="bottom" align="left" bgcolor
="#999999">21</td>
<td width="60"
valign="bottom" align="center" bgcolor =
"#ffffff">22</td>
<td width="60"
valign="bottom" align="right" bgcolor =
"#999999">23</td>
</tr>
</table>
</body>
Відповідна
таблиця показана на рис. 14.
Рис. 14. Відображення таблиці, для
якої параметр cellpadding дорівнює 0 пікселів.
Змінимо значення параметру cellpaddingз 0 на 7. Нова
таблиця показана на рис. 15.
Рис. 15. Відображення таблиці, для
якої параметр cellpadding дорівнює 7 пікселів.
13.
Визначимо
фоновий рисунок таблиці. Реалізуємо це
за допомогою параметру background. HTML-код при цьому
буде такий:
…
<table height = "200" width =
"200" background="Zamok.jpg">
<tr>
<td></td><td>Замок</td><td></td>
</tr>
<tr>
<td></td><td></td><td></td>
</tr>
</table>
</body>
Рис. 16. Відображення таблиці, для якої визначено параметр background.
14.
Вкладені таблиці. Створимо таблицю, яка складається з
одного ряду та трьох комірок. В третю комірку додамо ще одну таблицю, яка
складається з чотирьох рядків та двох стовпців. HTML- код для
такої таблиці такий:
…
<table
align="center">
<tr height="200">
<td width="200"
valign="top" background="Zamok.jpg"
align="center"> <h1><br><br>ЗВІТ</h1></td>
<td
width="50" background="Tochka.jpg"></td>
<td
width="300" valing="top"
background="Yellow.jpg" align="center">
<h3>Таблиця, яка показує
успішність групи ОА-Д-2:</h3>
<table cellspasing="3" border="3"
bordercoler="black"
background="Yellow.jpg">
<tr height="40">
<td width="200"
align="center"> п'ятірок </td>
<td width="100"
align="center">10%</td>
</tr>
<tr height="40">
<td
width="200"
align="center" >четвірок </td>
<td
width="100"
align="center" >70% </td>
</tr>
<tr height="40">
<td width="200" align="center">трійок
</td>
<td
width="100"
align="center" >20% </td>
</tr>
<tr height="40">
<td
width="200"
align="center">двійок </td>
<td width="100"
align="center" >не має </td>
</tr>
</table>
<br> <h3>Викладач</h3>
</td>
</tr>
</table>
</body>
Переглянемо
цю таблицю у браузері (рис. 17)
Рис. 17. Відображення таблиці, яка складається з одного ряду та трьох комірок та містить вкладену таблицю в третій комірці.
Завдання для самостійної роботи
1. В
HTML-документі визначити таблицю, зміст та форматування якої відповідають
таблиці показаної на рис.18.
Рис.18. Завдання для
визначення таблиці
2. Оформити звіт.
Питання для самоперевірки
1.
Навіщо використовуються таблиці?
2.
Як визначити кількість рядків у таблиці?
3.
Як визначити кількість колонок в таблиці?
4.
Як визначити горизонтальне вирівнювання
змісту комірок таблиці?
5.
Чи можна визначити вертикальне
вирівнювання змісту рядків таблиці?
6.
Чи можна визначити ширину окремої
комірки таблиці?
7.
Як визначити ширину таблиці?
8.
Чи можна визначити висоту таблиці?
9.
Як встановити відстань між комірками
таблиці?
10.
Як встановити встановити товщину границь
таблиці?
Лабораторна робота №7 Створення фреймів
Мета роботи: навчитись
створювати фрейми
Хід
роботи:
Завдання для самостійної роботи
1.
Визначити фрейм з структурою, вказаною
викладачам.
2.
Оформити звіт.
Питання для самоперевірки
1.
Навіщо використовуються фрейми?
2.
Як визначити кількість горизонтальних
фреймів?
3.
Як визначити кількість вертикальних
фреймів?
4.
Як визначити розмір фреймів в абсолютних
величинах?
5.
Як визначити розмір фреймів в відносних
величинах?
6.
Як встановити наявність границь між
фреймами?
7.
Як визначити який фрейм буде метою
гіперпосилання?
8.
Як визначити полосу прокрутки у фреймі?
9.
Як встановити розміри
"плаваючого" фрейму?
10.
Як заборонити користувачеві змінювати
розміри фреймів?
Лабораторна робота №8 Форматування елементів Web-сторінки за допомогою каскадних таблиць стилів
Мета роботи: освоєння практичних навичок використання
каскадних таблиць стилів.
Хід
роботи
1.
Підготовча робота. В папці HTML створимо файл css.html та запишемо в ньому наступний HTML-код:
<html><head>
<meta http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<style
type="text/css"> </style>
<title>Використання каскадних таблиць стилів</title>
</head><body>
<h1>Заголовок першого рівня №1</h1>
<p>Текст першого абзацу</p>
<h1>Заголовок першого рівня №2</h1>
<h2>Заголовок друго рівня</h2>
<p>Текст другого абзацу</p>
</body></html>
Відповідне вікно браузера показане на
рис. 1.
Рис. 1.
Відображення заголовку першого рівня до використання стилів
2.
Визначимо стиль, що призводить до появи
границь товщиною 1 піксель навколо всіх елементів h1 та вирівнюванню цих елементів по центру:
<style type="text/css">
h1 {border-width: 1; border: solid; text-align: center}
</style>
Після
застосування такого стилю вікно відображення заголовків першого рівня зміниться
відповідно до рис.2.
Рис. 2.
Застосуваня стилів по заголовків першого рівня
3.
Модифікуємо визначення стилю таким
чином, щоб він використовувався тільки елементами h1 класу m:
h1.m
{border-width: 1; border: solid; text-align: center}
4.
Першому
елементу h1 призначимо клас m:
<h1 class='m'>Заголовок першого рівня №1</h1>
Оновлене відображення HTML-документу в
вікні браузеру повинно відповідати рис.3.
Рис. 3.
Використання класів стилів
5.
За допомогою контекстного селектору
визначимо стиль для відображення заголовків другого рівня та абзаців шрифтом Monotype
Corsiva:
...
h2, p
{font-family: 'Monotype Corsiva';}
</style>
Переглянемо модифікований
документ (рис.4).
Рис. 4.
Використання контекстного селектору
6.
В першому абзаці додамо стиль для
відображення тексту цього абзацу червоним кольором з нижньою границею типу double
та верхньою границею зеленого кольору типу dotted:
<p
style="border-bottom-style: double; color: Red; border-top-color: Green;
border-top-style: dotted;">Текст першого абзацу</p>
Відображення цього абзацу у вікні
браузеру показане на рис.5.
Рис. 5.
Впровадження стилю в тег абзацу
7.
Скопіюємо в папку HTML два рисунки,
наприклад 1.jpg та Eifel.jpg.
8.
В файлі css.html додамо
HTML-код для показу на Web-сторінці цих рисунків з границю товщиною 1 піксель.
Рисунку Eifel.jpg призначимо вирівнювання "по лівому краю", а рисунку
1.jpg присвоїмо id='pic':
…
<img
src="Eifel.jpg"
border="1">
<img
src="1.jpg" border="1" id="pic">
</body>
9.
Додамо стиль для абсолютного
позиціювання об’єкту з id='pic' відносно вікна браузера з параметрами top=90
пікселів та left=450 пікселів:
...
#pic {position:
absolute; top: 90px; left: 450px}
</style>
Пересвідчимося, що розміщення
рисунку 1.jpg (рис.6) значно відрізняється від звичайного розміщення, заданого
за допомогою параметру align тегу <img>.
Рис. 6. Абсолютне позиціювання рисунку за
допомогою CSS
10.
Рисунку Eifel.jpg призначимо id="eifel":
<img
src="Eifel.jpg" border="1" id="eifel">
11.
Додамо
стиль для того, щоб об’єкт з id="eifel" не відображався у вікні браузеру:
...
#eifel {display:
none}
</style>
Пересвідчимося, що рисунок
Eifel.jpg не відображається у вікні
браузеру (рис.7).
Рис. 7.
Знищення рисунку на екрані завдяки використанню CSS
12.
Модифікуємо стиль об’єкту з id="eifel" для його відображення на екрані:
#eifel {display:
none}
Пересвідчимося,
що рисунок Eifel.jpg знову
відображається у вікні браузеру (рис.6).
13.
Виділимо визначені нами стилі в окремий
файл та зв’яжемо його з нашим HTML-документом (css.html). Для цього:
- В папці
HTML створимо текстовий документ, назвемо його mystyle.css та
відкриємо за допомогою текстового редактору "Блокнот".
- Із файлу
css.html
перенесемо в mystyle.css всі
визначинені нами таблиці стилів:
h1.m
{border-width: 1; border: solid; text-align: center}
h2, p
{font-family: 'Monotype Corsiva';}
#pic {position:
absolute; top: 90px; left: 450px}
#eifel {display:
block}
Відзначимо, що теги <style
type="text/css"> та </style> записувати не потрібно.
- За
допомогою меню "Файл"->"Сохранить" збережемо файл mystyle.css.
- В файлі css.html замість
тегів <style type="text/css"> ... </style>
запишемо:
<link
href="mystyle.css" rel="stylesheet"
type="text/css">
- Збережемо
файл css.html
14.
Проведемо оновлення нашої Web-сторінки у вікні
браузера. Якщо в процесі виконання п.13 не було допущено помилок, то
відображення Web-сторінки повинно зостаись без змін (рис.6).
Завдання для самостійної роботи
1.
Розробити таблиці стилів для
форматування 2-3 сторінок сайту з тематики визначеної викладачем.
2.
Оформити звіт.
Питання для самоперевірки
1.
Як встановити абсолютну позицію об’єкту
відносно вікна браузеру?
2.
Як за допомогою стилів знищити зображеня
об’єкта з вікна браузера?
3.
Як визначити стиль, що призведе до
відображення зеленим кольором тексту, розміщеного в таблицях Web-сторінки?
4.
Як визначити стиль, що призведе до
відображення всіх заголовків шрифтом Arіal?
5.
Записати стиль для відображення нижньої
границі тексту абзаців?
6.
Записати стиль для відображення верхньої
границі тексту абзаців?
7.
Як зв’язати HTML-документ з таблицями
стилів, що визначені в окремому файлі?
8.
Навіщо використовується групування
селекторів?
9.
Навіщо в тегах використовується параметр
id?
10.
Як при визначенні правил стилів
використовуються класи?
Лабораторна робота №5 Створення інтерактивних Web-документів
Мета роботи: освоєння практичних створення
інтерактивних Web-документів засобами JavaScript та CSS.
Хід
роботи
7.
В папці HTML створити файл anim.html та
записати в ньому наступний код ("кістяк" HTML-сторінки):
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Створення
інтерактивних Web-документів</title>
<script>
</script>
</head>
<body>
</body>
</html>
8.
Створимо скрипт для того щоб ця
Web-сторінка завжди відкривалась в
повновіконному режимі. Для цього:
8.1.
Визначаємо
вертикальний та горизонтальний розмір екрану:
...
h=window.screen.height;
w=window.screen.width;
</script>
8.2.
Визначаємо функцію яка буде переміщати вікно з
нашою Web-сторінкою в лівий верхній кут екрану та встановить розміри вікна
рівними розмірам екрану:
...
function wr() {
window.moveTo(0,0);
window.resizeTo(w,h);
}
</script>
8.3.
Модифікуємо тег <body> для
звернення до функції wr() при
завантаженні документу в вікно браузеру:
<body
onload="wr()">
9.
Створимо на нашій Web-сторінці
вертикальне меню із двох елементів (кнопок). Вибір користувачем певного
елемента меню повинен призводити до показу на сторінці відповідної інформації.
Для цього:
9.1.
Додамо на нашу Web-сторінку три таблиці.
В першій таблиці розмістимо два управляючі елементи меню (кнопки), в другій
таблиці запишемо зміст першого розділу меню, а в третій таблиці зміст другого
розділу. Другій таблиці присвоїмо id="r1", а третій id="r2":
...
<table align="left">
<tr><td><input
type="button" value="Перший пункт меню" style="width:
200px;"></td></tr>
<tr><td><input
type="button" value="Другий пункт меню" style="width:
200px;"></td></tr>
</table>
<table id="r1">
<tr>
<td>Зміст першого розділу меню (Таблиця 2)</td></tr>
</table>
<table id="r2"
style="display: none;">
<tr>
<td>Зміст другого розділу меню (Таблиця 3)</td></tr>
</table>
</body>
9.2.
Визначимо, що при завантаженні Web-сторінки
відображатись буде тільки зміст першого розділу меню, тобто таблиця 3 буде не
видимою. Для цього модифікуємо код третьої таблиці:
<table id="r2"
style="display: none;">
9.3.
При перегляді нашої Web-сторінки зміст другого
пункту меню (таблиця 3) повинен бути не видимим, рис.1.
Рис. 1. Відображення першого розділу меню при
завантаженні Web-сторінки
9.4.
Додамо функцію яка буде відображати на
екрані тільки той елемент HTML-сторінки id якого
передається цій функції в якості параметру:
...
function disp(myid) {
document.getElementById('r1').style.display="none";
document.getElementById('r2').style.display="none";
document.getElementById(myid).style.display="block";
}
</script>
9.5.
Модифікуємо код кнопок так, щоб вибір
користувачем певної кнопки призводив до відображення тільки відповідного
розділу меню:
<input type="button"
value="Перший пункт меню" style="width: 200px;"
onClick="disp('r1')">
<input type="button"
value="Другий пункт меню" style="width: 200px;"
onClick="disp('r2')">
9.6.
Перевіримо функціонування меню. При
виборі кнопки меню повинен відображатись тільки відповідний розділ (рис. 2).
Рис. 2.
Відображення другого розділу меню
10.
Створимо скрипт для прокрутки тексту "Привіт всім!!!" в
статусному рядку браузера. Для цього, після визначення функції disp
запишемо наведений нижче програмний код:
//визначаємо
змінну pos
var
pos=0;
//визначаємо
функцію для прокрутки тексту
function
status() {
//визначаємо
текст, призначений для відображення
str=" Привіт всім!!! ";
//визначаємо фрагмент
тексту, що буде
//показаний в
рядку статуса
//визначення
ралізується за рахунок копіювання рядка str
//з
символу з номером pos по символ з номером pos+17 в рядок str1
str1=str.substring (pos, pos+27);
//показуємо
змінну str1 в рядку статуса
window.defaultStatus=str1;
//збільшуємо
значення змінної pos на 1
pos++
//перевіряємо
значення змінної pos
if
(pos == 27) pos=0;
//рекурсивний
виклик функції status з частотою 1 раз в 0,03 сек.
setTimeout("status()",30);
}
</script>
Відзначимо, що в даному випаку коментарі
призначені для кращого розуміння принципів функціонування скрипта. По цій
причині записувати їх не обов’язково.
11.
Модифікуємо функцію wr
(викликається внаслідок реалізації події onload) для того, щоб прокрутка
починалась після завантаження HTML-сторінки у вікно браузера:
function wr() {
window.moveTo(0,0);
window.resizeTo(w,h);
status();
myopen();
}
12.
Перегляд HTML-сторінки (рис. 3) повинен
підтвердити прокрутку тексту в статусному рядку.
Рис.3. Прокрутка
тексту в статусному рядку
13.
Створимо функцію myopen, що
реалізує завантаження нового HTML-документу в нове вікна браузера. Подібні функції досить часто
використовуються для показу користувачеві короткої та особливо актуальної
інформації сайту. Таку інфорацію можливо показувати у вікні браузера без панелі
інстурментів, рядка меню та смуг прокрутки. Для цього використаємо метод open стандартного об’єкту window. Методу open необхідно передати три параметри: ім’я
файлу, який буде відображено у новому вікні, ім’я та параметрами вікна (параметри задаються одим
рядком). В даному випадку параметри такі: панель інструментів, рядок меню та
смуги прокрутки відсутні, ширина вікна 300, а висота 140 пікселів, лівий
верхній кут вікна знаходиться нижча на 100 і лівіше на 200 пікселів від
верхнього лівого кута екрану. Запишемо код функції myopen:
...
function myopen() {
/* Увага! Значення змінної str необхідно
записати в одному рядку без переносу та пробілів. */
str="toolbar=0,menubar=0,Scrollbars=0,width=300,height=140,
top=100,left=200";
window.open("info.html","newa",str);
}
</script>
14.
В папці HTML створимо файл info.html та
визначимо в ньому наступний HTML-код:
<html>
<head>
<title>Увага!!!
Актуальна інформація!!!</title>
</head>
<body>
<h1
align="center">Увага!!! <br>Актуальна
інформація!!!</h1>
</body>
</html>
15.
Відзначимо, що показувати користувачеві
актуальну інформацію доцільно при перегляді ним певної сторінки сайту. Тому
виклик функції myopen реалізуємо
в функції wr, яка в свою чергу викликаєтсья при завантаженні нашої
HTML-сторінки (anim.html). Для цього модифікуємо код функції wr так:
function wr() {
window.moveTo(0,0);
window.resizeTo(w,h);
status();
myopen();
}
16.
Під час відкриття HTML-документу anim.html
повинно відкритись нове вікно браузера з завантаженим в ньому файлом info.html, див. рис. 4.
Рис. 4.
Відкриття нового вікна браузеру
Завдання для самостійної роботи
1. Створити
меню із 5 пунктів. Вибір пункту меню повинен призвести до відображення на
Web-сторінці певного рисунку.
2. Модифікувати
функцію wr так, щоб вікно браузера займало тільки половину екрану.
3. Оформити
звіт.
Питання для самоперевірки
1.
Яке призначення методу open об’єкту
window?
2.
Які параметри необхідно передати методу
open об’єкта window?
3.
Яка подія відповідає завантаженню
HTML-документу в вікно браузера?
4.
Яка подія відповідає вибору користувачем
певного елементу Web-сторінки?
5.
Яким чином можливо реалізувати
рекурсивний виклик функції через певний проміжок часу?
6.
Яке призначення методу moveTo об’єкту
window?
7.
Яке призначення методу resizeTo об’єкту
window?
8.
Як визначити власну функцію в коді
JavaScript?
9.
Як копіювати частину символів із однієї
змінної в іншу?
10.
Як показати інформацію в рядку статусу
вікна браузера?
Лабораторна робота №9 Публікація
Web-сайту в мережі WWW
Мета роботи: освоєння практичних навичок публікації
Web-сайту на безкоштовних Web-серверах.
Хід
роботи
1.
Перед публікацією сайту необхідно
виконати наступні підготовчі операції.
-
Пересвідчитись, що в назвах всіх файлів
сайту використовуються тільки дозволені символи, в гіперпосиланнях та шляхах до
рисунків не використовуються посилання на ресурси локального комп’ютера,
сумарні розміри окремих HTML-сторінок (разом з рисунками) не перевищують 200
КБ.
-
Регістри букв в назвах файлів та в
шляхах до цих файлів співпадають. Наприклад в гіперпосиланні на файл Game.html
необхідно записати саме <a href= Game.html >, а не <a href= game.html >.
-
Пересвідчитись в підключенні власного
комп’ютера до мережі Інтернет.
-
В якості безкоштовного Web-серверу
будемо використовувати сервер www.narod.ru. Вибір пояснюється високою надійністю
даного серверу, що підтверджується більш ніж 10 літнім строком його безвідмовного
функціонування та простотою користування.
2.
За допомогою браузеру зайти на сайт www.narod.ru та відповідно до рис. 1 ввести ім’я
сайту. Відзначимо, що імені сайту можливо використовувати тільки букви
латинського алфавіту та цифри, ім’я повинно починатись із букви, а його довжина
не повинна перевищувати 20 символів. Крім того, слід врахувати, що на вибраному
сервері знаходиться досить багато Web-сайтів, імена яких не повинні
повторюватись. Тому ім’я сайту повинно бути досить оригінальне. В прикладі
показаному на рис.1 ім’я сайту – mynewtestsite. Після вводу імені натискаємо на кнопці
"ЗАНЯТЬ". Якщо в імені сайту не має помилок то в вікні браузеру буде
відображена форма вводу реєстраційних даних, рис.2.
Рис.1 Головна
сторінка сайту www.narod.ru
Рис.2 Перша сторінка вводу
реєстраційних даних
В
протилежному випадку знову буде запропоновано повторити введення імені сайту.
3.
Заповнюємо всі поля реєстраційної форми
(рис.2). Приймаємо до уваги, що логін може містити не більше 20 букв
латинського алфавіту та цифр і повинен починатись із букви. Надалі логін буде
використовуватись для ідентифікації адміністратора сайту. При вводі імені та
прізвища можливо використовувати букви
українського та російського алфавітів.
4.
Ознайомлюємося із угодою про дотримання
конфіденційність інформації та натиснувши на кнопку "Дальше"
переходимо на наступну сторінку реєстрації (рис.3).
Рис. 3. Друга
сторінка вводу реєстраційних даних
5.
Заповнюємо всі поля (рис.3). Відзначимо,
що адреса електронної пошти, контрольне питання та відповідь на нього
використовуються в випадку, коли ви забули свій пароль. Контрольні цифри обов’язково повинні
співпадати цифрами показаними на рисунку, що розміщений з правої сторони цього
поля.
6.
Ознайомлюємось з умовами "Угоди з
користувачем" та натискаємо на кнопку "ОК". Відзначимо, що при
наведені миші на цю кнопку з’являється іконка "Сохранить". Якщо всі
поля форми (рис.3) заповнені правильно то відбувається перехід на останній крок
реєстрації (рис.4). В протилежному випадку буде запропоновано заповнити форму
ще раз. При цьому рисунок з контрольними цифрами буде змінено на інший.
Рис. 4 Завершальний крок реєстрації сайту
7.
Заповнивши останній реєстраційний бланк
(рис.4), натискаємо на кнопку "Сохранить". Відзначимо, що дані цього
бланку не мають особливого значення, хоча і обов’язкові для заповнення. Тому
записувати свої реальні дані не обов’язково. На цьому реєстрація сайту
завершується і на екрані браузера відображається консоль керування сайтом.
8.
Для завантаження файлів на сервер
необхідно в консолі керування сайтом вибрати відповідні гіперпосилання та
перейти на сторінку "Мастерская/ Управление файлами" (рис. 5).
Рис.
5. Консоль керування файлами
9.
Для відкриття сторінки завантаження
файлів скористаємось відповідним гіперпосиланням, рис.5.
10.
Після відкриття сторінки завантаження файлів
(рис.6) натискаємо кнопку "Обзор" та вибираємо необхідні файли.
Рис. 6.
Сторінка завантаження файлів
На даному сервері головною
сторінкою сайту буде index.html, який
повинен знаходитись в корневій теці. Після вибору файлів необхідно натиснути на
кнопку "Загрузить файли". Рекомендується завантажувати за один раз не
більше 3-4 файлів. В випадку відмови від вибраного файлу натискаємо на кнопку
"Очистить". Відзначимо, що файли будуть завантажуватись в корневу
теку. Для завантаження в іншу теку її необхідно спочатку створити за допомогою
відповідного гіперпосилання (рис. 5) та відкрити (рис.6).
11.
Назви завантажених файлів, а також їх основні
параметри будуть показані в консолі керування файлами. На приклад на рис.7 показано, що 24.11.05 на сервер було
завантажено файл index.html розміром 72 Б.
Рис. 7.
Відображення характеристик завантажених файлів
12.
Для знищення завантажених файлів можливо
скористатись кнопкою "Удалить" (рис.7).
13.
Після завантаження всіх необхідних файлів за
допомогою гіперпосилання
"Выход" необхідно закрити консоль керування сайтом.
14.
Для перегляду опублікованого сайту в
адресному рядку браузера записуємо www."ім’я_сайту".narod.ru. В наведеному прикладі www.mynewtestsite.narоd.ru.
15.
Перевірити працездатність всіх завантажених
сторінок вашого сайту.
16.
Для модернізації вашого сайту необхідно на
головній сторінці www.narod.ru (рис.1)
ввести свій логін та пароль і натиснути кнопку "Вход". Після цього
слід, використовуючи відповідні гіперпосилання відкрити консоль керування
(рис.5) та повторити п.9-13.
Завдання для самостійної роботи
1.
За допомогою пошукових систем
www.google.com.ua, www.rambler.ru, www.meta.ua
знайти адреси 1-2 безкоштовних Web-серверів та опублікувати на них свій
сайт.
2.
Скласти звіт по виконаній роботі.
Питання для самоперевірки
1.
Які правила визначення імені сайту на
сервері www.narod.ru?
2.
Навіщо при реєстрації використовується
секретне питання?
3.
Як завантажити файл на сервер www.narod.ru?
4.
Як знищити файл на сервері www.narod.ru?
5.
Як називається головна сторінка сайту на
сервері www.narod.ru?
6.
Як визначити параметри файлів
завантажених на сервер www.narod.ru?
7.
Як модифікувати файли на сервері www.narod.ru?
8.
Як коректно вийти із консолі керування
файлами на сервері www.narod.ru?
9.
Яку кількість файлів рекомендується
завантажувати за один сеанс на сервер www.narod.ru?
10.
Як називається консоль керування файлами на
сервері www.narod.ru?
Лабораторна робота №10 Забезпечення високої ефективності використання сайтів за допомогою пошукових систем
Мета роботи: опанувати методику забезпечення високого
рейтингу сайту в загальнопоширених пошукових системах.
Хід
роботи
1.
Ознайомитись з правилами формулювання запитів в вітчизняній пошуковій
системі МЕТА (www.meta.ua).
2.
Визначити 10–20 ключових слів, що
найбільш повно відповідають змісту сайту. Ці слова надалі будемо називати
тематичними ключовими словами.
3.
Визначити 10–20 ключових слів, що не
відповідають змісту сайту, але достатньо часто використовуються в пошукових
системах. Наприклад – спорт, футбол, автомобілі. Ці слова надалі будемо
називати нетематичними ключовими словами.
4.
Сформулювати стислий опис сайту, обсягом
до 60 слів. До даного опису слід включити як тематичні, так і не тематичні
ключові слова.
5.
Модифікувати HTML-код сайту, розміщеного
в мережі Інтернет в попередній лабораторній роботі:
- Для всіх сторінок сайту встановити кодування сайту як
"Cyrillic (Windows)":
<head>
<meta
http-equiv=Content-Type content="text/html; charset=windows-1251">
…
- Записати
в HTML-коді головної сторінки сайту (index.html) тематичні та нетематичні ключові слова:
…
<meta
name="Keywords" content=" комп’ютери, спорт, футбол, автомобілі,
… ">
</head>
- В HTML-коді головної сторінки сайту (index.html)
визначити стислий опис сайту:
…
<meta
name="Description" content=" Сучасні комп’ютери різноманітної
конфігурації, новини спорту,… ">
</head>
6.
Провести реєстрацію сайту в вітчизняній
пошуковій системі МЕТА. Для цього слід:
6.1.
Відкрити в браузері головну сторінку
пошукової системи МЕТА (www.meta.ua).
6.2.
За допомогою гіперпосилання
"добавить сайт", розміщеного в нижній частині головної сторінки
пошукової системи МЕТА (див. рис.1) перейти на сторінку реєстрації сайту.
Рис. 1
Головна сторінка пошукової системи МЕТА.
6.3.
Відповідно пп.1-3 та рис. 2 заповнити
реєстраційну форму. Відзначимо, що адреса сайту визначена в попередній
лабораторній роботі.
Рис. 2.
Реєстаційна форма пошукової истсеми МЕТА.
6.4.
Натиснути кнопку "Добавить" для переходу на наступний крок реєстрації.
6.5.
Результатом коректного заповнення
реєстраційної форми є перехід на сторінку показану на рис. 3. Якщо при
заповненні реєстарційної форми були допущені помилки, необхідно повернутись на
попередній етап реєстрації для їх виправлення.
Рис. 3. Другий
етап реєстрації сайту в пошуковій системі МЕТА.
6.6.
Розмістити на головній сторінці сайту
рисунок-банер пошукової системи МЕТА. Для цього в файл index.html, що
знаходиться на сервері Narod.ru,
необхідно додати наступний HTML-код:
…
<a href=http://meta.ua><img
src=http://meta.ua/img/banners/knopka1.gif width=88 height=31 border=0
alt="META - Украина. Украинская
поисковая система"></a>
<body>
6.7.
Якщо банер пошукової системи МЕТА
показаний на рис. 3 не відповідає дизайну сайту, то необхідно вибрати інший
банер. Для цього слід скористатись гіперпосиланням "здесь" (рис. 3),
що призводить до переходу на сторінку вибору банерів (рис.4).
Рис. 4.
Сторінка вибору банерів пошукової системи МЕТА.
Вибираємо банер, що відповідає дизайну
нашого сайту. Відповідний банеру HTML-код додаємо в файл index.html (див.
п. 6.6).
6.8.
Процес реєстрації сайту в пошуковій
системі МЕТА завершено. Закриваємо вікно браузеру.
Завдання для самостійної роботи
1.
Ознайомитись з правилами формулювання
запитів в пошукових системах Google (www.google.com.ua), Rambler (www.rambler.ru), Yandex (www.yandex.ru) Aport (www.aport.ua).
2.
Ознайомитись з принципами роботи
пошукової системи Rambler та рейтингу Rambler's Top100. Для цього слід відвідати сторінку
http://www.rambler.ru/doc/architecture.shtml.
3.
Провести реєстрацію сайту в пошуковій
системі Rambler.
4.
Провести реєстрацію сайту в рейтингу Rambler's Top100 (www.top100.rambler.ru).
5.
Скласти звіт по виконаній роботі.
Питання для самоперевірки
1.
Які правила формулювання запитів в
пошуковій системі МЕТА?
2.
Скільки етапів складає реєстрація сайту
в пошуковій системі МЕТА?
3.
Яку кількість ключових слів можливо
використовувати при реєстрації в пошуковій системі МЕТА?
4.
Яку кількість ключових слів можливо
використовувати при реєстрації в пошуковій системі Rambler?
5.
Як вибрати банер пошукової системи МЕТА,
що найбільш повно відповідає дизайну сайта?
6.
Що таке не тематичні ключові слова і
навіщо вони потрібні?
7.
Як об’єднуються слова в пошуковому
запиті в системі МЕТА?
8.
Навіщо потрібно проводити реєстацію
сайту в пошукових ситемах?
9.
Навіщо визначати опис сайту за допомогою
тегу <meta>?
10.
Чи потрібно проводити реєстрацію в пошуковій
системі Google?
ЛІТЕРАТУРА
1.
Антоненко В.М., Терейковський І.А., Терейковська Л.О. Основи Web-дизайну.
Конспект лекцій. -К.: МГІ КСУ, 2005. - 116 с.
2.
Вандер Вер Э. JavaScript для чайников. К.: Издательский дом «Вильямс»,
2001. – 304 с.
3.
Гарнаев А.,
Гарнаев С. Web программирование на Java и JavaScript. - Санкт-Петербург: БХВ-Петербург, 2002.– 1040 с.
4.
Кастаньето Д. Профессиональное PHP программирование. СПб.: Символ-Плюс,
2001. - 912 с.
5.
Колбери Р. Освой самостоятельно CGI за 24 часа. — М.: Издательский
дом "Вильямс", 2001.— 368 c.
6.
Костарев А. РНР в Web-дизайне. С.-Петербург.: ВНV, 2002. – 592 стр.
7.
Матросов А.,
Сергеев А., Чаунин М. HTML 4.0. – Санкт-Петербург: БХВ-Петербург, 1999. - 672
с.
8.
Паттерсон Л. и др. Использование HTML 4.0. - К.-М.-СПб.: Издат. Дом “Вильямс”. – 1998 –
384c.
9.
Терейковський І.А. Підвищення ефективності функціонування корпоративних
Web – сайтів. К.: Вісник КНУТД №4 2004 с.41-46.
10.
Холл М., Браун Л. Программирование для Web. К.: Издательский дом
«Вильямс», 2002. – 1264 с.
11.
http://www.postroika.ru
12.
http://www.siteforum.ru
ГЛОСАРІЙ
Web-сервер –
сервер, який обслуговує запити користувачів (клієнтів) згідно з протоколом
HTTP, забезпечує актуалізацію, збереження інформації WEB-сторінки, зв’язок з
іншими серверами.
Web-сторінка (Web-сайт)
окремий інформаційний ресурс мережі WWW, що має власну адресу.
HTML-документ – файл текстової або нетекстової природи (звук, відео, зображення),
створений за допомогою мови гіпертекстової розмітки HTML (Hyper Text Mark-up Language).
TCP/IP це множина
комунікаційних протоколів, що визначають як комп’ютери різноманітних типів з
різноманітними операційними системами можуть спілкуватись між собою.
Браузер
(Браузер) – спеціальне програмне забезпечення , що надає
користувачам інтерфейс для доступу до інформації Web-сторінок та
їх перегляду.
Гіперпосилання – методика зв’язування одного Web-ресурсу з іншим. Гіперпосилання складається із двох
частин. Перша частина це об’єкт який користувач бачить у вікні браузера і вибір
якого призводить до переходу на цільовий Web-ресурс Гіперпосилання складається
із двох частин. Перша частина це об’єкт який користувач бачить у вікні браузера
і вибір якого призводить до переходу на цільовий Web-ресурс.
Динамічний HTML (DHTML) – це термін, який використовується
для позначення HTML-сторінок з динамічно змінюваним змістом. Реалізація DHTML
складається із трьох компонентів: безпосередньо HTML, каскадних таблиць стилів
(CSS) та мови сценаріїв (JavaScript або VBScript).
Інтернет (мережа
Інтернет) – сукупність мереж та обчислювальних засобів, які
використовують стек протоколів TCP/IP (Transport Control Protocol/Internet
Protocol), спільний простір імен та адрес для забезпечення доступу користувачів
до інформаційних ресурсів мережі.
Каскадна таблиця стилів (CSS) - це технологія визначення та
з’єднання стилів з HTML-сторінкою.
Клієнт мережі WWW – браузер, що використовується клієнтом мережі Інтернет для доступу до
ресурсів мережі WWW.
Провайдер – юридична або фізична особа, яка надає користувачам
доступ до мережі Інтернет.
Сервер – об’єкт
комп’ютерної системи (програмний або програмно-апаратний засіб), що надає
послуги іншим об’єктам за їх запитами.
Списки широко
розповсюджена форма показу даних. Мовою HTML передбачено використання трьох
стандартних видів списків: маркірованого, нумерованого та списку визначень.
Стиль - це все те, що визначає зовнішній
вигляд HTML-сторінки при її відображенні в вікні браузера.
Таблиця стилів - це шаблон, який керує форматуванням
тегів HTML-сторінки.
Тег HTML
– команда
мови HTML.
Форма – засіб для передачі інформації від клієнта на
Web-сервер. Як правило, результатом такої передачі є відображення у клієнта
нового HTML-документа, сформованого Web-сервером на основі переданої
інформації.