2015-06-05
319
Размещение текста и картинки.
Попробуйте изменить задание №3, добавив немного текста. Для этого откройте блокнот и сохраните документ по именем 4.html в вашу папку.
Запишите программный код:
<html>
<head>
</head>
<body bgcolor=#edf3ff>
<h1 align=center><font color=red>Название картинки</font></h1>
<img src="1.jpg" width="300" heigh="250">
<p> Однажды в студеную зимнюю пору<br>Сижу за решеткой в темнице сырой<br>Гляжу поднимается медленно в гору<br>Вскормленный в неволе орел молодой</p>
<p><font color=blue>Это картинку вставил студента 1-го курса Фамилия Имя</font></p>
</body>
</html>
Проиграйте в браузере ваш документ. Вы видите, что текст отображается после картинки внизу. А как сделать, чтобы текст и картинка были на одном уровне? Например, картинка слева, а текст справа. Для решения этой задачи, нам необходимо обратиться к СТИЛЯМ.
Запишите следующий программный код:
<html>
<head>
<style type="text/css">
img{float:left}
</style>
</head>
<body bgcolor=#edf3ff>
<h1 align=center><font color=red>Название картинки</font></h1>
|
|
|
<img src="1.jpg" width="300" heigh="250">
<p> Однажды в студеную зимнюю пору<br>Сижу за решеткой в темнице сырой<br>
Гляжу поднимается медленно в гору<br>Вскормленный в неволе орел молодой
</p>
<p><font color=blue>Это картинку вставил студента 1-го курса Фамилия Имя</font></p>
</body>
</html>
Теперь вы видите, что картинка находится слева, а текст начинается на одном уровне с картинкой и печатается справа от нее. Это произошло из-за того, что мы добавили параметр FLOAT: LEFT для картинки (IMG).
