Rambler's Top100
Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
Dreamweaver MX 2004
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!

Fireworks
ЧаВо
Документация
Статьи
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты

Где сдать спермограмму.

Документация - WebMoney
- HTML - основы
- Сервер - локально
- Справочник свойств CSS1

главная > документация

HTML - основы

Рисунки на WEB-страничке

На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры.
Допускается вставку изображений в форматах JPEG (в том числе progressive jpeg) и Compuserve GIF (включая прозрачные и анимированные).

Для вставки рисунка используем элемент img (от английского image - изображение). Элемент img не имеет конечного тэга.

1). Допустим нам надо вставить рисунок с названием 1.jpg находящийся в том же каталоге (директории, папке). Сделаем мы это так:
<img src="1.jpg">

То что написано между кавычками (после src=) является адресом или URL (путь к картинке). src - от английского source - источник

2). Теперь рассмотрим как вставить ту же самую картинку находящиеся в поддиректории cat.
<img src="cat/1.jpg">

Теперь путь к картинке выглядит так: cat/1.jpg

3). Вставим ту же самую картинку которая лежит на уровень выше.
<img src="../1.jpg">

Теперь путь к картинке выглядит так: ../1.jpg

4). Если картинка лежит на другом сайте, то путь прописывается полностью:
<img src="img src="http://stroimsait.h10.ru/1.jpg">

Проведем эксперимент. Нажмите на эту картинку правой кнопкой мыши, выберете пункт меню свойства и найдите строчку Адрес (URL). Вы увидите адрес этой картинки.

Практика:

1).Создадим папку под названием site. Создадим в этой папке документ с расширением html или используйте ранее созданный файл Текстовый документ.html (см. как это делалось ранее).

2).Вставляем туда.

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body><p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

3).Положим в папку site рисунок 1.jpg; Сделаем это так:

  1. нажмите на эту ссылку (откроется новое окно)
  2. нажмите правой кнопкой мыши на рисунок и выберете пункт меню сохранить рисунок как…
  3. найдите папку site и сохраните рисунок там под именем 1.jpg .

4).Теперь вставим сам рисунок.

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="1.jpg">
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

5). Теперь сохраните эти изменения и посмотрите результат. Вы должны увидеть текст и рисунок.

Еще один пример:

1). Создадим еще одну папку в папке site. И назовем ее cat.
2). Перемести туда наш файл 1.jpg
3). Откроем файл Текстовый документ.html; Если Вы теперь не видите рисунок значит Вы все сделали правильно.

4). Для того что бы увидеть рисунок необходимо правильно написать путь. Для нашего примера он будет выглядеть cat/1.jpg


<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="cat/1.jpg">
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Надеюсь понятно как правильно написать путь.

Рассмотрим возможные атрибуты у элемента img.

SRC- указывает адрес (URL) файла с изображением.

HEIGHT и WIDTH- определяют ширину и высоту изображения. Если указанные значения не совпадают с реальным размером изображения, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок.

ALIGN- обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:

left- выравнивает изображение по левому краю документа. Прилегающий текст обтекает изображение справа.
right- выравнивает изображение по правому краю документа. Прилегающий текст обтекает изображение слева.
top и texttop- выравнивают верхнюю кромку изображения с верхней линией текущей текстовой строки.
middle- выравнивает базовую линию текущей текстовой строки с центром изображения.
absmiddle- выравнивает центр текущей текстовой строки с центром изображения.
bottom и baseline- выравнивает нижнюю кромку изображения с базовой линией текущей текстовой строки.
absbottom- выравнивает нижнюю кромку изображения с нижней кромкой текущей текстовой строки.

ALT- текстовое описание. Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах.

HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом.

BORDER- определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю.

NAME- определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.

Пример:

В этом примере мы задали ширину и высоту изображения (width="189" и height="316" ), выровняли по правому краю (align="right"), определили текст который должен отображаться на месте изображения (alt="Прикольная картинка"), задали отступ картинки от других объектов документа (hspase="10" и vspace="10") и наконец определили ширину рамки (border="5").

<html>
<head>
<title>Изучаем HTML </title>
</head>
<body>
<img src="1.jpg" width="189" height="316" align="right" alt="Прикольная картинка" hspase="10" vspace="10" border="5" >
<p> Сама по себе аббревиатура HTML расшифровывается так - Hyper Text Markup Language, по-русски - язык гипертекстовой разметки. Открыв любую страничку в Интернете вы можете просмотреть ее HTML-код. В меню вид выберите пункт просмотр HTML-кода.
</body>
</html>

Попробуйте поэкспериментировать с параметрами у атрибутов и посмотрите, что будет меняться с каждым Вашим изменением.

Как не странно, но я настоятельно рекомендую потренироваться с этой темой. Особенно с написанием путей к картинкам, вы можете создавать различные вложенные папки, размещать в них картинки и писать к ним пути.

<< назад

главная > документация

Реклама

Простой конкурс с денежными призами!





Rambler's Top100 Рейтинг@Mail.ru