Как вставить на страничку сайта картинку

Чтобы вставить на страничку сайта картинку, для начала она должна у вас быть. Так как мы учимся, и у вас ее нет, то можете скопировать её у меня.





Выбераем "Сохранить как…" , и сохраняем её в папку с нашими уроками (папка internet_site на диске D:\) название файла картинки не меняем Readymoney.jpg

Для того чтобы вставить нашу картинку, мы будем пользоватся тегом <img>. Тег происходит от английского слова image (картинка, изображение). Название нашей картинки и есть параметр для тега, как бы пояснение компьютеру, какую именно картинку мы вставляем.

Вставим следующий код для нашей картинки в уже имеющийся:

<Img src=Readymoney.jpg>

или

<img src="Readymoney.jpg"> Src – source в переводе источник.


Работать будет в обоих случаях.

Итак, на данный момент код нашей интернет-странички стал выглядеть следующим образом:

<html>

<head>

<title>Мой первый сайт созданный своими ручками всего за 5 минут

</title>

</head>

<body bgcolor="#f01111" text="#ffff00"> <center>

<font color="#0000ff">Я научился раскрашивать текст!!!</font> <br>

Сегодня великолепный день для начинаний. Это моя первая интернет страничка.


<img src="Readymoney.jpg">

</center>

</body>

</html>


Выглядеть это будет так.


Так же в параметрах картинки желательно указывать параметры ширины и высоты - width (ш) и height (в). Например, вот так:

<img src="Readymoney.jpg" width="299" height="117">

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

<img src="Readymoney.jpg" width="299" height="117" alt="Сайт о заработке в интернете">

Внесем этот код в наш и посмотрим изменения на нашей интернет-страничке.

<html>

<head>

<title> Мой первый сайт созданный своими ручками всего за 5 минут

</title>

</head>

<body bgcolor="#f01111" text="#ffff00"> <center>

<font color="#0000ff">Я научился раскрашивать текст!!!</font><br>

Сегодня великолепный день для начинаний. Это моя первая интернет страничка.

<br><br><br>

<img src="Readymoney.jpg"
width="299" height="117" alt="Сайт о заработке в интернете">

</center>

</body>

</html>


Если вы заметили, то мы добавили еще <br><br><br>, для того чтобы картинка была немного ниже. Должно получится вот так.




К следующему уроку форматируем текст

К прошлому уроку выравнивание текста по середине.


Вернуться к статьям о заработке в интернете.


Если понравилась статья, буду признателен, если воспользуетесь кнопочками:



Подписаться на новости





Яндекс.Метрика