10.4.Приклад розробки сайта хнеу

Створити в теці «Мої документи» теку з ім'ям «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>

2. У елементі <body> вказуємо фон головної сторінки, колір заголовка, кольори посилань.

<body bgcolor="#99FFFF" link="green" >

2. Всю робочу область представляємо у вигляді таблиці

Логотип університету	Харківський національний економічний університет
Список факультетів (меню) Посилання 1 Посилання 2 Посилання 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».

2. Задаємо шрифт і його розмір для назви «Харківський національний економічний університет», використовуючи атрибут style в елементі td.

<td align="center" style="font-famaly:Arial; font-size:35">Харківський національний економічний університет</td>

Зберігаємо файл «index.html».

2. В елемент таблиці, що містить описання діяльності і історію університету, вставляється текст в параграфах за допомогою елемента 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».

2. Створюємо гіперпосилання елементом а з елементами 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»

2. Створюємо другу сторінку «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»