Урок №15. Покликання та форми. Мультимедіа на веб сторінках. Поняття т

8 клас

computer science

«Навчальна книга — Богдан»

тема 15

Покликання та форми. Мультимедіа на веб сторінках. Поняття таблиці каскадних стилів. Інструменти розробника. Стильове оформлення сторінки. Підключення шрифтів

Покликання (гіперпосилання) є одним з основних елементів HTML, що дозволяють створювати інтерактивні та навігаційні елементи на веб-сторінках.

<a href="адреса">Покликання</a>

атрибути тега покликання

href="#"

target="_blank"

ВИДИ Покликань

Якорі (анкорні посилання)

Зовнішні покликання

Внутрішні покликання

Телефонні покликання (tel)

Поштові покликання (mailto)

Форми

Для створення контейнера форми використовують тег <form>, всередині якого вже розміщують елементи форми

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

<input type="">

<input type="text" placeholder="Введіть ваше ім'я">

<input type="email" >

<input type="password" required>

<input type="radio" name="name">

<input type="checkbox" name="name">

<input type="number" min="1" max="10">

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

<button>Кнопка</button>

<button type="submit">Надіслати</button>

<button type="reset">Скинути</button>

<button type="button">Кнопка</button>

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

<textarea></textarea>

<select></select>

<label for="type">текст:</label>

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

<audio src="audio.mp3" controls></audio>

<video src="video.mp4" controls></video>

Поняття таблиці каскадних стилів

Таблиця каскадних стилів (CSS) — це мова стилів, що використовується для опису зовнішнього вигляду і форматування HTML-документів.

CSS взаємодіє з HTML, використовуючи особливі css-правила, які визначають, до яких компонентів і як прикручувати стилі.

селектор

значення

властивість

Способи підключення CSS

Внутрішні стилі (Embedded CSS)

Вбудовані стилі (Inline CSS)

Зовнішні стилі (External CSS)

Інструменти розробника

функції

Аналіз продуктивності сторінки

Перегляд і редагування HTML та CSS

Інструменти розробника (developer tools) — це набір інструментів, вбудованих у веббраузери, які допомагають розробникам створювати, налагоджувати та тестувати вебсайти та вебдодатки.

Налагодження JavaScript

Відстеження мережевих запитів

функція "Перегляд і редагування HTML та CSS" Дозволяє переглядати та редагувати HTML і CSS у реальному часі. Зручна для налагодження верстки, перевірки властивостей стилів та взаємодії елементів на сторінці.

Перегляд HTML

Редагування CSS

CSS Селектори

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

селектор ІДЕНТИФІКАТОРА

селектор елемента

html

html

CSS

CSS

CSS

html

Вигляд

Вигляд

Вигляд

Колір та фон

background-image задає зображення як фон елемента

background-color визначає колір фону елемента

color визначає колір тексту

Шрифти та текст

font-weight визначає товщину шрифту

font-size визначає розмір шрифту

font-family визначає шрифт тексту

text-decoration визначає декорацію тексту

text-align вирівнює текст всередині елемента

font-style визначає стиль шрифту

Обрамлення та тіні

box-shadow визначає тінь для елемента

border-radius визначає радіус заокруглення кутів рамки

border визначає рамку навколо елемента

Відступи та поля

padding визначає внутрішній відступ елемента

margin визначає зовнішній відступ елемента

Розміри та розташування

height визначає висоту елемента

width визначає ширину елемента

Розміри та розташування

Позиціонування (position)

Нормальний потік

Відображення (Display)

Плаваючі елементи (float)

Підключення шрифтів у CSS

Способи підключення шрифтів

Підключення через @font-face

Підключення через Google Fonts

@font-face { font-family: 'Roboto'; src: url('fonts/Roboto.woff2') format('woff2'), url('fonts/Roboto.woff') format('woff'); font-weight: normal; font-style: normal; } body { font-family: 'Roboto', Arial, sans-serif; }

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

body { font-family: 'Roboto', sans-serif; }

Псевдокласи стану

:active

:visited

:hover

a:visited { color: purple; }

a:active { color: orange; }

a:hover { color: red; }

Дякую за увагу!

Here you can put a highlighted title

With Genially templates, you can include visual resources to amaze your audience. You can also highlight a specific phrase or data that will be etched into your audience's memory, and even embed external content that surprises: videos, photos, audios... Whatever you want!

Here you can place a highlighted title

With Genially templates, you can include visual resources to leave your audience speechless. You can also highlight a specific phrase or data that will be engraved in the memory of your audience and even embed external content that surprises: videos, photos, audios... Whatever you want!

Here you can place a highlighted title

With Genially templates, you can include visual resources to leave your audience speechless. You can also highlight a specific phrase or data that will be engraved in the memory of your audience and even embed external content that surprises: videos, photos, audios... Whatever you want!

Here you can put a highlighted title

With Genially templates, you can include visual resources to impress your audience. You can also highlight a specific phrase or piece of information that will be etched into your audience's memory, and even embed external content that surprises: videos, photos, audios... Whatever you want!