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

Вторник, 01 Декабря 2009 г. 16:40 + в цитатник

Цитата сообщения 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> нет закрывающего тега. Он не нужен.

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

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

Рубрики:

Интернет, дневники, полезности

<a href="https://www.liveinternet.ru/users/inmira/post115719785/">Html РґР»СЏ РЅР°С‡РёРЅР°СЋС‰РёС… ( С‡Р°СЃС‚СЊ 3-Р°СЏ, С†РІРµС‚ С„РѕРЅР°, С„РѕРЅРѕРІР°СЏ РєР°СЂС‚РёРЅРєР°, РІСЃС‚Р°РІРєР° РёР·РѕР±СЂР°Р¶РµРЅРёР№)</a><br/>Html РґР»СЏ РЅР°С‡РёРЅР°СЋС‰РёС… ( С‡Р°СЃС‚СЊ 3-Р°СЏ, С†РІРµС‚ С„РѕРЅР°, С„РѕРЅРѕРІР°СЏ РєР°СЂС‚РёРЅРєР°, РІСЃС‚Р°РІРєР° РёР·РѕР±СЂР°Р¶РµРЅРёР№)

Html РґР»СЏ РЅР°С‡РёРЅР°СЋС‰РёС… ( С‡Р°СЃС‚СЊ 3-Р°СЏ, С†РІРµС‚ С„РѕРЅР°, С„РѕРЅРѕРІР°СЏ РєР°СЂС‚РёРЅРєР°, РІСЃС‚Р°РІРєР° РёР·РѕР±СЂР°Р¶РµРЅРёР№)

РџСЂРѕРґРѕР»Р¶Р°РµРј РїРѕР·РЅР°РІР°С‚СЊ Р°Р·С‹ html СЃС‚СЂРѕРёС‚РµР»СЊСЃС‚РІР°. РќР°РїРѕРјРЅСЋ СЃСЃС‹Р»РєРё РЅР° РїСЂРµРґС‹РґСѓС‰РёРµ С‡Р°СЃС‚Рё:
РџРµСЂРІР°СЏ С‡Р°СЃС‚СЊ 
Р’С‚РѕСЂР°СЏ С‡Р°СЃС‚СЊ 
РЎСЃС‹Р»РєР° РЅР° СЂСѓР±СЂРёРєСѓ

РўРµРїРµСЂСЊ Р±СѓРґРµРј СѓС‡РёС‚СЊСЃСЏ Р·Р°Р»РёРІР°С‚СЊ РЅР°С€Сѓ СЃС‚СЂР°РЅРёС‡РєСѓ С†РІРµС‚РѕРј, С„РѕРЅРѕРІРѕР№ РєР°СЂС‚РёРЅРєРѕР№, Р° С‚Р°РєР¶Рµ,- РІСЃС‚Р°РІР»СЏС‚СЊ РєР°СЂС‚РёРЅРєРё РЅР° СЃС‚СЂР°РЅРёС‡РєРё.

Р¦РІРµС‚ С„РѕРЅР° СЃС‚СЂР°РЅРёС‡РєРё

Р§С‚РѕР±С‹ СѓРєР°Р·Р°С‚СЊ С†РІРµС‚ С„РѕРЅР° РёСЃРїРѕР»СЊР·СѓРµРј  РЅР°С€ РіР»Р°РІРЅС‹Р№  С‚РµРі body ( Рѕ РЅРµРј РіРѕРІРѕСЂРёР»Рё РІРѕ РІС‚РѕСЂРѕР№ С‡Р°СЃС‚Рё). Р•РјСѓ РЅСѓР¶РЅРѕ РїСЂРѕРїРёСЃР°С‚СЊ РїР°СЂР°РјРµС‚СЂ, РѕС‚РІРµС‡Р°СЋС‰РёР№ Р·Р° С†РІРµС‚. Рђ ... <a href="https://www.liveinternet.ru/users/inmira/post115719785/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

auwa обратиться по имени Вторник, 01 Декабря 2009 г. 16:48 (ссылка)

Для меня полезно
(180x135, 6Kb)

Ответить С цитатой В цитатник

Вторник, 01 Декабря 2009 г. 16:57ссылка

Inmira

auwa, да вообще полезно) он бы не стал писать, наверное, но просят)

Ответить С цитатой В цитатник Обратиться по имени

Sergia обратиться по имени Вторник, 01 Декабря 2009 г. 16:51 (ссылка)

Спасибо!:give_hear

Ответить С цитатой В цитатник

Вторник, 01 Декабря 2009 г. 16:57ссылка

Inmira

Sergia, спасибо автору)))

Ответить С цитатой В цитатник Обратиться по имени

Natalia03 обратиться по имени Вторник, 01 Декабря 2009 г. 16:56 (ссылка)

Я сначала все делала, делала, вникала ... а потом подумала, а оно мне надо? Но все равно спасибо, для многих это очень познавательно!

Ответить С цитатой В цитатник

Вторник, 01 Декабря 2009 г. 16:58ссылка

Inmira

Natalia03, нинаю.. я плохо себе представляю, как бы вела дневник без знания основ html))) благо учила все это года 2,5 назад, так что цитирую больше для пч)))

Ответить С цитатой В цитатник Обратиться по имени

Anela-Alena обратиться по имени Вторник, 01 Декабря 2009 г. 17:10 (ссылка)

СПАСИБО!

Ответить С цитатой В цитатник

	Inmira написал 09.11.2010 19:49:04: ЛюдоМилка , привет))) где-то так) да еще и винт пустой, собираю все потихоньку)))
	ЛюдоМилка написал 27.10.2010 18:51:25: привет солнышко ! как жизня ?что т тебя не слышу, ты там в новом фотоШопе утонула ?
	ostrpov написал 24.10.2010 21:18:19: У вас не только глаза разбагаются, но и так увлекательно, что страничку не хочется закрывать. Спасибо!
	Ludiko написал 13.10.2010 18:57:43: Большое спасибо! Вы - молодец! Так много всего интересного! Удачи и успеха!
	lud09 написал 10.10.2010 21:02:20: Inmira,спасибо за нужный материал.Я еще ничего не умею,но ,возможно, научусь,т.к.очень хотелось бы.Всего доброго Вам.

LiveInternetLiveInternet

-Метки

-Рубрики

-Стена

-Поиск по дневнику

-Подписка по e-mail

-Статистика

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