Цитата сообщения Legionary
Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений)
Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений)
Продолжаем познавать азы html строительства. Напомню ссылки на предыдущие части:
Первая часть
Вторая часть
Ссылка на рубрику
Теперь будем учиться заливать нашу страничку цветом, фоновой картинкой, а также,- вставлять картинки на странички.
Цвет фона странички
Чтобы указать цвет фона используем наш главный тег
body ( о нем говорили во второй части). Ему нужно прописать параметр, отвечающий за цвет. А точнее говоря параметр
bgcolor
Этот параметр прописываем так:
bgcolor="цвет"
Т.е. целиком, вместе с тегом
body это будет выглядеть так:
<body bgcolor="цвет
">
Цвет, как всегда, указываем в его цифровом значении, например "#000000" ( можно и по имени, например "red")
Теперь пример всего кода странички с указанным цветом фона:
<html>
<head>
<title>Моя первая страничка
</title>
</head>
<body bgcolor="#000000">
Всем привет!!!
</body>
</html>
Обратите внимание, независимо от того, что мы к тегу
body приписали наш параметр цвета,- В конце кода, тег
body закрывается как обычно, без дополнений:-)
Как всегда,-
вот пример странички с таким минимальным кодом. Цвет поставил зеленый "green"
Фоновая картинка странички
Страничку нашу можно замостить не только цветом, но и какой-либо картинкой.
Только помните,
1. - что чем тяжелее картинка, тем дольше пользователю ждать ее загрузки. И в конце концов, он может просто уйти с вашей странички так и не дождавшись загрузки вашего шедевра:-)
2. - у посетителя, в настройках браузера, например, может быть отключен показ картинок. В таком случае, ваша картинка ему не будет показана. Поэтому, на такой вот случай, стоит подобрать цветовой фон странички, который будет под картинкой. И посетитель, тогда уже не увидит просто белое поле:-)
Теперь к главному:-) алгоритм тот же, к нашему тегу
body приписываем дополнительный параметр, для картинки это
background
Этот параметр прописываем так:
background="ссылка_на_картинку"
Т.е. целиком, вместе с тегом
body это будет выглядеть так:
<body background="ссылка_на_картинку
">
Теперь, к примеру, берем такую картинку:
Грузим ее куда-нибудь, на наш же народ например. Берем прямую ссылку на нее, в моем случае ссылка такая
http://legion-blog.narod.ru/yroki/1.jpg
Теперь пишем код целой странички с таким вот фоном:
<html>
<head>
<title>Моя первая страничка
</title>
</head>
<body background="http://legion-blog.narod.ru/yroki/1.jpg">
Всем привет!!!
</body>
</html>
Теперь смотрим
то, что у нас получилось . Как я и говорил, картинка должна загрузится, чтоб ее было видно) так что ждем полной загрузки странички:-)
Как видите, наша маленькая картинка размножилась и заняла все пространство странички. Так будет всегда по умолчанию, если не прописать дополнительные параметры вставки фоновой картинки:-) Но о них позже:-)
Чтобы прописать и цвет фона и фоновую картинку одновременно пишем наши дополнительные параметры поочереди в теге
body, т.е. так:
<body background="ссылка_на_картинку" bgcolor="цвет">
Вставка изображений на страничку
Для вставки изображений, используется тег
<img>.Надеюсь вы помните, что это уже видимая информация странички, поэтому код вставки картинки размещаете между тегом тела странички, т.е. между
<body> и
</body>
К тегу вставки изображения надо прописывать параметр
src.
Этот параметр указывает ссылку на изображение. Т.е пишется так:
src="ссылка_на_картинку"
А целиком код вставки будет выглядеть так:
<img src="ссылка_на_картинку">
Теперь просто пример странички с одной единственной картинкой. Вставим на страничку мою аву, например:
<html>
<head>
<title>Моя первая страничка
</title>
</head>
<body>
<img src="http://legion-blog.narod.ru/yroki/1.gif">
</body>
</html>
Смотрим
результат (дождитесь полной загрузки странички)
Обратите внимание, для нашего тега вставки изображения
<img> нет закрывающего тега. Он не нужен.
Параметров для вставки картинок много, но о них мы еще поговорим, пока только основа:-)
На этом все:-) Как всегда,- вопросы либо в личку, либо
сюда:-) Всем удачи:-)
