Home О нас Самоучитель иврита Путеводитель по Израилю Фотопутешествия Города Израиля Телефонный справочник Еврейские имена Еврейские праздники Ивритская поэзия
Как построить сайт
Учебник HTML и Photoshop. Построение блога на WordPress. Построение портала на Drupal.




HTML
Photoshop
WordPress
Drupal

Учебник HTML и Photoshop



Предыдущая глава


А теперь приделаем картинку



На этом этапе пришла пора задуматься, какую именно фотографию Лены Петровой мы поместим на ее сайт. Поскольку сайт пока еще находится в работе, мы возьмем временную картинку, например, вот такую:

Чтобы вставить в наш 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>).

И вот что у нас теперь получилось:



Следующая глава






О чем здесь можно узнать: УЧЕБНИК HTML И PHOTOSHOP

ПОСТРОЕНИЕ БЛОГА НА WORDPRESS
ПОСТРОЕНИЕ ПОРТАЛА НА DRUPAL








© Netzah.org.
Разрешается свободное цитирование материалов сайта
при условии указания активной ссылки на эту страницу: http://textbook.netzah.org/