Home | О нас | Самоучитель иврита | Путеводитель по Израилю | Фотопутешествия | Города Израиля | Телефонный справочник | Еврейские имена | Еврейские праздники | Ивритская поэзия |
|
На этом этапе пришла пора задуматься, какую именно фотографию Лены Петровой мы поместим на ее сайт. Поскольку сайт пока еще находится в работе, мы возьмем временную картинку, например, вот такую:
Чтобы вставить в наш HTML-код изображение, мы пишем следующее:
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
Но, чтобы это сработало, мы должны в ту же директорию, где находится наш файл с HTML-кодом, записать графический файл под названием lena.jpg. Конечно, мы можем назвать его по-другому, например, petrova.jpg или как хотим, надо только указать в строчке кода правильное название файла нашей картинки.
Что именно говорит нам эта строчка кода? Что мы хотим вставить рисунок (img) под названием lena.jpg, а рабочее название (alt) этого рисунка будет "Лена Петрова" (если по каким-то причинам, например, из-за плохой связи, у пользователя не откроется рисунок, то он увидит на его месте в своем браузере в качестве "альтернативы" это самое рабочее название и поймет, что здесь должно быть изображение "Лены Петровой"). width и height - это, как вы уже поняли, ширина и высота рисунка. Оба эти параметра можно, в принципе, пропускать. border=0 - означает, что граница рисунка нулевая. Это тоже можно пропустить. Но мы, как прилежные ученики, все напишем полностью.
А где мы разместим наш рисунок в коде HTML? А там, где мы хотим его увидеть. Давайте для начала захотим его увидеть просто над текстом, поскольку, чтобы увидеть его сбоку, придется строить таблицу, а о таблицах мы будем говорить на следующем этапе.
Итак, с добавлением рисунка наш код выглядит так:
<html>
<head>
</head>
<body bgcolor=yellow>
<br>
<br>
<br>
<center>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
<p>
<b>Лена Петрова</b>
<p>
Я рада, что вы ко мне зашли!!
<p>
<i>Добро пожаловать!</i>
</center>
</body>
</html>
(Вы, конечно, заметили, что, для того чтобы текст не «прилип» к рисунку, то есть, не оказался вплотную под ним, я не забыла между тегом для рисунка и тегами для текста вставить тег <p>).
И вот что у нас теперь получилось: