Комплексная Образовательная Система
"Интернет"
~~~ KOCI.INUMO.RU ~~~

Перед тем как вставить изображение на страничку, поместите ее в специальную папку, например, папку images.

Например, на данном сайте все файлы типа html хранятся в папке:
koci.inumo.ru/html/
А все изображения (графические файлы типа jpg, gif) и пр.) в специальной папке images:
koci.inumo.ru/html/images/

Примечание. Имеются в виду файлы, относящиеся к курсу HTML.

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

Разместим картинку на нашей тестовой страничке сразу после заголовка на русском языке, для этого следует использовать тег img и некоторые атрибуты.

В данном случае мы используем тег <img />, который является одинарным, в отличии, например, от тегов <p></p>, <h1></h1>, <ul></ul>, которые являются парными.

Для тега <img /> в нашем случае используем следующие атрибуты со следующими параметрами:

• src - единственный обязательный реквизит, указывающий имя файла изображения, вместе с путем к нему: images/alarm.jpg.
• id - пустое значение параметра, приведен для наглядности.
• class - пустое значение параметра, приведен для наглядности.
• style - задает стили отображения рисунка. В данном случае, мы указываем его ширину и высоту: width: 307px; height: 450px; outline: 3px dotted #BBBBBB;. Если для изображения не указывать значения ширины и высоты явным образом, то браузер попытается взять эти значения из самого изображения. Другая (более старая и традиционная) возможность указывать ширину и высоту изображения заключается в использовании отдельных атрибутов width и height для тега img следующим образом: width="307" height="450". Кроме того, с помощью параметра outline мы обвели наше изображение серыми точками для наглядности.
• alt - если браузер не может найти изображения по атрибуту src или если у браузера отключено отображение изображений, то вместо изображения будет выведен данный текст, т.е.: Будильник.
• title - это пояснение к изображению, появляется при наведении мыши на область изображения в виде всплывающей подсказки (так называемый тултип, от английского tooltip), в нашем случае это такой вот текст: Будильник, как символ-напоминание, что не надо зря тратить время..

После внедрения изображения тестовая страничка на данном шаге имеет вот такой вид:
article_006_1.html

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

Добиться того, чтобы текст ниже обтекал страничку справа или слева можно задавая в атрибуте style следующие параметры:

• float: left; - картинка будет слева, а текст ее будет обтекать справа...
• float: right; - картинка будет справа, а текст ее будет обтекать слева...

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

И еще с помощью параметра margin: 10px 20px 30px 40px; сделаем так, чтобы было некоторое пустое пространство (шириной 30 точек) между картинкой и текстом (последовательность задания отступов такая: сверху 10px, справа 20px, снизу 30px, слева 40px). Этого же эффекта можно добиться устаревшими атрибутами hspace="40" и vspace="20".

Для наглядности раскрасим фоны английских и русских текстов. Это позволит нам более наглядно представить, как занимают пространство объекты странички и как эти объекты пересекаются между собой.

После внедрения картинки наша тестовая страничка имеет вот такой вид:
article_006.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_006.zip ← скачайте пример, чтобы установить на свой сайт...