Відступи довкола зображення
Аби при обтіканні текст не прилягав близько до зображення, можна задати відступи довкола зображення. Зробити це можна за допомогою параметрів hspace (відступи зліва і справа) і vspace (відступи зверху і знизу) тега <img>.
У наступному прикладі продемонстрований випадок, коли текст обтікає зображення, при цьому зображення вирівняне по лівому краю і має відступи довкола, рівні 5 пікселам:
<img src="img/1.png" align="left" hspace="5" vspace="5">В місті Стокгольмі, на найзвичайнішій вулиці, в найзвичайнішому будинку живе найзвичайніша шведська сім'я по прізвищу Свантесон. Сім'я ця складається з найзвичайнішого папи, найзвичайнішої мами і трьох найзвичайніших хлопців -Боссе, Бетан і Маляти.
Ось результат в браузері:
У місті Стокгольмі, на найзвичайнішій вулиці, в найзвичайнішому будинку живе найзвичайніша шведська сім'я по прізвищу Свантесон. Сім'я ця складається з найзвичайнішого папи, найзвичайнішої мами і трьох найзвичайніших хлопців -Боссе, Бетан і Маляти.
Розбиття зображення на частини
Бувають випадки, коли на сторінці необхідно помістити велике зображення. Але тоді сторінка довго вантажитиметься. Що ж робити?
Один з можливих варіантів виходу з положення - розрізати зображення на частини і розмістити його на сторінці за допомогою таблиці. A аби зображення виглядало як ціле, необхідно в таблиці видалити кордон і всі відступи усередині і між вічками. Тобто привласнити відповідним параметрам тега <table> нульові значення: border="0", cellspacing="0", cellpadding="0".
У наступному прикладі ми розбили зображення на 4 частини. От як виглядатиме таблиця:
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="img/part1.png"></td> <td><img src="img/part2.png"></td> </tr> <tr> <td><img src="img/part3.png"></td> <td><img src="img/part4.png"></td> </tr> </table>
А ось результат:
|
|
|
|
Такий прийом може згодитися і в інших випадках. Тут Ви можете бачити приклад накладення 2-х зображень з текстовими вставками.
Вправа
Cоздайте на власний вибір html-документ, в якому міститимуться зображення з різними способами вирівнювання, рамками, альтернативним текстом. Створіть в одній теці з цим документом теку img, в яку помістите використовувані зображення.
Викладете документ, що вийшов, разом з текою img в особистий каталог, складіть линк (поглянути як) і відкрийте Вашу сторіночку в браузері.
6. Властивості сторінки - параметри тега body
Колір тексту
Колір фону
Фонове зображення
Колір заслань
Відступи довкола контента
Вправа
Як Вам вже відомо, між тим, що відкриває тегом <body> і що закриває тегом </body> поміщається тіло сторінки або само вміст сторінки. Його ще називають словом контент (від англ. content - вміст). Параметри тега <body> визначають властивості контента в цілому. У цьому уроці ми і розглянемо деякі з них.
Колір тексту
Колір тексту всього документа визначається параметром text. Йому привласнюється або назва кольору, або шістнадцятиричне значення кольору, як і параметру color тега <font> (див. Урок 2. Форматування тесту):
<body text="#FF0000"> або <body text="red">
В результаті використання цього прикладу весь текст на сторінці буде червоним.
Параметр text не є обов'язковим. Якщо його опустити, то текст на сторінці за умовчанням буде чорним. Ви, напевно, вже встигли в цьому переконатися, виконуючи попередні вправи. :)