Створення головної сторінки сайту засобами HTML

Завдання: створити головну сторінку сайту засобами HTML за правилами ергономічного розміщення матеріалів.

Обладнання: комп’ютер, з’єднаний з інтернетом, комп’ютерний або онлайновий HTML-редактор.

Під час роботи за комп’ютером дотримуйтеся правил безпеки.

1. Придумайте тему сайту, продумайте вміст і розташування елементів на головній сторінці.

2. Знайдіть в інтернеті (або створіть самостійно) матеріал (тексти, рисунки, посилання тощо) і збережіть у папці Сайт.

Навколо елементів сторінки (рис. 1, а) накресліть таблицю (рис. 1, б).

4. Запустіть на комп’ютері один із HTML-редакторів (можливо, онлайновий) за вказівкою вчителя / вчительки.

5. Створіть HTML-код вебсторінки із порожньою таблицею, доповніть код таблиці потрібною кількістю рядків і стовпців (див. рис.  1, б), вказавши відносні розміри таблиці у відсотках.
Збережіть HTML-файл з іменем index.html у папці Сайт. Запишіть HTML-код.

6. Об’єднайте, де це потрібно, рядки і стовпці, щоб загальний вигляд таблиці відповідав запланованому розташуванню елементів на головній сторінці сайту (рис. 2).

7. Установіть розміри клітинок таблиці (відносні та/або абсолютні) згідно із макетом (див. рис. 2).

8. Додайте до таблиці написи й зображення, меню, кнопки тощо відповідно до ескізу головної сторінки.

9. Відформатуйте елементи головної сторінки (колір, розмір, вирівнювання тощо) відповідно до критеріїв ергономіки.

10. Додайте до меню (і/або кнопок) гіперпосилання на інтернет-ресурси та перевірте їх роботу.

11. Вимкніть відображення меж таблиці. Збережіть HTML-файл.
Перегляньте сторінку сайту в кількох браузерах, із різним масштабуванням.
Перевірте роботу меню (і / або кнопок).

12. Надішліть HTML-файл вчителеві / вчительці або збережіть файл на хмарному диску, надавши доступ.

Зробіть висновок: у чому переваги та недоліки використання таблиць для макетування вебсторінки.