Графика на сайте Шаг №4
Любому сайту невозможно обойтись без графических элементов. Вставить картинку, правильно ее расположить помогают специальные теги.
Тег <img src> является непарным. Чтобы вставить картинку используется именно этот тег.
Также как мы указывали цвет текста, указывается и название картинки.
Если хотите, то можете вставить свою картинку или воспользоваться моей.
Например, нам надо вставить картинку под названием 777. Я не особо подбирал картинку, так что не судите строго. СКАЧАТЬ КАРТИНКУ
(наведите правую кнопку мыши на картинку и нажмите сохранить как).
В нашем исходном коде это будет выглядеть вот так NoName.html
<html>
<head>
<title><b>Сайт о клубной музыке.</b></title>
</head>
<body text="red">
<img src="777.png">
<center>Вы попали на портал, посвященный одному из популярнейших направлений музыки в мире - клубной музыке. На данном ресурсе вы сможете узнать об истории возникновения клубной музыки, лучших диджеях мира, лучших клубах мира, а также узнать свежие новости с мировых танц-площадок.</center>
</body>
</html>
Это должно выглядеть вот так.
После названия картинки нужно обязательно указать ее формат. В нашем случае это jpg.
ВАЖНО! Картинка и html страница должны находиться в одной папке. Чтобы не менять размеры картинки в редакторе их можно указать в коде.
width="число пикселей" - тег, который обозначает ширину картинки.
heigth="число пикселей" - тег, который обозначает высоту картинки.
Hspace="число пикселей" - отступ картинки справа
Vspace="число пикселей" - отступ картинки сверху
Приведем пример использования этих тегов:
<html>
<head>
<title><b>Сайт о клубной музыке.</b></title>
</head>
<body text="blue">
<img src="777.png" Hspace="250" Vspace="5" heigth="152" width="770">
<center><h4>Вы попали на портал, посвященный одному из популярнейших направлений музыки в мире - клубной музыке. На данном ресурсе вы сможете узнать об истории возникновения клубной музыки, лучших диджеях мира, лучших клубах мира, а также узнать свежие новости с мировых танц-площадок.</h4></center>
</body>
</html>
В качестве элемента дизайна можно сделать окантовку по всему периметру картинки с помощью атрибута border, например border="2".
Вам важно запомнить, что все теги и атрибуты, связанные с картинкой, должны находится только внутри тега <img src>
Чтобы изменить цвет фона самой страницы существует специальный атрибут bgcolor, который вставляется в тег <body>.
Например, <body bgcolor="green". Чтобы на фон страницы поставить картинку используется атрибут background, который также вставляется в тег <body>
Например, <body background="roc.jpg"> Но если вы хотите, чтобы пользователь дождался загрузки страницы, лучше этот атрибут не использовать.
Ну все, можно переходить к следующему шагу.
