Підсумковий проєкт "Мова гіпертекстової розмітки HTML"

 

Завдання  проєкту

Використовуючи теги  та атрибути  HTML створити веб-сторінку довільної теми  у вигляді таблиці, яка займає 100% ширини вікна браузера і висоту 100%, у якій:

  • Перший рядок висотою 150 пікселів містить логотип веб-сторінки (зображення розміром не більше 100-150 пікселей та назву веб-сторінки. Вміст рядка центрований.
  • Другий рядок (меню веб-сторінки)  висотою 100 пікселів має світло-сірий  колір фону, у рядку 4 клітинки. В клітинках розміщені  гіперпосилання на розділи веб-сторінки (якоря). Текст в клітинках центрований.
  • Третій рядок це вміст контенту веб-сторінки. Тут знаходяться заголовки другого рівня гіперпосилань з другого рядка (меню сторінки), які розміщені по центру. Після описової частини контенту (у прикладі це "Про собак") є вкладена таблиця (вона створюється подібно до вкладених списків), ця таблиця також має ширину 100%, а висота рядків 300 пікселів, клітинки вкладеної таблиці мають ширину по 25%. У клітинках  вкладеної таблиці є зображення (потрібно підібрати невеликий розмір, або ж відкорегувати розмір, щоб вмістився в висоту 300 пікселів), під зображенням є заголовок третього рівня-гіперпосилання. І зображення і заголовок-гіперпосилання розташовані по центру клітинки.
  • Третій рядок (вміст контенту) має містити також розділ з відеороликом, відеоролик має бути  по центру сторінки
  • Четвертий рядок таблиці - це підвал  веб-сторінки, у якому є 3 клітинки, в першій без  фону - логотип  веб-сторінки, дві інші клітинки  мають темно-сірий колір фону  і білий колір шрифта, вміст клітинок теж  центрований.  В контактах дані телефону та електронної пошти мають бути відповідно описані в коді.
  • Розмістити проєкт на https://app.netlify.com/ і надіслати   посилання викладачу

Приклад реалізації веб-сторінки у вигляді таблиці:





Нові Старіші