Читати книгу - "інформатика, Іванна Клиса"
Шрифт:
Інтервал:
Добавити в закладку:
</body>
</html>
Font-size – Розмір тексту
CSS властивість font-size визначає розмір тексту для HTML елемента:
<h1 style="font-size: 300%;">Це заголовок</h1>
<p style="font-size: 160%;">Це параграф. </p>
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size: 300%;">Це заголовок</h1>
<p style="font-size: 160%;">Це параграф. </p>
</body>
</html>
Text-align – Вирівнювання тексту
CSS властивість text-align визначає горизонтальне вирівнювання тексту для HTML елемента:
<h1 style="text-align: center;">Центрування заголовка</h1>
<p style="text-align: center;">Центрування параграфа. </p>
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align: center;">Центрований заголовок</h1>
<p style="text-align: center;">Центрований параграф. </p>
</body>
</html>
Використовуйте атрибут style для стилізації HTML елементів
Використовуйте властивість background-color для установки кольору фона
Використовуйте властивість color для установки кольору текста
Використовуйте властивість font-family для установки сімейства шрифтів
Використовуйте властивість font-size для установки розміру текста
Використовуйте властивість text-align для вирівнювання текста
HTML елементи форматування тексту:
Тег
Опис
<b>
Визначає жирний текст
<em>
Визначає семантично важливий текст
<i>
Визначає курсивний текст
<small>
Визначає маленький текст
<strong>
Визначає семантично важливий текст
<sub>
Визначає підрядковий текст (нижній індекс)
<sup>
Визначає надрядковий текст (верхній індекс)
<ins>
Визначає вставлений текст
<del>
Визначає видалений текст
<mark>
Визначає маркований/помічений текст
Що таке форматування тексту HTML-сторінки? Які бувають HTML-елементи форматування? Для чого потрібні елементи форматування? Який HTML-елемент визначає жирний текст без додаткового значення? Який HTML-елемент визначає жирний текст з додатковим семантично важливим значенням? Який HTML-елемент визначає курсивний текст без якого-небудь додаткового значення? Який HTML-елемент визначає курсивний текст з додатковим семантично важливим значенням? Який HTML-елемент визначає зменшений текст відносно розміру основного тексту? Який HTML-елемент визначає маркований/виділений текст? Який HTML-елемент визначає видалений/вилучений текст? Який HTML-елемент визначає вставлений/доданий текст? Який HTML-елемент визначає підрядковий текст (нижній індекс)? Який HTML-елемент визначає надрядковий текст (верхній індекс)?
6.6. Зображення, таблиці
Зображення можуть поліпшити дизайн і зовнішній вигляд веб-сторінки.
Наприклад:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Зображення</h2>
<img src=".. /images/pic_trulli. jpg" alt="Trulli" width="500" height="333">
</body>
</html>
<img src="img_girl. jpg" alt="Girl in a jacket">
<!DOCTYPE html>
<html>
<body>
<h2>HTML Зображення</h2>
<img src=".. /images/img_girl. jpg" alt="Дівчина в жакеті" width="500" height="600">
</body>
</html>
<img src="img_chania. jpg" alt="Flowers in Chania">
<!DOCTYPE html>
<html>
<body>
<h2>HTML Зображення</h2>
<img src=".. /images/img_chania. jpg" alt="Квіти в Chania" width="460" height="345">
</body>
</html>
HTML Синтаксис зображень
В HTML зображення визначаються за допомогою тега <img>. Тег <img> пустий, містить лише атрибути і не має закриваючого тега.
Атрибут src вказує URL (веб-адресу) зображення:
<img src="url">
Якщо браузер не може знайти зображення, він відображає значення атрибута alt:
<img src="wrongname. gif" alt="Flowers in Chania">
<!DOCTYPE html>
<html>
<body>
<p>Якщо браузер не може знайти зображення, він відобразить альтернативний текст: </p>
!Увага!
Сайт зберігає кукі вашого браузера. Ви зможете в будь-який момент зробити закладку та продовжити читання книги «інформатика, Іванна Клиса», після закриття браузера.
