Web-технології

Проектна робота: створення простого веб-сайту

Інформатика. Модуль "Веб-технології". Урок 33

Вимоги до проекту

Завдання: створити сайт НА МІСЦЕВУ ТЕМАТИКУ (мовою HTML з використанням CSS); сайт повинен складатись не менше ніж з двох сторінок.

Орієнтовні теми для проектної роботи:

Технічні вимоги:

1) Сайт складається не менш як з двох сторінок; 

2) Сайт написаний мовою HTML без використання сторонніх програм для створення сайтів (лише редактор коду типу Notepad++); він повинен мати ПРАВИЛЬНУ структуру (<html>, <head>, <body>)

3) На кожній сторінці повинні бути логічні частини (розділи, абзаци); назви розділів виділяти з допомогою тегів заголовків <h1> … <h5>; до сторінок застосувати правила ергономічного розміщення відомостей на веб-сторінці

4) На кожній зі сторінок мають бути використані шрифти різних розмірів, кольору чи виділення (наприклад, заголовки іншого кольору і більшого розміру, цитати курсивом, важливі фрази жирним виділенням тощо); 

5) На кожній зі сторінок повинно бути не менше двох картинок з різним вирівнюванням (зліва, справа); замість двох картинок можна вставити CSS-слайдер з фотографіями; розміри зображення - до 600 пікселів по будь-яких вимірах, об'єм - до 100 кілобайт (оптимально до 40 кілобайт); для зменшення розмірів зображення можна використати онлайн ресурси чи безкоштовні легкі програми типу XNView, Image Resizer тощо;

6) Один з малюнків має мати формат GIF та має бути виконаний ВАМИ ВЛАСНОРУЧ (це може бути банер, фотогалерея тощо);

7) На сайт вставити ВІДЕО з YouTube (ним може бути попередньо завантажене на YouTube ваше власне відео); можна вставити плеєр з фоновою мелодією, яким може керувати користувач;

8) На одній із сторінок використати нескладну ФОРМУ для зворотного зв’язку з відвідувачами вашого сайту (наприклад, оцінка вашого сайту, короткий опис недоліків сайту, вік, стать чи соціальний статус відвідувача тощо); як правило, такі форми розміщують У КІНЦІ веб-сторінки;

9) Для створення меню сайту використати CSS-анімацію чи JavaScript (можна використати меню з практичної роботи №7 «Веб-програмування»), меню сайту розмістити НА КОЖНІЙ СТОРІНЦІ сайту;

10) Використати зовнішню таблицю CSS для застосування стилів до абзаців, малюнків тощо.

11) На кожній зі сторінок повинні бути використані засоби для пошукової оптимізації сайту (відповідні теги та атрибути).

Як зв'язати сторінки одного сайту?

Зв'язок (перехід) між сторінками найкраще реалізувати з допомогою динамічного меню (ви створювали його в ПР7), яке у вашому випадку матиме лише два пункти: «Головна сторінка» та «Друга сторінка». 

Це меню потрібно розмістити НА ПОЧАТКУ КОЖНОЇ сторінки (вставити відповідний код у тіло кожної сторінки), щоб меню було ПЕРШИМ елементом на сторінці (вгорі).

Оскільки ці сторінки використовують однакову зовнішню CSS, то ви створюєте ЄДИНИЙ CSS-файл, і підключаєте обидві сторінки до нього. 

Оскільки сторінки будуть розміщуватись у ОДНІЙ папці сайту, то в коді меню в тегу гіперпосилання <a href=”…”> достатньо записати лише імена ваших сторінок:

<nav>

    <ul>

        <li><a href="index.html"><span>Головна сторінка</span></a></li>

        <li><a href="page2.html"><span> Друга сторінка</span></a></li>

    </ul>

</nav>

Другий (і примітивніший) спосіб - дати в кінці тіла КОЖНОЇ сторінки пряме текстове гіперпосилання для переходу на іншу сторінку типу:

<a href="page2.html">Наступна сторінка</a>

Як виділити назви розділів на сторінці?

Назви розділів на сторінці можна подати на кольоровій смужці - це виглядає красивіше. Для цього можна скористатись наведеним нижче кодом. Замість тегу <strong> можна скористатись тегом <h2> чи <h3>, однак тоді висота кольорової смуги стане більшою.

Добрим людям на здоров'я

Тут добрим людям, які хочуть зробити GIFку, подаруночок (у ZIP-архіві). ПОДАРУНОК   

Якщо подаруночок щось спитає, відповідайте: 12345  

Подарунок не потребує встановлення і не повинен нічого просити.