Вставка малюнків

Щоб вставити малюнок, треба скористатися тегом:

<img src="my.jpg">,

де my.jpg -ім'я файла, що містить малюнок. Замість my.jpg можна вставити ім'я будь-якого іншого малюнка (з розширенням jpg, gif, png, bmp). Головне, щоб між лапками стояв шлях та ім’я файла малюнка (у наведеному прикладі малюнок знаходиться в одній папці з файлом HTML-документа).

Якщо малюнок знаходиться в іншій папці, то його краще переписати в папку, де знаходиться HTML-документ.

Для "співіснування" малюнка (наприклад, pr1.png) i тексту документа використовують теги:

малюнок з люого краю, текст його обтікає справа:

малюнок з правого краю, текст його обтікає зліва:

Kpiм параметрів align, існують ще кілька параметрів:

відстань між текстом i мапюнком по вертикалі (тут 10 пікселів):

відстань між текстом i малюнком по горизонталі (30 пікселів):

опис малюнка (якщо встановити курсор миші на малюнок, через секунду з'явиться вказаний текст - тут "моя фотокартка"):

ширина малюнка (тут 100 пікселів):

висота малюнка (тут 200 пікселів):

рамка навколо малюнка (тут товщина лінії 5 пікселів):

Bci параметри можуть застосовуватися одночасно один з одним, щоб запобігти плутанини в їx застосуванні. Наприклад, так:

Малюнок буде притиснутий до лівого краю екрана, текст буде його обтікати справа, ввдстань до тексту по горизонталі - 30 пікселів, по вертикалі - 5 пікселів, при встановленні курсору миші на малюнку з'явиться напис "моя фотокартка".

Спробуйте в папку з HTML-файлом переписати довільний малюнок (наприклад, з ім'ям photo.jpg). В HTML-файл за допомогою редактора "Блокнот" додати нові елементи i зберегти з новим ім'ям priklad5.html:

<html>

<head>

<title> Мій перший крок </title>

</head>

<H3>Привіт, це моя перша сторінка.</H3>

<br>

<font color="#CCOOOO"> <H1> Ласкаво просимо! </H1> </font>

</center >

<img src="photo.jpg " align="left" HSPACE=30 VSPACE=5

alt="моя фотокартка" WIDTH=80 HEIGHT=80>

<font size="+2"> Шановний колего !</font> Я вивчаю <font size="+l">

мову HTML, </font> щоб створити власну<i> домашню Web-сторінку</i> для спілкування з друзями i знайомими. Щоб вони могли <b><i>подивитися мою фотокартку, </i> </b> прочитати про мене, написати

кілька рядків в мою <u> книгу для гостей. </u>

</р>

</body>

</html

Рекомендуеться за допомогою-броузера переглянути цей HTML-файл, двічі клацнувши на його піктограмі, а також встановлювати інші параметри розташування фотокартки, подивитися результат.