Web-мастеру

У вас есть идея насчет сайта? Вы хотите написать о своей самоделке нам? Тогда вам сюда или пришлите её нам skype valeron609, e-mail:   Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. . Новость должна быть уникальной. 

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

Автор 
Оцените материал
(1 Голосов)

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

 

Солнышко из-за холма

Лучиком играет.

Ну и что, что счас зима -

В сугробе загораю!

А вокруг такой покой!

Нежно чешет спинку

Влажной мне своей рукой

Снежная простынка...

 

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

Море

 

 

 

 

Чтобы это сделать нам надо использовать тег <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>

Код в блокноте

Финал в браузере

 

 

 

 

 

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

Понравился сайт? Кликни +1

Наши группы

Красиво не правда ли? Нажми если хочешь.

Три случайные новости