Основні поняття служби WWW

Основні вживані терміни Всесвітньої павутини

Наведемо роз’яснення деяких термінів, які використовуються в WWW. HTML (hyper text markup language, мова розмітки гіпертексту). Це формат гіпермедійних документів, які використовують в WWW для представлення інформації. Цей формат описує вміст документу, його структуру, а також його зв’язки з іншими документами. Зовнішній вигляд документа на екрані користувача визначається навігатором — якщо користувач працює за графічним або текстовим терміналом, у кожному випадку документ на екрані матиме різний вигляд. HTML виконує інтегруючу роль для елементів гіпермедійного документа. Імена файлів у форматі html, як правило, закінчуються на html (або мають розширення htm у випадку, якщо сервер працює під Windows). URL (uniform resource locator, універсальний вказівник на ресурс). Таку назву носять словесні посилання на будь-які інформаційні ресурси Internet. До ресурсів Internet можна отримувати доступ і за IP-адресою певного комп'ютера. HTTP (hypertext transfer protocol, протокол передачі гіпертексту). Таку назву носить протокол, за яким взаємодіють клієнт та сервер WWW для передавання гіпермедійного документа клієнту.

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

Веб-сайт це спеціальна програма (інколи набір програм), що за запитом клієнта (браузера) повертає йому Веб-сторінку у відповідь. Іншими словами, Ви на свому комп'ютері запускаєте програму-браузер (Internet Explorer, Mozilla FireFox, Opera, ...) і в рядку адреси набираєте доменне ім`я сайту.

Наприклад: pedcollege.sambir.biz і натискаєте на клавіатурі клавішу "Enter". На забувайте, що даному випадку в кінці обов'язково потрібно натискати цю клавішу.

Через секунду головна сторінка сайту з'явиться перед Вами. За цей час дана адреса, як запит надійшла до відповідного сервера і той згенерував чи просто надіслав у відповідь сторінку. Усі сторінки формуються спеціальною мовою розмітки - HTML. Навіть коли Ви зараз читаєте цю лекцію, можете переглянути в горі свого браузера рядок адреси. Там побачите такий текст:

http://www.eduforme.org/mod/page/view.php?id=189

http:// - це назва протоколу, згідно якого дану сторінку передано нам, вводити в рядку адреси не обов'язково;

www.eduforme.org - доменне ім'я (адреса) сайту;

/mod/page/view.php?id=189 - сам запит. Для досконалого розуміння подібних запитів потрібно вміти програмувати мовою PHP.

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

http://www.eduforme.org/mod/page/view.php?id=189

http://pedcollege.sambir.biz/forum.html?func=view&catid=15&id=702

В перщому запиті міститься адреса сайту www.eduforme.org, в другому - pedcollege.sambir.biz

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

Особливості вставки об’єкта і файлів з додатків у Web-сторінки

Перетворення в формати файлів Microsoft Office і HTML і навпаки.У результаті можна не тільки вставляти файли Microsoft Office цілком у Web-сторінки, але і здійснювати операції копіювання і вставки прямо з додатків Office. Наприклад, якщо ви копіюєте таблицю з Microsoft Word, діапазон ячейок Excel або групу записів Access, FrontPage успішно вставить дані як таблицю HTML.

Вставка малюнків

Щоб вставити малюнок, треба скористатися тегом:

<img src="my.jpg">,

де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).

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

Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:

малюнок з лівого краю, текст його обтікає справа:

малюнок з правого краю, текст його обтікає зліва:

Kpiм параметрів align, існують ще кілька параметрів:

відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

відстань між текстом i малюнком по горизонталі (30 пікселів):

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

ширина малюнка (тут 100 пікселів):

висота малюнка (тут 200 пікселів):

рамка навколо малюнка (тут товщина лінії 5 пікселів):

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".

Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<H3>Привіт, це моя перша сторінка.</H3>

<br>

<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>

</center >

<img src="photo.jpg " align="left" HSPACE=30 VSPACE=5

alt="моя фотокартка" WIDTH=80 HEIGHT=80>

<font size="+2"> Шановний колего !</font> Я вивчаю <font size="+l">

мову HTML, </font> щоб створити власну<i> домашню Web-сторінку</i> для спілкування з друзями i знайомими. Щоб вони могли <b><i>подивитися мою фотокартку, </i> </b> прочитати про мене, написати

кілька рядків в мою <u> книгу для гостей. </u>

</р>

</body>

</html

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

Списки маркуються за допомогою тега <li> </li> за взірцем:

Маркер	Опис
·	<li type="disk"> Задуйвітер </li>
o	<li type="circle"> Макогоненко </li>
§	<li type="square"> Петренко </li>

ОФОРМЛЕНИЯ ТАБЛИЦЬ

Для раціонального розподілу площі сторінки між її текстовими i графічними фрагментами використовують таблиці.

Таблиця задається тегом <table> </table>.

Рядки таблиці задаються тегом <tr> </tr>.

Стовпчики таблиці задаються тегом <td> </td>.

Нехай потрібно створити таблицю з двома рядками i трьома стовпчиками наведеного виду i наповнення (Рисунок 4).


1х1	1х2	1х3
2х1	2х2	2х3

Рисунок 4. Таблиця

Для створення цієї таблиці необхідно набрати такий текст (спечатку задаються рядки):

<table

<tr>

</tr>

<tr>

</tr>

<table>

Щоб у вздповвдних комірках таблиці задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок таблиці в пікселях, треба вище наведений текст доповнити таким чином:

<table

<tr>

<td width="50" bgcolor="#336699">1x2</tr>

<td width="50" bgcolor="#FFCC33">lx3</tr>

</tr>

<tr>

<td height ="35" width="50" bgcolor="#336699">2xl</tr:>

<td width="50" bgcolor="#FFCC33">2x2</tr> <td width="50" bgcolor="#336699">2x3</tr>

</tr>

<table>