Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
<div> ... </ div> – тег, призначений для створення шару. Це контейнер, в який можна помістити практично будь-який вміст, і варіюючи розмірами і позиціонуванням якого, можна реалізувати досить гнучку верстку. В даний час є основним інструментом для верстки сторінок, замінивши вже застарілі таблиці.
Верстка за допомогою тега <div> має певні переваги над версткою таблицями:
1. Немає залежності від розмірності сусідніх елементів.
2. Чи не залежно сусідніх елементів від розмірності поточного.
3. Можна реалізувати необхідний рівень вкладеності, що в таблицях не допускається.
4. Верстка, реалізована шарами, вантажиться швидше.
5. Доступні всі багатства CSS.
6. Можливість працювати з DOM деревом.
Розміри блоку задаються за допомогою відповідних властивостей width і height.
Як вміст шару, може виступати будь-який елемент: таблиця, список, інший шар, певна конструкція, будь-який текстовий вміст, зображення.
За замовчуванням всі блоки <div> позиціонуються один за одним, кожен наступний починається з нового рядка. При цьому всі елементи намагаються розміститися максимально ближче до верхнього лівого кута. Відступів і рамок між ними за замовчуванням немає.
Розмір по вертикалі визначається вмістом, а по горизонталі максимально доступним значенням відповідно до розмірів елемента-батька.
Для того, щоб розмістити елементи по горизонталі, використовується властивість float.
Властивість float вказує, що елемент буде обтікати, і отже розміщує його максимально притиснутим в зазначений бік.
Властивість float може приймати 3 значення:
1. left – елемент притискується вліво і буде обтікати справа.
2. right – елемент притискується вправо і буде обтікати зліва.
3. none – для уникнення будь-якого обтікання, але не завжди спрацьовує.
Властивість clear – використовується, якщо ваші елементи успадковують обтікання, якого не повинно бути. Властивість може приймати кілька значень, але найбільш використовується both, прибирає обтікання по обидва боки.
На відміну від таблиць, вкладеність шарів цілком допустима і зрозуміліша техніка. При цьому слід спочатку продумати вкладеність, простим прикладом може бути реалізація квадрата.
Властивість padding відповідає за відступи всередині елемента, від кордонів до його вмісту.
Властивість margin відповідає за відступи від меж елемента до кордонів сусідніх або батьківських елементів.
Якщо у блоку одна з цих властивостей встановлено і передано 2 параметра, то перший з них відповідає за відступи по горизонталі, а другий – по вертикалі. Часто використовується значення auto. Вона говорить про те, що відступи слід зробити однакові з обох сторін.
Якщо у блоку одна з цих властивостей встановлена і передано 3 параметра, то перший встановлює відступ зверху, другий знизу, третій зліва та справа.
У разі, коли задаються всі чотири параметра, то слід пам'ятати порядок за годинниковою стрілкою, перший – зверху, другий – праворуч, третій – знизу, четвертий – зліва.
Тег <span> призначений для визначення невеликих елементів документа. На відміну від блокових елементів, за допомогою тега <span> можна виділити частину інформації всередині інших тегів і встановити для неї свій стиль.
Текст, який знаходиться всередині цього елемента, отримує всі властивості, описані в відкриваючому тезі.
Тег <span> по-різному сприймає властивості margin, padding, width та height в різних браузерах, тому необхідно вкрай акуратно їх використовувати.
Порядок виконання роботи
1. Зробити веб-сторінку, яка містить 4 тега <div>, з фіксованою шириною та висотою.
2. За допомогою властивості float розмістить їх за класичним шаблоном (шапка, меню, контент, футер – рис. 1).
Рис. 1
3. Зробити кожен блок в попередньому завданні окремим кольором та додайте текст (приклад: рис. 1).
4. Використовуючи тегі <div> виконайте верстку за прикладом рис. 2.
Рис. 2.
5. Виконайте завдання за ескізом (рис. 3).
Рис. 3.
Питання для самостійної роботи
1. Для чого призначений тег <div>?
2. Для чого використовується параметр float?
3. Чим зручна і чим «некомфортна» верстка за допомогою тегу <div>?
4. Призначення тега <span>?
5. Яка кількість параметрів можна передавати властивості margin?
6. Що робить властивість clear?
Література:
1. https://html.com
2. https://webref.ru
3. http://htmlbook.ru
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. – СПб.: Питер, 2014. – 720 с.:
5. Мержевич В. Самоучитель HTML.
6. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с.
7. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2014. – 608 с.
Звіт до роботи
1. Оформити лабораторну роботу в зошиті. Записати тему, мету, знати, уміти, обладнання та відповісти на запитання для самостійної підготовки.
2. Виконати завдання згідно свого варіанту.
3. Зробити висновок.
Лабораторна робота №5
Каскадні таблиці стилів (CSS)
Мета роботи: розглянути каскадні таблиці стилів CSS.
Знати: призначення та основні особливості каскадних таблиць стилів CSS.
Уміти: підключати CSS; використовувати таблиці пов'язаних стилів; використовувати таблиці глобальних стилів.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.
Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
CSS (Cascading Style Sheets, каскадні таблиці стилів) – це набір параметрів форматування, який застосовується до елементів веб-сторінки для управління їх видом та станом.
Стилі є зручним, практичним і ефективним інструментом при верстці веб-сторінок і оформлення тексту, посилань, зображень та інших елементів.
Таблиця стилів складається з набору правил. Кожне правило, в свою чергу, складається з одного або декількох селекторів, розділених комами і блоку визначень. Блок визначень оточується фігурними дужками, і складається з набору властивостей та їх значень.
При використанні таблиці пов'язаних стилів опис селекторів та їх властивостей розташовується в окремому файлі, як правило, з розширенням css, а для зв'язування документа з цим файлом застосовується тег <link>.
При використанні таблиці глобальних стилів властивості CSS описуються в самому документі і зазвичай розташовуються в заголовку веб-сторінки.
Внутрішній стиль є по суті розширенням для одиночного тега, який використаний на веб-сторінці. Для визначення стилю використовується параметр тега style, а його атрибути вказуються за допомогою мови таблиці стилів.
В якості селектора може виступати будь-який тег HTML, для якого визначаються правила форматування, такі як: колір, фон, розмір тощо. Спочатку вказується ім'я тега, оформлення якого буде перевизначися, великими або малими символами не має значення. Усередині фігурних дужок пишеться властивість CSS, а після двокрапки – її значення.
Клас дозволяє задати різні правила форматування для одного елемента окремих папок або всіх елементів документа.
Ідентифікатор (так званий «ID селектор») визначає унікальне ім'я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти, що дозволяє управляти стилем елемента динамічно.
Якщо необхідно визначити стиль для елемента, вкладеного в інший, який знайти простіше, то кращим рішенням є конструкція спадкування. Спершу вказується селектор елементів, в яких повинні будуть розміщені елементи відповідні другому селектору.
Якщо необхідно створити стиль для елемента, який прив'язаний саме до кількох селекторів, то необхідно використовувати дану конструкцію. Всі селектори, яким повинен відповідати елемент, перераховуються без пробілів по черзі.
Конструкція багатозначного селектора дозволяє об'єднати при описі стилю кілька селекторів в один, перерахувавши їх через кому.
CSS є як потужним знаряддям, так і надгробної плитою в руках будь-якого веб-розробника. Якщо правильно і розумно їх використовувати, то швидкість створення і комфорт роботи вашого ресурсу разом з його видовищним інтерфейсом, будуть приємно вражати відвідувачів. Але при нелогічному створенні селекторів і формуванні стилів, ви можете прийти до того, що заново створювати не тільки файл CSS, але і весь проект цілком.
Порядок виконання роботи
1. Створити список своєї групи, застосуйте CSS на ньому на власний розсуд.
2. Створити сторінку, яка буде подібною до останнього завданням в попередньому уроці, яка була зверстана за допомогою тега div. Експериментуйте з відступами.
3. Зробити кожен блок в попередньому завданні окремим кольором.
4. Створіть три параграфа з текстом. Використовуючи селектори, встановіть всім пунктам синій колір тексту. Встановіть першому і третьому параграфів розмір шрифту 15px. За допомогою тега <span> зробіть так, щоб два останніх символу в усіх пунктах були зеленого кольору з розміром 30px.
5. Візьміть приклад “Замечательное письмо” і зробіть оформлення допомогою окремого файлу CSS.
Питання для самостійної роботи
1. Що таке CSS?
2. Які способи підключення CSS Ви запам'ятали?
3. Розкажіть які селектори використовуються в CSS?
4. Опишіть основні переваги використання СSS?
5. Яка різниця між Id і class?
Література:
1. https://html.com
2. https://webref.ru
3. http://htmlbook.ru
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. – СПб.: Питер, 2014. – 720 с.:
5. Мержевич В. Самоучитель HTML.
6. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с.
7. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2014. – 608 с.
Звіт до роботи
1. Оформити лабораторну роботу в зошиті. Записати тему, мету, знати, уміти, обладнання та відповісти на запитання для самостійної підготовки.
2. Виконати завдання згідно свого варіанту.
3. Зробити висновок.
Лабораторна робота №6
Метатеги, верстка макета
Мета роботи: розглянути тег <meta> і верстку дивами; розглянути прозорість і створення закруглених країв, а також позиціонування шарів за допомогою властивості position.
Знати: призначення та основні особливості метатегів; призначення та основні особливості вестрки веб-сторінок.
Уміти: правильно використовувати теги <meta>; реалізувати верстку, використовуючи тег div: «гумову» та «фіксовану»; створити макет сайту з окремим CSS-файлом; позиціонувати тег div; створювати напівпрозорі елементи та закруглені краї.
Обладнання: технічне забезпечення: персональний комп’ютер, програмне забезпечення: текстовий редактор Notepad++, Visual Studio Code.
Самостійна підготовка до виконання лабораторної роботи
1. Записати в зошит тему, мету, обладнання, практичні завдання свого варіанту.
2. За літературою до лабораторної роботи вивчити необхідний теоретичний матеріал.
3. За інструкцією до лабораторної роботи ознайомитись з порядком виконання роботи.
Короткі теоретичні відомості
У кожної сторінки є метадані. Це чисто службова інформація, необхідна для індексації сторінки в пошукових системах. Існують три основних типи метатегов:
1. Містять керуючі команди для браузера.
2. Містять керуючі команди для пошукових систем.
3. Містять інформацію про сторінку та її автора.
Content-type - метатег вказує браузеру, в якому кодуванні зроблена сторінка.
Content-Language - метатег повідомляє, якою мовою написана сторінка.
pragma - метатег забороняє браузеру кешувати сторінку (тобто зберігати її в пам'яті).
refresh – метатег, який через N секунд після завантаження в браузер поточної сторінки перезавантажить замість неї сторінку URL (природно, замість N повинна бути написана цифра - кількість секунд, а замість URL - правильна адреса сторінки).
Generator - повідомляє, за допомогою якої програми був згенерований код сторінки.
site-created - вказує дату створення сторінки.
expires - метатег вказує, коли сторінка буде видалена.
Author - містить ім'я автора сторінки.
Copyright - вказує власника авторських прав.
Reply-to - вказує спосіб зв'язку з автором сторінки.
Owner - вказує власника сторінки.
Address - містить адресу автора сторінки.
description - містить в собі основний опис сторінки, є найбільш важливим з метатегов.
keywords - містить ключові слова, за якими буде індексуватися сторінка.
robots - метатег управляє індексуванням сторінок.
– index / noindex - індексувати / не індексувати сторінку;
– follow / nofollow - йти / не йти по посиланнях з цієї сторінки;
– all - еквівалентно index, follow;
– none - еквівалентно noindex, nofollow.
revisit, revisit-after - дає команду пошуковій системі індексувати сайт з потрібною періодичністю.
Тег div (диви) можуть позиціонуватися декількома методами: перший за допомогою відступів, другий за допомогою фактичного позиціонування position.
Absolute вказує, що елемент абсолютно позиціонується, при цьому інші елементи відображаються на веб-сторінці немов абсолютно позиціонованого елемента і немає. Положення елемента задається властивостями left, top, right і bottom, також на положення впливає значення властивості position батьківського елемента.
Fixed за своєю дією це значення близьке до absolute, але на відміну від нього прив'язується до зазначеної властивостями left, top, right і bottom точці на екрані і не змінює свого положення при прокручуванні веб-сторінки.
Relative Положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і переміщує його в ту чи іншу сторону від первісного розташування.
Static – елементи відображаються як зазвичай.
Inherit – успадковує значення батька.
Padding встановлює значення полів навколо вмісту елементу. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст.
Margin встановлює величину відступу від кожного краю елемента. Відступом є простір від межи поточного елемента до внутрішньої межі його батьківського елементу. Відступи прозорі, на них не поширюється колір фону або фонова картинка, задана для блоку. Однак, якщо фон встановлений у батьківського елементу, він буде впливати і на відступи.
Відступ, на відміну від полів (padding), можуть приймати від'ємне значення, це призводить до зсуву всього блоку в зазначену бік. Так, якщо задано margin-left: -10px, це зрушить блок на десять пікселів вліво, а не вправо.
Для відступів характерне явище під назвою «схлопування», коли відступи у прилеглих елементів не підсумовуються, а об'єднуються між собою.
Відступ, який заданий у відсотках обчислюються від ширини блоку. Це стосується як вертикальних, так і горизонтальних відступів.
Прозорі вікна можна створювати за допомогою вже підготовлених png файлів, або за допомогою властивості opacity, яка може вказуватися в діапазоні від 0 до 1.
Закруглені краї у дива в класичній верстці представлені 4-ма вкладеними дивами (краями). Заздалегідь необхідно підготувати ці зображення. Але в сучасному світі вже розроблений модуль для CSS3, де закруглені краї можна зробити за допомогою одного рядка.
Порядок виконання роботи
1. Створіть метатег із зазначенням автора сторінки.
2. Створіть сторінку із зафіксованим тегом div.
3. Створіть тег div із закругленими краями. Відцентруйте його всередині сторінки.
4. Створіть сторінку з напівпрозорим фоном, зробіть на ній абсолютне позиціонування тега div. Усередині цього тега зафіксуйте зображення з відступом 25 пікселів від лівого краю і 35 пікселів від верху цього тега.
5. Створіть макет простого сайту, який знаходиться в топ 10 вашого браузера.
Питання для самостійної роботи
1. Для чого призначені метатеги?
2. Які основні метатеги ви знаєте?
3. Які способи позиціонування елементів з використанням тега <div>.
4. Яким чином можна створити напівпрозорий елемент?
5. Яким чином створюються заокруглені краї тега <div>.
Література:
1. https://html.com
2. https://webref.ru
3. http://htmlbook.ru
4. Робсон Э., Фримен Э. Изучаем HTML, XHTML и CSS. 2-е изд. – СПб.: Питер, 2014. – 720 с.:
5. Мержевич В. Самоучитель HTML.
6. Хоган Б. HTML5 и CSS3. Веб-разработка по стандартам нового поколения. 2-е изд. – СПб.: Питер, 2014. – 320 с.
7. Макфарланд Д. Большая книга CSS3. 3-е изд. – СПб.: Питер, 2014. – 608 с.
Звіт до роботи
1. Оформити лабораторну роботу в зошиті. Записати тему, мету, знати, уміти, обладнання та відповісти на запитання для самостійної підготовки.
2. Виконати завдання згідно свого варіанту.
3. Зробити висновок.