Вступ до програмування на HTML та CSS, частина 1

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

Основою багатьох вебсторінок — сукупність яких утворює вебсайт — є мови програмування HTML і CSS. Навчитися користуватися цими мовами, за допомогою яких створюють і стилізують вміст вебсторінки, — важливий крок до створення власних добре розроблених вебсторінок.

Теми курсу:

Урок 1: Початок роботи з HTML

ТЕМА A: Основи HTML

• HTML — довідкова інформація
• Будова HTML-тега
• Початок роботи
• Вправа 1-1: Аналіз вебсторінки

ТЕМА B: Основні елементи вебсторінки

• Тег заголовка
• Теги абзацу та розриву рядка
• Теги базового форматування тексту
• Вправа 1-2: Додавання базових елементів за допомогою HTML

ТЕМА C: Створення списків

• Нумеровані списки
• Марковані списки
• Елементи списку
• Вправа 1-3: Створення HTML-списку
• Підсумок
• Контрольні запитання

Урок 2: Більше можливостей HTML

ТЕМА A: Зображення в HTML

• Тег зображення
• Визначення джерела зображення
• Визначення альтернативного тексту зображення
• Зміна розміру зображення
• Вправа 2-1: Додавання зображення в HTML

ТЕМА B: Посилання в HTML

• Посилання на іншу вебсторінку
• Внутрішні посилання
• Вправа 2-2: Додавання посилання

ТЕМА C: Таблиці в HTML

• Структура HTML-таблиці
• Рядок заголовків таблиці
• Рядки даних таблиці
• Вправа 2-3: Створення HTML-таблиці
• Підсумок
• Контрольні запитання

Урок 3: Початок роботи з CSS 

ТЕМА A: Основи CSS 

• CSS: каскадні таблиці стилів 

• Тег <style> 

• Типографіка та ієрархія в CSS 

• Вправа 3-1: Створення області стилів за допомогою тега <style> 

ТЕМА B: Колір у CSS 

• Зміна кольору елемента вебсторінки 

• Назви кольорів у CSS 

• Система кольорів RGB 

• Шістнадцяткова система кольорів 

• Колір тла 

• Вправа 3-2: Додавання кольорів у CSS різними способами 

ТЕМА C: Використання додаткових ідентифікаторів CSS 

• Використання ідентифікаторів ID у CSS 

• Використання назв класів у CSS 

• Вправа 3-3: Використання ID для стилізації 

• Підсумок 

• Контрольні запитання 

Урок 4: Стилізація тексту за допомогою CSS 

ТЕМА A: Гарнітури шрифтів 

• Що таке шрифт? 

• Використання властивості font-family 

• Засічкові та беззасічкові шрифти 

• Назви шрифтів 

• Додаткові типи шрифтів 

• Резервні шрифти 

• Вправа 4-1: Зміна гарнітури шрифту в CSS 

ТЕМА B: Розмір шрифту 

• Властивість font-size 

• Пікселі 

• Одиниці виміру EM 

• Вправа 4-2: Зміна розміру шрифту тексту 

ТЕМА C: Інші властивості CSS для роботи з текстом 

• Властивість font-style 

• Властивість font-weight 

• Властивість line-height 

• Властивість text-align 

• Вправа 4-3: Налаштування тексту за допомогою додаткових властивостей 

ТЕМА D: Скорочений запис для шрифтів 

• Скорочений запис у CSS 

• Скорочений запис для шрифтів у CSS 

• Вправа 4-3: Практичне використання скороченого запису для шрифтів у CSS 

• Підсумок 

• Контрольні запитання 

Урок 5: Розширені методи стилізації за допомогою HTML і CSS 

ТЕМА A: Групування елементів 

• Що таке групувальний елемент? 

• Рядкове та блокове форматування 

• Вправа 5-1: Групування елементів вебсторінки за допомогою тегів <span> і <div> 

ТЕМА B: Розміри блоків div 

• Зміна ширини блоку div 

• Зміна висоти блоку div 

• Переповнення вмісту 

• Вправа 5-2: Зміна стилю блоку div 

ТЕМА C: Блокова модель CSS 

• Блокова модель CSS 

• Зовнішні відступи CSS 

• Межі CSS 

• Внутрішні відступи CSS 

• Вправа 5-3: Зміна стилю блоку div 

• Підсумок 

• Контрольні запитання