Приклад розробки сайта ХНЕУ
Створити в теці «Мої документи» теку з ім'ям «hneu». Надалі всі створені файли поміщатимемо в цю теку.
Всі HTML-документи використовують кодування ASCII (звичайний текст) тому їх можна створювати в Блокноті (Notepad.exe). Запустимо Блокнот, виконавши виконаємо команду «Пуск->Программы->Стандартные->Блокнот» як приведено на рисунку 10.14.
Рис. 10.14. Запуск блокнота
1. Створюємо HTML-файл із структурою HTML-документа текст, якого приведений нижче:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Зберігаємо файл у папці, що створена раніше, в кодуванні ANSI з ім'ям «template.html», як представлено на рис. 10.15.
Рис. 10.15. Вікно збереження шаблону HTTP-документа в кодуванні ANSI з ім'ям «template.html»
Надалі цей файл використовуватимемо як шаблон для HTML-документів. За поглядання цього файла в браузері (Internet Explorer) нічого не відобразиться.
На прикладі створення сайта про наш університет розробити сайт про свій факультет і свою успішність. Оформити сторінки роботи відповідно до індивідуального варіанту лабораторної роботи.
Структура сайта університету складається з двох HTML-документів (index.html, faculties.html, і папки «image», в якій поміщатиметься весь контент), розташованих в директорії «C:\Documents and Settings\...\Мои документы\HNEU». Дана структура сайта представлена на рис. 10.16.
Рис 10.16. Структура сайта університету
2. У «Блокноте» відкрити створений нами шаблон, файл «template.html». Після відкриття шаблону зберегти його з ім'ям «index.html». У розділі заголовка <head> </head> вставляється рядок з назвою HTML-сторінки.
<title>Офіційний сайт ХНЕУ | Університет сьогодні</title>
3. У елементі <body> вказуємо фон головної сторінки, колір заголовка, кольори посилань.
<body bgcolor="#99FFFF" link="green" >
4. Всю робочу область представляємо у вигляді таблиці
| Логотип університету | Харківський національний економічний університет |
| Список факультетів (меню) o Посилання 1 o Посилання 2 o Посилання 3 … | Опис діяльності і історія університету |
Далі приведена HTML-розмітка головної сторінки сайта у вигляді таблиці.
Приклад структура головної сторінки сайту
<table width="100%" heigth="100%" border="1">
<tr height="100">
<td width="20%">Логотип університету</td>
<td align="center">Харківський національний економічний університет</td>
</tr>
<tr>
<td>Список факультетов (меню<br/>
<ul type="square">
<li>Ссылка 1</li>
<li>Ссылка 2</li>
<li>Ссылка 3</li>
<li>...</li>
</ul>
</td>
<td valign="top">Описання діяльності та історія університету</td>
</tr>
</table>
Зберігаємо файл «index.html». HTML-документ має вигляд, наведений на рис. 10.17.
Рис. 10.17. Структурна розмітка головної сторінки «index.html» сайту ХНЕУ
Для вставки логотипу університету необхідно в теку «image» помістити малюнок з логотипом «logo_hneu.gif». У перший елемент таблиці записуємо елемент img.
<img src="Image/logo_hneu.gif" alt="Логотип університету" />
Формуємо список факультетів за допомогою елементів ul і li.
<td>Список факультетів (меню)<br/>
<ul type="square">
<li>Довузівської підготовки</li>
<li>Економіки і права </li>
<li>Економічної інформатики</li>
<li>Менеджменту і маркетингу </li>
<li>Міжнародних економічних відносин</li>
<li>Обліку і аудиту</li>
<li>Фінансовий</li>
<li>Заочний</li>
</ul>
</td>
Зберігаємо файл «index.html».
5. Задаємо шрифт і його розмір для назви «Харківський національний економічний університет», використовуючи атрибут style в елементі td.
<td align="center" style="font-famaly:Arial; font-size:35">Харківський національний економічний університет</td>
Зберігаємо файл «index.html».
6. В елемент таблиці, що містить описання діяльності і історію університету, вставляється текст в параграфах за допомогою елемента p, br і форматується атрибутом align і тегами b і i.
<td valign="top">
<p><b>Описання діяльності та історія університету</b></p>
<p>Харківський національний економічний університет є державним вищим навчальним закладом вищого, IV рівня акредитації, що знаходиться в віданні Міністерства освіти і науки України.</p>
<p align="right">На сьогодні, Харківський національний економічний університет є провідним спеціалізованим вищим навчальним закладом Сходу України, який надає повний спектр навчальних послуг, здійснюючи багатоступеневу підготовку, перепідготовку та підвищення кваліфікації фахівців з 22 спеціальностей таких напрямків:<p>
<p align="center">
<ol type="l">
<li>економіка і підприємництво</li>
<li>менеджмент</li>
<li>комп'ютерні науки</li>
<li>видавничо-поліграфічна справа</li>
<li>туризм</li>
<li>державне управління</li>
</ol>
<p align="justify">До складу університету входить 8 факультетів, 34 кафедри, Вищі школи, Міжгалузевий інститут підвищення кваліфікації, спецради із захисту дисертацій, навчальні та науково-дослідні лабораторії, обчислювальний центр, наукова бібліотека, видавництво, спортивні комплекси.</p>
<p>ХНЕУ є базовим регіональним центром з підготовки та перепідготовки державних службовців та одним з науково-методичних центрів Міністерства освіти і науки з питань підготовки економістів та менеджерів.</p>
<p><i>Серед первістків економічної освіти</i>
Харківський національний економічний університет знаходиться при джерелах становлення спеціальної економічної освіти в Україні. В 1893 році він був заснований з ініціативи Харківського купецького товариства як Харківське комерційне училище Імператора Олександра ІІІ для фахової підготовки персоналу торгівельних і промислових підприємств вищої та середньої ланок.</p>
</td>
Зберігаємо файл «index.html».
7. Створюємо гіперпосилання елементом а з елементами href, target.
<li><a href="faculties.html" target="_blank">Довузівської підготовки</a></li>
<li><a href="http://www.hdeu.edu.ua/ua/education/facultet/eip.html">Економіки і права</a></li>
Зберігаємо файл «index.html». HTML-документ головної сторінки надається на рис. 10.18.
Рис 10.18. Вид головної сторінки сайта «Index.html»
8. Створюємо другу сторінку «faculties.html»
<head>
<title>Факультет - Довузівської підготовки</title>
</head>
<body bgcolor="#CCFFCC">
<h1>Довузівська підготовка</h1>
<h2>Факультет довузівської підготовки надає слухачам можливість:</h2>
<ul>
<li>поглиблено вивчати математику, українську мову та літературу, основи економіки та інформатику для успішної здачі шкільних випускних іспитів, проходження незалежного зовнішнього тестування та участі в олімпіаді нашого університету;</li>
<li>ознайомитись з основами економіки для подальшого визначення майбутньої професії;</li>
<li>оволодіти навичками роботи на персональному комп’ютері.</li>
</ul>
<h2>Підготовчі курси</h2>
<p>На підготовчих курсах навчаються учні 11 класів, а також випускники попередніх років.</p>
<p>Форми навчання:</p>
<ul>
<li>вечірня (4 рази на тиждень з 17.00 до 19.30);</li>
<li>очно-заочна (заняття у неділю с 9.00 до 16.00);</li>
<li>заочна (для іногородніх слухачів, з проведенням консультацій в неділю та розширених консультацій на весняних канікулах).</li>
</ul>
<p>Початок навчання на вечірніх та очно-заочних курсах: перший потік з 1 жовтня, другий потік з 1 лютого.</p>
<br />
<p>За довідками, будь ласка, звертайтесь:<br />
Приймальна комісія, Бібліотечний корпус, 1 поверх, к. 124, тел. +38(057) 702-18-37<BR />
Підготовчі курси, 2 корпус, 2 поверх, к. 18, тел. +38(057) 702-18-25.<BR />
Проспект Леніна 9а, м. Харків, 61001, Україна. </p>
<br />
<p>Харківський національний економічний університет<br />
2008-2009</p>
<p>© Харківський національний економічний університет 2005-2008</p>
<p>Coding by Driver 2008 ©</p>
<p>Наша адреса:</p>
<p>м. Харків, пр. Леніна, 9а<br />61001 Україна</p>
<p>Тел.: +38 (057) 702 03 04<br />Факс: +38 (057) 702 07 17<br />e-mail: <a href="mailto:mail@hneu.edu.ua">mail@hneu.edu.ua</a></p>
<p>Тел. довіри: +38 (057) 758-77-37</p>
</body>
</html>
Зберігаємо її в теку з ім'ям «faculties.html». На рис. 10.19 подається вигляд документа в Internet Explorer.
Рис 10.19. Сторінка «faculties.html»