-Всегда под рукой

 -Метки

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

Поиск сообщений в Legionary

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

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.05.2009
Записей:
Комментариев:
Написано: 27382

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

Вторник, 01 Декабря 2009 г. 10:26 + в цитатник
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> нет закрывающего тега. Он не нужен.

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

На этом все:-) Как всегда,- вопросы либо в личку, либо сюда:-) Всем удачи:-)
Рубрики:  html для начинающих
Метки:  

Процитировано 346 раз
Понравилось: 19 пользователям

Аццкий_Аноним   обратиться по имени Re: Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений) Вторник, 01 Декабря 2009 г. 10:40 (ссылка)
А деревяный фон - это уровень тех, для кого предназначен пост? ;)

LI 7.05.22
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 10:41ссылка
Аццкий_Аноним, тебе не нравится дерево?;-) эх..опять не угодил:-))
Аццкий_Аноним   обратиться по имени Re: Ответ в Legionary; Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений) Вторник, 01 Декабря 2009 г. 10:43 (ссылка)
Исходное сообщение Legionary: Аццкий_Аноним , тебе не нравится дерево?;-)

Мне нравится золото и другие ценные металлы :)

LI 7.05.22
Ответить С цитатой В цитатник
OLGA_FM   обратиться по имени Вторник, 01 Декабря 2009 г. 10:51 (ссылка)
Спасибо!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 10:52ссылка
OLGA_FM, пожалуйста:-))
Marisha5   обратиться по имени Вторник, 01 Декабря 2009 г. 10:59 (ссылка)
Спасибо большое!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:00ссылка
Чайка_М, всегда пожалуйста:-))
Аццкий_Аноним   обратиться по имени Re: Ответ в Legionary; Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений) Вторник, 01 Декабря 2009 г. 11:09 (ссылка)
Исходное сообщение Legionary: Аццкий_Аноним , губа не дура:-))))))))))

Просто этот цвет дерева не люблю со времён совка. Купюру в 1 рубль напоминает :)

LI 7.05.22
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:15ссылка
Аццкий_Аноним, забавная ассоциация, ничего не скажешь:-))
Аццкий_Аноним   обратиться по имени Re: Ответ в Legionary; Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений) Вторник, 01 Декабря 2009 г. 11:20 (ссылка)
Исходное сообщение Legionary: Аццкий_Аноним , забавная ассоциация, ничего не скажешь:-))

Просто на лиру надо людям что-то серебристо-золотичтое и блестящее. Иначе - не поймут.

LI 7.05.22
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:21ссылка
Аццкий_Аноним, мигающее, переливающееся разными цветами?;-)
Wella_Wella   обратиться по имени Вторник, 01 Декабря 2009 г. 11:23 (ссылка)
Спасибо за урок!!! Удачи и всех благ!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:24ссылка
Wella_Wella, всегда пожалуйста:-) хорошего дня
Аццкий_Аноним   обратиться по имени Re: Ответ в Legionary; Html для начинающих ( часть 3-ая, цвет фона, фоновая картинка, вставка изображений) Вторник, 01 Декабря 2009 г. 11:23 (ссылка)
Исходное сообщение Legionary: Аццкий_Аноним , мигающее, переливающееся разными цветами?;-)

Ага. Ну, ты понял ;)
А на дерево только полные буратины клюнут. Ну, или чурки какие-то...

LI 7.05.22
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:25ссылка
Аццкий_Аноним, ладно, сделаем альтернативу потом:-))))
Бархатная_Шляпка   обратиться по имени Вторник, 01 Декабря 2009 г. 11:42 (ссылка)
Утащила все, что могла. Надеюсь постепенно разобраться. Большое спасибо за вашу полезную работу!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 11:45ссылка
Бархатная_шляпка, :-) тащите на здоровье:-) все получится, а если что,- спрашивайте,- подскажу;-)) удачи:-))
ALEN77   обратиться по имени Вторник, 01 Декабря 2009 г. 12:20 (ссылка)
Спасибо за урок!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 21:21ссылка
ALEN77, всегда пожалуйста:-))
Inmira   обратиться по имени Вторник, 01 Декабря 2009 г. 16:38 (ссылка)
сипасиб)))
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 21:22ссылка
Inmira, да пожалуйста:-)) иди сайт доделывай))
Зимняя_вишня7   обратиться по имени Вторник, 01 Декабря 2009 г. 17:50 (ссылка)
Благодарю за полезный и интересный пост!
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 21:22ссылка
VERBA7, всегда пожалуйста:-))
dance_with_wolf   обратиться по имени Вторник, 01 Декабря 2009 г. 18:11 (ссылка)
Спасибочки. Отличная работа.
Ответить С цитатой В цитатник
Перейти к дневнику

Вторник, 01 Декабря 2009 г. 21:23ссылка
dance_with_wolf, пожалуйста:-) пригодится?;-)))
Ga-lina   обратиться по имени Среда, 02 Декабря 2009 г. 00:30 (ссылка)
Спасибо!!!
4dfb7c6b5ed4 (600x422, 484Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 06:27ссылка
Ga-lina, всегда пожалуйста:-))
Ananda_ewi   обратиться по имени Среда, 02 Декабря 2009 г. 00:52 (ссылка)
Доброго времени суток! Опять отлично потрудился! Молодец :-)
Спасибо за науку!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 06:27ссылка
Изида_Мориа, Доброго...утра:-)) сипасиб
Наталия_Поталова   обратиться по имени Среда, 02 Декабря 2009 г. 09:34 (ссылка)
Спасибо огромное!!! Забрала урок!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 06:28ссылка
Наталия_Поталова, пожалуйста:-)) а как успехи в обучении?;-))
Бахыт_АБМ   обратиться по имени Среда, 02 Декабря 2009 г. 13:20 (ссылка)
Благодарю за урок!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 06:28ссылка
АБМ, всегда пожалуйста:-))
Дарина423   обратиться по имени Среда, 02 Декабря 2009 г. 19:05 (ссылка)
Спасибо, Алексей!!!
Ответить С цитатой В цитатник
Перейти к дневнику
pappesa   обратиться по имени Среда, 02 Декабря 2009 г. 19:06 (ссылка)
Спасибо за науку!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 06:28ссылка
pappesa, пожалуйста..за нее:-))
Безимянная_Кукла   обратиться по имени Среда, 02 Декабря 2009 г. 23:44 (ссылка)
спс))
Ответить С цитатой В цитатник
Перейти к дневнику
Линка-льдинка   обратиться по имени Html для начинающих ( часть 3-ая) Четверг, 03 Декабря 2009 г. 19:27 (ссылка)
:-)))
Ответить С цитатой В цитатник
Перейти к дневнику
Алефтина_Рыжкова   обратиться по имени Четверг, 03 Декабря 2009 г. 21:21 (ссылка)
Мир анимашек
Ответить С цитатой В цитатник
Перейти к дневнику
grandmother   обратиться по имени Четверг, 03 Декабря 2009 г. 22:12 (ссылка)
Спасибо большущее!!!!!!!
Ответить С цитатой В цитатник
Перейти к дневнику

Четверг, 03 Декабря 2009 г. 22:14ссылка
grandmother, большущее пожалуйста!:-)
TTV7   обратиться по имени Воскресенье, 06 Декабря 2009 г. 14:37 (ссылка)
Спасибо за урок!!!:mms_flowers:
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 06 Декабря 2009 г. 20:23ссылка
TTV7, всегда пожалуйста:-))
Аноним   обратиться по имени Вторник, 08 Декабря 2009 г. 19:05 (ссылка)
Ответить С цитатой В цитатник    |    Не показывать ветку
Перейти к дневнику
De4e   обратиться по имени Суббота, 12 Декабря 2009 г. 06:29 (ссылка)
Спасибо вам. Буду пользоваться в качестве справочника если что
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 12 Декабря 2009 г. 23:26ссылка
De4e, всегда пожалуйста:-)) буду потихонечку дальше писать)))
Ketevan   обратиться по имени Воскресенье, 13 Декабря 2009 г. 00:11 (ссылка)
Legionary, Рада,что нашла такого помощника!!!
 (162x91, 28Kb)
Ответить С цитатой В цитатник
Перейти к дневнику

Воскресенье, 13 Декабря 2009 г. 02:02ссылка
Ketevan, а я то как рад, что меня нашли:-)))
Галина_Викторова   обратиться по имени Суббота, 06 Февраля 2010 г. 18:29 (ссылка)
Спасибо! !!!
Ответить С цитатой В цитатник
Оксана_Андрусенко   обратиться по имени Воскресенье, 28 Февраля 2010 г. 20:54 (ссылка)
*
 (565x600, 45Kb)
Ответить С цитатой В цитатник
irozochka   обратиться по имени Четверг, 11 Марта 2010 г. 23:11 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Комментировать К дневнику Страницы: [1] 2 [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку