Лекція 5
.pdf
Лекція №4
Вставка малюнків і відео файлів. Cтворення списків Створення списків за допомогою css
Малюнки і анімація можуть зробити HTML-документ привабливішим і цікавішим. Для правильного використання графіки в HTML-документі необхідно враховувати наступні чинники: багато браузерів підтримують тільки графічні формати GIF і JPEG; файли, що містять графіку, передаються поволі; деякі користувачі не мають графічних браузерів або просто відключають завантаження зображень; кольорова графіка, яка добре виглядає на вашому комп’ютері, може погано виглядати на іншому.
Графічні зображення, такі як фотографії, картинки, піктограми тощо, зберігаються на серверах в окремих файлах з розширеннями .bmp, .jpg, .gif, .png та іншими і відображаються на web-сторінці за допомогою тега <IMG> з параметрами:
<IMG SRC="адреса графічного файлу" ALT="альтернативний текст"
ALIGN=" "
WIDTH= "" HEIGHT=" ">
«Img src»- від англ. Image source (джерело зображення). Дія тега. Обов’язковим є лише перший параметр SRC.
ALT- альтернативний текст — це текст, який виводитиметься замість картинки, якщо браузер не може прийняти графічний файл або якщо режим відображення графіки вимкнено.
Параметр ALIGN задає місце розташування картинки на екрані, а параметри WIDTH і HEIGHT — її розміри за шириною і висотою в пікселях або відсотках.
Зображення можна подати в рамці. Це рекомендують робити, якщо його використовуватимуть як гіперпосилання.
Для створення рамки навколо зображення призначений параметр
BORDER= «товщина рамки в пікселях».
Праворуч і ліворуч від картинки, яку обгортає текст, можна зробити вільний
простір: HSPACE = "кількість пікселів". Можна створити вільний простір також над і під рисунком: VSPACE = "кількість пікселів".
Атрибути тега IMG
src="файл" Задає URL-адресу зображення, цей атрибут є обов’язковим
alt="текст" Задає альтернативний текст для браузерів, що не підтримують роботу із зображеннями
Задає розташування картинки щодо тексту, може приймати наступні align="тип" значення: ТОР- угорі, MIDDLE- посередині, BOTTON- унизу,
|
LEFT- зліва, RIGHT- справа, Center — по центру. |
|
border=n |
Встановлює товщину рамки навколо зображення в пікселях відносно |
|
ширини вікна браузера |
||
|
||
height=n(%) |
Встановлює висоту зображення в пікселях або у відсотках відносно |
|
width=n(%) |
висоти вікна браузера |
|
Встановлює ширину зображення в пікселях або у відсотках |
||
hspace=n |
Задає вільний простір зліва і праворуч від зображення (у пікселях) |
|
vspace=n |
Задається вільний простір над і під зображенням (у пікселях) |
Приклад 1. Вставка графічного зображення
<html> <!--Це файл mal.html-->
<head>
<title>Cторінка з малюнком</title>
</head>
<body bgcolor="red" >
<IMG SRC="mal1.jpg" ALT="альтернативний текст" ALIGN="left" WIDTH=240 HEIGHT=200>
</body>
</html>
На екрані отримаємо:
Взагалі картинки, текст та інші елементи сторінки найзручніше розташовувати в таблицях, зробивши невидимі межі, що ми вивчатимемо пізніше.
Малюнки також можна використовувати, як фонове зображення для тла html-файлів.
Для цього, як ми уже зазначали у лекції №1 служить параметр BACKGROUND
тега <Body>: <BODY BACKGROUND="mal.jpg">.
Для даного параметра також можна застосовувати стилі CSS.
Основні CSS-атрибути фону:
Атрибут 'background-color' – описує колір фону елемента.
Атрибут background-image задає фонове зображення.
Атрибут background-repeat дозволяє організувати повторення фонового зображення:
Background-repeat: repeat-x - малюнок повторюється по-горизонталі
background-repeat: repeat-y - малюнок повторюється по-вертикалі
background-repeat: repeat – малюнок повторюється по-вертикалі і погоризонталі
background-repeat: no-repeat – малюнок не повторюється
Атрибут background-attachment визначає, чи фіксується фоновий малюнок, чи прокручується разом із вмістом сторінки:
background-attachment: scroll - зображення прокручується разом із сторінкою – розблоковане;
background-attachment: fixed - зображення блоковане.
Атрибут background-position дозволяє змінювати розташування фонового зображення на екрані, наприклад:
background-position: 2cm 2cm - малюнок розміщений на 2 cm зліва і на 2 cm зверху
background-position: 50% 25% - малюнок розміщений по-центру і на четверть екрана зверху;
background-position: top right – малюнок розміщений в правому верхньому куті сторінки.
Зауваження. Аналогічно як і у випадку текстових блоків до графічні зображення теж можна поміщати в блочний тег <DIV> і на основі цього здійснювати позиціонування та перекривання графічних об’єктів (див. лекція №3).
Розглянемо застосування стилів для зміни фону web-сторінки на прикладах.
Приклад 2а. Задання фонового зображення тла, яке не повторюється
<html> <!--Це файл mal1.html-->
<head>
<title>Cторінка з фоновим зображенням</title>
</head>
<body style="background-image:url(pruroda.jpg); background-repeat:no- repeat">
<H1> Фонове зображення </H1>
</body>
</html>
Приклад 2б. Завдання фонового зображення тла, яке повторюється по-горизонталі
<html> <!--Це файл mal2.html-->
<head>
<title>Cторінка з фоновим зображенням</title>
</head>
<body style="background-image:url(pruroda.jpg); background-repeat: repeat-х">
<H1> Фонове зображення </H1>
</body>
</html>
Приклад 2в. Завдання фонового зображення тла відносно певної позиції (по-центру)
<html> <!--Це файл mal3.html-->
<head>
<title>Cторінка з фоновим зображенням</title>
</head>
<body style="background-image:url(pruroda.jpg); background-repeat:no- repeat; background-position:center 80px ">
<H1> Фонове зображення </H1>
</body>
</html>
Приклад 2г. Завдання фонового зображення для блоку
<html><!--Це файл mal4.html-->
<head>
<title>Фон для блоку</title>
</head>
<body bgcolor="#66cc66"> <div style="margin:0px auto;
width:550px; height:300px; padding:30px; border:3px solid #ffff00; background:#ffdd00 url(1/ pruroda.jpg) no-repeat 100px 100px; color:#ffffff">Текстовий блок</div>
</body>
</html>
Зауваження. В даному випадку параметр margin: – визначає відступи блоку відносно полів документу; padding: – визначає поля всередині блоку; border: – визначає властивості рамки; width: – задає ширину в пікселях або в процентах, height: – висоту; color: – задає колір тексту.
Приклад 3: (Фіксація фонового зображення)
<html><head>
<head>
<title>Фіксація фону</title> </head>
<body>
<div style="margin:0px auto; width:700px; height:800px; padding:30px; background-color:#ffffff; background-image:url(flower.jpg); background-repeat:no-repeat; background-attachment:fixed; background-position:40px 40px;"> <p>Текст документу</p>
<p>Текст документу</p> <p>Текст документу</p> <p>Текст документу</p>
</div>
</body>
</html>
Примітка. По замовчуванню фоновий малюнок прокручується разом із іншими
елементами сторінки, параметр background-attachment: із значенням fixed – фіксує зображення в одній позиції.
Розміщення зображень у блоках. Параметри обтікання FLOAT та CLEAR
Дя обтікання об’єктів один одним служить параметр float
|
|
|
left |
|
|
|
|
Float |
|
right |
|
Визначає вирівнювання елементів |
|
|
|
none |
|
|
||
|
|
|
|
|
|
|
|
|
|
inherit |
|
|
|
|
|
|
|
|
|
|
|
Clear |
|
none, left, right, both (з |
Розташування інших елементів навколо |
|
|
|
|
двох сторін) |
|
даного |
|
|
|
|
|
|
|
||
|
|
|
|
|
|
|
Приклад 4. (float:left – вирівнювання об’єктів один відносно одного по лівому краю блоку)
<html> <!--Це файл mal1.html-->
<head>
<title>Галерея зображень</title>
</head>
<body>
<div style="float:left; margin:26px; border:1px solid #000000"> <img src="flower1.jpg" width="160" height="160" border="0"> <img src=" flower2.jpg" width="160" height="160" border="0"> <img src=" flower3.jpg" width="160" height="160" border="0"> <img src=" flower4.jpg" width="160" height="160" border="0"> <img src=" flower5.jpg" width="160" height="160" border="0"> <img src=" flower6.jpg" width="160" height="160" border="0">
</div>
<div style="clear:left"> </div>
</body>
</html>
В результаті ми отримаємо наступне розміщення графічних об’єктів:
Примітка: В даному випадку параметр float:left – задає обтікання обтікання об’єктами один одного зліва направо; margin – визначає відступ по всьому периметру зображення; border:1px solid #000000 – рамка товщиною 1 піксель, чорного кольору, параметр clear:left зупиняє лівостороннє обтікання, тобто він і наступні за ним об’єкти будуть розміщені в середині сторінки згідно своїх описів.
Якщо ж помістимо кожне із зображень відповідно в інший блок та задамо параметр border, то отримаємо наступне розміщення даних зображень:
Зауваження. Аналогічні дії можна проробити із параметром float:right та за допомогою параметра clear.
Приклад 5 а) ( Позиціонування зображень)
<html>
<head>
<title> Зображення </title>
</head>
<body>
<div style="position:relative; left:100px">
<img src=" flower1.jpg" width="160" height="160" border="1"></div>
<!—зображення1-->
<div style="position:relative; left:250px">
<img src=" flower2.jpg" width="160" height="160" border="1"></div>
<!-- зображення 2-->
</body>
</html>
Приклад 5 б)
<html>
<head>
<title> Зображення </title>
</head>
<body>
<div style=" position:absolute; top:20px; left:120px">
<img src=" flower1.jpg" width="100" height="100" border="1"></div>
<!— зображення 1--> <div style="position:absolute; bottom:20px; left:120px;">
<img src=" flower2.jpg" width="100" height="100" border="1"></div>
<!— зображення 2--> <div style=" position:absolute; top:20px; right:120px;">
<img src=" flower2.jpg" width="100" height="100" border="1"></div>
<!— зображення 2--> <div style=" position:absolute; bottom:20px; right:120px">
<img src=" flower1.jpg" width="100" height="100" border="1"></div>
<!— зображення 1-->
</body>
</html>