-Цитатник

Эксперимент "Вселенная-25". Как рай стал адом... - (0)

Эксперимент "Вселенная-25". Как рай стал адом... Эксперимент «Вселенная-25»: как...

Что прикрыли татаро-монгольским игом? - (2)

Что прикрыли татаро-монгольским игом? Уже давно не секрет, что «татаро-монгольского ига...

КАРВИНГ.Художественная резьба по овощам и фруктам ЧАСТЬ 1 - (1)

КАРВИНГ.Художественная резьба по овощам и фруктам ЧАСТЬ 1 Карвинг — англ. carving или curvi...

Беседа с Греггом Брейденом.Утерянные знания. - (0)

Из интервью Грегга Брейдена – инженера в области космической электроники, лектора и путешественника ...

Кризисный муж... И как жить дальше? - (0)

Если даже мужа еще не уволили, его фирма еще не разорилась и он продолжает казаться вполне вменяемым...

 -Метки

анатомия анимация аутизм афоризмы биоэнергетика бисер блог боль вакцина видео видео уроки видеоклип влияние звуков на здоровье волновая генетика всё для дневника гадание гимнастика гиперактивные дети декор декорирование декупаж дети детский церебральный паралич детское здоровье детское творчество диагностика дизайн дневник дцп жизнь загадки здоровье здоровье детей игрушки игры интересное история картинки компьютер ктм кулинария культура лечение звуком мамина терапия массаж мастер класс меридианы микроэлементы миофасциальные связи мозг мудрости мудрость музыка музыкотерапия народная медицина необычное новый год обряды остеопатия открытки пазлы питание подарки поделки полезности полезности для дневника и блога полезности для компьютера прививки прикосновения притча притчи программы психология развитие детей рак рамочки ретро роспись руками рукоделие руны русь сайт самомассаж сверхвозможности святочные гадания смерть спец.коды тайна торт украшения упражнения флешки фон фоны фото цвет цветы человек шрифт

 -Рубрики

 -Приложения

  • Перейти к приложению Открытки ОткрыткиПерерожденный каталог открыток на все случаи жизни
  • Перейти к приложению Я - фотограф Я - фотографПлагин для публикации фотографий в дневнике пользователя. Минимальные системные требования: Internet Explorer 6, Fire Fox 1.5, Opera 9.5, Safari 3.1.1 со включенным JavaScript. Возможно это будет рабо
  • Перейти к приложению Всегда под рукой Всегда под рукойаналогов нет ^_^ Позволяет вставить в профиль панель с произвольным Html-кодом. Можно разместить там банеры, счетчики и прочее
  • ТоррНАДО - торрент-трекер для блоговТоррНАДО - торрент-трекер для блогов
  • Перейти к приложению Стена СтенаСтена: мини-гостевая книга, позволяет посетителям Вашего дневника оставлять Вам сообщения. Для того, чтобы сообщения появились у Вас в профиле необходимо зайти на свою стену и нажать кнопку "Обновить

 -Музыка

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

Поиск сообщений в Надежда_Лоскутова

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

 

 -Сообщества

Читатель сообществ (Всего в списке: 4) Книжная_полка Cine-Cinema eau_de_source FreshnessArt

 -Статистика

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


Html для начинающих

Среда, 02 Декабря 2009 г. 20:31 + в цитатник
Цитата сообщения 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> нет закрывающего тега. Он не нужен.

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

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

 

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

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

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

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