Какая фирма может быть без логотипа?
В этом параграфе мы научимся добавлять графику на свои странички. Поставим такую задачу: Пусть у нашей фирмы уже есть изготовленный охранником Васей на досуге логотип. Нам нужно поместить его на страницу.
Представляю вашему вниманию сделанный за 1 минуту 37 секунд (засекал) логотип.
Пока у нас очень простой сайт из одной страницы. В следующем параграфе мы разберёмся с таблицами и зададим макет и структуру нашего сайта, а пока просто добавим в текст нашей «брошурки» картинку…
Для «знатоков» английского языка скажу: картинка (изображения) в английском языке обозначаются словом IMAGE , от этого слова в HTML есть тэг <IMG>. Тэг одиночный, т.е. напоминаю, что закрывать его </IMG> не надо… Теперь нам достаточно легко рассматривать свойства тэгов, потому что ты знаешь понятия атрибут и его значение.
И так, у нас есть картинка logo.gif размером 188*62 пикселей. Строим тэг по частям:
| Атрибут | Значение | Пример |
|---|---|---|
| SRC | путь к изображению. Если изображение лежит в той же папке, что и страница просто указываем имя файла | /webworkshop/files/02/logo.gif |
| WIDTH | Ширина изображения в пикселах. | 188 |
| HEIGHT | Высота изображения в пикселах | 62 |
| ALT | Информация отображается , если картинка не загрузилась . Например:<IMG ALT=” Картинка ”> |
Логотип корпорации Чайник |
| BORDER | Ширина рамки вокруг изображения . 0 означает отсутствие рамки… | 0 |
| TITLE | Текст выводимый при наведении мыши. | Корпорация Чайник – лидер в производстве носиков для чайников! |
В итоге тэг будет выглядеть так:
<IMG SRC="/webworkshop/files/02/logo.gif " WIDTH=188 HEIGHT=66 ALT="Логотип корпорации Чайник" BORDER=0 TITLE="Корпорация Чайник – лидер в производстве носиков для чайников!">Очень важно заполнять атрибут ALT , т.к. поисковые машины ищут картинки именно по этим полям!
Отлично теперь вставляем картинку во второй абзац.
<P>Мой младший брат Петя разбил любимый бабушкин фарфоровый чайник из сервиза конца XIX века. Шуму было… Уже собрались выкидывать, ведь чайник без носика не приносил уже ни какой пользы. Но тут увидели рекламу запасных носиков и побежали в магазин. </P>
<P><IMG SRC="/webworkshop/files/02/logo.gif " WIDTH=188 HEIGHT=66 ALT="Логотип корпорации Чайник" BORDER=0 TITLE="Корпорация Чайник – лидер в производстве носиков для чайников!">
В магазине оказалась целая коллекция запасных носиков от ООО «Чайник» и мы нашли подходящий! Приклеили прилагающимся суперклеем, и чайник снова радует бабушку! Брату повезло…</P>
<P>Корпорация ООО «Чайник» предлагает самую большую в мире коллекцию запасных носиков. Ваш чайник ещё жив? Тогда Петя едет к вам!</P>
Не очень красиво, не так ли? Давай сделаем так, что бы картинка была справа от текста. Для этого укажим атрибут ALIGN="right" тэга <IMG>
<P>Мой младший брат Петя разбил любимый бабушкин фарфоровый чайник из сервиза конца XIX века. Шуму было… Уже собрались выкидывать, ведь чайник без носика не приносил уже ни какой пользы. Но тут увидели рекламу запасных носиков и побежали в магазин. </P>
<P><IMG SRC="/webworkshop/files/02/logo.gif" WIDTH=188 HEIGHT=66 ALT="Логотип корпорации Чайник" BORDER=0 TITLE="Корпорация Чайник – лидер в производстве носиков для чайников!" ALIGN="right">
В магазине оказалась целая коллекция запасных носиков от ООО «Чайник» и мы нашли подходящий! Приклеили прилагающимся суперклеем, и чайник снова радует бабушку! Брату повезло…</P>
<P>Корпорация ООО «Чайник» предлагает самую большую в мире коллекцию запасных носиков. Ваш чайник ещё жив? Тогда Петя едет к вам!</P>
На этом пока всё. Свои вопросы и пожелания отправляйте mailto:KroBel@narod.ru
В следующем параграфе разберёмся с таблицами. §3 «Таблицы и макет страницы»