Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений)

Пятница, 25 Декабря 2009 г. 11:33 + в цитатник

Цитата сообщения 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="ссылка_на_картинку">

Теперь, к примеру, берем такую картинку:
(180x180, 5Kb)

Грузим ее куда-нибудь, на наш же народ например. Берем прямую ссылку на нее, в моем случае ссылка такая 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> нет закрывающего тега. Он не нужен.

Параметров для вставки картинок много, но о них мы еще поговорим, пока только основа:-)

На этом все:-) Как всегда,- вопросы либо в личку, либо сюда:-) Всем удачи:-)

Рубрики:

Всё, что касается ЛиРу
Legionary и Inmira