HTML

Обтекание элемента

Float - определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

float: left | right | none | inherit

●left - Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.

●right - Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.

●none - Обтекание элемента не задается.

●inherit - Наследует значение родителя.

.img_left {

float: left; /* Обтекание по правому краю */

}

<img class="img_left" src=''someimg.jpg''>

Запрет на обтекание

Clear - Устанавливает, с какой стороны элемента запрещено его обтекание другими элементами. Если задано обтекание элемента с помощью свойства float, то clear отменяет его действие для указанных сторон.

clear: none | left | right | both | inherit

●none - Отменяет действие свойства clear, при этом обтекание элемента происходит, как задано с помощью свойства float или других настроек.

●both - Отменяет обтекание элемента одновременно с правого и левого края. Это значение рекомендуется устанавливать, когда требуется снять обтекание элемента, но неизвестно точно с какой стороны.

●left - Отменяет обтекание с левого края элемента. При этом все другие элементы на этой стороне будут опущены вниз, и располагаться под текущим элементом.

●right - Отменяет обтекание с правой стороны элемента.

●inherit - Устанавливает значение родителя.

.img_left {

float: left; /* Обтекание по правому краю */

}

<p><img class="img_left" src=''someimg.jpg''> <br style=''clear:both''>

Фоновые изображения

Предусмотрено несколько свойств, которые используются для манипуляции фоновыми изображениями. К счастью свойство background используется со всеми ими.

body {

background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right;

}

background-color, цвет фона.

background-image, которое представляет адрес изображения. background-repeat, которое указывает, как изображение повторяется. Это может быть repeat — фактически эквивалент эффекта «мозаики» по всему фону; repeat-y

— изображение повторяется по координатной оси Y, т.е. сверху и снизу; repeat-x — изображение повторяется по координатной оси X, т.е. следует одно за другим слева на право; no-repeat — изображение показывается только один раз и не повторяется.

background-position, показывает расположение изображения. Это может быть top (сверху), center (по центру), bottom (снизу), left (слева), right (справа) или любая благоразумная их комбинация.

Изображение в качестве

ссылки

Кроме текста, в качестве ссылок можно использовать и рисунки. Изображение в этом случае надо поместить между тегами <A> и </A>

<a href="sample.html"><img src="images/figure.jpg" border="0" height="111" width="100"></a>

или

.a_img {

height: 100рх; width: l00px; border: 0;

}

<a href="sample.html"><img class="a_img" src="images/figure.jpg"></a>

Когда изображение становится ссылкой, вокруг него автоматически добавляется рамка толщиной один пиксел. Чтобы убрать рамку, добавьте параметр border="0" к тегу <IMG>

Задание

1.Создайте страницу blog.html с заголовком «Мой Блог». Добавьте на страницу несколько изображений(одинаковой длины и ширины), разделите изображения текстовыми блоками(комментариями к изображениям).

2.Примените к изображениям все возможные способы выравнивания.

3.Сделайте каждое изображение ссылкой на полноформатное изображение. Уберите рамку вокруг изображений-ссылок.

4.Проверьте на валидность полученный код.

Списки нумерованные

Нумерованный список (<ol>).

Синтаксис

<ol>

<li>элемент нумерованного списка</li> <li>элемент нумерованного списка</li> </ol>

Атрибуты

● type: A | a | I | i | 1

Устанавливает вид маркера списка.

● reversed

Нумерация в списке становится по убыванию (3,2,1).

● start

Задаёт число, с которого будет начинаться нумерованный список.

● универсальные атрибуты

Закрывающий тег: Обязателен.

Списки маркированные

Маркированный список (<ul>).

Синтаксис

<ul>

<li>элемент маркированного списка</li> </ul>

Атрибуты

●type: disc | circle | square

Устанавливает вид маркера списка.

●универсальные атрибуты

Вложенные списки

Вложенный список:

<ul> <li>Пункт 1 <ul>

<li>Подпункт 1.1</li> <li>Подпункт 1.2 </li> </ul>

</li> <li>Пункт 2 <ul>

<li>Подпункт 2.1</li> <li>Подпункт 2.2 </li> </ul>

</li>

</ul>

Комбинированные списки

Комбинированный список

<ul> <li>Пункт 1

<ul type="square"> <li>Подпункт 1.1</li> <li>Подпункт 1.2 </li> </ul>

</li> <li>Пункт 2 <ol>

<li>Подпункт 2.1 <ol type="A">

<li>Подпункт 2.1.1</li> <li>Подпункт 2.1.2 </li> </ol>

</li>

<li>Подпункт 2.2 </li> </ol>

</li>

</ul>