Всем привет сегодня у нас интересная тема мы будем учиться вставлять на нашу страничку картинку и перевод строки, то есть, как нам сделать, чтобы допустим строки текста шли вот таким образом:
Солнышко из-за холма
Лучиком играет.
Ну и что, что счас зима -
В сугробе загораю!
А вокруг такой покой!
Нежно чешет спинку
Влажной мне своей рукой
Снежная простынка...
Итак, как вставить картинку на наш сайт? Например, мы хотим вставить вот эту картинку .
Чтобы это сделать нам надо использовать тег <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>
Как мы видим после первой строки у нас идет большой отступ. Так можно использовать этот тег и еще, например не только с текстом, а картинки можно двигать ниже. Но напоминаю, он уже старый есть и другие способы более удобные, но о них уже в другой статье.