Спецкурс
«Интернет-технологии»

Лабораторная работа № 2
Теория


Как построить простую таблицу

У списков есть один недостаток — они одномерны. Это означает, что вы можете располагать информацию только на следующих друг за другом строках. Таблицы же позволяют располагать данные не только по строкам, но и по столбцам. У вас появляется гибкость двухмерной структуры для вывода информации на web-страницу.

Для формирования таблицы применяется целый ряд команд. Команды <table> и </table> обрамляют таблицу целиком, затем таблица делится на строки, а строки, в свою очередь, состоят из ячеек:

<tr> и </tr> (Table Row) — задание строки таблицы

<td> и </td> (Table Detail) — задание ячейки таблицы

Атрибут border= в команде задания таблицы <table> рисует рамку вокруг таблицы и каждой ячейки. Ширина рамки (бордюра) задается в пикселях.

Пример простой таблицы с рамкой шириной 1 пиксел:

<table border=1>
<tr>
  <td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
  <td>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>

На экране это выглядит так:

Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Замечание. Если ячейка является пустой, вокруг нее рамка рисоваться не будет, поэтому в пустую ячейку в таблице следует помещать неразрывный пробел (&nbsp;).

Заголовок к таблице, ячейки-заголовки

К таблице можно добавить заголовок (caption), а также сформировать ячейки-заголовки (heading).

Команды <caption> и </caption> после команды <table> задают заголовок к таблице. По умолчанию заголовок центрируется относительно таблицы. При помощи атрибутов заголовок можно разместить следующим образом:

<caption valign=top> — разместить заголовок над таблицей (по умолчанию)

<caption valign=bottom> — разместить заголовок под таблицей

<caption align=left> — разместить заголовок слева

<caption align=right> — разместить заголовок справа

Задание ячейки-заголовка осуществляется при помощи команд <th> и </th>, содержимое таких ячеек по умолчанию центрируется и выводится жирным шрифтом.

В следующем примере построена таблица с заголовком, расположенным справа и ячейками-заголовками:

<table border=1>
<caption align=right>Математика и Информатика</caption>
<tr>
<th>Математика</th><th>Информатика</th>
</tr>
<tr>
<td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
<td>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>

Что будет выглядеть как:

Математика и Информатика
МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Цвет элементов таблицы

Атрибут bordercolor= устанавливает цвет рамки таблицы:

<table border=5 bordercolor=maroon>
<caption>Математика и Информатика</caption>
<tr>
<th>Математика</th><th>Информатика</th>
</tr>
<tr>
<td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
<td>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>

Что будет выглядеть как:

Математика и Информатика
МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Используя атрибут bgcolor= в командах <table>, <tr>, и <td> можно изменять цвет фона во всей таблице, в строке или в ячейке соответственно.

В следующем примере использовано задание одинакового цвета фона для заголовков столбцов и разное для ячеек таблицы:

<table border=1>
<tr bgcolor=yellow>
<th>Математика</th><th>Информатика</th>
</tr>
<tr>
<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>
</tr>
<tr>
<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>
</tr>
</table>

Что даст:

МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Отступы от границ ячейки

Атрибуты cellpadding= и cellspacing= определяют расстояние в пикселях между границей ячейки и ее содержимым и между ячейками соответственно.

Зададим в таблице отступ от границ, равный 10 пикселам:

<table border=1 cellpadding=10>
<tr bgcolor=yellow>
<th>Математика</th><th>Информатика</th>
</tr>
<tr>
<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>
</tr>
<tr>
<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>
</tr>
</table>

Сравните это с предыдущим примером:

МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Задание отступа между ячейками:

<table border=1 cellspacing=20>
<tr bgcolor=yellow>
<th>Математика</th><th>Информатика</th>
</tr>
<tr>
<td bgcolor=lime>Теория вероятностей</td><td bgcolor=aqua>Теория информации</td>
</tr>
<tr>
<td bgcolor=lime>Системное программирование</td><td bgcolor=aqua>Искусственный интеллект</td>
</tr>
</table>

В результате получится:

МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Задание размеров

Как можно заметить, ширина столбца в таблице определяется по самой широкой ячейке. Соответственно и ширина таблицы получается автоматически. Но иногда необходимо принудительно установить ширину таблицы или ячейки.

Атрибут width= задает ширину таблицы (ячейки), а атрибут height= задает высоту. Причем, значениями этих атрибутов могут быть как пикселы, так и проценты (для таблицы — от ширины экрана, для ячейки — от ширины таблицы).

К примеру, создадим таблицу шириной 600 пикселов, в которой первый столбец составляет 30% от ширины таблицы:

<table border=1 width=600>
<tr>
<th width="30%">Математика</th><th>Информатика</th>
</tr>
<tr>
<td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
<td>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>

Это будет выглядеть так:

МатематикаИнформатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

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

Размещение содержимого в ячейках

Содержание каждой ячейки может быть размещено с помощью атрибутов align= (горизонтальное положение) и valign= (вертикальное положение) для команд <tr> или <td>.

Атрибут valign= может принимать следующие значения:

Атрибут align= может принимать следующие значения:

Например:

<table border=1 cellpadding=10 width=400>
<tr>
<th>Математика</th><th>Информатика</th>
</tr>
<tr valign=bottom>
<td align=center>Теория вероятностей<br>и математическая статистика</td>
<td align=left>Теория информации</td>
</tr>
<tr>
<td align=right>Системное программирование</td><td>Искусственный интеллект</td>
</tr>
</table>

В результате получится:

МатематикаИнформатика
Теория вероятностей
и математическая статистика
Теория информации
Системное программированиеИскусственный интеллект

Создание сложных таблиц

Атрибуты colspan= и rowspan= команд <td>, <th> позволяют объединять ячейки таблицы в группы, вокруг которых рисуется рамка. Ячейки таблицы формируются построчно. Если ячейка охватывает более одной строки (атрибут rowspan=), то она размещается в соответствующих строках, расположенных под первой, автоматически, при этом дополнительной команды <td> для представления ее в этих строках не требуется. Атрибут colspan= позволяет объединить несколько столбцов.

Пример объединения двух столбцов:

<table border=1>
<tr>
<th colspan=2>Математика и Информатика</th>
</tr>
<tr>
<td>Теория вероятностей</td><td>Теория информации</td>
</tr>
<tr>
<td>Системное программирование</td><td>Искусственный интеллект</td>
</table>

Что даст:

Математика и Информатика
Теория вероятностейТеория информации
Системное программированиеИскусственный интеллект

Пример объединения двух строк таблицы:

<table border=1>
<tr>
<th rowspan=2>Математика и Информатика</th>
<td align=center>Теория вероятностей<p>Теория информации</td>
</tr>
<tr>
<td align=center>Системное программирование<p>Искусственный интеллект</td>
</tr>
</table>

Что даст:

Математика и Информатика Теория вероятностей

Теория информации
Системное программирование

Искусственный интеллект

Изменение шрифтов

Важное замечание. Если команды задания начертания (<i>, <b>) или команда изменения шрифта <font> используются в таблице, то они действуют только в пределах одной ячейки! То есть, нельзя, например, одной командой <i> установить курсив для содержимого нескольких ячеек сразу.

Многоколоночная верстка текста

Кроме использования таблиц так сказать «по своему прямому назначению», таблицы можно применять для сложной верстки текста, когда необходимо расположить текст и картинки в несколько колонок, рядов, например, как здесь:


Этого можно добиться, создав таблицу с невидимой рамкой (<table border=0>).

Если же установить <table border=1>, то количество и расположение ячеек становится хорошо видно (что, кстати, используется при предварительном редактировании html-документа, чтобы не запутаться, где что):


Форматы графических файлов

Начиная работу над новой веб-страницей, помимо прочего вам придется решить, какие графические элементы будут на ней использоваться и откуда эти элементы можно получить. Многие из них, например кнопки или маркеры списков, можно нарисовать самостоятельно, используя графический редактор. В некоторых случаях можно обойтись вообще без графики, воспользовавшись, например, таблицами с цветным фоном и различными начертаниями шрифтов. Но если вы хотите использовать фотографии или другую сложную графику, то вам придется потратить некоторое время на поиск файлов с подходящими изображениями, сканирование фотографий или на съемку цифровой камерой. Независимо от того, каким из этих методов вы воспользуетесь, рано или поздно вы столкнетесь с необходимостью сохранить промежуточные результаты обработки или найденные изображения. Поэтому, надо хорошо знать особенности форматов файлов, используемых на начальном и промежуточных этапах подготовки графики для веб-страниц.

Прежде всего следует определиться с тем, что подразумевается в данном случае под словом «графика». Часто под этим термином подразумевают любые изображения, то есть не текст (хотя текст может быть частью графического элемента). Есть два способа представления данных об изображении — растровый (растровая или точечная графика) и векторный (векторная графика).

Растровые изображения характерны тем, что каждая их точка (пиксел) описывается отдельно. Это предоставляет богатые возможности для редактирования, так как все пикселы можно обрабатывать независимо друг от друга. Однако при таком представлении затруднено изменение размеров изображения. Дело в том, что графический редактор располагает только теми данными, которые представлены в файле изображения. При уменьшении изображения объем данных должен уменьшиться и программа решает сравнительно простую задачу — «что лишнее?». Если же изображение надо увеличить, то объем данных должен увеличиться и программе приходится «выдумывать» недостающие сведения. Кроме того, сам файл изображения может иметь большой объем.

У векторного изображения совершенно другие свойства. В нем, за редкими исключениями, отсутствует описание отдельных точек. Вместо этого используется описания целых линий или фигур (в векторной графике эти объекты принято называть контурами) при помощи математических формул. Это позволяет снизить общий объем данных и уменьшить размеры файлов. Кроме того, такие изображения легко увеличивать и уменьшать (масштабировать) — достаточно ввести в формулы новые данные. Но за удовольствие надо платить — выбор методов обработки для векторного изображения значительно меньше, чем для растрового. Так как в веб-дизайне применяется в основном растровая графика, то здесь речь пойдет именно о ней.

WWW поддерживает 3 основных формата изображений — GIF, PNG и JPEG.

GIF

Формат файлов GIF (Graphical Interchange Format — Графический формат обмена) был впервые применён фирмой CompuServe (онлайновая информационная служба) для предоставления информации в стандартном графическом формате. Файлы этого формата имеют расширение *.gif.

GIF стал первым форматом файлов, поддерживаемых WWW. Этот формат хорош для изображений с «малым» количеством цветов (не более 256) и достаточно четкими границами линий, как на этом рисунке:

Этот формат позволяет сохранять в одном файле несколько изображений. Браузеры способны демонстрировать все эти изображения по очереди, получая в результате несложную анимацию. В файле анимации хранятся не только кадры анимации, но и параметры её демонстрации. GIF-анимация в силу своей простоты наиболее распространена в WWW. Кроме того, один из цветов в палитре индексированного изображения можно объявлять прозрачным. В браузере сквозь участки этого цвета будет виден фон страницы как в средней картинке:

К сожалению, с 1995 года разработчик GIF компания Compuserve сделала платным любое его использование в программных продуктах. Это приводит к постепенному вытеснению этого популярного формата из Интернета. Можно сказать, что на поверхности его держит только способность содержать анимацию. Она используется для создания рекламных баннеров.

PNG

PNG (Portable Network Graphics, читается «пинг») — формат хранения графической информации, использующий сжатие без потерь. PNG был создан как для улучшения, так и для замены формата GIF графическим форматом, не требующим лицензии для использования. Файлы этого формата имеют расширение *.png.

Формат PNG хранит графическую информацию в сжатом виде. Причём это сжатие производится без потерь, в отличие, например, от JPEG. Кроме замены устаревшего и более простого формата GIF, формат PNG, в некоторой степени, спроектирован также для замены значительно более сложного формата TIFF.

Формат PNG позиционируется прежде всего для использования в сети Интернет и редактирования графики. Он имеет следующие основные преимущества перед GIF:

Существует два подформата: PNG8 и PNG24, цифры означают максимальную глубину цвета, возможную в подформате. В PNG24 реализована поддержка 256 градаций прозрачности. С помощью этой функции, например, полупрозрачный логотип может выглядеть одинаково на абсолютно любом фоне. PNG8 поддерживает то же количество цветов, что и GIF.

Однако, на данный момент все веб-браузеры одинаково отображают содержимое PNG-файла. Узким местом является именно частичная прозрачность. В Microsoft Internet Explorer эта проблема решена только в седьмой версии браузера. Ещё одним недостатком PNG, является то, что он не поддерживает анимацию.

JPEG

При разработке графического оформления веб-сайта часто приходится пользоваться готовыми изображениями, например, фотографиями. В большинстве случаев такие изображения доступны в формате JPEG/JPG (Joint Photographic Experts Group — Объединенная группа экспертов фотографии). Этот формат позволяет хранить цветные изображение с глубиной до 24 битов (16 777 216 цветов), а также изображения в оттенках серого. Во многих случаях формат JPEG существенно эффективнее GIF, особенно для больших изображений. Файлы в формате JPEG занимают меньше места и, соответственно, быстрее загружаются. Файлы этого формата имеют расширение *.jpg.

Основная особенность формата JPEG — высокая степень сжатия данных, достигаемая методом сжатия с потерями. Этот метод основан на удалении из изображения той части информации, которая слабо воспринимается человеческим глазом. То есть часть данных во время сжатия отбрасывается. Это приводит к снижению качества картинки (теряются мелкие детали, появляются разводы и муар), но позволяет достичь хорошего сжатия изображения. Разумеется, такой подход неприменим к чертежам, схемам и другим видам графики, требующим передачи четких линий и надписей. Но для фотоизображений, особенно имеющих большие размеры, подобные алгоритмы сжатия вполне подходят.

При работе над оформлением сайтов (да впрочем, и в любой другой области) использовать JPEG следует только для сохранения конечных результатов. Если вы, не закончив работу над изображением, сохраните его в этом формате, качество может значительно ухудшиться. Разумеется, это скажется и на конечном результате.

TIFF

Как только что было сказано, файлы растровых изображений могут иметь большой объем. В полиграфии и других областях, где нет необходимости постоянного переноса изображений с одного компьютера на другой, это не имеет большого значения. В веб-дизайне все по-другому. Здесь главное — добиться высокой скорости передачи данных, а файлы большого размера этому вовсе не способствуют. Поэтому для графического оформления сайтов используют форматы, использующие сжатие изображений, которое позволяет уменьшить объем передаваемой информации. Это действительно важно при работе в Интернете, но не всегда удобно при подготовке графического оформления сайта. Дело в том, что изображения для веб-страниц в большинстве случаев сжимаются за счет потери некоторой части информации. Это приводит к различного вида искажениям, снижающим общее качество изображения. По этой причине на промежуточных этапах чаще всего используются форматы, не вносящие искажения, например, TIFF или PSD.

Формат TIFF (Tagged Image File Format — формат файлов изображений, снабженных тегами) является одним из наиболее широко распространенных форматов, используемых при подготовке графики. TIFF является популярным форматом для хранения изображений с большой глубиной цвета, используется при сканировании, отправке факсов, распознавании текста, в полиграфии, широко поддерживается графическими приложениями. Файлы этого формата имеют расширение *.tif или *.tiff. Этот формат полностью сохраняет внешний вид картинки без внесения какой-либо компрессии (как JPEG), но не пригоден для Интернета.

Изображения с «прозрачным» фоном

Прозрачность части изображения делается в графических редакторах.

Здесь приведены инструкции по работе в графических редакторах Adobe Photoshop (лицензионное ПО) и Gimp (бесплатное ПО).

Как было сказано выше, не все веб-браузеры правильно отображают PNG-файл с прозрачным фоном созданный в формате PNG24.
Однако, графический редактор Gimp при сохранении файла «как PNG», использует именно этот формат. Поэтому я не советую вам делать PNG-файл с прозрачным фоном в редакторе Gimp.
А в редакторе Adobe Photoshop есть возможность выбрать формат PNG8, в результате чего полученный PNG-файл с прозрачным фоном будет правильно показан в браузере.

Работа в графическом редакторе Adobe Photoshop
(инструкция откроется в новом окне браузера).

Работа в графическом редакторе Gimp
(инструкция откроется в новом окне браузера).

Особенности использования GIF и JPEG

Чтобы лучше уяснить различие между этими двумя форматами представления графических файлов, рассмотрим два примера.

Пример № 1.

Исходное изображение в формате TIFF — это текст одного цвета на фоне другого цвета, причем граница перехода между цветами очень четкая:

Если сохранить такое изображение в формате GIF или PNG, то оно никак не изменится.

Если же попытаться его сохранить в формате JPEG, то появится «грязь» на границе перехода от одного цвета к другому:

что особенно заметно при увеличении изображения:

Пример № 2.

Обратная ситуация — в формате TIFF имеем многоцветный рисунок с плавными переходами оттенков:

При сохранении в формате JPEG почти ничего не изменится (может добавиться лишь легкая «размытость», мало заметная глазу).

А при сохранении в формате GIF получится вот что:

При увеличении изображения хорошо видно, что вместо плавных переходов цветов налицо резкие границы, зернисть изображения:

На увеличенном JPEG-рисунке этого нет:

Фоновое изображение веб-страницы

При создании фона страницы вы можете задавать не только стандартные цвета, но и фоновые рисунки. При правильном применении эта графика дает интересный эффект. Фоновые узоры состоят из небольших изображений покрывающих весь фон (это похоже на наклеивание обоев). Текст и изображения, естественно, располагаются поверх фона.

Фоновые изображения задаются с помощью атрибута background= в команде <body>:

<body background="fon1.gif"> — это фон данного документа.

Примеры фоновых картинок:

<body background="aqua.jpg">

При этом сама картинка для фона имеет такой размер:

<body background="stena.gif">

<body background="dark.gif">

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

Часто непродуманное использование фоновых цветов и узоров делает страницу абсолютно нечитаемой. Некоторые создатели выбирают слишком темный цвет или слишком громоздкий фоновый узор (последний пример фона), и прочесть текст на таких страницах становится практически невозможно.

Хотя, если выбрать подходящий цвет, текст может быть и удастся прочитать даже на таком фоне

Старайтесь применять только светлые тона и легкие узоры. Проверьте каждую страницу и убедитесь, что ее можно прочесть. Кроме того, использование фоновых узоров может существенно увеличить время загрузки страницы. Если вы используете фоновый узор убедитесь, что он занимает не больше 10 Кбайт.

Коллекцию фоновых изображений для веб-страниц можно посмотреть в папке fons в этой лабораторной или, например, на сайтах:
www.dweb.ru, www.lenagold.ru.

Кроме того, фоны можно поискать в Яндексе или в Google.

Чтобы сохранить понравившийся фон, щелкните по нему правой кнопкой мышки и выберите пункт «Сохранить фон как...».

Как поместить изображение на веб-страницу

Графические файлы включаются в html-документы с помощью команды <img>:

<img src="globus.gif" width=46 height=46 alt="Земля">

Земля

В атрибуте src= необходимо указать имя файла, содержащего изображение.
Только имя файла указывается в том случае, когда и html-документ и графический файл находятся в одной папке.

Если же графический файл расположен не в текущей папке, необходимо указывать относительный путь.
Например, если требуется вставить в html-документ картинку nsu.gif, находящуюся в папке ris, то следует написать так:

<img src="ris/nsu.gif">

Адрес /my-site/images означает переход в корневую папку и соответствует пути к файлу от корня диска:

/my-site/images/globus.gif.

Имена файлов и расширения должны быть написаны маленькими буквами.

При задании пути к графическим файлам следует указывать относительный путь. Это делается для того, чтобы при модифицировании или переносе сайта на другой сервер в html-документах ничего не нужно было менять.

Но, категорически неверно указывать в пути к файлу имя диска (K:, L:), т.к. при переносе файлов на сервер никаких дисков уже нет!

В атрибут alt= заносится короткий текст (1–2 слова), который появится рядом с картинкой при наведении на нее мышки. Кроме того, возможна ситуация, когда торопливые посетители отключают в браузере отображение изображений. Поскольку загрузка изображений из Интернета отнимает львиную долю времени, они предпочитают ускорить процесс, не выводя изображения. Для таких пользователей полезно дать альтернативный текст — тогда они могут прочесть краткое описание того, что представлено на рисунке, и при желании просмотреть его. Особенно необходимо в этом случае применение атрибута alt=, если изображения являются кнопками навигации.

Просматривая на компьютере содержимое папок с графическими файлами возникает желание сразу увидеть, что же это за изображения. В операционной системе Windows XP для этого необходимо в приложениях Проводник или Мой компьютер с помощью кнопки Вид включить режим Эскизы страниц:

Если же у вас на компьютете другая операционная система, то тогда придётся воспользоваться специальным приложением для просмотра графических файлов, например:

Правда, сперва его надо установить на компьютер. Дистрибутив этого свободно распространяемого приложения можно взять на сайте XnView: http://www.xnview.com

Ширина и высота изображения

Атрибуты width= и height= команды <img> соответствуют ширине и высоте картинки в пикселах. Для того, чтобы узнать эти значения, в операционной системе Windows XP, в приложениях Проводник или Мой компьютер достаточно просто подвести мышку к картинке (разумеется, при включенном режиме Эскизы страниц):

Во всплывшей подсказке, в строке

Размеры: 219 × 163

первое число (219) — это ширина картинки, его надо подставить как значение атрибута width=219, а второе число (163) — высота, т.е. значение атрибута height=163.

Если же у вас на компьютете другая операционная система, то, для того, чтобы узнать ширину и высоту картинки в пикселах придётся воспользоваться либо специальной программой просмотра графических файлов, либо открыть файл с картинкой в графическом редакторе и найти там соответствующий пункт меню.

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

Особенности размера цифровых фотографий

Из цифрового фотоаппарата файлы с фотографиями достаточно просто скопировать в компьютер. При этом можно подумать, что такие изображения можно сразу вставлять в html-документ. Однако, это не так!

Дело в том, что цифровой фотоаппарат создаёт фотографию такого качества, чтобы в напечатанном виде она практически не отличалась от фотографии, сделанной на плёночном фотоаппарате. Такое качество достигается за счет очень большого размера (в пикселах) ширины и высоты изображения.

Например, чтобы получить качественную фотографию размером 10 × 15 см, изображение в файле должно быть порядка 1944 × 2592 пиксела. А разрешение монитора с диагональю 19 дюймов равно 1280 × 1024 пиксела т.е. такая фотография целиком даже не поместится на экране!

Не говоря уже о том, что файл с фотографией «весит» 2 600 килобайт. Для сравнения, размер любого файла изображений на этой веб-странице не превышает 40 килобайт — как говорится, почувствуйте разницу.

Поэтому, если разместить на сайте несколько фотографий «прямо из фотоаппарата», то посетитель сайта просто умрёт со скуки, дожидаясь, пока все они загрузятся.

Решение этой проблемы — уменьшение (в разы!) ширины и высоты цифровой фотографии перед её использванием на веб-странице.

Изменение размеров изображения

Эта операция имеется во всех графических редакторах. Одни редакторы делают это лучше, другие — хуже.

Сразу хочу предупредить: уменьшая размер изображения, обязательно сохраняйте где-нибудь оригинал.

Дело в том, что компьютер уменьшает изображения хорошо, а вот из маленького изображения снова сделать большое не получится! Точнее, получится, но с отвратительным качеством.

Какого же размера должны быть изображения (а особенно фотографии), если их предполагается размещать на веб-странице?

Если это одно большое изображение на всю ширину окна браузера, то ширину изображения лучше задать в пределах 400-600 пикселов. Если изображение будет занимать только часть веб-страницы, то достаточно 200-300 пикселов по ширине.

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

Работа в графическом редакторе Adobe Photoshop
(инструкция откроется в новом окне браузера).

Работа в графическом редакторе Gimp
(инструкция откроется в новом окне браузера).

Взаимное расположение текста и изображений

Если вы вставляете команду <img> в документ, то браузер размещает следующий за ней текст ниже картинки. Используя атрибут align= можно соответствующим образом поместить текст, идущий перед и за картинкой.

Допустимые значения атрибута align=

<img align=top> — расположить текст рядом с верхним краем изображения
<img align=middle> — расположить текст посередине изображения
<img align=bottom> — расположить текст рядом с нижним краем изображения

Пример:

   Текст вверху.

Немного отступили вправо    Текст посередине картинки.

Еще раз немного немного отступили вправо    Текст внизу картинки.

«Обтекание» текстом изображения

Для чтобы текст «обтекал» картинку (т.е. располагался рядом и ниже картинки), используется атрибут align= со значениями left или right. Причем это значение (например, left) относится к положению картинки — она будет слева, а текст — справа от нее.

Чтобы прекратить обтекание необходима команда <br> с атрибутом clear=, значение которого должно совпадать со значением атрибута align= в команде <img>. После этой команды текст выводится ниже картинки.

Рассмотрим следующий пример:

<img src="nsu.gif" align=left hspace=10 alt="НГУ">
Здесь располагается текст, который следует поместить справа рядом с картинкой.
<br clear=left>
Здесь располагается текст, который следует поместить ниже картинки.

На экране это выглядит так:

НГУ

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

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

Атрибут hspace= задает горизонтальный отступ в пикселах между текстом и картинкой. Если данный атрибут не задан, то текст будет располагаться вплотную к картинке. Отступы над и под картикой определяются атрибутом vspace=.

CSS — внешние таблицы стилей

Представьте, что вы создаете сайт, в котором десяток страниц и каждая страница должна иметь таблицу стилей, задающую её оформление. Как правило, все страницы сайта выглядят одинаково, а значит, для их оформления применяются подобные таблицы стилей. Поэтому, чтобы не дублировать их в каждом html-документе, таблицу стилей можно поместить в отдельный файл — style.css (это обычный текстовый файл с правилами CSS). Имя файла может быть любым, а расширение — обязательно css. Затем необходимо связать html-документы с файлом style.css: поместить в связываемом html-документе между командами <head> и </head> следующую строку:

<link rel=stylesheet href="style.css" type="text/css">

Такие таблицы стилей называются внешними.

Преимущество внешних таблиц стилей — удобство редактирования таких страниц, т.к. в этом случае достаточно исправить стиль оформления команды в одном месте — в файле, содержащем таблицу стилей, и на всех веб-страницах, использующих эти стили, внешний вид команд изменится.

Группирование элементов (SPAN и DIV)

В языке HTML все элементы можно разделить на два типа: строчные и блочные.

Строчные элементы, как ясно из их названия, выводятся линейной строкой, например: <I>, <B> и <SPAN>.

Элемент <SPAN> можно назвать нейтральным элементом, который ничего не добавляет к содержимому документа. Но, в сочетании с CSS, <SPAN> может использоваться для визуальных эффектов применимо к отдельным блокам текста.

Пример — народная мудрость:

<p>Научить нельзя, можно только научиться.</p>

Скажем, мы хотим, чтобы слово «научиться» было выделено курсивом и красным цветом. Для этого в таблице стилей можно описать селектор по классу, который затем будет использован в команде <SPAN>:

<p>Научить нельзя, можно только <SPAN class="prim"> научиться. </SPAN></p>

В CSS:

SPAN.prim { font-style: italic; color: red; }

Демонстрация примера

Блочные элементы создают визуально самостоятельную структурную единицу — блок, например: <H1>–<H6>, <P> и <DIV>.

Основное отличие <DIV> от команды абзаца <P> в том, что по умолчанию перед и после абзаца всегда добавляется пустая строка, а у <DIV> — нет.

Элемент <DIV> в сочетании с CSS позволяет задавать целый комплекс свойств блока.

Селектор по идентификатору

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

Например, пусть требуется, чтобы на каждой странице сайта самый первый заголовок отличался ото всех остальных. С помощью атрибута id= присвоим заголовку Н1 уникальный идентификатор:

<H1 id="firstheader"> Первый заголовок на странице </H1>

Чтобы записать CSS-правило для определения стиля этого заголовка, используется такой же прием, как и для селекторов по классу, но в качестве разделителя используется не точка, а символ решетки (#).


H1#firstheader { color: red;  font-size: 15pt }  /* стиль первого заголовка */
H1             { color: blue; font-size: 13pt }  /* стиль всех остальных заголовков */

Внимание! В одном html-документе не может быть двух элементов с одинаковым значением атрибута id.

По аналогии с унифицированным селектором по классу можно создать унифицированный селектор по идентификатору (имя элемента при этом не указывается):

#menu { text-align: right; color: blue }


<DIV id="menu"> Блок с пунктами меню сайта </DIV>

Блоковая модель

Блоковая модель в CSS имеет детальные опции для определения полей, рамок, заполнения и содержимого каждого элемента. На рисунке показано, как построена блоковая модель:

Каждый блок в CSS обязательно имеет информационную часть, или содержимое, которым может быть текст, изображение или другая информация. Эта часть блока называется контентом (content) или содержимым.

Вокруг области контента могут быть пустые области, называемые отступами (padding). С точки зрения дизайна отступы обеспечивают для содержимого блока эстетически более привлекательный вид.

Непосредственно за отступами проходит граница (border), которая может иметь определенную толщину и стиль линий.

Также блок может иметь поля (margin), это дополнительное свободное пространство вне границ блока.

Согласно спецификации CSS, поля, границы и отступы не входят в ширину блока, вы задаете ширину лишь той части блока, которая отведена для содержимого.

Все поля, границы и отступы делятся соответственно на верхние, нижние, левые и правые. Для каждого из них можно задать значения независимо от других.

Поля (margin)

Поля — это расстояние от каждой стороны блока до соседних элементов (или краёв документа). Регулируя величину полей, можно управлять расстоянием между блоками. Значения могут задаваться в любых единицах длины, а также в процентах. Процентное соотношение в этом случае вычисляется относительно контейнера, породившего блок.

По умолчанию в любом браузере поля веб-страницы имеют определенное ненулевое значение. Если для целей дизайна их требуется устранить, следует записать такое правило:

BODY {
margin-top: 0px;
margin-right: 0px; 
margin-bottom: 0px;
margin-left: 0px;
}

Или в сокращенном виде, если все поля одного размера:

BODY { margin: 5px }

Если для страницы требуется установить поля по 10 % от ширины страницы справа и слева, а поля сверху и снизу пусть останутся по умолчанию, то правило будет выглядеть так:

BODY {
margin-right: 10%; 
margin-left: 10%;
}

Допустимы также отрицательные значения полей. Использование селекторов по классу для задания полей позволяет сделать наложение текста друг на друга как это сделано в следующем примере.

<html>
<head>
<title>Style Sheets</title>
<style>
 .t1 { margin-left: 10pt;
       color: darkmagenta;
       font-size: 30pt;
       font-weight: bold;
       font-family: Courier New }
 .t2 { margin-top: -37pt; /* блок будет сдвинут вверх на 37 пунктов */
       margin-left: 8pt;
       color: magenta;
       font-size: 30pt;
       font-weight: bold;
       font-family: Courier New }
</style>
</head>
<body bgcolor=#FFFFFF>
<div class="t1">Объявление</div>
<div class="t2">Объявление</div>
<p>А теперь применение классов t1 и t2 по отдельности:
<div class="t1">Объявление</div>
<p>&nbsp;
<div class="t2">Объявление</div>

Демонстрация примера

Границы (border)

Границы блоков делятся на четыре сегмента: верхний, правый, нижний, левый. Каждый отдельный сегмент блока может иметь свои характеристики: цвет, толщину, тип линий.

Свойство width

Толщину границы можно задать как в виде ключевых слов:

так и в единицах измерения:

P {
border-top-width: 1px;
border-right-width: medium;
border-bottom-width: 2px;
border-left-width: thin;
}

Недопустимо задание величины границы в процентах и отрицательных значекний.

Свойство border-color

Цвет границы также возможно задать для каждой из четырех сторон блока по отдельности:

Свойство border-style

Это свойство задает тип линий, которыми будут отображаться границы блока:

Тип границы может быть следующим:

С помощью этого свойства можно, например, обвести рамкой отдельное слово:

.ramka { border: solid 1px red } /* это сокращенная запись */


<P>В этом абзаце вокруг слова <SPAN class="ramka">рамка</SPAN> будет граница со всех четырех сторон в виде сплошной линии толщиной в 1 пиксель, красного цвета.

Пример задания разных цветов и типов границы блока:


h1 {
border-top-width: thin;
border-top-style: dotted;
border-top-color: red;

border-bottom-width: medium;
border-bottom-style: dashed;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: double;
border-left-color: orange;
}

Демонстрация примера

Фон (background)

Свойство background-color

Это свойство позволяет задавать цвет фона страницы или любого другого элемента (заголовка, абзаца).

BODY { background-color: aqua }
P    { background-color: blue }

Свойство background-image

Это свойство задает изображение в качестве фона любого элемента:

DIV { background-image: URL(picture.gif) }


<DIV style="width:300px;height:222px">Ёжик в тумане</DIV>

Здесь в атрибуте style= указаны значения ширины и высоты изображения, чтобы оно отобразилось полностью на экране.

Демонстрация примера

Совет. При использовании свойства background-image рекомендуется задавать и значение свойства background-color. Оно будет использоваться в том случае, если фоновое изображение по тем или иным причинам будет недоступно.

Свойство background-repeat

В случае, когда задано фоновое изображение, это свойство определяет, будет ли оно повторяться по горизонтали и вертикали. Допустимы следующие значения:

Пример:

DIV { background-image: URL(picture.gif); 
      background-repeat: repeat-x} 

Текст внутри этого контейнера будет располагаться поверх фонового изображения, которое будет повторяться по горизонтали.

Отступы (padding)

Как уже было сказано, отступы задают расстояние от границы до содержимого блока. Чтобы понять чем отступы (padding) отличаются от полей (margin) рассмотрим такой пример.

Создадим два класса:


.p_mar { background-color: #CCCCFF; 
         margin: 2em }
.p_pad { background-color: yellow; 
         padding: 2em }

Оформим два различных абзаца при помощи этих классов:


<P>Для этого абзаца не задано ничего, т.е. используются значения по умолчанию.</P>
<P class="p_mar">Для этого абзаца заданы поля (margin) размером 2 em.</P>
<P class="p_pad">Для этого абзаца заданы отступы (padding) размером 2 em.</P>

Демонстрация примера

Внимание! Если размеры полей могут иметь отрицательные значения, то размеры отступов могут быть только положительными.

Контейнер блока

Формирование веб-страницы при помощи средств CSS сводится к следующему:

Контентная часть блока может быть не только текстом, изображением, таблицей. Внутри блока могут располагаться и другие блоки. В этом случае первый блок будет являться контейнером для вложенных в него блоков. Для некоторых элементов контейнером служит непосредственно окно браузера.

Важно понимать, что общая ширина контейнера складывается из собственно ширины блока, ширины левых и правых полей, толщины левой и правой границ, а также левого и правого отступов.

Ширина контентной части блока задается при помощи свойства width, высота — при помощи свойства height.

Если ширина блока задается в процентах, то она вычисляется относительно ширины контейнера блока.

Пример блока, который будет служить контейнером для абзаца:


#main_block {
color: red; 
background-color: #FFFFCC; 
border: 2px solid red;
margin: 2em;
padding: 1em;
width: 200px }
P {
width: 50%;
border: 2px dotted blue; }


<DIV id="main_block">
Содержимое главного блока #main_block
<P>Абзац шириной 50 % своего контейнера</P>
</DIV>

Итак, у основного блока граница задана сплошной линией красного цвета, а у вложенного блока — синей пунктирной линией.

Демонстрация примера

Абсолютное позиционирование

Представим окно браузера как систему координат:

Принципы CSS-позиционирования — в том, что вы можете расположить блок в системе координат где угодно. Скажем, мы хотим позиционировать заголовок. При использовании блоковой модели заголовок выглядит так:

Если мы хотим расположить его в 100 пикселах от верхней границы окна браузера и на 200 пикселов правее левой границы окна браузера, то мы должны написать такое правило:


h1 {
position: absolute;
top: 100px;
left: 200px;
}

Вот результат:

Для абсолютного позиционирования элемента свойство position должно иметь значение absolute. Положение блока задается при помощи свойств сдвига:

В качестве примера абсолютного позиционирования разместим 4 блока в углах документа:


#box1 {
position: absolute;
top: 50px;
left: 50px;
}

#box2 {
position: absolute;
top: 50px;
right: 50px;
}

#box3 {
position: absolute;
bottom: 50px;
right: 50px;
}

#box4 {
position: absolute;
bottom: 50px;
left: 50px;
}

Демонстрация примера

Плавающие блоки

Для того, чтобы в CSS реализовать «резиновую» вёрстку, были придуманы плавающие блоки. Их нельзя позиционировать с точностью до пикселя, как при абсолютном позиционировании. Они могут свободно перемещаться и «прижиматься» к краю своего контейнера. Подобным образом ведут себя рисунки в HTML, для которых задан атрибут align=.

Плавающие блоки в CSS определяются свойством float.

Свойство float

Данное свойство определяет, будет ли блок плавающим и в какую сторону он будет перемещаться. Свойство может принимать следующие значения:

Рассмотрим пример. Допустим, вы пишете статью, и по ходу необходимо вставлять ремарки или делать комментарии. Поместим эти комментарии внутрь плавающего блока, а сам блок разместим рядом с нужным местом в статье.

Создадим такой блок, указав для него свойство float со значением left. Для плавающих блоков всегда надо явно указывать ширину, иначе блок растянется так, чтобы поместить в себя всё содержимое.


.comment { background-color: #CCCCFF; 
           border: 1px solid;
           padding: 5px;
           width: 250px;
           float: left 
}

<DIV class="comment">
Текст внутри плавающего блока
</DIV>
<P>Текст, который будет обтекать блок</P>

Демонстрация примера

А что произойдет, если в HTML-коде разместить несколько одинаковых плавающих блоков? Рассмотрим такой пример кода:

<DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P>

Демонстрация примера

Получается, что второй блок располагается правее первого, несмотря на то что также является левосторонним. Если же требуется изменить положение плавающего блока, то следует воспользоваться свойством clear — аналогом атрибута clear=.

Свойство clear

Данное свойство определяет, какие стороны плавающих блоков не могут соседствовать с другими плавающими блоками. Свойство может принимать следующие значения:

<DIV class="comment">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV class="comment" style="clear:left">
Второй плавающий блок — «прилипнет» куда?
</DIV>
<P>... Фрагмент текста ...</P>

Демонстрация примера

Из всего сказанного можно сделать вывод, что несколько плавающих блоков будут располагаться на одной линии, если их суммарная ширина будет меньше ширины контейнера или равна ей. Если в качестве контейнера рассмотреть окно браузера, то таким образом легко реализовать вёрстку в несколько колонок.

Создадим три плавающих левосторонниз блока, чтобы их суммарная ширина не превышала 100 % ширины окна браузера.


#block1 { background-color: #CCCCFF; 
           border: 1px solid;
           padding: 5px;
           width: 30%;
           float: left }
#block2 { background-color: #FFCCCC; 
           border: 1px solid;
           padding: 5px;
           width: 30%;
           float: left }
#block3 { background-color: #FFCC99; 
           border: 1px solid;
           padding: 5px;
           width: 30%;
           float: left }

<DIV id="block1">
Первый плавающий блок должен «прилипать» к левому краю контейнера.
</DIV>
<DIV id="block2">
Второй плавающий блок должен выстроится с первым в одну линию.
</DIV>
<DIV id="block3">
Третий плавающий блок должен выстроится с двумя предыдущими в одну линию.
</DIV>

Демонстрация примера

Центрирование блока

При вёрстке в одну колонку, если она ýже окна браузера, её чаще всего центрируют. Однако центрирование в CSS не так просто реализовать, как кажется на первый взгляд. Свойство text-align: center, к примеру, должно центрировать содержимое блока, но не сам блок относительно контейнера.

В этом случае может помочь значение auto свойства margin. По спецификации CSS, для значения auto размеры полей вычисляются особым образом: если оба свойства margin-right и margin-left принимают значение auto, то их вычисляемые значения будут одинаковы. Что это означает? Когда левое и правое поля будут совпадать? Когда блок центрирован! Именно этого мы и добивались.

Пример — блок шириной 60 % ширины окна браузера, располагаемый по центру. Но при этом текст в блоке прижат к левому краю, а не центрирован.


#block { background-color: #CCCCFF; 
           border: 1px solid;
           padding: 5px;
           margin-right: auto;
           margin-left: auto;
           width: 60% }

<DIV id="block">
Отцентрирован блок, но не его содержимое.
<P>Причем ширина блока меняется, если менять ширину окна браузера.
</DIV>

Демонстрация примера

Практический пример применения стилей

Предположим, что требуется сверстать сайт, имеющий такой внешний вид:

Сразу условимся, что все файлы с изображениями будут находиться в папке images, размещенной в той же папке, что и веб-страницы сайта.
А CSS-стили будут вынесены в отдельный файл sp-style.css.

Прежде всего определим, что фоновое изображение sp-fon-1.jpg



будет задано для всего документа, т.е. для элемента BODY; здесь же укажем, что текст документа будет черного цвета:

BODY { background-image: URL(images/sp-fon-1.jpg); color: black }

Выделим блоки, из которых будет сформирована структура сайта (цвет, которым написано название блока, совпадает с цветом рамки на рисунке):

Поскольку блоков для пунктов меню несколько, то для них создадим селектор по классу. Тогда как блоки main, head и text будут в единственном экземпляре, а значит для них применим селекторы по идентификатору.

Чтобы блок main разместился по центру окна браузера установим значения свойств margin-left и margin-right равными auto.

Для блока head укажем его ширину: 100 %.

Блоки punkt сделаем плавающими, прижатыми к левому краю;
их ширину зададим равной 24 % (чтобы они уместились в одну линию)
и установим размер отступов сверху и снизу по 10 пикселов.

Блок text тоже разместим по центру,
установим размер всех отступов в 1 em,
и зададим для него другой фоновый рисунок (sp-fon-2.jpg)

Для этих блоков CSS-правила будут такими:

#main  { width: 800px; margin-left: auto; margin-right: auto; }

#head { width: 100% }

.punkt { float: left; width: 24%; 
         padding-top:10px; padding-bottom:10px; }

#text  { background-image: URL(images/sp-fon-2.jpg); 
         margin-left: auto; margin-right: auto;
         padding: 1em; }

Создадим класс menu для описания свойств текста в пунктах меню (в том числе, в таблице — головной части сайта).
Эти свойства должны быть такими: размер шрифта — 12 пунктов, гарнитура — Comic Sans MS, шрифт полужирный.

.menu { font-size: 12pt; font-family: Comic Sans MS; font-weight: bold }

Сформируем «каркас» сайта без таблицы и текста страницы, но с пунктами меню и стрелками (файл arrow.gif):

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//RU">
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1251">
<link rel=stylesheet href="sp-style.css" type="text/css"> 
<title>Пример верстки сайта</title>
</head> 
<body>
<div id="main">
<div id="head">
<i>Головная часть сайта</i> 
</div> <!--  end head -->
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div>

<div id="text" style="clear:left">
<i>Текст страницы</i>
</div> <!--  end text -->

<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> За бугром</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Родные осины</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Тоска объявлений</span></div>
<div class="punkt"><span class="menu"><img src="images/arrow.gif" width=24 height=18> Пальцем в небо</span></div>

</div> <!--  end main -->
</body>
</html>

Демонстрация примера

В блоке <div id="text" style="clear:left"> мы добавили атрибут style= со значением clear:left чтобы текст страницы шел заведомо ниже пунктов меню.

Блоки <div class="punkt"> размещают пункты меню, а элементы <span class="menu"> — отображают пункты меню требуемыми свойствами шрифта.

Создадим таблицу внутри блока head, т.е. в головной части сайта.

Ширина этой таблицы равна 800 пикселов, отступ содержимого от границ ячеек — 5 пикселов.
Её структура (если рамку сделать видимой) должна быть такой:

Логотип Пункт меню
Пункт меню

К содержимому в ячейках таблицы с пунктами меню применим тот же класс menu, что и в плавающих блоках.

Ячейка с логотипом содержит 2 элемента:

Для текста «Газета от сохи» создадим класс menu-big и запишем CSS-правило:

.menu-big { font-weight: bold; font-size: 14pt; font-family: Comic Sans MS; }

А в html-документе заменим «заглушку» <i>Головная часть сайта</i> на таблицу:

<div id="head">
<table border=0 width=800 cellpadding=5>
<tr>
<td rowspan=2><div class="menu-big">Газета от сохи</div>
<img src="images/sp-logo.gif" width=475 height=70 alt="Сермяжная правда">
</td>
<td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Толкователь</span></td>
</tr>
<tr>
<td><span class="menu"><img src="images/arrow.gif" width=24 height=18> Емеля</span></td>
</tr>
</table>
</div> <!--  end head -->

Демонстрация примера

Вот теперь перейдём к формированию стилей для текста страницы.

В содержательной части страницы присутствуют два вида заголовков:
Н3 — прижатый к правой стороне блока и отображаемый гарнитурой Comic Sans MS
и Н4 — размещаемый по центру.

А также абзацы, имеющие выравнивание по ширине.

Добавим соответствующие CSS-правила в файл sp-style.css:

H3 { font-family: Comic Sans MS; text-align: right }
H4 { text-align: center }
P  { text-align: justify }

Кроме того, в тексте есть слово выделенное полужирным курсивом. Предположим, что такое выделение будет встречаться и на других страницах сайта. Чтобы каждый раз не использовать по две команды курсива и полужирного шрифта, добавим стиль полужирного шрифта в команду CITE (есть такая команда в языке HTML, используется для выделения цитат, как правило текст отображается просто курсивом).

CITE { font-weight: bold; }

В html-документе заменим «заглушку» <i>Текст страницы</i> на то, что там должно быть (правда, пока без картинки):

<h3>Толкователь</h3>
<h4>Толковый словарь Ожегова</h4>
<p>СЕРМЯЖНЫЙ
<p>1. см. сермяга.
<p>2. перен. Относящийся к бедному крестьянскому быту старой России. <i>Сермяжная Русь</i>.
<p><cite>Сермяжная правда</cite> (шутл.) — безыскусственная, идущая от самого существа чего-н. 
<i>В его словах есть своя сермяжная правда</i>.

<h4>«НАУКА И ЖИЗНЬ»</h4>
<p>№ 10, 2000 год<br>
С. Редичев<br>
СЕРМЯЖНАЯ ПРАВДА </p>

<p>Что такое сермяга? ...

<p>Вот какой длинный и трудный путь был у сермяги. Оставалось сшить из этого материала нужные вещи. 
Шили вручную, как правило, льняными нитками. 
<br><i>Получил сермяжные портки, теперь носи и смены не проси</i>. 
</div> <!--  end text -->

Демонстрация примера

И, наконец, последнее, что осталось — это создать плавающий блок, в котором будет размещена иллюстрация к тексту и подпись под ней.

Для этого применим селектор по классу foto (ведь иллюстраций на странице может быть несколько) со следующими свойствами:

.foto { float: right;
        margin-left: 15px; margin-bottom: 15px; 
        font-size: 10pt; font-family: Arial; text-align: right }

В html-документе добавим блок <DIV> с атрибутом class="foto". Во втором атрибуте — style="width:357px" — явно укажем ширину блока, равную ширине картинки из файла serm.gif

Файл с таблицей стилей sp-style.css можно посмотреть здесь.

Итог всех трудов:


Задание