Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены


Уроки HTML


Вывод изображения HTML

В этом уроке будет показано, как выводить картинку на страницу и задавать значения некоторых параметров: длина, ширина, "название", толщина и цвет рамки.

Создайте папку "images" в той же директории (общей папке), в которой у вас находятся html-страницы. После этого в папку "images" загрузите какую-нибудь картинку, например эту:



Для вывода изображения применяется тег "<img />" . Внутри него пишется путь к изображению и задаются нужные параметры.

Для начала просто напишем путь к изображению - оно будет выведено в оригинальном размере: 

<html>
<head>
<title>Вывод изображения на HTML страницу</title>
</head>
<body>
<img src="images//htmlimages_0.jpg" />
</body>
</html>

Маленькая картинка



Теперь зададим картинке параметры длины, ширины и название. 

<html>
<head>
<title>Вывод изображения на HTML страницу </title>
</head>
<body>
<img src=" images//htmlimages_0.jpg" alt="Маленькая картинка" width="90" 
height="80" />
<br>
<img src=" images//htmlimages_0.jpg" alt="Средняя картинка" width="150" 
height="130" />
<br>
<img src=" images//htmlimages_0.jpg" alt="Largest images" width="300" 
height="260" />
</body>
</html>

Маленькая картинка
Средняя картинка
Largest images


Рамка вокруг изображения HTML

Рассмотрим, как сделать рамку вокруг изображения и задать ей цвет и ширину. Это делается с помощью простого атрибута CSS - style="border: " в котором задаётся ширина и цвет рамки. 

<html>
<head>
<title>Вывод изображения на HTML страницу </title>
</head>
<body>
<img src=" images//htmlimages_0.jpg" alt="Картинка с рамкой" width="150" 
height="130" style=" border: 4px solid #9A2EEB;"/>
</body>
</html>
Картинка с рамкой

В следующем уроке будет рассмотрен вывод изображения относительно текста.


◄ Предыдущий урок Содержание Следующий урок ►