Вставка зображень в html-сторінки
Для вбудовування зображення в документ використовується тег IMG, має єдиний обов'язковий параметр src, який визначає адресу файлу з картинкою. ^^^^
Файл з малюнком, зображеним нижче" називається sample.gif і розміщується в теці images кореня сайту.
Для вказівки адреси зображення можна задавати як абсолютну, так і відносну адресу.
Приклад 1 Вставка зображення в документ
<html>
<body>
<img src="http://www.htmlbook/images/sample.gif"> - це абсолютна адреса розміщення зображення
<img src=7images/sample.gif"> - адреса розміщення зображення щодо кореня сайту
<img src="images/sample.gif"> - адреса розміщення зображення відносно поточного HTML-документа
</body>
</html>
Вирівнювання зображень
Для зображень можна указувати їх положення щодо тексту або інших зображень на веб-сторінці. Спосіб вирівнювання зображень задається параметром align тега IMG. В таблиці перераховані можливі значення цього параметра і результат його використовування.
Код HTML |
Опис |
<img scr=”pic 1jpg” aling=”texttop”> |
Верхня межа зображення вирівнюється по самому верхньому текстового елемента рядка |
<img scr=”pic 1jpg” aling=”top”> |
Верхня межа зображення вирівнюється по самому верхньому елемента рядка |
<img scr=”pic 1jpg” aling=middle> |
Вирівнювання зображення по середній лінії текстового рядка |
<img scr=”pic 1jpg” aling=absmiddle> |
Вирівнювання зображення по базовій лінії поточного рядка |
<img scr=”pic 1jpg” aling=botton> |
Вирівнювання нижньої межі зображення по навколишньому тексту |
<img scr=”pic 1jpg” aling=left> |
Вирівнювання зображення по лівому краю тексту |
<img scr=”pic 1jpg” aling=right> |
Вирівнювання зображення по правому краю тексту |
Найпопулярніші параметри - left і right, створюючи обтікання тексту навкруги зображення. Щоб текст не прилягав щільно до малюнка, рекомендується в теге IMG додати параметр hspace і vspace, задаючи відстань до тексту в пікселях.
Приклад 2 Обтікання тексту навкруги малюнка
<html>
<body>
<img scr=”pic 1jpg” width=50 height=50 hspace=10 vspace=10 aling=right>
</body>
</html>
Можна використовувати малюнки як гіперпосилання. Для цього потрібно включити тег IMG в зміст елементу А. Напріклад:
<а HREF=”glava5.htm”><IMG SRC=”ris1.jpg”></A>
Завдання: Вставити малюнки з вирівнюванням по правому, лівому краю, по центру сторінки.
Лабораторна робота №4
Створення списків Нумеровані списки
Списки (list) були додані в HTML, поза сумнівом, під впливом успіху текстових редакторів. Список відрізняється від звичайного тексту перш за все тим, що користувачу не треба думати про нумерацію його пунктів: цю задачу бере на себе програма. Якщо список додається новими пунктами або скорочується, нумерації коректується автоматично. У разі ненумерованих списків програма ставить перед кожним пунктом маркери: кружечки, прямокутники, ромби або інші зображення. В результаті список приймає легкий для читання, «фірмовий вигляд».Марковані списки дозволяють розбити великий текст на окремі блоки. Теги для створення списків можна умовно розділити на дві групи: одні визначають загальний вид списку (і дозволяють використовувати атрибути), а інші задають його внутрішню структуру. Існує декілька різновидів списків.
<UL><LI></ul>
Найпростіший ненумерований список (unordered list).
Пример1 Ненумерований список
<html>
<head>
<body>
<ul>
<li> Пункт 1 списка</li>
<li> Пункт 2 списка</li>
<li> Пункт 3 списка</li>
</ul>
</body>
</html>
Маркери можуть приймати один з трьох видів: коло (за умовчанням), коло і квадрат. Для вибору типу маркера використовується параметр type="..." тега UL. Замість багатокрапки підставляється одне з трьох значень вказаних в таблиці.
Код HTML |
Опис |
<ul type=”disc”> |
• пункт 1 списку • пункт 2 списку • пункт 3 списку |
<ul type=”circle”> |
? пункт 1 списку ? пункт 2 списку ? пункт 3 списку |
<ul type=”square”> |
| пункт 1 списку | пункт 2 списку | пункт 3 списку |
Нумерований список використовує інший зовнішній тег: OL. В цьому випадку кожний пункт нумерується елементом впорядкованої послідовності: арабськими або римськими числами, буквами латинського алфавіту. Нижче, в таблиці приведені різні параметри тега OL і результат їх вживання.
Код HTML |
Опис |
<ol> <li> </li> <li> </li> <li> </li> </ol> |
Нумерований список з параметром за умовчанням
|
<ol start=”7”> |
Нумерований список починається з 7 7.текст 8.текст |
<ol type=”A”> |
Нумерований список із заголовними буквами латинського алфавіту А. текст В. текст |
<ol type=”a”> |
Нумерований список з прописних букв латинського алфавіту а. текст в. текст
|
<ol type=”I”> |
Нумерований список із заголовними буквами римського алфавіту I. II/
|
<ol type=”i”> |
Нумерований список з прописних букв римського алфавіту i. ii. |
<ol type=”1”> |
Нумерований список з арабськими цифрами 1. 2. |
Списки з визначеннями (definition lists) створюються за допомогою тегов трьох видів:
Пример2 Список з визначеннями
<DL>
<DT> Пункт 1
<DD> Визначення пункту 1
<DD> Інше визначення пункту 1
<DT> Пункт 2
<DD> Визначення пункту 2
<DT> Пункт 3
<DD> Визначення пункту 3
</dl>
Кожний пункт списку може бути доповнений одним або декількома блоками тексту за допомогою тега (тегов) DD. Кожний блок автоматично розміщується з нового рядка. Термін «визначення» носить умовний характер. Абзаци, розміщені в списку, можуть бути визначеннями, доповненнями, роз'ясненнями пунктів. По суті, пункт є заголовком, а визначення - довільний текст під заголовком.
Інший спосіб створення складних списків - використовування принципу вкладення. Кожний елемент, що визначає пункт списку, може містити ще один список. Вкладений список розташовується з невеликим відступом управо щодо списку верхнього рівня. Кожний із списків може бути створений й редагований окремо, а потім всі складові можуть бути з'єднані в один великий список. У тому випадку, коли структура списку ясна, зручно скористатися шаблоном. В ньому повинні бути вказані всі пункти на всіх рівнях. Доробка такого шаблона зводитися до вписування конкретних рядків тексту у відповідні пункти. Нижче даний приклад такого шаблона:
<UL>
<LI> Пункт 1
<OL>
<LI> Пункт 1.1
<LI> Пункт 1.2
</ol>
<LI> Пункт 2
<OL>
<LI> Пункт 2.1
<LI> Пункт 2.2
</ol>
<LI> Пункт 3
<OL>
<LI> Пункт 3.1
<LI> Пункт 3.2
</ol>
</ul>
В ньому нумеровані списки розміщені усередині пунктів ненумерованого списку. Рис 3.6. дає уявлення про те, як виглядає така конструкція.
- Пункт 1
Пункт 1.1
Пункт 1.2
- Пункт 2
Пункт 2.1
Пункт 2.2
- Пункт 3
Пункт 3.1
Пункт 3.2
Завдання :В роботі необхідно створити ненумерований і нумерований список.