Основи HTML та CSS

План уроку:

HTML
-Огляд тегу img та його атрибутів
-Тег table
-Теги ul, ol, dl
CSS
-Для чого потрібні таблиці стилів. Що таке CSS?
-Типи стилів.
-Переваги використання стилів.
-Семантика CSS.
-Прості селектори.
-Одиниці виміру в CSS.

Зображення

Тег <img> призначений для відображення зображення на веб-сторінці.

Тег не має текстового вмісту, тому є самодостатнім.

Елемент має такі атрибути:

src – містить адресу графічного файлу.

alt – встановлює альтернативний текст для зображення.

wtitle – встановлює текст спливаючої підказки.

width, height – атрибути задають ширину та висоту зображення.

usemap – пов'язує між собою картинку та карту-зображення, що задається за допомогою контейнера

<map>.

Розміри зображень

Під час додавання зображення на сторінку воно має оригінальний розмір. Але використовуючи атрибути width та height, можна регулювати висоту та ширину зображення.
Розміри зображення можна задавати як у відсотках, так і в пікселах. Якщо розмір заданий у відсотках, то розміри зображення будуть обчислюватися щодо батьківського елемента або від вікна браузера у разі відсутності батьківського елемента.
Якщо задати лише один параметр розміру зображення, інший змінитись пропорційно, у такому випадку, зображення може відображатися неправильно.

Таблиці

Тег <table></table> є основним контейнером для елементів таблиці і всі теги, що належать до таблиці,

повинні розташовуватися в ньому.

Рядки та осередки

Таблиця містить рядки, подані тегом <tr></tr>, які у свою чергу містять осередки, представлені тегом <td></td>, або <th></th> – якщо використовуються великі комірки.

Назва таблиці

Використовуючи тег <caption></caption> таблиці можна встановити назву, яка буде розміщена над таблицею. Сам тег слід помістити відразу після відкриваючого тега <table>.

Дані користувачів

Cellspacing та cellpadding

Cellspasing – це атрибут таблиці, який встановлює відступи між осередками таблиці та від межі таблиці.

Cellpadding – це атрибут таблиці, який встановлює відступи усередині комірки, тобто відступи від межі комірки до її вмісту.

Colspan та rowspan

Colspan – це атрибут, що встановлює число осередків, які повинні бути об'єднані по горизонталі.

Rowspan – це атрибут, що встановлює кількість осередків, які мають бути об'єднані за вертикаллю.

Списки

Списки призначені для угруповання пов'язаних між собою фрагментів інформації.

Існує три види списків:

<ul></ul> – маркований список. Кожен елемент списку <li></li> відзначається маркером.

<ol></ol> – нумерований список. Кожен елемент списку <li></li> відзначається цифрою.

<dl></dl> – список визначень. Складається з пар термін (тег <dt></dt>) – визначення (тег <dd></dd>).

Маркований список <ul>

Тег <ul></ul> (unordered list) є контейнером для невпорядкованих списків.

Має атрибут type:

disc – маркер у формі чорного кола,
circle – маркер у формі порожнього кола,
square – маркер у формі чорного зафарбованого кола,
none – без маркера

Нумерований список

Тег <ol></ol> (ordered list) є контейнером для упорядкованих списків.

Має атрибут type:

A – нумерація великими латинськими літерами
а – маленькі латинські літери
I – великі римські цифри
i – маленькі римські цифри
за замовчуванням – арабські цифри.

Додаткові атрибути:

reversed – відображає список у зворотному порядку
start – вказує початкове значення нумерації
value – вказує номер конкретного елемента

Вкладені списки

В елемент списку можна вкладати не лише текстовий вміст, але й інші списки.

Таким чином, буде реалізовано вкладені списки, а точніше підписки.

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

Списки визначень

Елементи таких списків складаються із двох складових:

ключ <dt>…</dt>
значення <dd>…</dd>

Для чого потрібні таблиці стилів. Що таке CSS?

CSS (Cascading Style Sheets) – каскадні таблиці стилів, що використовуються для опису зовнішнього вигляду документа, написаного мовою розмітки.

Каскадні таблиці стилів описують правила форматування елементів за допомогою властивостей та допустимих для них значень. Для кожного елемента можна використовувати обмежений набір властивостей, решта не чинитиме на нього жодного впливу.

Розробкою стандартів займається організація W3C.

17 грудня 1996 г - вийшла версія CSS1

12 травня 1998 г - вийшла версія CSS2

7 червня 2011 г - вийшла версія CSS2.1

2006 – теп. час - розробляється версія CSS3

29 вересня 2011 г - почала розроблятися версія CSS4

Переваги застосування стилів

1. Розмежування коду та оформлення

2. Різне оформлення для різних пристроїв

3. Розширені способи форматування

4. Прискорення завантаження сайту

5. Єдине стильове оформлення безлічі документів

6. Централізоване зберігання

Типи стилів

Стилі представляють набір параметрів, що управляють виглядом та положенням елементів веб-сторінки.

Існує кілька типів стилів:

▪ Стиль браузера – оформлення, яке за замовчуванням застосовується до елементів веб- сторінки браузером.

▪ Стиль автора – стиль, який додає до документа його розробник.

▪ Стиль користувача – стиль, який може увімкнути користувач сайту через налаштування

браузера. Такий стиль має вищий пріоритет і перевизначає вихідне оформлення документа.

Способи додавання стилів на сторінку

1. Inline або внутрішні стилі Підключаються з використанням атрибуту style

2. Глобальні стилі Встановлюються тегом <style> теге <head>

3. Зовнішні стил Вказуються шляхи до .css файлу в атрибуті href тега <link> в <head>.

Семантика CSS

Для стилів inline використовується наступний формат запису css стилів:

В тегі <style> і у зовнішніх стилях використовується наступний синтаксис:

Як селектор може виступати ім'я тега, клас, ідентифікатор, також селектори можуть бути складні.

Селектор елемент

Якщо як селектор виступає ім'я елемента (тега), то в цьому випадку всі елементи даного тега будуть відповідати заданим стилям.

Якщо всередині цих тегів будуть текстові елементи, вони будуть успадковувати правила.

Селектор клас

Якщо необхідно встановити стилі для індивідуального елемента або встановити різні стилі для одного тега слід використовувати селектор клас.

Імена класів повинні починатися з латинського символу та можуть містити символ дефісу й підкреслення.

Щоб прив'язати до елемента клас, необхідно у тезі задати атрибут class та присвоїти йому ім'я класу, описаного в стилях.

Селектор ідентифікатор

Ідентифікатор – особливий вид селектора, яким позначається один елемент на сторінці. Щоб вказати селектор ідентифікатор, в CSS необхідно використовувати конструкцію #ім'я_ідентифікатора.

Щоб прив'язати до елемента ідентифікатор, необхідно у тезі, що відкриває, задати атрибут id та присвоїти йому ім'я ідентифікатора, описаного в стилях.