Графическое оформление сайта

Безимени-185Стоит согласиться с тем, что если добавить несколько разных цветов  на вашу страничку её внешний вид существенно изменится. Но все же, чего-то не хватает. Чего именно, как думаете Вы? Совершенно верно! Нашей странице недостаточно именно графического оформления, а именно html изображения. В данной статье мы поделимся с вами секретами о том, как добавить изображение html для того, чтобы внешний вид вашего ресурса стал лучше, а посещаемость увеличилась в несколько раз. Если все пройдет правильно, ваш заработок в интернете станет намного больше. В данной ситуации нашим помощником будет атрибут img src. html код расположения нашего изображения на ресурсе выгладит так:

И так, продолжим, для того чтобы показать Вам как поместить картинку html на странице, я загрузил её с Интернет ресурса. Так как мы создаем страницу про уроки html, то и картинку я подобрал соответствующей тематике. Благодаря программе для редактирования изображения Фотошоп, я отредактировал свою картинку и уменьшил её до того размера, какой мне необходим. Следующим делом необходимо закачать изображение на хостинг сайта, что я и сделал. Далее необходимо тот адрес, где расположена картинка вставить в код html:

Код html, который мы получили, вставляем на нашу страничку:

посмотреть результат

 

Если вам необходимо расположить определенный текст рядом с вашей картинкой html, необходимо воспользоваться атрибутом align. Этот атрибут отвечает за выравнивание изображения. В нашем случае к align необходимо подставить left (потому что картинка расположена слева). После проведения данной процедуры наш текст выровняется по левому краю относительно изображения. Если к атрибуту подставить right, то соответственно текст выровняется по правому краю относительно изображения.

Для того чтобы расположение и дизайн картинки был лучше, можно подставить несколько атрибутов для <img>.
1. vspace=”15″ – устанавливает расстояние между вашим текстом и изображением по вертикали;
2. hspace=”25″ – устанавливает расстояние между вашим текстом и изображение по горизонтали;
3. height=”200″ – высота изображения;
4. width=”100″ – ширина изображения.

Если вам необходимо подкорректировать ширину рамки вокруг изображения, или же убрать её абсолютно, тогда поможет вам атрибут border. Если вы хотите изменить цвет рамки, тогда вам на помощь придёт атрибут bordercolor. Стоит отметить то, что изменения производятся в пикселях.

Далее оформляем в виде кода html:

Вставляем на наш ресурс:

посмотреть результат

 

Так же есть возможность установить картинку на фон html документа. Нам пригодится атрибут background и добавляется он к тэгу <body>:

И, вставляем его в html код нашей страницы.

посмотреть результат

 

На этом все. Теперь вы сумеете оформить ваш сайт красивыми картинками.

Поделиться в соц. сетях

Опубликовать в Google Buzz
Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

Оставить комментарий

http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotapad.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика