Створення веб-сторінок�Практична робота 2
За навчальною програмою 2018 року
Урок 12
10
(11)
Актуалізація опорних знань і життєвого досвіду
Розділ 2 § 12
Продовжіть речення
Основні теги гіпертекстової розмітки — це...
Каскадні таблиці стилів — це...
Існують такі прийоми верстки веб-сторінок —...
Адаптивна верстка дає змогу...
Кросбраузерність потрібна для...
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Повторюємо
Розділ 2 § 12
Мова розмітки гіпертексту (HTML) — це набір тегів та правила їх застосування для створення гіпертекстових документів
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мова гіпертекстової розмітки
Розділ 2 § 7
Тег — це записана в кутових дужках команда мови HTML, яку виконує браузер.
<HTML>
<HEAD>
<TITLE> Найпростіша веб-сторінка
</TITLE>
</HEAD>
<BODY>
Ця сторінка створена за допомогою простих тегів
</BODY>
</HTML>
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мова гіпертекстової розмітки
Розділ 2 § 7
З тегами html зручно працювати у спеціалізованих редакторах:
Atom
Notepad++ та ін.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мова гіпертекстової розмітки
Розділ 2 § 7
Тегами мови HTML можна визначити вигляд об'єктів, зокрема текстових фрагментів, на веб-сторінці.
Теги бувають:
Парними (контейнери)
Непарними
b — парний тег
<b>...</b> напівжирного шрифту
br — непарний тег
<br> або <br/> переведення рядка
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мова гіпертекстової розмітки
Розділ 2 § 7
Тег, що починається із символу «/», називають закриваючим. Дія html-тегу залежить від значень його параметрів, так званих атрибутів.
Атрибут — це додаткова інформація, що записується біля відкриваючого тега.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Мова гіпертекстової розмітки
Розділ 2 § 7
Для правильного відображення браузером веб-сторінки необхідно дотримуватись такої структури html-документа:
<html> початок документа
<head> заголовок документа зі службовою інформацією
<title> містить назву, що відображатиметься на вкладці </title>
</head> кінець заголовка документа
<body> «тіло» документа: все, що відображається на веб-сторінці </body>
</html> кінець документа
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Каскадні таблиці стилів
Розділ 2 § 8
Каскадні таблиці стилів (англійською Cascading Style Sheets, CSS) — спеціальна мова, яку використовують для запису оформлення сторінок, написаних мовами розмітки даних.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Каскадні таблиці стилів
Розділ 2 § 8
Правила в CSS працюють по каскаду ( пріоритету, вазі). Це дозволяє отримати передбачуваний результат у випадку, коли до одного елемента, одночасно, застосовуються декілька стильових правил.
Селектор (тег, id, клас) {
властивість 1: значення1;
властивість 2: значення2;
властивістьN: значенняN;
}
CSS-правило має наступну структуру:
Наприклад:
div p, #id:first-line {
background-color : red;
background-style : none;
}
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Адаптивна верстка
Розділ 2 § 10
Адаптивна верстка — підхід, що передбачає зміну дизайну залежно від поведінки користувача, розміру екрана, платформи і орієнтації девайса.
Іншими словами, сторінка має автоматично підлаштовуватися під дозвіл, змінювати розмір картинок і т. д.
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Запитання для рефлексії
Розділ 2 § 12
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Домашнє завдання
Розділ 2 § 12
Поділитися у соціальних мережах з друзями враженнями від створення веб-сторінок.
Запропонувати друзям навчити їх створювати
веб-сторінки
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Практична робота 2
Створення веб-сторінок
Розділ 2 § 12
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Працюємо за комп’ютером
Розділ 2 § 12
10�(11)
© Вивчаємо інформатику teach-inf.at.ua
Дякую за увагу!
За навчальною програмою 2018 року
Урок 12
10
(11)