Форматирование изображений
Попробуем немножко оживить нашу страничку, разместив на ней несколько картинок.
Логично было бы поместить в средней колонке портрет самого И.Е.Репина.
Сделать это довольно просто:
<img src="../repin.gif" alt="" width="160" height="178" border="0">
Вот как будет теперь выглядеть наша html-страница.
Обратите внимание, как располагается текст относительно изображения. Чтобы он его обтекал, надо добавить атрибут выравнивания:
<img src="../repin.gif" alt="" width="160" height="178" border="0" align="left">
Вот как будет теперь выглядеть наша html-страница.
Если надо разорвать текст раньше, не дожидаясь окончания абзаца, то можно поступить следующим образом:
<p> <img src="../repin.gif" alt="" width="160" height="178" border="0" align="left"> РЕПИН Илья Ефимович (1844-1930), русский живописец, передвижник. <br clear="left"> Вскрывал противоречия действительности... </p>
Вот как будет теперь выглядеть наша html-страница.
Для создания более привлекательного вида странички, можно вокруг изображения сделать небольшие полосы пустого пространства:
<img src="../repin.gif" alt="" width="160" height="178" border="0" align="left" vspace="2" hspace="15">
Вот как будет теперь выглядеть наша html-страница.
Согласитесь, выглядит, что-то не очень. Несколько лучше будет вот так:
<h3>РЕПИН Илья Ефимович (1844-1930), русский живописец, передвижник</h3> <p> <img src="../repin.gif" alt="" width="160" height="178" border="0" align="left" vspace="2" hspace="15"> Вскрывал противоречия действительности... </p>
Вот как будет теперь выглядеть наша html-страница.
В этом случае есть еще очень существенный плюс - одна из наших ключевых фраз ("Репин И.Е., русский живописец, передвижник") находится внутри тега заголовка третьего уровня, что существенно повышает ее "вес" в глазах поисковых машин.
Одако, с точки зрения эстетики, заголовок в таком виде выглядит довольно уродливо. Попробуем его "подправить" с помощью внешнего листа стилей:
H1{
font-size: 14px;
color: Gray;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
Комментировать, думаю, уже излишне. Единственный нюанс, мы заменили заголовок третьего уровня на заголовок первого уровня, что еще более подняло вес нашей ключевой фразы для поисковой машины.
Вот как будет теперь выглядеть наша html-страница.
Вот таким нехитрым способом, при помощи внешнего листа стилей, мы немножко "обманули" поисковик - с одной стороны заключили наш загловок в высокозначимый тег <H1>, а с другой - придали страничке довольно опрятный вид.
Следует сказать, что поисковые машины очень не любят когда их "обманывают", но в данном случае (насколько мне известно) пока подобные "номера" с использованием листа стилей еще "проходят". Что будет в дальнейшем, сказать не берусь.
Ну, и напоследок - разместим несколько известных картин И.Е.Репина в правой колонке. Изображения будем выкладывать в уменьшенном варианте в виде гиперссылок. По щелчку на миниатюре в новом окне будет открываться увеличенный вариант картины.
Используем, созданный ранее, класс table1. HTML-код получается довольно простой (пока без гиперссылок):
<td width="25%" class="table1"> <img src="../borodin_m.gif" alt="" width="100" height="170" border="0"> <br><br> <img src="../mysorgskiy_m.gif" alt="" width="100" height="138" border="0"> <br><br> <img src="../osen_m.gif" alt="" width="100" height="173" border="0"> </td>
Вот как будет теперь выглядеть наша html-страница.
Теперь делаем гиперссылки на большие изображения, которые будут открываться в новом окне. Прописываем атрибут alt у всех изображений. Из-за громоздкости код приводить не буду. Посмотреть его, думаю, вы уже сами в состоянии.
Вот как будет теперь выглядеть наша html-страница.
Далі буде...
