Лекція 5
.pdf
Перекривання зображень параметр z-index
Внесемо деякі зміни в попередній приклад, а також застосуємо параметр z- index і утворимо ефект перекривання зображень:
<html>
<head>
<title> Зображення </title>
</head>
<body>
<div style="position:absolute; top:10px; left:120px; z-index:1">
<img src=" flower1.jpg" width="100" height="100" border="1"></div>
<!— зображення 1--> <div style="position:absolute; top:30px; left:130px; z-index:2">
<img src=" flower2.jpg" width="100" height="100" border="1"></div>
<!— зображення 2--> <div style="position:absolute; top:50px; left:150px;; z-index:3">
<img src=" flower2.jpg" width="100" height="100" border="1"></div>
<!— зображення 3--> <div style="position:absolute; top:70px; left:170px; z-index:4">
<img src=" flower1.jpg" width="100" height="100" border="1"></div>
<!— зображення 4-->
</body>
</html>
Вставка відеозображення
Мова HTML, також дозволяє під’єднувати до html-документів окрім зображень також і відео та ін. Важливо пам'ятати, що звукові файли, які підтримуються html мають розширення назв .au, .wav, .mid, .midi, а відеофайли -
.avi, .vivo, .mpeg.
Так наприклад, за допомогою вже відомого нам тега <IMG> можна, вставити також відеофільм який запускатиметься в момент відкриття web-сторінки:
<IMG DYNSRC="адреса відеофайлу">
Приклад 5. Вставка відеозображення
<html> <!--Це файл video.html-->
<head>
<title>Cторінка з відеозображенням</title>
</head>
<body bgcolor="red" > <IMG DYNSRC="clock.avi">
</body>
</html>
На екрані отримаємо (перегляд здійснюється у браузері Internеt Explorer).
Cтворення списків Створення списків за допомогою css
У HTML – документах можна використовувати списки, які полегшують сприйняття тексту.
Списки можуть бути трьох типів:
∙ненумеровані (з маркером позиції інакше марковані);
∙нумеровані;
∙списки словникового типу або списки визначень (тлумачень). Список може мати заголовок, який охоплюють тегами <LH>...</LH>.
<LH> Це заголовок списку </LН>.
Марковані (ненумеровані) списки використовується для представлення переліку елементів, порядок виведення яких не важливий. При виведенні маркованих списків браузер автоматично вставляє спеціальні значки (маркери), що відзначають кожен елемент списку.
Ненумерований (маркований) список утворюють за допомогою парного тега <UL> ...</UL> і одинарних тегів <LI>, наприклад, так:
|
|
|
Атрибути тега UL |
|
Визначає зовнішній вигляд маркера; можливі значення: |
||
type |
disk |
∙ |
- круг (форма по-замовчуванню); |
|
circle |
o |
- коло; |
|
square |
|
- квадрат. |
Приклад 1:
<html> <!--Це файл spusok1.html-->
<head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Мої улюблені предмети:</lh>
<ul> <!--маркований список--> <li>Інформатика <li>Англійська мова <li>Історія
</ul>
</body>
</html>
На екрані отримаємо:
Приклад 2:
<html>
<head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Мої улюблені предмети:</lh>
<ul type="square"> <li>Інформатика <li>Англійська мова <li>Історія
</ul>
</body>
</html>
В результаті на екрані отримаємо:
Тег <LI> забезпечує виведення маркера і розділення елементів списку.
Часто виникає потреба змінити кольори маркерів і тексту. Дану проблему розглянемо на основі наступних прикладів:
Приклад 3а: Одноколірне забарвлення тексту та маркера в списку (за допомогою тега форматування шрифтів <Font>…</Font>)
<html>
<head>
<title> Моя нова web-сторінка </title>
</head>
<body>
<lh>Мої улюблені предмети: </lh> <ul type="square">
<font color="blue"> <li>Інформатика </li></font> <font color="green"><li> Англійська мова</li> </font> <font color="orange"> <li>Історія </li></font>
</ul>
</body>
</html>
Приклад 3б: Зміна кольору тексту та маркера в списку (за допомогою використання таблиці стилів)
<html>
<head>
<title> Моя нова web-сторінка </title>
</head>
<body>
<lh style="color:magenta">Мої улюблені предмети: </lh> <ul type="square">
<li style="color:red"> <h4 style="color:blue">Інформатика </h4 ></li>
<li style="color:blue"> < h4 style="color:red">Англійська мова </h4 ></li> <li style="color:green"> < h4 style="color:orange">Історія </ h4 ></li>
</ul>
</body>
</html>
Примітка. В даному випадку ми застосували стильове оформлення маркера списку. Аналогічні дії можна проробити й за допомогою тега шрифтів <Font>, а також застосовувати і до нумерованих списків.
Часто для кращого оформлення документа використовують маркери у вигляді графічних зображень. В цьому випаку, якщо потрібно використовувати нестандартні маркери, то тег <LI> не вказується. Для виділення елементів списку в цьому випадку використовуються малюнки або символи, а тег <BR> забезпечує перехід до наступного елементу списку.
Приклад 4: Використання малюнка у вигляді маркера)
<html>
<head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Мої улюблені предмети:</lh>
<ul >
<img src="star. jpg " align="top"> <nbr> Інформатика<br>
<img src="star.jpg" align="top"> <nbr> Англійська мова<br> <img src="star. jpg " align="top"> <nbr> Історія <br>
</ul>
</body>
</html>
В результаті на екрані отримаємо:
Нумеровані (впорядковані) списки використовують, коли важливий порядок виведення елементів списку. Браузер автоматично вставляє номери елементів по порядку, в початковому HTML-тексті номери не друкуються.
Якщо кількість елементів списку зміниться (в результаті видалення або додавання нових елементів), то нумерація автоматично оновиться.
Нумерований список створюють за допомогою парного тега <OL>...
</OL> з необов'язковим параметром TYPE і одинарних тегів <LI> так:
Нумерований список
<html> <head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Мої улюблені предмети:</lh>
<ol type="1"><!--нумерований список--> <li>Інформатика
<li>Англійська мова <li>Історія
</ol>
</body>
</html>
На екрані отримаємо:
Значення "і" чи "І" параметра TYPE задає нумерацію римськими малими (і, іі, ііі, iv, ...) чи великими (І, II, III, IV, ...) цифрами, а значення "а" чи "А" - латинськими малими (a, b, c, d, ...) чи великими (А, В, С, ...) літерами.
Якщо нумерацію списка потрібно розпочати з певного номера використовують атрибут start тега <ol>.
Приклад 6: Зміна нумерації списку
<html>
<head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Мої улюблені предмети:</lh>
<ol type="І" start="15”> <li>Інформатика <li>Англійська мова <li>Історія
</ol>
</body>
</html>
На екрані отримаємо:
Якщо ж потрібно змінити нумерацію, в якомусь довгому списку, можна також застосувати парметр value, в тезі переліку <Li>.
Наприклад. <Li value=28> А ось і математика.
Списки тлумачень використовують для пояснення термінів, створення словників тощо. Його утворюють за допомогою парного тега <DL>...</DL> і двох одинарних тегів <DT> і <DD> так:
Приклад 7: Список тлумачення
<html>
<head>
<title>Моя нова web-сторінка</title>
</head>
<body>
<lh>Я знаю такі нові терміни:</lh> <dl><!--список тлумачень-->
<dt>HTML
<dd><i>мова для розмічування гіпертестових web-сторінок</i> <dt>Браузер
<dd><i>програма для перегляду web-документів</i> <dt>Тег
<dd><i>засіб для записування команд мовою HTML</i>
</dl>
</body>
</html>
На екрані отримаємо:
Списки в CSS
Для опису списків в CSS використовують наступні параметри: list-style
—визначає властивості маркера або номера позиції списку: list-style: list-style-image | list-style-position | list-style-type list-style-image
—замість маркера відображається малюнок:
list-style-image: url(xxx.jpg) list-style-position
— визначає позицію маркера:
list-style-position: outside | inside → значення outside (по замовчуванню) відображає маркер елементів списку на деякій відстані від рядка; inside – відображає маркер елементів списку в якості першого символа рядка. list-style-type
— визначає тип маркера або номер позиції списка:
list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha |
upper-alpha | none |
|
|
|
list-style-type: disc |
→ |
відображає зафарбований кружечок (значення по |
|
замовчуванню); <li style="list-style: disc"> |
|||
list-style-type: circle |
→ |
коло; <li style="list-style: circle"> |
|
list-style-type: square |
→ |
зафарбований квадрат; <li style="list-style: square"> |
|
list-style-type: decimal → |
маркерами є арабські цифри; <li style="list-style: decimal"> |
||