"ВОКРУГ САЙТА" www.vokrug-saita.ru

как создать сайт самостоятельно

Главная Рассылка Секрет Автор сайта

УРОКИ HTML - языка гипертекстовой разметки Веб-страниц. Базовый курс.


Урок 7. Как вставить изображение на страницу сайта

На этом уроке мы узнаем как добавлять изображения на страницы сайта.

Делается это с помощью непарного тега <img> и атрибута:

src = "имя_папки/имя_файла_изображения"

"Имя_папки" - это название папки, в которой хранится данное изображение. Если изображения хранятся в той же папке, что и страницы сайта, указываем только имя самого файла.

Внимание! ОБЯЗАТЕЛЬНО УКАЗЫВАЕМ ПРАВИЛЬНО РАСШИРЕНИЕ ФАЙЛА!

Расширения файлов можно посмотреть в "Свойствах" файла (правый клик на значке файла - Свойства). Или же - при наведении курсора на значок файла обычно появляется всплывающая подсказка с некоторой информацией о файле.

Кроме атрибута src, с тегом <img> применяют другие атрибуты, с некоторыми из которых мы уже знакомы:

- width - ширина изображения;

- height - высота изображения;

- alt - краткое описание картинки (если навести курсор на картинку - выскочит это самое описание);

- align - выравнивание картинки (в зависимости от значения, по левому или правому краю либо по центру);

- vspace - задает расстояние между текстом и рисунком (по вертикали);

- hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали;

- border - рамка вокруг самой картинки (в пикселях), по умолчанию рамка вокруг картинки есть всегда.

Добавим рисунок на наш сайт - вставим изображение, соответствующее теме сайта в первую ячейку первой строки.

Для этого нужно найти рисунок и поместить его в папку, например, "img", созданную в папке, где находится Ваш сайт.

Уроки html для начинающих
Рис. 19

И дальше добавляем следующий код (обратите внимание: имя файла изображения (в листинге 7.1 выделено) у Вас скорей всего другое, его и пишите. Или можете скачать эту картинку здесь. В том же архиве есть фон, который понадобится позже):

Листинг 7.1

……
<body text="#000000">
<table WIDTH="1240" BORDER="2" BORDERCOLOR="#6600CC" cellpadding="5">
<tr height="150">
<td align="center"> <img src="img/dog.jpg" height="150" WIDTH="200" alt="Всё о собаках"> </td>
……

Сохраните документ и откройте в браузере:

Уроки html для начинающих
Рис. 20

Изображение может находится не на Вашем компьютере, а на удалённом сервере, откуда и загружаться на Ваше страницу. Тогда в атрибут src пишем путь следующим образом:

src = "http://адрес сервера откуда должна загружаться картинка/имя картинки.расширение".

Сразу же разберём, как задать цвет фона страницы и цвет отдельных ячеек таблицы.

Цвет фона для всей страницы прописывается в теге <body> атрибутом bgcolor="#...":

<body bgcolor="#...">

Если же мы захотим сделать фоном какую-нибудь картинку, нужно применить атрибут background = "ваш_фон.jpg":

<body bgcolor = "#..." background = "ваш_фон.jpg">.

Внимание! Лучше применять атрибуты в паре, и цвет фона подбирать близким с цветом фоновой картинки. Это для того, чтобы страница выглядела примерно одинаковой и при отключенном режиме просмотра изображений. (Впрочем, здесь я задаю фон, лишь чтобы показать, как это делается. И, отчасти, как НЕ стоит делать: рекомендую серого фона на страницах сайта избегать, страница выглядит грязной! По мне так лучше оставить его белым, а подобрать только фоновый рисунок.)

Добавим фон в нашу страницу:

Листинг 7.2

…..
<body text="#000000" bgcolor="#CCCCCC">
…..

Уроки html для начинающих
Рис. 21

А теперь добавим фоновый рисунок, предварительно подобрав подходящий и поместив в папку с изображениями (скачать коллекцию фонов для Веб-страниц Вы можете здесь):

Листинг 7.3

……
<body text="#000000" bgcolor="#CCCCCC" background="img/fon.jpg">
……

Сохраним документ и посмотрим результат в браузере:

Уроки html для начинающих
Рис. 22

Осталось разобраться, как задать цвет для отдельных ячеек таблицы.

В этом нет ничего сложного. Делается это с помощью того же атрибута bgcolor="#...", только ставится он к тегу конкретной ячейки:

<td bgcolor="#...">.

Установим фон в нашей таблице для ячейки, где написано "Здесь будет рекламный баннер":

Листинг 7.4

……
<tr height="40">
<td colspan="3" align="center" bgcolor="#008000"> Здесь будет рекламный баннер </td>
</tr>
……

Сохраним документ и посмотрим результат в браузере:

Уроки html для начинающих
Рис. 23

Вот и всё, что я хотел рассказать в этом уроке.

До встречи на следующем >>>>>>>.

P. S. Подпишитесь на безплатную рассылку Вокруг Сайта и получайте на свой электронный адрес новые уроки по созданию сайта.

Есть вопросы? Спрашивайте, мы вместе разберёмся с Вашей проблемой:



Введите сумму чисел с картинки*:
сумма

Подпишитесь на рассылку
"Вокруг Сайта "
и получайте на свой e-mail уроки, книги, статьи, скрипты, а также подарки и скидки на товары, продаваемые с сайта


Узнать подробней о рассылке "Вокруг Сайта" >>






PHP-песочница
Подписаться письмом



Карта
rss
Карта