4.2.2. Cтруктура html документа
Символи, взяті в кутові дужки <> є HTML командами, по яким «браузер» розпізнає, як потрібно перетворити частини тексту, укладеного між цими командами.
Документ загалом повинен бути відмічений, як документ в форматі HTML. Для цього він повинен починатися командою <HTML> і закінчуватися командою </HTML>.
Документ складається з 2 частин:
Заголовка (Head),
Власне документа (Body).
Для виділення заголовка потрібно ввести:
<HEAD> Заголовок документа <HEAD>
Кожний WWW - документ має назву, яка вводиться в титульному рядку браузера. Для введення титульного рядка в заголовок документа потрібно скористатися наступними командами:
<HEAD> <TITLE> TITLE List </TITLE> </HEAD>
Потрібно зазначити, що титульний рядок повинен бути на англійській мові в латинському кодуванні, оскільки він відображається в спеціальних полях браузера.
Для запису основного тексту потрібно ввести:
<BODY> Основний текст </BODY>
Таким чином, загальна схема документа в форматі HTML виглядає таким чином:
<HTML>
<HEAD> <TITLE> Титульний рядок документа </TITLE> </HEAD>
<BODY> Основний текст документа </BODY>
</HTML>
При написанні команд HTML не має значення, якими буквами - рядковими або прописними писати команди.
У файлі HTML в його вихідному виді теги форматування перемішані зі звичайним текстом. Головною особливістю розмітки HTML є можливість вставки посилань на зовнішні документи або на внутрішні розділи того ж самого документа.
4.3. Реалізація веб-сайту системи для вивчення геоінформаційних мереж
Написання веб-сторінок здійснювалося на комп’ютері з операційною системою Windows XP, в текстовому редакторі БЛОКНОТ, фірми Microsoft, який зображений на рис. 4.1.
Рис.4.1. Текстовий редактор БЛОКНОТ
Характеристики комп’ютера, на якому був написаний веб-сайт, є наступними:
Intel® Pentium® 4 CPU 2.40 GHz, 2.39 ГГц, 256 МБ ОЗУ.
Мета даного веб-сайту полягає в тому, щоб допомогти студенту навчитися встановлювати веб-сервер і його адмініструвати, допомогти навчитися створювати власні веб-сторінки і їх розміщувати на сервері. Діаграма ієрархії функції веб-сайту представлена на рис. 4.2.
Написння веб-сайту, на мові HTML, було розпочате з написання першої (головної) веб-сторінки, яка дозволяє користувачу перейти на дві інші веб-сторінки.
Рис.4.2. Діаграма ієрархії функції веб-сайту
Текст html, головної веб-сторінки, є наступним:
<html>
<head>
</head>
<body BGCOLOR="#E7E3E7" >
<title>СИСТЕМА ДЛЯ ВИВЧЕННЯ ГЕОІНФОРМАЦІЙНИХ МЕРЕЖ</title>
<p align=center>
<!--STROKA-->
<table cellspacing="0" cellpadding="0" border=10 width=980 >
<tr>
<td class="anons_time" background="era.gif" width=120>Розробив Шпитко І.Я.</td>
<td class background="TOT.gif"=stroka1><MARQUEE trueSpeed scrollAmount=1 scrollDelay=20 behavior=left>
<a>НАВЧАЛЬНА СИСТЕМА ВИВЧЕННЯ ГЕОІНФОРМАЦІЙНИХ МЕРЕЖ ::::::::Львів-2008:::::::: </a>
</tr>
</form>
</table>
<!--End of STROKA-->
<p>
<table width="600" height="80%" align="center">
<tr>
<td class="Text">
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p>
<TABLE BORDER=1>
<TD ROWSPAN=8></TD><TH COLSPAN=5>
<a href="..\apache/Index11.html"><H1 ALIGN=CENTER>APACHE</H1></a><br>
<p>
</p>
<a href="..\SYSTEMA/index1.html"><H1 ALIGN=CENTER><pre>HTML</pre></H1></a><br>
</p>
</TABLE>
</blockquote>
</blockquote> </blockquote> </blockquote>
</blockquote></td>
</tr>
</table>
</body>
</html>
Вигляд головної веб-сторінки представлнений на рис. 4.3.
Рис.4.3.Головна веб-сторінка
З головної веб-сторінки, ми можемо, як було вже сказано, перейти на дві інші.
На першій сторінці студент ознайомлюється зі змістом розділу, за назвою “Адміністрування веб-сервера APACHE” і може перейти в такі підрозділи (веб-сторінки) як:
Встанлвлення веб-сервера Apache;
Налаштування Apache;
Тестування Apache;
Встановлення PHP.
Текст html, першої веб-сторінки, є наступним:
<head>
<title>СИСТЕМА ДЛЯ ВИВЧЕННЯ ГЕОІНФОРМАЦІЙНИХ МЕРЕЖ</title>
</head>
<body bgcolor="#E7E3E7" lang=RU link=blue vlink=blue style='tab-interval:35.4pt'>
<blockquote >
<blockquote > <blockquote >
<blockquote > <blockquote > <blockquote >
<br>
<p ><H3 ALIGN=CENTER>АДМІНІСТРУВАННЯ ВЕБ-СЕРВЕРА APACHE</H3></p>
<br>
<br>
<br>
<br>
</blockquote >
</blockquote > </blockquote >
<blockquote >
<p ><a href="1/Index1.htm">1. Встановлення веб-сервера Apache</p>
<p ><a href="2/Index2.htm">2. Налаштування Apache</p>
<p ><a href="3/Index3.htm">3. Тестування Apache</p>
<p ><a href="4/Index4.htm">4. Встановлення PHP</p>
<p>
</td>
</tr>
</table>
</div>
</tr>
</table>
</body>
</html>
Вигляд першої веб-сторінки представлений на рис. 4.4. Вигляди наступних розділів (веб-сторінок) представлені в рис.4.5.-рис.4.9.
Рис.4.4.Перша веб-сторінка
Рис.4.5. Розділ “Встановлення веб-сорвнра Apache”
Рис.4.6. Ррозділ “Налаштування Apache”
Рис.4.7. Розділ “Тестування Apache”
Рис.4.8. Розділ “Встановлення PHP”
Друга сторінка, на яку ми можемо перейти з головної сторінки, складається з двох головних розділів, які мають назви:
Про HTML;
ПРАКТИЧНА ЧАСТИНА (НАПИСАННЯ ВЕБ-СТОРІНКИ).
Текст html, другої веб-сторінки, є наступним:
<html>
<head>
</head>
<body BGCOLOR="#E7E3E7" >
<title>НАВЧАЛЬНА СИСТЕМА ДЛЯ ВИВЧЕННЯ ГЕОІНФОРМАЦІЙНИХ МЕРЕЖ</title>
<p align=center>
<!--STROKA-->
<table cellspacing="0" cellpadding="0" border=10 width=980 >
<tr>
<td class="anons_time" background="era.gif" width=120>Тут Ви знайдете:</td>
<td class background="TOT.gif"=stroka1><MARQUEE trueSpeed scrollAmount=1 scrollDelay=20 behavior=left>
<a href="HTML_1/Index.html"> 1.ОСНОВИ МОВИ HTML :::::::: </a>
<a href="HTML_2/Index.html"> 2.ПРАКТИЧНЕ СТВОРЕННЯ ПРОСТОЇ ВЕБ-СТОРІНКИ </a>
</tr>
</form>
</table>
<!--End of STROKA-->
<p>
<table width="600" height="80%" align="center">
<tr>
<td class="Text">
<blockquote>
<p>
<a href="HTML_1/Index.html"><H1 ALIGN=CENTER>Про HTML</H1></a><br>
<p>
</p>
<a href="HTML_2/Index.html"><H1 ALIGN=CENTER><pre>ПРАКТИЧНА ЧАСТИНА (НАПИСАННЯ ВЕБ-СТОРІНКИ)</pre></H1></a><br>
</p>
</blockquote></td>
</tr>
</table>
</body>
</html>
Вигляд другої веб-сторінки представлений на рис. 4.9.
Рис.4.9. Друга веб-сторінка
Перший розділ “Про HTML” складається з наступних розділів:
Основи мови HTML;
Теги мови HTML;
Таблиці.
Другий розділ другої веб-сторінки складається з наступних розділів:
Передмова до створення веб-сторінки;
1. Створенння структури веб-сторінки;
2. Інформаційне наповнення веб-сторінки;
3. Списки з номерами і без;
4. Вставка зображення у веб-сторінці;
5. Створенння ссилки;
6. Створенння таблиці.
Вигляд всіх веб-сторінок (розділів) є однаковим, але інформаційне їх наповнення є різним. Всі веб-сторінки є взаємопов’язаними між собою, ссилками в логічному і ієрархічному порядку.