- •Встановлення сервера Apache
- •Налаштування сервера Apache
- •Тестування сервера Apache
- •Реалізація веб-сайту системи для вивчення геоінформаційних мереж
- •1. Створення структури веб-сторінки
- •1. Відкриваємо текстовий редактор блокнот.
- •6. Закриваємо теги від в такій послідовності-останнього до першого:
- •10. Тепер нам треба зберегти наш текст в html форматі. Для цього в меню “Файл” текстового редактора Блокнот ми вибираємо підменю “Зберегти як” .
- •2. Інформаційне наповнення веб-сторінки
- •1. Відкриємо наш файл w_01.Html наступним чином:
- •2. Починаємо наповнювати нашу веб-сторінку.
- •3. Тепер розмістимо наш заголовок по центрі веб-сторінки.
- •4. Тепер ми введемо назву вірша, який наповнить нашу веб- сторінку. Вірш має назву - “спогад”.
- •6. А тепер власне ми перейдемо до наповенння веб-сторінки віршем.
- •7. Другий стовпчик ми зробимо різнокольоровим без жодних відступів .
- •8. Після того, як ми ввели текст вірша, його необхідно підписати.
- •9. Зберігаємо зміни зроблені в веб-документі.
- •3. Списки з номерами і без
- •1. Давайте створимо новий html документ, на основі набутих знаннь при вивченні попередніх розділів:
- •2. А тепер давайте розберемося із елементами які створюють нумерований і ненумерований список:
- •3. Створіть такий наступний список в “тілі” документа і перегляньте результати у веб-браузері:
- •4. Вставка зображення у веб-сторінці
- •1. Але для початку давайте створимо новий html документ, на основі набутих знаннь при вивченні попередніх розділів:
- •3. А тепер, давайте власне перейдемо до розміщення зображення на веб-сторінці.
- •4. Вставляємо наше зображення у веб-документ:
- •5. А тепер давайте реалізуємо ссилку на інше місце у нашій створеній веб сторінці:
- •6. Створення таблиці
- •1. Давайте створимо новий html документ, на основі набутих знаннь при вивченні попередніх розділів:
- •4. А тепер давайте на основі набутих знаннь створемо просту табличку:
- •Висновок
3. А тепер, давайте власне перейдемо до розміщення зображення на веб-сторінці.
Знайдіть якийсь зображення з розширенням JPG, назвіть його NEO і помістіть його в папку “ERA_2008”.
Щоб вставити в документ зображення, необхідно скористатися тегом <IMG>, який, наприклад, може виглядати наступним чином:
<IMG SRC=ім’я файлу із зображенням WIDTH= ширина HEIGHT=висота>
Параметр SRC= задає ім’я файла із зображенням, яке повинне бути задане обов’язково. Якщо параметри WIDTH і HEIGHT не задані, тоді будуть використовуватися реальні розміри зображення.
Щоб зображення примикало до границі сторінки і обтікало текстом документа, необхідно також вказати атрибути ALIGN=LEFT або ALIGN=RIGHT.
4. Вставляємо наше зображення у веб-документ:
<IMG SRC=NEO.JPG WIDTH= 600 HEIGHT=500>
Зберігаємо і переглядаємо веб-браузером.
Ось як має виглядати написаний текст веб-документа в кінцевому варіанті даного розділу розділу:
<HTML>
<HEAD>
<TITLE>МАЛЮНОК </TITLE>
</HEAD>
<BODY>
<HR WIDTH=80% ALIGN=CENTER SIZE=4 COLOR=BLUE/>
<IMG SRC=NEO.JPG WIDTH= 600 HEIGHT=500>
</BODY>
</HTML>
5. Створення ссилки
В даному розділі, ми будемо вчитися створювати ссилки на інші веб- сторінки і ссилки на інше місце в тому самому документі..
1. Давайте створимо новий HTML документ, на основі набутих знаннь при вивченні попередніх розділів:
<HTML>
<HEAD>
<TITLE>ССИЛКИ </TITLE>
</HEAD>
<BODY>
....
“ТІЛО” ДОКУМЕНТА
....
</BODY>
</HTML>
Збережемо цей веб-документ в папку з іменем “ERA_2008” і назвемо файл W_05.html
2. Гіпертекстові ссилки, для переходу від одної до іншої веб-сторінки, задаються за допомогою парного тега. Відповідний фрагмент програми документа повиненн виглядати наступним чином:
<A HREF=ім’я файлу>Текст ссилки</A>
В якості значення параметра A HREF використовується ім’я файла, який повиненн бути відкритий при клацані по ссилці.Текст, який знаходиться на екрані між тегами <A> </A>, виділяється кольором і підкреслюється так, що наявність ссилки легко помітити.
3. Давайте створемо ссилку на наш перший веб-документ, який має назву W_01.HTML:
<A HREF= W_01.HTML >ССИЛКА НА ПОЕЗІЮ Дмитра Павличка “Спогад” </A>
Якщо зараз переглянути веб-документ – то ссилка дійсно працює.
4. А тепер давайте попробуємо створити ссилку на інше місце в цьому веб-документі.
Для цього ми в першу чергу наповнимо наш документ літерами тегом <PRE>, який дозволяє розміщати текст так, як він є в текстовому редакторі БЛОКНОТ:
<pre>
А
П
Е
У
Г
Ш
Е
У
В
Л
П
К
У
Н
Ш
Щ
Г
Е
К
У
В
А
Щ
Д
О
В
Ц
В
А
П
Н
Ш
Щ
Н
Е
К
У
Ш
О
Р
П
А
М
Я
</pre>
Для реалізації переходу необхідні два елемента: ссилка, яка вказує куди необхідно перейти, і якір – який фіксує місце переходу.
Ссилка виглядає майже так само, як і попередня:
<A HREF=#назва якоря >Текст ссилки</A>
Якір використовує теги <A> і </A> і виглядає наступним чином:
<A NAME=назва якоря>Текст</A>
Назва якоря-це любий текст, який ніколи не появляється на екрані.