|
| |
| |
|
Строим сайт от А до Я. Седьмой выпуск. |
Седьмой выпуск. От 15.07.2003 Ведущий рассылки: Troitskaya Ketee Написать мне stroimsait@front.ru Архивы рассылки:Здесь Изучаем HTML Добрый день.
На Web-страницах можно использовать только те типы рисунков, которые могут выводить на экран браузеры.
Для вставки рисунка используем элемент img (от английского image - изображение). Элемент img не имеет конечного тэга. 1). Допустим нам надо вставить рисунок с названием 1.jpg находящийся в том же каталоге (директории, папке). Сделаем мы это так:
То что написано между кавычками (после src=) является адресом или URL (путь к картинке). src - от английского source - источник
Теперь путь к картинке выглядит так: cat/1.jpg
Теперь путь к картинке выглядит так: ../1.jpg
Практика: 1).Создадим папку под названием site. Создадим в этой папке документ с расширением html или используйте ранее созданный файл Текстовый документ.html (см. как это делалось ранее). 2).Вставляем туда.
3).Положим в папку site рисунок 1.jpg; Сделаем это так:
4).Теперь вставим сам рисунок.
5). Теперь сохраните эти изменения и посмотрите результат. Вы должны увидеть текст и рисунок.
Еще один пример:
Надеюсь понятно как правильно написать путь. Рассмотрим возможные атрибуты у элемента img. SRC- указывает адрес (URL) файла с изображением. HEIGHT и WIDTH- определяют ширину и высоту изображения. Если указанные значения не совпадают с реальным размером изображения, он будет сжат или растянут. Рекомендуется всегда указывать размеры рисунка, поскольку это позволяет браузеру сразу определить размеры области, не скачивая рисунок. ALIGN- обязательный параметр. Указывает способ выравнивания изображения в документе. Может принимать следующие значения:
ALT- текстовое описание. Описание рисунка в параметре ALT появляется в виде всплывающей подсказки при наведении курсора мыши на этот рисунок. Кроме того, если у пользователя отключен вывод рисунков (для ускорения работы), на месте рисунка выводится текст, заданный в параметре ALT. Этот параметр, так же, как и размеры рисунка, обязательно указывается на всех серьезных сайтах. HSPACE и VSPACE - определяют отступ картинки (в пикселах) по горизонтали и вертикали от других объектов документа. Просто необходимо при обтекании изображения текстом. BORDER- определяет ширину рамки вокруг изображения в пикселах. Рамка возникает, только если изображение является гипертекстовой ссылкой. В таких случаях значение BORDER обычно указывают равным нулю. NAME- определяет имя изображения, уникальное для данного документа. Вы можете указать любое имя без пробелов с использованием латинских символов и цифр. Имя необходимо, если вы планируете осуществлять доступ к изображению, например, из JavaScript-сценариев.
Пример: В этом примере мы задали ширину и высоту изображения (width="189" и height="316" ), выровняли по правому краю (align="right"), определили текст который должен отображаться на месте изображения (alt="Прикольная картинка"), задали отступ картинки от других объектов документа (hspase="10" и vspace="10") и наконец определили ширину рамки (border="5").
Попробуйте поэкспериментировать с параметрами у атрибутов и посмотрите, что будет меняться с каждым Вашим изменением. Как не странно, но я настоятельно рекомендую потренироваться с этой темой. Особенно с написанием путей к картинкам, вы можете создавать различные вложенные папки, размещать в них картинки и писать к ним пути. В общем развлекайтесь пока каникулы. На сегодня все. Задать свои вопросы
© 2003 Troitskaya Ketee |
| |
|
|
![]() |
![]() |
![]() |
|
Архив рассылки | Редактирование подписки | Помощь |
Отписаться : Нажмите и отправьте это письмо, заменив pwd на свой пароль и сохранив кавычки. Узнать пароль можно здесь