HTML, Excel, Word, SEOОсновы Html ⇒ Внешний лист стилей css. Форматирование изображений

ОСНОВЫ HTML

Справочная информация:
Справочник HTML-тегов
Шаблоны для сайтов
Как раскрутить сайт: шаг за шагом
Учебник HTML (хтмл)
Старт
Основные тэги
Заголовки и комментарии
Специальные символы
Форматирование текста ч.1
Форматирование текста ч.2
Форматирование текста ч.3
Создание списков
Работа с графикой ч.1
Работа с графикой ч.2
Работа с графикой ч.3
Работа с графикой ч.4
Таблицы ч.1
Таблицы ч.2
Таблицы ч.3
Гиперссылки
Фреймы
Что такое формы
Что такое JavaScript
Маленькие секреты Вэб-дизайна
Эффект постепенной прорисовки
Карта ссылок
Внутренний лист стилей
Работа с листами стилей
Свойства шрифта - font
Свойства текста
Свойство фона - background
Рамки и размеры
Относительное и абсолютное позиционирование элементов
Основные мета тэги
Таблица дескрипторов HTML и их атрибутов
Таблица свойств css
Заключительное слово
HTML-редакторы
Что такое HTML-редактор
FrontPage 2003
Adobe GoLive CS
Macromedia Dreamweaver MX 2004
HomeSite
CuteSite Builder
Namo WebEditor
CoffeeCup HTML Editor
1stPage 2000
Arachnophilia
HotDog Professional
CSE HTML Validator Pro
HTML профессионально
Внешний лист стилей
Форматирование таблиц
Форматирование гиперссылок
Форматирование изображений

Сайт Вулкан Россия онлайн повышает процент выигрышей на слотах

Форматирование изображений

Попробуем немножко оживить нашу страничку, разместив на ней несколько картинок.

Логично было бы поместить в средней колонке портрет самого И.Е.Репина.

Сделать это довольно просто:

<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-страница.


Далі буде...



В начало страницы



В начало страницы