Как вставить картинку в HTML-файл.

Прежде чем приступить к изучению я предлагаю вам скачать архив с картинками, которые я подготовил для примеров, а так-же десяток заготовок для изготовления баннеров 468х60 и 88х31. Этот архив весит всего 1мБ.
После скачивания распакуйте архив, далее в нашей my_site создайте папку images и переместите все картинки из архива в нее.

Браузеры способны вывести на эран только три формата(расширения) изображения:
1) file.JPG- чаще всего в этом формате сохраняются фотографии.
2) file.GIF- может может быть прозрачным и принимать анимационный эффект.
3) file.PNG- в отличии от GIF, если в предыдущем можно либо установить прозрачность либо нет, то PNG можно эту прозрачность задать в процентах от 0 до 99.
Но в данном разделе для нас это не имеет большого значения, т.к. мы собираемся использовать картинки, а не изготавливать их.

Графика(картинки) в HTML-документ вставляется при помощи <IMG> и обязательных атрибутов ALT и SRC.
ALT- альтернативный текст нам уже знаком из ссылок, в картинках он выполняет несколько ролей, если у вашего пользователя браузер не поддерживает данный формат изображения или просто графика отключена, а так-же если вы не указали правильный путь к картинке или просто напросто забыли ее туда положить или случайно удалили, то будет отображаться этот текст.
SRC в этом атрибуте мы прописываем путь к изображению, пути как и к ссылкам могут быть абсолютными или относительными.
А это основной шаблон: <img src="путь/имя_файла" alt="альтернативный текст">

А теперь закрепим все на практике и создадим файл grafika.html:

        <html>
        <head>
        <title>картинки в хтмл</title>
        </head>
        <body>
             <img src="images/logotip.png" alt="Супер сайт">
        </body>
        </html>

А теперь просмотрим(откроется в новой вкладке) что у нас получилось.
Чтобы к этому больше не возвращаться, то тег IMG как и ссылки может иметь атрибут TITLE
<img src="images/logotip.png" alt="Супер сайт" title="краткая информация" >

Так-же можно выравнять картинку при помощи знакомого уже атрибута ALIGN
<img src="images/logotip.png" alt="Супер сайт" align="right">по правому краю
<img src="images/logotip.png" alt="Супер сайт" align="left"> по левому краю
Атрибут align="center" почти все браузеры игнорируют и потому если нужно картинку выравнять по центру, то просто поместите картинку в DIV с этим атрибутом
<div align="center"><img src="images/logotip.png" alt="Супер сайт"> </div>
давайте так и сделаем с нашим файлом grafika.html:

        <html>
        <head>
        <title>картинки в хтмл</title>
        </head>
        <body>
          <div align="center"><img src="images/logotip.png" alt="Супер сайт"></div>
        </body>
        </html>

Атрибут border="0" задает бордюр(кайму) вокруг картинки,
<img src="images/logotip.png" alt="Супер сайт" border="0">
Дело все в том что некоторые браузеры по умолчанию для картинки имеют значение ноль(как в моем примере), а некоторые 1, вам нужно определиться нужен ли вам этот бордюр или нет и желательно всегда использовать этот атрибут с нужным вам значением. Самостоятельно подставте этот атрибут в файл grafika.html сначала с значением 0, потом 1 а потом 5 или 10 и поймете смысл бордюра.

Как задать размер картинки?, при помощи атрибута:
width- задает ширину картинки в пикселях(точках) и в некоторых случаях в процентах, на пример если картинка лежит в таблице, но о таблицах немного позже...
height - задает высоту картинки только в пикселях.

Что такое пиксель(точка)? Каждый монитор имеет свое разрешение, это зависит от размера монитора. Чтобы посмотреть какое разрешение у вас просто на голом(не на ярлыке или файле) рабочем столе нажмите правую кнопку мышки и выберите свойства и там кликните на вкладку параметры, справа по центру вы увидите свое разрешение. Ну например у меня 1280х800, у вас оно может быть больше или меньше. Так вот если разбирать мой пример то мой экран может отобразить 1280пикселей по ширине и 800пикселей по высоте. Ну не смотря какое расширение у вас или у меня, есть категория ползователей у которых разрешение всего 800х600, это может быть в древних мониторах или продвинутый телефон с интернетом, я веду к тому что лучше не использовать картинки больше чем 800 пикселей по ширине!!! И этим посетителям будет не очень комфортно находиться на вашем сайте если картинки или другие объекты будут больше 800!!!

Но вернемся к "нашим" картинкам и файлу grafika.html, зададим размеры, а потом сохраним и посмотрим самостоятельно.
<img src="images/logotip.png" alt="Супер сайт" width="607" height="124">
Ни чего не изменилось? И вы совершено правы!!! это и есть его естественный размер данной картинки, но его можно изменить, например задать width="800" height="100" и в этом случае картинка растянется по ширине но стает узкой по высоте. Можно задавать только ширину, если нашей картинке ширина равна 607, а мы зададим 800, то высота 124 автоматически станет приблизительно 160пикселей, т.е. увеличится на тот-же процентный размер.

Коммуникаторы важны. Поэтому своевременное исправление поломок на HTC очень важно.

Смотрите также: