Основні поняття служби 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 тексту документа використовують теги:
малюнок з лівого краю, текст його обтікає справа:
<img src="prl.png" align="left">
малюнок з правого краю, текст його обтікає зліва:
<img src="prl.png" align="right">
Kpiм параметрів align, існують ще кілька параметрів:
відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):
<img src="prl.png" Vspace="10">
відстань між текстом i малюнком по горизонталі (30 пікселів):
<img src="prl.png" Hspace="30">
опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):
<img src="prl.png" alt="моя фотокартка">
ширина малюнка (тут 100 пікселів):
<img src= "pri.png" width="100">
висота малюнка (тут 200 пікселів):
<img src="prl.png" height="200">
рамка навколо малюнка (тут товщина лінії 5 пікселів):
<img src="prl.png" border="5">
Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:
<img src="prl.png" aling="left" Hspace=30 Vspace=5 alt="моя фотокартка">
Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".
Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:
<html>
<head>
<title> Мій перший крок </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<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>
<p align="justify">
<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>
<td>lxl</tr>
<td>lx2</tr>
<td>lx3</tr>
</tr>
<tr>
<td>2xl</tr>
<td>2x2</tr>
<td>2x3</tr>
</tr>
<table>
Щоб у вздповвдних комірках таблиці задати колір фону (параметр bgcolor), висоту (height) i ширину (width) комірок таблиці в пікселях, треба вище наведений текст доповнити таким чином:
<table
<tr>
<td height ="35" width="50" bgcolor="#FFCC33">lxl</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>