Как вставить картинку и перенести строку

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

Солнышко из-за холма
Лучиком играет.
Ну и что, что счас зима -
В сугробе загораю!
А вокруг такой покой!
Нежно чешет спинку
Влажной мне своей рукой
Снежная простынка...

Итак, как вставить картинку на наш сайт? Например, мы хотим вставить вот эту картинку .

Чтобы это сделать нам надо использовать тег <img, />но этого мало, чтобы все работало надо в этом теге прописать атрибут “src” в нем мы указываем, где находится картинка это либо ссылка на нее, либо путь на вашем компьютере. Пример вот у нас есть страничка и в неё мы вставляем картинку, которую мы берем из интернета – вот я загрузил  наше фото на хостинг картинок вот ссылка смотрим.

Теперь разберемся с кодом вот наша страничка:

<html>

<body>

<font color=”blue” size=”5″> Моя страничка</font>

<img src=http://s020.radikal.ru/i721/1301/d8/1c0def58b2bd.jpg>

</body>

</html>

Вот мы видим, что мы вставили в код тег <img> прописали к нему атрибут и указали путь картинки.

Далее если мы не хотим никуда нечего грузить и у нас на компьютере, к примеру, есть папку «мой сайт» а в ней мы хотим, чтобы была папка со всеми изображениями. Тогда, к примеру, папка с изображениями называется images и в папки у нас есть фотка, например под название more. У каждой картинки есть свой формат, такой как JPG,PNG,GIF.… У меня картинка в формате JPG и окончательно она будет называться “more.jpg” после названия фотки мы пишем точку и название формата. Еще раз у нас есть, к примеру, папка в папке еще одна папка под названием images. Чтобы нам прикрепить эту фотку и все работало на нашей страничке мы пишем тот же код и на месте src= мы пишем путь. Вот пример :

<html>

<body>

<font color=”blue” size=”5″> Моя страничка</font>

<img src=images/more.jpg>

</body>

</html>

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

Теперь вы умеете вставлять картинку на свою страничку. У тега <img> есть атрибуты ах да тег <img> -закрывать  не нужно. Снова про атрибуты  она такие:

align (всеми уже известный определяет выравнивание).

alt –создает альтернативный текст для картинки.

border-отпределяет рамку вокрут изображения по умолчанию значение у него 0.

height– это высота изображения тут можно как увеличить так и уменьшить высоту изображения.

width– ширина изображения тоже можно и увеличить и уменьшить.

Эти теги очень полезны, когда не хочется уменьшать картинку с помощью программ или вручную. Например, у нас картинка 400 на 400 пикселей, а мы можем сделать её 200 на 200.

hspace и vspace– определяют отступ по горизонтали и по вертикали тоже полезный атрибут.

Сейчас я покажу, как это работает.

<html>

<body>

<img src=images/more.jpg align=”left ” alt=”моя картинка” border= “2 ” >

<p align= ” center ” >Уменьшенный размер по высоте и ширине</p>

<img src=images/more.jpg align=”left ” alt=”моя картинка” border= “2 ” height=200 width=200  >

</body>

</html>

Я обещал написать, как сделать стишок на сайте так вот это делает тегом <br> он уже устарел и используется редко, но все же я покажу, как им пользоваться. Вот начало нашего стишка:

<html>

<body>

<p>Солнышко из-за холма</p> <br>

<p>Лучиком играет. </p>

<p>Ну и что, что счас зима -</p>

<p>В сугробе загораю! </p>

</body>

</html>

Как мы видим после первой строки у нас идет большой отступ. Так можно использовать этот тег и еще, например не только с текстом, а картинки можно двигать ниже. Но напоминаю, он уже старый есть и другие способы более удобные, но о них уже в другой статье. 

Pin It on Pinterest