HTML

Картинки

Сначала заготовим изображение и поместим его в нашу папку 'www'. Если своего изображения нет, то жмем сюда, по открывшейся картинке щелкаем правой кнопкой мыши, выбираем 'Сохранить рисунок как' и сохраняем в нашу папку. Все готово? Картинка вставляется на страницу тэгом <img src=...>, в котором на месте многоточия прописывается путь до нее. Если файл, в который мы будем вставлять картинку находится в той же папке, что и картинка, достаточно написать только название файла картинки, в нашем случае это 'mp1.JPG'. Пример:

<HTML>
<head>
</head>
<body>
<img src=mp1.JPG>
</body>
</HTML>

Как обычно, посмотрим, что получилось. Слишком большая картинка? Размеры можно менять. Для этого в тэг вписываем ширину-width и высоту-height (разумеется, по-иностранному, русского WEB-обозревательы не понимают), которые задаются в пикселях (это одна точка на экране).

<HTML>
<head>
</head>
<body>
<img src=mp1.JPG width=200 height=160>
</body>
</HTML>

Картинка стала меньше. Чтобы расположить картинку в другом месте экрана, нужно вписать в тэг уже знакомый нам align, точно так же, как мы до этого поступали с текстом:

<HTML>
<head>
</head>
<body>
<img src=mp1.JPG width=200 height=160 align=right>
<p align='justify'>...Cuius (Archimedis) ego quaestor1 ignoratum ab Syracusanis, cum esse omnino negarent, saeptum undique et vestitum vepribus et dumetis indagavi sepulcrum. Tenebam2 enim quosdam senariolos, quos in eius monumento esse inscriptos acceperam, qui declarabant in summo sepulcro3 sphaeram esse positam cum cylindro. Ego autem cum omnia conlustrarem oculis (est enim ad portas Agrigentinas magna frequentia sepulcrorum), animum adverti4 columellam non multum e dumis eminentem, in qua inerat sphaerae figura et cylindri. Atque ego statim Syracusanis (erant autem principes mecum) dixi me illud ipsum arbitrari esse, quod quaererem. Immissi cum falcibus multi purgarunt5 et aperuerunt locum. Quo cum patefactus esset aditus, ad adversam basim accessimus. Apparebat epigramma exesis posterioribus partibus versiculorum dimidiatis fere. Ita nobilissima Graeciae civitas, quondam vero etiam doctissima, sui civis unius acutissimi monumentum ignorasset6, nisi ab homine Arpinate7 didicisset.
</p>
</body>
</HTML>

и сейчас картинка справа.

А сейчас посмотрим, как картинка совмещается с текстом. В последний пример вставим достаточно длинный текст, например, тот, который уже был (на латыни):

<HTML>
<head>
</head>
<body>
<img src=mp1.JPG width=200 height=160 align=right>
<p align='justify'>...Cuius (Archimedis) ego quaestor1 ignoratum ab Syracusanis, cum esse omnino negarent, saeptum undique et vestitum vepribus et dumetis indagavi sepulcrum. Tenebam2 enim quosdam senariolos, quos in eius monumento esse inscriptos acceperam, qui declarabant in summo sepulcro3 sphaeram esse positam cum cylindro. Ego autem cum omnia conlustrarem oculis (est enim ad portas Agrigentinas magna frequentia sepulcrorum), animum adverti4 columellam non multum e dumis eminentem, in qua inerat sphaerae figura et cylindri. Atque ego statim Syracusanis (erant autem principes mecum) dixi me illud ipsum arbitrari esse, quod quaererem. Immissi cum falcibus multi purgarunt5 et aperuerunt locum. Quo cum patefactus esset aditus, ad adversam basim accessimus. Apparebat epigramma exesis posterioribus partibus versiculorum dimidiatis fere. Ita nobilissima Graeciae civitas, quondam vero etiam doctissima, sui civis unius acutissimi monumentum ignorasset6, nisi ab homine Arpinate7 didicisset.
</p>
</body>
</HTML>

Текст обтекает картинку слева. Если поместить изображение слева (align=left), текст окажется справа от картинки. Расстояние от текста до изображения можно менять, задавая в тэге картинки два параметра vspace – расстояние в пикселях от изображения до текста по вертикали и hspace – по горизонтали, например так:

<HTML>
<head>
</head>
<body>
<img src=mp1.JPG width=200 height=160 align=right vspace=10 hspace=50>
<p align='justify'>...Cuius (Archimedis) ego quaestor1 ignoratum ab Syracusanis, cum esse omnino negarent, saeptum undique et vestitum vepribus et dumetis indagavi sepulcrum. Tenebam2 enim quosdam senariolos, quos in eius monumento esse inscriptos acceperam, qui declarabant in summo sepulcro3 sphaeram esse positam cum cylindro. Ego autem cum omnia conlustrarem oculis (est enim ad portas Agrigentinas magna frequentia sepulcrorum), animum adverti4 columellam non multum e dumis eminentem, in qua inerat sphaerae figura et cylindri. Atque ego statim Syracusanis (erant autem principes mecum) dixi me illud ipsum arbitrari esse, quod quaererem. Immissi cum falcibus multi purgarunt5 et aperuerunt locum. Quo cum patefactus esset aditus, ad adversam basim accessimus. Apparebat epigramma exesis posterioribus partibus versiculorum dimidiatis fere. Ita nobilissima Graeciae civitas, quondam vero etiam doctissima, sui civis unius acutissimi monumentum ignorasset6, nisi ab homine Arpinate7 didicisset.
</p>
</body>
</HTML>

Посмотрим, как это выглядит и что будет , если картинку поставить слева.

Изображение можно сделать и фоном документа, если добавить в тэг <body> атрибут background=(путь к картинке). Если картинка маленких размеров, WEB-обозреватель будет повторять ее, пока не замостит все поле страницы:

<HTML>
<head>
</head>
<body background=fon.JPG>
<img src=mp1.JPG width=200 height=160 align=right vspace=10 hspace=50>
<p align='justify'>...Cuius (Archimedis) ego quaestor1 ignoratum ab Syracusanis, cum esse omnino negarent, saeptum undique et vestitum vepribus et dumetis indagavi sepulcrum. Tenebam2 enim quosdam senariolos, quos in eius monumento esse inscriptos acceperam, qui declarabant in summo sepulcro3 sphaeram esse positam cum cylindro. Ego autem cum omnia conlustrarem oculis (est enim ad portas Agrigentinas magna frequentia sepulcrorum), animum adverti4 columellam non multum e dumis eminentem, in qua inerat sphaerae figura et cylindri. Atque ego statim Syracusanis (erant autem principes mecum) dixi me illud ipsum arbitrari esse, quod quaererem. Immissi cum falcibus multi purgarunt5 et aperuerunt locum. Quo cum patefactus esset aditus, ad adversam basim accessimus. Apparebat epigramma exesis posterioribus partibus versiculorum dimidiatis fere. Ita nobilissima Graeciae civitas, quondam vero etiam doctissima, sui civis unius acutissimi monumentum ignorasset6, nisi ab homine Arpinate7 didicisset.
</p>
</body>
</HTML>

Картинку можно взять здесь и посмотреть, что получилось. Переходим к ссылкам.

Рейтинг@Mail.ru