Устанавливаем картинку на сайт


Давайте рассмотрим такой момент, допустим, вы нашли на каком либо ресурсе подходящую картинку нужной вам тематики, сначала вам нужно скопировать и сохранить эту картинку у себя на компьютере

Для этого наведите курсор на картинку и нажмите правую кнопку мышки. Выберите «Сохранить рисунок как…» Укажите место для сохранения картинки. Сохраните картинку в этой же директории, где находится файл вашей странички.

Имя файла картинки оставьте то же самое, в нашем примере это dollars.gif

Для вставки картинки – применяется тег <img> , в паре с параметром src указывающим имя файла – картинки.

Пример написания кода: <img src=”dollars.gif ”>

<html> 
<head> 
<title>Online обучение: HTML</title> 
</head> 
<body bgcolor= ”#00CCFF” text=”#FFFF00”> 
<center> 
<table border=”1” width=”300” height=”250” > 
<tr><td> 
<center> 

<font size=”4”> <P>Я изучаю язык разметки (маркировки) гипертекста – HTML. Он мне нужен для создания персонального сайта.</P><font><br><br>
<img src=”dollars.gif ”>
<font size=”3”> <P>Это мой первый опыт по созданию интернет странички. Я хочу создавать свои сайты и получать пассивный доход в интернете. </P><font>

</center> 
</td></tr> 
</table> 
</center> 
</body> 
</html> 

Обратите внимание. Так как картинка анимационная, то расширение у ней стоит gif , у простой будет расширение jpg . Tеги <br><br> добавлены для того, что бы увеличить пробел между картинкой и последней строкой текста. Если сказать проще, то опустить картинку на несколько строк ниже.

Лучше всего указать размер картинки. Для чего применяются параметры width (ширина картинки) и height (высота картинки), которые измеряются в пикселях.

Пример: <img src=”dollars.gif ” width=”200” height=”200”>
так мы прописываем картинку, если она находится в одной директории с файлом шаблона вашей странички.

Если же картинок достаточно много, то лучше создать папку и назвать ее images или img. Об этом уже упоминалось выше, когда мы создавали фон в виде картинки.

Пример написания будет выглядеть так:

<img src=images/dollars.gif ” width=”200” height=”200”>

Если вы применяете одну и ту же картинку, допустим свое фото, на разных ресурсах, то лучше всего, в корневой папке вашего домена, создать папку с дополнительными материалами. Назвать ее dopmat.

В этой папке создать тематические папки, например: video, music, images и тогда уже адрес вашей картинки (фотографии) будет прописываться вот так:
<img src=”http://ваш домен/dopmat/images/dollars.gif ” width=”200” height=”200”>

<html>
<head>
<title>
Online обучение: HTML</title>
</head>
<body bgcolor=”#00CCFF” text=”#FFFF00”>
<center>
<table border=”1” width=”300” height=”250” >
<tr><td>
<center> 

<font size=”4”> <P>Я изучаю язык разметки (маркировки) гипертекста – HTML. Он мне нужен для создания персонального сайта.</P><font>
<br><br>
<img src=
”http://ваш домен/dopmat/images/dollars.gif ” width=”200” height=”200”> 

<font size=”3”> <P>Это мой первый опыт по созданию интернет странички. Я хочу создавать свои сайты и получать пассивный доход в интернете. </P><font> 

</center> 
</td></tr> 
</table> 
</center> 
</body> 
</html> 

Если вы хотите что бы при наведении курсора на картинке появлялся текст, то это осуществляется с помощью параметра titl <img src=”images/dollars.gif ” width=”200” height=”200” title=”Заработай в интернете” >

<html> 
<head> 
<title>Online обучение: HTML</title> 
</head>
<body bgcolor=”#00CCFF” text=”#FFFF00”>
<center>
<table border=”1” width=”300” height=”250” >
<tr>
<td>
<center> 

<font size=”4”> <P>Я изучаю язык разметки (маркировки) гипертекста – HTML. Он мне нужен для создания персонального сайта.</P><font>
<br><br>
<img src=”http://ваш домен/dopmat/images/dollars.gif ” width=”200” height=”200”
title=”Заработай в интернете” 
<font size=”3”> <P>Это мой первый опыт по созданию интернет странички. Я хочу создавать свои сайты и получать пассивный доход в интернете. </P><font> 

</center>
</td>
</tr>
</table>
</center>
</body>
</html>

Обсуждение закрыто.