Картинки в HTML
22-06-2013 17:07
к комментариям - к полной версии
- понравилось!
Картинки в HTML
1.Как вставить картинку
Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
<img src="logo.jpg" />
[показать]
Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
<img src="images/logo.jpg" />
Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее.
2.Указание размеров картинки
Начнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
width — ширина картинки в пикселах или процентах;
height — высота картинки в пикселах или процентах.
Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
<img src="logo.jpg" width="50" height="20" />
или
<img src="logo.jpg" width="10%" height="5%" />
3.Альтернативный текст
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:
<img src="logo.jpg" alt="Логотип сайта www.seoded.ru" />
[показать]
В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики, если же нет, то картинка скроет собой альтернативный текст).
4.Выравнивание картинки
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
left — изображение располагается у левого края страницы, а текст обтекает картинку справа;
right — изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Например,
[показать]
HTML-код картинки слева
<img src="logo.jpg" align="left" />
А этот
[показать]
HTML-код картинки справа
<img src="logo.jpg" align="right" />
Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про форматирование текста в html). У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекания текстом картинок, выровненных по левому краю;
right — прекращение обтекания текстом картинок, выровненных по правому краю;
all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
5.Создание отступов вокруг картинки
По-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
vspace — создает верхний и нижний отступы;
hspace — создает боковые отступы (слева и справа).
Значения этих атрибутов указывается в пикселах.
Например, если мы немного дополним предыдущий пример:
[показать]
<img src="logo.jpg" align="left" vspace="5" hspace="20" />
Сравни это с тем, как вся «композиция» выглядела раньше (выше).
6.Рамка вокруг картинки
Вокруг картинок можно создать чёрную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код
<img src="logo.jpg" border="5" />
в браузере выглядит так
[показать]
7.Заключение
На этом раздел о тегах HTML, которые нужны для вставки картинок на страницы сайта можно считать завершенным.
Для вставки картинок в HTML используется тег IMG с обязательным атрибутом SRC. Этот атрибут указывает браузеру путь к файлу изображения. Т.е. для вставки картинки с названием logo.jpg в определенное место страницы (при условии, что и страница, и картинка расположены в одной папке (каталоге)) нужно в этом месте вставить следующий html-код:
[показать]Если картинка и страница расположены в разных каталогах (папках), то нужно указать путь к изображению относительно страницы. Например, если html-страница лежит в каталоге (папке) site, в этом же каталоге (папке) расположен подкаталог (папка) images, в котором и находится наша картинка logo.jpg, то для её вставки нужно написать так:
Помимо обязательного атрибута src у тега IMG есть еще несколько необязательных атрибутов. Рассмотрим их подробнее.
Начнём с атрибутов, которые позволяют задать размеры картинки (точнее, застолбить место под эти размеры на страницы). Вот они:
width — ширина картинки в пикселах или процентах;
height — высота картинки в пикселах или процентах.
Если используются эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только затем загрузит изображение. При этом он поместит картинку в прямоугольник выделенного размера, даже если реальные ширина и высота картинки больше (сожмет) или меньше (растянет). В случае, когда эти атрибуты не используются, браузер будет грузить картинку сразу, а вывод идущих за ней текста и остальных элементов задержится.
Ширину и высоту изображений можно указывать как в пикселах (при этом размер картинки будет постоянным вне зависимости от разрешения экрана), так и в процентах (размер картинки будет зависить от разрешения экрана пользователя). Например:
или
В случае, если пользователь в настройках браузера отключил показ изображений, то можно вместо картинки вывести альтернативный текст, который бы объяснил, что за графика здесь должна быть. Достигается это путем применения атрибута alt:
[показать]В этом случае браузер зарезервирует место на странице под изображение, но вместо самой картинки покажет текст, который ты напишешь в значении атрибута alt (повторю, если пользователь отключил показ графики, если же нет, то картинка скроет собой альтернативный текст).
С помощью уже знакомого тебе атрибута align можно управлять выравниванием картинок относительно других элементов html-страницы. У атрибута align есть несколько значений, но нас больше всего на данный момент интересуют два:
left — изображение располагается у левого края страницы, а текст обтекает картинку справа;
right — изображение располагается у правого края страницы, а текст и другие элементы обтекают картинку слева.
Например,
[показать]HTML-код картинки слева
А этот
[показать]HTML-код картинки справа
Для прекращения обтекания картинки текстом можно использовать тег BR (знакомый нам из прошлого раздела про форматирование текста в html). У тега BR есть атрибут clear, который может принимать три значения:
left — прекращение обтекания текстом картинок, выровненных по левому краю;
right — прекращение обтекания текстом картинок, выровненных по правому краю;
all — прекращение обтекание текстом картинок, выровненных и по левому, и по правому краю.
По-умолчанию, картинки встраиваются в страницу почти вплотную к тексту и другим элементам. Если такое отображение не устраивает, то можно задать отступы вокруг картинки. Делается это с помощью следующих атрибутов тега IMG:
vspace — создает верхний и нижний отступы;
hspace — создает боковые отступы (слева и справа).
Значения этих атрибутов указывается в пикселах.
Например, если мы немного дополним предыдущий пример:
[показать]Сравни это с тем, как вся «композиция» выглядела раньше (выше).
Вокруг картинок можно создать чёрную рамку с помощью атрибута border. Значение этого атрибута указывается в пикселах и определяет толщину рамки. Например, HTML-код
в браузере выглядит так
[показать]На этом раздел о тегах HTML, которые нужны для вставки картинок на страницы сайта можно считать завершенным.
Вы сейчас не можете прокомментировать это сообщение.
Дневник Картинки в HTML | Оля-Олюсик - Дневник ОлюсиК |
Лента друзей Оля-Олюсик
/ Полная версия
Добавить в друзья
Страницы:
раньше»