Порядок виконання роботи

1. Відкрийте файл style.css для редагування кас­кадних таблиць стилів.

2. Опишіть у файлі стиль форматування таб­лиць:

— стиль, вирівнювання і розташування тексту в осередках заголовка;

— стиль, товщину ліній зовнішніх меж і їх колір;

— стиль тексту, його вирівнювання і розташу­вання в осередках таблиці.

3. Збережіть зміни. Прогляньте результат у бра-узері. (Під час копіювання стилів у файл CSS не за­будьте замінити знак «рівно» на «двокрапку»).

Практична робота №12

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

Вставка малюнка на сторінку

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

<IMG src=URL> — розміщення картинки на сторінці, якщо картинка в тій же теці, що і сторінка указується її ім'я, наприклад: <IMG src=dog.jpeg>, інакше указується повна адреса: <IMG src=http:// www.ecc.crimea.ua/dog.jpeg>.

аlt="Підпис до картинки" — виводиться на екран, якщо у браузера відключений режим показу картинок або картинка не знайдена;

Ш1е="Підпис до картинки" — виводиться на екран під час наведення на картинку покажчика миші;

align="~." — позиціювання картинки щодо тексту;

width="..." — вертикальний розмір картинки (значення: число) — задається в пікселях;

height="..." — горизонтальний розмір картинки (значення: число) — задається в пікселях, якщо за­даний тільки один параметр, другий — змінюється пропорційно (зменшення розміру не скорочує часу завантаження).

Наприклад:

<IMG src=dog.jpeg width="300" height="200" alt= "Підпис до картинки" Ш1е="Підпис до кар­тинки'^.

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

filter — властивість стилів визначає стиль демо­нстрації картинки (значення: blur — створює ефект руху, fliph — відображає картинку зліва-направо, flipv — відображає картинку зверху-вниз, wave — синусоїдальне затемнення по вертикалі, Хгау — ре­нтгенівський знімок).

Наприклад:

<IMG stile="filter: fliph" src=dog.jpeg width= "300" height="200" аИ="Шдпис до картинки" Ш1е="Шдпис до картинки">.

Є багато умов, які впливають на перегляд Web-сторінок, розрішення дисплея, встановлене на ком­п'ютері, встановлений розмір вікна браузера і т. д., що приводить до спотворення вигляду сторінки. Рекомендується для розташування картинок і тексту використовувати таблиці.

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

Гіпертекстове посилання використовується для задання зв'язків між окремими сторінками в Інтер-неті, але їх можна використовувати і для навігації по одному документу. Гіперпосилання — один з найважливіших елементів сторінки. Як посилання може виступати і текст, і малюнок. Посилання, заз­вичай, синього кольору і підкреслені, при наведенні на посилання покажчика миші, вона змінює колір, а покажчик вигляд. У загальному випадку в поси­ланні указується URL-адреса сторінки, на яку здій­снюється перехід.

URL-адреса складається з трьох частин: протоко­лу, вузла (сервера) Інтернету та імені файла того, що містить сторінку, на яку виконується перехід. Нап­риклад: http://www.crimea.ua/creat.htm/.

<А>"Елемент"</А> — тег гіперпосилання, "Елемент" — об'єкт, який відіграє роль посилання (текст або малюнок);

href=URL — атрибут, що вказує адресу документа;

href="http://www.netscape.com" — посилання вказує на документ, що знаходиться в мережі Ін-тернет;

href="file:///C:/temp\text.txt" — посилання вказує на документ на локальному диску;

href="../my web/my photo.jpeg" — посилання вказує на документ, що знаходиться в теці того ж рівня;

href="./my web/my photo.jpeg" — посилання вка­зує на документ, що знаходиться у вкладеній теці;

href="mailto:kalamit@ecc.crimea.ua" — викли­кає діалог відправки електронного повідомлення за вказаною адресою;

title="IIiflnHC до посилання" — виводиться на екран у разі наведення на посилання покажчика ми­ті (якщо посилання на великий документ або малю­нок правила хорошого тону рекомендують указува­ти тут розмір файла).

Приклад:

<А href="http://www.netscape.com">"CaftT про­грами NetScape"</A>.

Як посилання може використовуватися малю­нок:

<А href="http7/www.mcp.com/que/"> <IMG SRC="gifs /quelogo.gif > </А>.

У тексті сторінки гіперпосилання виділяються кольором, підкресленням, у випадку наведення на посилання покажчик миші змінює вигляд. Тег BODY має атрибути, які дозволяють змінити кольо­ри посилань:

link="." — колір посилань, що не використовува­лися, на сторінці (задається стандартним способом);

vlink="." — колір посилань, що використовува­лися, на сторінці (задається стандартним способом).

alink="." — колір активного посилання на сторі­нці (задається стандартним способом).

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

<А пате="ЬаЬ1"><Н2>"Мои увлечения"</Н2> </А> — елемент (якір) — розділ на сторінці, на який указує посилання.

<А href="#Labl">'yiwe4eHHH'</A> — поси­лання на розділ сторінки.

Порядок виконання роботи

1. Відкрийте сторінку «Перший досвід».

2. У розділ сторінки «Про себе» вставте своє фото.

3. Змініть вирівнювання фото щодо тексту.

4. Перевірте зміну розташування фото і тексту у разі зміни розмірів вікна браузера.

5. Створити таблицю, що містить один рядок і два осередки.

6. Помістити в один осередок фото, а в іншу текст.

7. Перевірити зміну розташування фото і тексту у випадку зміни вікна браузера.

8. На початку сторінки розташуйте новий роз­діл «Зміст», до якого включіть назви розділів своєї сторінки.

9. Елементи змісту оформте у вигляді посилань на розділи.

10. Заголовки розділів доповніть якорями.

11. Перевірте роботу посилань на сторінці.

ПРАКТИЧНА РОБОТА №13

Мета роботи: Отримати навички розміщення на сторінці зображення-карти.

Створення зображень-карт на Web-сторінці

Зображення-карти роблять сторінку наочною, зрозумілою, інформативною і красивою. Суть зобра­ження-карти в тому, що як гіперпосилання викори­стовується частина великого графічного зображен­ня (малюнка або фотографії). Принцип роботи гіпе­рпосилання звичайний (перехід здійснюється клацанням миші), але зображення необхідно підго­тувати й описати в сторінці. Є спеціальні програми для підготовки й опису зображень-карт (MapThis) — робота полягає в заданні координат активних облас­тей зображення. Одиницею вимірювання є піксель. Задати координати активним областям зображення можна, використовуючи графічний редактор Paint. Опис карти, зазвичай, розташовують відразу після тега <IMG>, що описує зображення.

<IMG src="URL" usemap="#Ha3Ba"> — розмі­щення на сторінці зображення, "#назва" — якір для тегів, що описують карту;

<МАР пате="назва">. </МАР> — розділ опису карти;

<AREA shape=rect cords="10, 10, 100,100"

href="URL"> — опис активної області зображення;

shape=rect — форма зображення (значення: rect

— прямокутник, circle — коло, poly — багатокут­ник, default — неописані частини зображення);

coords — координати фігури (для rect лівого-вер-хнього і правого-нижнього кутів, для circle коорди­нати центру і радіус, для poly координати всіх кутів

— перший кут описується і в кінці); href="URL" — посилання вказує на документ,

задається стандартним чином, див. пр. роботу №23; Ш1е="Підпис до фрагмента-посилання" — виво­диться на екран у випадку наведення на картинку покажчика миші.

Порядок виконання роботи

1. Підготуйте фотографію класу для використан­ня як карти — за допомогою редактора Paint опи­шіть координати меж зображення своїх друзів на фотографії. Відкрийте сторінку «Перший досвід» для редагування HTML-коду.

2. У розділі «Про себе» розташуйте фотографію класу й опишіть її як зображення-карту. Для поси­лань використовуйте зображення своїх друзів.

3. У значенні атрибуту title вкажіть імена друзів.

4. Перевірте роботу карти на сторінці.

ПРАКТИЧНА РОБОТА №14

Мета роботи: Отримати практичні навички орга­нізації навігації по сайту за допомогою фреймів.

Прості сайти. Навігація по сайту з використан­ням фреймів

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

Для створення сайту з фреймами розробляється структура сайту (layout) і зміст інформаційних сто­рінок (content). Інформаційні сторінки мають тра­диційну структуру HTML-документа.

Опис структури сайту має наступний вигляд:

<HTML>

<HEAD><TITLE>...</nTLE>...</HEAD>

<FRAMESET ...> — опис зовнішнього вигляду вікна браузера (способу розбиття на окремі області) має атрибути:

cols ="50%, 50% " — вертикальне ділення на дві рівні області;

rows="150, 30% ,*" — горизонтальне ділення на З області, перша — 150 пікселів, друга — 30% екра­ну, третя — все, що залишилося;

frameborder=l — об'ємна рамка між областями;

framespacing= п. — ширина рамки між областя­ми в пікселях.

<FRAME пате="ім'я фрейма" src="URL"> — опис першої області (фрейма), непарний тег, має ат­рибути:

пате="ім'я фрейма" — локальне (індивідуаль­не) ім'я області, використовується браузером під час переходів по сторінках;

src="URL" — адреса сторінки, що відкривається в області за замовчуванням;

noresize — не має значення, забороняє змінюва­ти межі завантажених фреймів;

scrolling="..." — управляє прокручуванням усе­редині області [значення: Yes — смуги показуються обов'язково; No — прокручування заборонено (ви­користовується в банерах); Auto — смуги прокручу­вання показуються у разі необхідності (значення за замовчуванням)];

longdesc="URL" — адреса файла з описом фрей­ма (використовується замість title при описах вели­кого об'єму);

frameborder= n — задає рамку навколо фрейма [значення: 1 — створити рамку; 0 — рамку не ство­рювати];

marginheight= n — величина відступу сторінки від верхнього і нижнього країв фрейма в пікселях;

marginwidth= n — величина відступу сторінки від лівого і правого країв фрейма в пікселях;

<FRAME _>

<NOFRAMES>...</NOFRAMES> — розділ ви­водиться на екран браузерами, що не підтримують фрейми.

</FRAMESET>

</HTML>

Приклади опису областей:

<FRAMESET cols ="50%, 50% ".„> <FRAME пате="фрейм 1"...> <FRAME пате="фрейм 2"...> </FRAMESET>

Фрейм 1 Фрейм 2

<FRAMESET rows ="50%, 50% "...> <FRAME пате="фрейм 1"...> <FRAME пате="фрейм 2"...> </FRAMESET>

Фрейм 1 Фрейм 2

<FRAMESET rows ="25%, 50%, 25% "...> <FRAME пате="фрейм 1"...> <FRAMESET cols ="50%, 50% "...> <FRAME пате="фрейм 2"...>

	Фрейм
Фрейм		Фрейм 3
	Фрейм

<FRAME пате="фрейм 3"...>

</FRAMESET>

<FRAME пате="фрейм 4".„>

</FRAMESET>

Атрибути гіперпосилань доповнюються новою властивістю:

<А target='^peicM 1" .> — визначає власти­вість посилання [значення: "фрейм 1" — локаль­не ім'я області (фрейма), у якій буде відкрито до­кумент, на який указує гіперпосилання; _parent (або _top) — посилання вказує на сторінку без фреймів; _self — документ, на який указує поси­лання, відкриється усередині поточної області; _blank — документ, на який указує посилання, відкриється в новому вікні].

<IFRAME „>_</IFRAME> — плаваючий фрейм (область із смугами прокручування) для пе­регляду на сторінці іншого документа в окремому вікні, окрім стандартних атрибутів (name, src, scrolling, longdesc, frameborder, marginheight, marginwidth, target) додатково має:

width= n — ширина вікна в пікселах (за замовчу­ванням 300);

height= n — висота вікна в пікселях (за замовчу­ванням 150);

Порядок виконання роботи

1. В окремій паппі «Мій сайт» підготуйте файли для сайту.

Файл home.htm

<HTML> <HEAD>

<TITLE> Головна сторінка </TITLE> <HEAD> <BODY>

<!—В основну частину сторінки скопіюйте фра­гмент вітання із сторінки "Перший досвід" — > <А href="index.htm">'no4ani перегляд"</А> </BODY> </HTML>

Файл index.htm

<HTML>

<HEAD>

<TITLE> Структура сторінки </TITLE>

<HEAD>

<FRAMESET frameborder=l framespacing=5

cols="20%,80%"> <FRAME name="menu" NORESIZE

src="menu.htm">

<FRAME name="texts" src="framesl.htm"> </FRAMESET>

^- /ТІТЧМГТ -»

Файл menu.htm

<HTML>

<HEAD>

<TITLE> Лівий фрейм — меню </TITLE>

<HEAD>

<BODY>

<A target=_parent href="home.htm"> Головна

сторінка </А> <A target="texts" href="framesl.htm">

Біографія</А> <A target="texts" href="frames2.htm">

Захоплення</А> <A target="texts" href="frames3.htm">

Досягнення</А>

<!—Якщо на вашій сторінці "Перший досвід" є інші розділи, підготуйте посилання і для них—> </BODY> </HTML>

Файл framesl .htm

<HTML>

<HEAD>

<TITLE> Правий фрейм — Біографія

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Біографія із сторінки "Перший досвід"—>

</BODY>

</HTML>

Файл frames2.htm

<HTML>

<HEAD>

<ТПХЕ>Правий фрейм — Захоплення

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Захоплення із сторінки "Перший досвід"—>

</BODY>

</HTML>

Файл frames3.htm

<HTML>

<HEAD>

<ТІТЬЕ>Правий фрейм — Досягнення

</TITLE>

<HEAD>

<BODY>

<!—В основну частину сторінки скопіюйте фрагмент Досягнення із сторінки "Перший досвід"—>

</BODY>

</HTML>

2. Доповніть створені файли відповідними фраг­ментами зі сторінки «Перший досвід». Доповніть заголовки файлів МЕТА визначеннями і стилями сторінки «Перший досвід».

3. Перевірте роботу гіперпосилань на сайті.

говий індекс, потім кореспондент повинен опустити циста v поштову скриньку. Після цього він вже може не турбуватися, як саме цей ЦИСТ буде доставлено до адресата (одержувача). Це перший рівень моделі поштового зв'язку.

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

Наголосимо — користувача не турбує, як саме лист буде доставлено до ад­ресата. Все, що він повинен зробити, це використати відповідний «протокол» і помістити лист у поштову скршгьку.

Оскільки числова адресація (197.123.50.199) незручна для використання її лю­диною, в мережі Internet числовим адресам ставляться у відповідність імена. Ім'я складається з декількох частин, розділених крапкою. Наприклад, Web-сервер компанії Microsoft має ім'я www. microsoft. com, а сервер каналу «1+1» — www. Ip] us 1. kiev. ua. Імена, записані у такій формі, називають доменними.

Перед тим як два комп'ютери почнуть взаємодію, повинна існувати мож­ливість визначення за доменним ім'ям відповідної IP-адреси. Цим займаються спеціалізовані комп'ютери в мережі, які називають DNS-сервери (Domain Name Service, доменна служба імен). Коли необхідно перетворити доменне ім'я в ІР-адресу, комп'ютер, що ініціює з'єднання, звертається із запитом до DNS-cep-вера. Сервер DNS приймає ім'я, наприклад, www. relc. com, а повертає IP-адресу (193.124.229.197).

Internet має кілька служб, зокрема, електронну пошту, телеконференції (дискусійні групи), передавання файлів тощо. Більшість документів із різнома­нітною інформацією з різних галузей знань мають гіпертекстовий формат. Службу Інтернет, яка управляє передаванням таких документів, називають Woi 1*1 Wide Web (Web, WWW). Цим же терміном або простором И'І'/і ннїИМЮТ* обширну сукупність Web-документів, між якими існують гіпер........іі їм і і п

Поняття «гіпертекст» має досить дарню історію Ноно тип.....и., гику

філософії та комп'ютерних гехнологій ще \ сс|.....!І1 • ' і.....НІМО

основою гіпертексту стали сформульовані Н Ііуии \{\{Н

ііійііого письма, які він докладно виспітліні; і йти».

■ 6Q-x роках Т. Нельсон і Д ИнгильСтрі і .....огії

опрацювання інформації, роіроОн 11 г».

і ІПІ рТСКСІ і ' ПОІ її і.ііпіч її.і п..... і і броу-

:с/)ів (програм для завантаження та перегляду Web-документів) ці посилання підкреслюються або виділяються іншим кольором. Якщо клацнути лівою кноп­кою миші на гіперпосиланні, то програма перегляду гіпертексту завантажить документ, на який вказує посилання. Таким чином, сторінка набуває власти­вості інтерактивності. У деякому розумінні, завдяки гіпертексту, інформація у WWW організована за тим самим принципом, що і в людському мозку.

Окремі документи, які складають простір Web, називають Web-сторінками. Web-сторінки зберігаються на жорстких дисках Web-серверів. Web-сервери — це спеціалізовані комп'ютери з відповідним програмним забезпеченням, яке дає можливість доступу користувачів до Web-сторінок; це програмне забезпе­чення також називається Web-сервером.

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

Web-сторінки мають вигляд звичайних текстових документів, в які введено вказівки форматування. Принцип роботи броузера полягає в інтерпретації цих вказівок. При відображені таких документів броузером самі вказівки не відоб­ражаються, проте впливають на спосіб відображення решти частини докумен­ту. Згадані вказівки називають дескрипторами або тегами. З їх допомогою текст можна робити кольоровим, використовувати шрифти різного розміру, вбудовувати мультиплікацію, відео фрагменти тощо. Формат дескрипторів задається в описі спеціальної мови розмітки. Вона називається мовою розміт­ки гіпертексту-HTML (HyperText Markup Language). Наприклад, вигляд голов­ної сторінки сайта InterNetri (www. internet ri. net) та її код подано на рис. 1.2.

Документи, розмічені за допомогою цієї мови, називають HTML-докумен­тами. HTML-документи мають розширення .htm або .html.

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

Мова HTML розроблена спеціально для Web. її популярність забезпечують зокрема такі властивості:

— документ, створений за допомогою деякої програми, наприклад тексто­вого редактора, часто важко (а іноді і неможливо) використовувати в іншій програмі; HTML у цьому відношенні є універсальною;

— HTML — це відкритий стандарт;