Читати книгу - "інформатика, Іванна Клиса"
Шрифт:
Інтервал:
Додати в закладку:
<body>
<h2>Зображення на іншому сервері</h2>
<img src="https: //www. w3schools. com/images/w3schools_green. jpg" alt="W3Schools" style="width: 104px;height: 142px;">
</body>
</html> [14].
Анімовані зображення
HTML дозволяє використовувати анімовані GIF-зображення:
<img src="programming. gif" alt="Computer Man" style="width: 48px;height: 48px;">
<!DOCTYPE html>
<html>
<body>
<h2>Анімовані зображення</h2>
<p>HTML дозволяє рухомі зображення: </p>
<img src=".. /images/programming. gif" alt="Computer man" style="width: 48px;height: 48px;">
</body>
</html>
Плаваюче зображення
Використовуйте CSS властивість float, що дозволяє зображенню плавати праворуч або ліворуч від тексту:
<p><img src="smiley. gif" alt="Smiley face" style="float: right;width: 42px;height: 42px;">
Зображення буде плавати праворуч від тексту. </p>
<p><img src="smiley. gif" alt="Smiley face" style="float: left;width: 42px;height: 42px;">
Зображення буде плавати ліворуч від тексту. </p> [14].
<!DOCTYPE html>
<html>
<body>
<h2>Плаваючі зображення</h2>
<p><strong>Розташувати зображення праворуч: </strong></p>
<p><img src=".. /images/smiley. gif" alt="Smiley face" style="float: right;width: 42px;height: 42px;">
Параграф з плаваючим зображенням. Параграф з плаваючим зображенням. Параграф з плаваючим зображенням. </p>
<p><strong>Розташувати зображення ліворуч: </strong></p>
<p><img src="smiley. gif" alt="Smiley face" style="float: left;width: 42px;height: 42px;">
Параграф з плаваючим зображенням. Параграф з плаваючим зображенням. Параграф з плаваючим зображенням. </p>
</body>
</html>
Таблиці HTML дозволяють веб-розробникам упорядковувати дані у рядки та стовпці.
Тег <table> визначає HTML таблицю.
Кожен рядок таблиці визначається тегом <tr>. Кожен заголовок таблиці визначається тегом <th>. Кожна чарунка з даними таблиці визначається тегом <td>.
За замовчуванням текст в елементах <th> виділений жирним шрифтом і відцентрований.
За замовчуванням текст в елементах <td> є звичайним і вирівняним за лівим краєм [13, 14].
<!DOCTYPE html>
<html>
<body>
<h2>Базовая HTML таблица</h2>
<table style="width: 100%">
<tr>
<th>Імя</th>
<th>Прізвище</th>
<th>Вік</th>
</tr>
<tr>
<td>Вася</td>
<td>Стеценко</td>
<td>50</td>
</tr>
<tr>
<td>Володимир</td>
<td>Карпенко</td>
<td>94</td>
</tr>
<tr>
<td>Саша</td>
<td>Грінченко</td>
<td>80</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<h2>Таблиця з границями</h2>
<p>Використовую засіб CSS border, щоб додати таблицю до таблиці</p>
<table style="width: 100%">
<tr>
<th>Ім'я</th>
<th>Прізвище</th>
<th>Вік</th>
</tr>
<tr>
<td>Вася</td>
<td>Черемош</td>
<td>50</td>
</tr>
<tr>
<td>Володимир</td>
<td>Цідило</td>
<td>94</td>
Увага!
Сайт зберігає кукі вашого браузера. Ви зможете в будь-який момент зробити закладку та продовжити читання книги «інформатика, Іванна Клиса», після закриття браузера.
