Самостійна робота 1

1.3 HTML Основні приклади

<!DOCTYPE html>
<html>
<head>
<title>Назва сторінки</title>
</head>
<body>
<h1>Мій перший заголовок</h1>
<p>Мій перший параграф.</p>
</body>
</html>

1.2 HTML Редактори коду та IDE

Редактор Notepad ++
Редактор Brackets
Редактор Sublime Text
IDE Atom
IDE Visual Studio Code
IDE WebStorm / PHPStorm
IDE Dreamweaver
IDE Eclipse
IDE NetBeans
IDE Komodo
IDE Emacs
IDE Ultraedit
IDE Xcode (для Apple)

1.3 HTML Основні приклади

HTML Документи:

Мій перший заголовок

Мій перший параграф.

HTML Заголовки:

Це заголовок 1

Це заголовок 2

Це заголовок 3


HTML Параграфи:

Це параграф.

Це інший параграф.


HTML Посилання:
Це посилання
HTML Зображення:
W3Schools
HTML Кнопки:

HTML Списки:

Невпорядкований список HTML

Впорядкований список HTML

  1. Кава
  2. Чай
  3. Молоко

1.4 HTML Елементи

Це заголовок

Це параграф.

1.5 HTML Атрибути

Опис зображення Перейти на сайт

1.6 HTML Параграфи

Це перший параграф.

Це другий параграф.

1.7 HTML Посилання

Це текст посилання

1.7.1 HTML Посилання - Різні кольори

Кольорове посилання

1.7.2 HTML Посилання - Створення закладок

Перейти до розділу 1

Розділ 1

Це текст розділу 1.

1.8 HTML Зображення

Тут зображення

1.8.1 HTML Карти зображень

Планети Меркурій Венера

1.8.2 HTML Фонові зображення

Текст з фоновим зображенням.

1.8.3 HTML елемент <picture>

Зображення

1.8.4 HTML Favicon / Фавікон

1.9 HTML Таблиці

Ім'я Вік
Аліса 25
Боб 30

1.9.1 HTML Межі таблиці

Ім'я Вік
Аліса 25

1.9.2 HTML Розмір таблиці

Ім'я Вік
Аліса 25

1.9.3 HTML Заголовки таблиць

Таблиця користувачів
Ім'я Вік
Аліса 25

1.9.4 HTML Таблиці. Padding & Spacing

Клітинка 1 Клітинка 2

1.9.5 HTML Таблиці. Colspan & Rowspan

Об'єднана клітинка
Клітинка 1 Клітинка 2

1.9.6 HTML Стилізація таблиць

Ім'я Вік
Аліса 25

1.9.7 HTML Група стовпців таблиці

Ім'я Вік
Аліса 25

1.10 HTML Списки

  1. Елемент списку 1
  2. Елемент списку 2

1.10.1 HTML Невпорядковані списки

1.10.2 HTML Впорядковані списки

  1. Перший елемент
  2. Другий елемент
  3. Третій елемент

1.10.3 HTML Інші списки

Термін 1
Визначення для терміна 1
Термін 2
Визначення для терміна 2

2.1 HTML Форми





2.1.1 HTML Атрибути форми





2.1.2 HTML Елементи форми





2.1.3 HTML Типи вводу





2.1.4 HTML Атрибути вводу





2.1.5 HTML Атрибути Input форми





Самостійна робота 2

1.1 CSS Контур

Цей блок має контур.

1.1.1 CSS Ширина контуру

Цей блок має ширший контур.

1.1.2 CSS Колір контуру

Цей блок має кольоровий контур.

1.1.3 CSS Скорочена властивість контуру

Цей блок має скорочену властивість контуру.

1.1.4 CSS Outline Offset

Цей блок має зсунутий контур.

1.2 CSS Текст

Цей текст має синій колір.

1.2.1 CSS Вирівнювання тексту

Цей текст вирівняно по центру.

1.2.2 CSS Оформлення тексту

Цей текст підкреслено.

1.2.3 CSS Трансформація тексту

Цей текст у верхньому регістрі.

1.2.4 CSS Інтервал тексту

Цей текст має більший інтервал між літерами.

1.2.5 CSS Тінь тексту

Цей текст має тінь.

1.3 CSS Шрифти

Цей текст з шрифтом Courier New.

1.3.1 CSS Веб-безпечні шрифти

Цей текст з веб-безпечним шрифтом Arial.

1.3.2 CSS Запасні шрифти

Цей текст з запасними шрифтами.

1.3.3 CSS Стиль шрифту

Цей текст курсивом.

1.3.4 CSS Розмір шрифту

Цей текст з більшим розміром шрифту.

1.4 CSS Синтаксис

CSS синтаксис складається з селекторів і властивостей:
selector { property: value; }

1.5 CSS Селектори

p { color: red; } - вибирає всі параграфи.
.classname { color: blue; } - вибирає всі елементи з класом classname.

1.6 CSS Кольори (RGB, HEX, HSL)

Цей текст має HEX колір.

Цей текст має RGB колір.

Цей текст має HSL колір.

1.7 CSS Фони

Цей блок має фон.

1.8 CSS Посилання

Це посилання зеленого кольору.

1.9 CSS Списки

1.10 CSS Таблиці. Межі

Заголовок 1 Заголовок 2
Дані 1 Дані 2

2. CSS ПРОДВИНУТИЙ

2.1 Заокруглені кути

Цей блок має заокруглені кути.

2.2 CSS анімації

2.3 Підказки CSS

Наведіть курсор на мене Підказка тексту

2.4 Кнопки CSS

2.5 CSS Пагінація

2.6 Створення стовпців CSS

Цей текст буде розбитий на два стовпці.

Додатковий текст для демонстрації.

2.7 Випадаючі списки CSS

Наведіть курсор

Пункт 1

Пункт 2

Пункт 3

2.8 Кольорові ключові слова CSS

Цей текст має колір "teal".

2.9 Тіньові ефекти CSS

Цей блок має тіньовий ефект.

2.10 CSS Box Shadow

Цей блок має тінь рамки.

2.11 Переходи CSS

2.12 Текстові ефекти CSS

Цей текст має ефект.

Самостійна робота 2_2

1.1 CSS Контур

Цей блок має контур.

1.1.1 CSS Ширина контуру

Цей блок має ширший контур.

1.1.2 CSS Колір контуру

Цей блок має кольоровий контур.

1.1.3 CSS Скорочена властивість контуру

Цей блок має скорочену властивість контуру.

1.1.4 CSS Outline Offset

Цей блок має зсунутий контур.

1.2 CSS Текст

Цей текст має синій колір.

1.2.1 CSS Вирівнювання тексту

Цей текст вирівняно по центру.

1.2.2 CSS Оформлення тексту

Цей текст підкреслено.

1.2.3 CSS Трансформація тексту

Цей текст у верхньому регістрі.

1.2.4 CSS Інтервал тексту

Цей текст має більший інтервал між літерами.

1.2.5 CSS Тінь тексту

Цей текст має тінь.

1.3 CSS Шрифти

Цей текст з шрифтом Courier New.

1.3.1 CSS Веб-безпечні шрифти

Цей текст з веб-безпечним шрифтом Arial.

1.3.2 CSS Запасні шрифти

Цей текст з запасними шрифтами.

1.3.3 CSS Стиль шрифту

Цей текст курсивом.

1.3.4 CSS Розмір шрифту

Цей текст з більшим розміром шрифту.

1.4 CSS Синтаксис

CSS синтаксис складається з селекторів і властивостей:
selector { property: value; }

1.5 CSS Селектори

p { color: red; } - вибирає всі параграфи.
.classname { color: blue; } - вибирає всі елементи з класом classname.

1.6 CSS Кольори (RGB, HEX, HSL)

Цей текст має HEX колір.

Цей текст має RGB колір.

Цей текст має HSL колір.

1.7 CSS Фони

Цей блок має фон.

1.8 CSS Краї

Цей блок має округлені краї.

1.9 CSS Анімації

Цей блок анімований.

1.10 CSS Tooltip

Наведіть курсор, щоб побачити підказку. Це текст підказки

1.11 CSS Кнопки

1.12 CSS Сторінка з нумерацією

1.13 CSS Коло

Цей текст буде в декількох стовпцях.

Додайте більше тексту, щоб перевірити, як він розподіляється.

1.14 CSS Dropdown

Варіант 1

Варіант 2

1.15 CSS Тінь

Цей блок має тінь.

1.16 CSS Box Shadow

Цей блок має box-shadow.

1.17 CSS Перехід

Наведіть на мене

1.18 CSS Ефект тексту

Цей текст має ефект.