HTML будова сторінки. CSS, стилізація сторінок. Побудова та проектуювання сторінок.

Урок № 25

Тема. HTML будова сторінки. CSS, стилізація сторінок. Побудова та проектуювання сторінок.

Мета:

навчальна:

• Ознайомити учнів з типами верстки сторінок
• Пояснити поняття блокової будови сторінки
• Зпроектувати веб-сторіноку
• Розібрати наповнення сторінки

розвивальна:

• Робота з веб та веб-сторінки
• Наочне зображення сторінки
• Розуміти результат роботи з сторінкою

виховна:

• Важливість дотримання оформлення сторінки
• Писати гарний семантичний код

Тип уроку: комбінований.

Обладнання: комп'ютери, браузер, блокнот або notepad++

Наочне оформлення: презентація по CSS

Хід уроку

1. Типи верстки.
2. Блокова верстка, переваги та недоліки
3. Власне розробка сторінок

Структура уроку

1. Органiзацiйний етап
2. Перевірка домашнього завдання.
3. Актуалiзацiя опорних знань
4. Мотивацiя навчальної дiяльностi.
5. Вивчення нового матерiалу побудова сторінки з блоковою моделлю CSS:

1. Типи побудови сторінки
2. Блокова верстка, переваги та недоліки
3. Власне розробка сторінок.
4. Практична робота

6. Узагальнення набутих знань.
7. Домашнє завдання
8. Пiдбиття пiдсумкiв уроку.

1. Органiзацiйний етап

1. Привітання, перевірка пристності.
2. Підготовка учнів до уроку.
3. Оголошення теми, очікування учнів від уроку.

2. Перевірка домашнього завдання.

Чи погралися ви з Developer Tools, як побудовані сторінки на ваших улюблених сайтах?

3. Актуалiзацiя опорних знань

Що вам відомо про типи верстки, які способи є найбільш популярними. Що потрібно зробити аби контент мав адекватний вигляд на дисплеях різних розмірів?

4. Мотивацiя навчальної дiяльностi.

Напрямок Frontend є дуже широко використовуваним, фактично усім потрібен верстальищик, вони є на кожному сайті, за це отримують не найгіршу заробітню платню. Ви можете створювати Web-сторінки бажаного вигляду.

5. Вивчення нового матерiалу Верстка з блоковою моделлю CSS:

Подача матеріалу супроводжується демонстрацію за допомогою презентації.

HTML-верстка сайту.   HTML-HyperText Markup Language -мова гіпертекстової розмітки. Нею відбувається набор сторінок в мережі Інтернет.

1. Типи верстки.

• Таблична верстка сайту – структура верстки представлена у вигляді таблиці, наразі є застраліми способом побудови сторінки.Усі елементи, що розташовані на сторінці лежать у <td></td> комірках таблиці, можливе об’єднання комірок таблиці для правильної розмітки. Не є оптимальним рішенням через застарілість технології порівяно з Flex та Grid та навіть з Float. Було дуже популярним у часи HTML3. У HTML5 та CSS3 є більш продуктивні, вище зазначені технології, що дозволяють з меншими ресурсами відображати сторінки у заданому вигляді.
• CSS-верстка сайту. Верстка на є саме оформленням та HTML тегів,  їх розташування, розміри, кольори, шрифти – велика кількість властивостей.
• Адаптивна верстка сайту, верстка сторінки з медіа-запитами, аби розуміти розмір екрану користувача та коректно відображувати зміст. Існує три основі типи – телефон, планшет, декстоп. До 768 пікселів – телефон(смартфон). Від 768 пікселів до 1024 – планшет, більше – десктоп. Звичайно мається на увазі стандартна оріентація стосовно екрану мобільних пристроїв. Можливі також медіа запити в залежності від екрану навіть в рамках цих проміжків вказаних у межах для типів пристроїв. Кросбраузерність - питання відображення у різних браузерах, не усі браузери, особливо старі версії браузерів можуть не коректно відображувати контент сторінки, через відстуність підтримки певної технології, або особливості браузера.
• Блокова верстка сайту. Обернення елементів строінки в обгортки – теги <div>Теги</div> для зручного групування, відображення, зручного визначення в CSS, структурований код, стислий, швидке відображення сторінки.

Тег <div> - можна визначати, як обгортку(контейнер). Це блок, у який можна вкладати теги в тому числі й інші <div>, що є дуже зручним для побудови розмітки сторінки.

Для обробки даних, оживлення сторінки у браузері, а не на сервері використовується скриптова мова JavaScript, для бази даних сайту – MySQL, для роботи сайту на сервері(Backend)- PHP, проте усі ці речі не передбачені шкільним курсом інформатики.

2. Блокова верстка, переваги та недоліки

Переваги блокової верстки:

• Зручність розмітки
• Можливість швидкого переміщення, появи, приховання контенту на сторінці
• Зручність розміщення в певній секції екрану
• Компактність коду
• Швидше табличного в переважній більшості випадків
• Звичність для більшості верстальщиків
• Простота застосування
• Струкутурованість

Недоліки блокової верстки: 

         Надмірне зловживання тегом <div></div> серед верстальщиків-початківців, навіть коли оброртка не потрібна блоком не потрібна.

• Ігнорування семантичних тегів <section>, <aside>, хоча семантичні теги <nav> та <footer> є досить розповсюдженими.
• У разі неграмотного використання розмітки та CSS можливі схлопування блоків, налягання блоків один на інший.
• Не є таким шаблоном, як таблиця

3. Власне розробка сторінок.

Ознайомлення с основними тегами для побудови сторінки:

• <p>-параграф для тексту
• Заголовки <h1>-<h6> -  виділення жирним тескстом
• <u>, <i>, <b> - теги підкреслення, курсиву, жирного тексту відповідно
• <em> та <strong> - семантичні аналоги <i> та <b>
• Мета теги – теги, що допоможуть бути сторінці більш семантичною та відповідно більш релевантною
• <head> - тег для інформції, що містить мета теги, <title>, що відображується в браузері на вкладці, в ньому піключаються зовнішні CSS або тег <style> - внутрішній CSS або посилання на шрифти чи бібліотеки
• <table> - таблиця, в ній <th> - заголовок, <tr> - рядок, <td> - комірка для даних
• <div> - блок(обгортка)
• <img> - картинка
• Семантичні теги для правильної структури сторіники - <header>, <aside>, <nav>, <section>, <footer>.

CSS основні принципи:

• CSS можна підключити тегом <style></style> в html, можна задати для окремого елемента або через джерело в head
• Все будується на селекторах
• Параметри div – width, height у відстоках або пікселях
• Кольори color – елемента та backgroundcolor -фону
• Колір може бути об’явлений назвою анлійською, кодом в шістнадцятковій системі числення або в rgb(red green blue) або в rgba.
• Margin(left, bottom, top, right) -відступ, якщо авто в якийсь бік, наприклад margin-right:auto – об’єкт поїде в лівий кут(можливо вирівняти елементи)
• Padding – відступи елементів
• Вирівняти текст – text-align

4. Практична робота

1. Мета: розробити оформлення сторінки.
2. Завдання: створити оформлення сторінки.

Вправа: Дати колір фону та елментам сторінки, поставити текст по центру.

6. Узагальнення набутих знань.

Мета: закріпити отримані знання з CSS.

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

7. Домашнє завдання

Вивчайте можливості Developer tools, експериментуйте змінювати стилі на ваших улюблених сторінках в Інтернеті

8. Пiдбиття пiдсумкiв уроку.

• Первірка виконання.
• Допомога та пояснення(в разі потреби)
• Оцінювання практичної частини уроку(роботи учнів)
• Що ви дізналися нового на уроці?
• Що було найважчим?
• Чи було цікаво?
• Прощання до наступної зустрічі