Caйт для веб-мастера.

 Главная | Мой профиль | Выход / Вы вошли как Гость | Группа "Гости" | RSS / Вторник, 23.01.2018


     

Вставка картинок.

Для этого нам сгодится одинарный тег <img>
Пишется так

<img src="name.jpg">

 

name – в данном случае название рисунка в формате .jpg размещенного в той же директории то есть в той же папке где и наш документ, чтобы знать - поддиректорий является например risunki/name.jpg это если в созданной нами папке siteсоздали папку risunkiи положили в
нее файл name.jpg. Если файл будет размещен на другом сайте прописываем полностью путь
Например:
 
<img src="http://p-f-s.ru/index/run/image123">
 
Для удобства в работе можно размещать рисунки в туже папку где и документ.
<img> не требует закрывающий тег.
Для того чтобы текст обтекал картинку воспользуемся атрибутам align

<img src="name.jpg" align="right">

Это значит что картинка будет прижата к правому краю а текст будет ее обтекать по левой
стороне. Используйте вместо right, (по умолчанию) bottom текст будет располагается внизу
картинки,middle по середине, top вверху.

Расстояние между картинкой и текстом задают атрибуты

vspace="10" расстояние по вертикали.
hspace="30"расстояние по горизонтали.
Цифры задаются в пикселях (в точках).
 
Атрибут alt="текст под изображением" при отсутствии изображения виден этот текст.

Атрибут title="описание картинки" при наведении курсора мышки на изображение высвечивается текст заданный в атрибуте.

 
Ширина картинки указывается width="…" , height="…" высота картинки.
Не задавая эти атрибуты картинка будет реального размера.
 
Указывается цвет рамки. bordercolor.

<img src="primtocodephoto.gif" align="left" hspace="20" vspace="10" alt="моя фотография" border="3" bordercolor="#CC0000">

border – рамка картинки, по умолчанию она есть, а если она вам не нужна
задайте ноль.

<img src="name.jpg" border="0">

Попробуем разобрать практический пример.

<img src="name.jpg" align="right" vspace="10" hspace="20" wight="100"
height="100"
border="2"alt="описание картинки">

Картинка прижата к правому краю, ее обтекает с лева текст на расстоянии от
 нее в 10 пикселей по вертикали, по горизонтали в 20 пикселей, ширина картинки 100, высота
100 пикселей, бордюр 2, и при наведении курсора будет высвечиваться надпись «описание
 картинки».

Давайте вставим в код и попробуем, я его изменю для наглядности добавим
текста. Также надо разместить картинку любую с названием name в формате .jpg в туже папку где располагается документ.
 
<html>
   <head>
             <title>Мой документ.</title>  
   </head>
<body text="#000000" bgcolor="#C0C0C0">
<img src="name.jpg" align="right" vspace="10" hspace="20" wight="100" height="100" border="2"alt="описание картинки">
<H1>Привет!</H1>
<br>
Я твоя страничка. Вот мы и научились располагать текст на нашей веб странице, используя
разную цветовую палитру, вставлять картинки, задавать описание. Будем учиться дальше…
<br>
               <font color="#CC0000">Красный текст.</font>
<br>
               <font color="#0000FF">Голубойтекст.</font>
<br>
              <font color="#008000">Зеленыйтекст.</font>
<br><br><br><br>
Я еще только учусь, но у меня все хорошо получается.
<br><br>
              <p align="left">Текст</p>
              <p align="right">Текст</p>
              <p align="center">Текст</p>
              <p align="justify">Текст</p>
<i>Курсив</i><br>
<b>Полужирный.</b><br>
<u>Подчеркнутыйтекст</u><br>
<strike>Перечеркнутый текст.</strike><br>
<s>Перечеркнутый текст.</s><br>
<sup>Верхний индекс</sup><br>
<sub>Нижний индекс</sub><br>
<tt>Моноширнный текст.</tt>
</body>
</html>                  

Чтобы не приходилось прописывать много раз перенос строки <br>
Когда требуется спустить текст под картинку.

<brclear="left">

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

Будем учиться дальше…


У атрибута clear есть несколько значений – all, left, right.
Определяет по какому краю завершить обтекание объекта.


УЧЕБНИК

САЙТЫ КАТАЛОГА
Обслуживание КМ 5 в Омске, сдача отчетов. Поверка, ремонт приборов.
Обслуживание Эльф в Омске, сдача отчетов. Поверка, ремонт приборов.
VBAZE - биржа студенческих работ
Техническое обслуживание ВКТ 4 в Омске, сдача отчетов.
Обслуживание КМ 5 в Омске, сдача отчетов.
VERX Верхняя женская одежда
VERX Верхняя женская одежда оптом и в розницу
VERX Верхняя женская одежда
verx007
Техническое обслуживание приборов учета тепловой энергии в Омске, сдача отчетов. Поверка, ремонт приборов.