Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Вставляем изображение в HTML.

Viktor | 24.02.2014 | нет комментариев

Путешествуя по интернету Вы наблюдали на многих сайтах различные картинки, баннеры, графические изображения. Сегодня Мы научимся вставлять изображения на HTML страницу.

Добавление изображения происходит в два этапа: вначале готовится графический файл желаемого размера и формата (об этом мы поговорим позже), затем он добавляется на страницу через тег <img>. Сам HTML документ предназначен только для того, чтобы отобразить требуемую картинку, при этом никак ее не меняя.

При подготовке изображений следует учесть несколько моментов.

1. Поскольку веб-страница загружается по сети, существенным фактором выступает объем графического файла, встроенного в документ. Чем он меньше, тем быстрее отобразится изображение.

2. Размер картинки необходимо ограничить по ширине, например, установить не более 800 пикселов. Иначе изображение целиком не поместится в окне браузера, и появятся полосы прокрутки.

Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве, сослужили им хорошую службу, фактически определив их как стандарт веб-изображений. Есть еще формат PNG, который также поддерживается браузерами при добавлении изображений и существует в двух ипостасях — PNG-8 и PNG-24. Однако популярность PNG сильно уступает признанию форматам GIF и JPEG.

Обычно для изображений (картинок) делают отдельную папку в корневом каталоге и в неё складывают все изображения. Иногда таких папок несколько (если того требует структура сайта или Вам так проще ориентироваться). Эту папку называют img или images (изображения) и в коде прописывают путь до файла где лежит изображение и имя файла (картинки), который Вы хотите вставить.

Для вставки изображений в HTML документ используется следующая конструкция, которая вставляется в нужное место (туда, где Вы хотите видеть картинку) HTML страницы листинге 8.1.:

На нашей странице посвященной автомобилям, я подготовил и вставил два изображения. Код вставки первого изображения Вы видите ниже:

Листинг 8.1.

<img src=”img/mers1.jpg” border=”0″ width=”400″ height=”209″ hspace=”20″ align=”left” alt=”Вид машины спереди”>

Прокоментируем листинг 8.1.:

Само изображение вставляется с помощью тега img src=”img/mers1.jpg” где “img/mers1.jpg” – указывает, что наша картинка лежит в папке img а имя файла mers1.jpg. В принципе этого достаточно что бы вставить изображение, остальные параметры не обязательные, но все, же их, следует прописывать иначе наша картинка, может подвергнуться искажениям.

border=”0″ – указывает что рамки вокруг рисунка нет, попробуйте поменять 0 на другое число, например 1 – соответствует толщине рамки вокруг рисунка в 1 пиксель, 2 – в два пикселя и т.д.

width=”400″ – указывает, что ширина рисунка 400 пикселей (ставьте реальную цифру ширины Вашего рисунка).

height=”209″ – указывает, что высота рисунка 209 пикселей (ставьте реальную цифру высоты Вашего рисунка).

Если не указать параметры width и height то картинка может исказиться.

hspace=”20″ – указывает на отступ текста от картинки в 20 пикселей.

align=”left” – это уже знакомый Вам тег….. Правильно, это выравнивание картинки по левому краю (т.е. картинка прижимается к левому краю, а текст обтекает картинку справа), так же может принимать, например значение right – по правому краю.

alt=”Вид машины спереди” – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку. Наведите курсов на рисунок автомобиля внизу. Кстати эту картинку я вставляю на нашу с Ваши страничку.

Вид машины спереди

Таким же образом Мы вставили и вторую картинку, с той лишь разницей, что выравнена она по правому краю. Вы можете вставить эти картинки (нажать на картинке правой кнопкой мыши и выбрать “Сохранить рисунок как”) или свои собственные.

Посмотреть на то, что у нас получилось можно здесь. Если Вам что-то не понятно можно открыть HTML код страницы. В браузере IE это делается через меню Вид > Просмотр HTML кода , в браузере Opera это меню Вид > Исходный текст.

Таким же образом вставляются и все остальные картинки и изображения, на всех страницах в интернете.

Как видете все очень просто.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB