Продвинутый HTML

Основы HTML | Определение цветов в HTML

Здесь мы вас научим как:

• вставлять перевод строки
• не разрывающие пробелы
• специальные символы
• внутренние ссылки
• создавать преформатированный текст
• позиционировать изображения на странице
• создавать таблицы

Как сделать перевод строки

Перевод строки осуществляется с помощью тэга <br>. Пример:

<p>Иванов И.И.<br>
г. Москва,<br>
ул. Декабристов,<br>
д.4, к.2, кв.9</p>

Результат:

Иванов И.И.
г. Москва,
ул. Декабристов,
д.4, к.2, кв.9

Тэг <br> не нуждается в закрывающем тэге.

Как вставить не разрывающий пробел

Иногда нужно воспрепятствовать автоматическому разбиению слов по строкам, например в торговой марке "Coke Cola". В таких случаях вместо пробела следует использовать &nbsp;. Пример:

Сладкие газированные напитки, такие как Coke Cola, достигли мировой популярности.

Специальные символы

Специальные символы могут быть введены в ваш HTML-документ при помощи символа & (амперсант) и кода символа:

Внутренние ссылки

Допустим, вам нужно написать длинную WEB-страницу с таблицей содержания в начале. Как сделать ссылки из таблицы содержания на соответствующие секции?

Допустим, каждая такая секция начинается с заголовка:

<h2>Ночные клубы</h2>

Для того чтобы сделать на нее ссылку, разместите ее в <a name=идентификатор> .... </a>

<h2><a name="ночные-клубы">Ночные клубы</a></h2>

Теперь мы можем сделать ссылку:

<ul>
  ...
  <li><a href="#ночные-клубы">Ночные клубы</a></li>
  ...
</ul>

Символ ;# является необходимым перед именем цели. Если цель находится в другом документе,не следует разместить WEB-адрес перед символом #. Пример:

<a href="http://www.bath.co.uk/index.htm#ночные-клубы">Ночные клубы</a>

Преформатированный текст

Одно из преимуществ Web заключается в том, что текст автоматически располагается по строчкам внутри окна в зависимости от его текущих размеров. Но иногда требуется, чтобы часть текста оставалась без изменений. Как пример, код программы. Используйте для этого тэг <pre>:

<pre>
    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }
</pre>

В итоге получим:

    void Node::Remove()
    {
        if (prev)
            prev->next = next;
        else if (parent)
            parent->SetContent(null);

        if (next)
            next->prev = prev;

        parent = null;
    }

Цвет текста и фона были заданы с помощью таблицы стилей. Обратите внимание, что все переводы строки и пробелы отображаются в том же виде, что и в HTML. Исключением является перевод строки непосредственно после тэга <pre> и перед тэгом </pre> , которые не отображаются. Этот факт демонстрируют два примера, которые отобразятся одинаково:

<pre>преформатированный текст</pre>

<pre>
преформатированный текст
</pre>

Преформатированный текст отображается моноширинным шрифтом.

Позиционирование изображения на странице

Вы можете располагать изображения непосредственно в текущем тексте, а также выравнивать по правой или левой границе с помощью атрибута align. Если значение атрибута align установлено в left, изображение выравнивается по левой границе, в right — по правой, пример:

<p><img src="sun.jpg" alt="sunburst graphic"width="32" height="21" align="left">
Обтекаемое текстом изображение прижато к левой стороне окна браузера.</p>

Результат:

Обтекаемое текстом изображение прижато к левой стороне окна браузера.

Здесь align="right"

<p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="right">
Обтекаемое текстом изображение прижато к правой стороне окна браузера.</p>

Результат:

Обтекаемое текстом изображение прижато к правой стороне окна браузера.

Для отображения текста под рисунком используйте элемент <br clear=all> :

<p><img src="sun.jpg" alt="sunburst graphic" width="32" height="21" align="right">
Обтекаемое текстом изображение прижато к левой стороне окна браузера.<br clear="all">
Этот начинается с новой строки под рисунком.</p>

Результат:

Обтекаемое текстом изображение прижато к левой стороне окна браузера.
Этот начинается с новой строки под рисунком.

Таблицы

Для лучшего представления информации удобно использовать таблицы.

Вот пример простой таблицы:

Ее HTML-код следующий:

<table border="1">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Элемент table является контейнером для таблицы. Атрибут border определяет толщину границы в пикселях. Элемент tr является контейнером для каждой строки таблицы. Элементы th и td являются контейнерами для ячеек, содержащих заголовки и данные соответственно.

Добавление свободного пространства между данными внутри ячейки и ее границами

Вы можете добавить свободное пространство между данными внутри ячейки и ее границами, используя атрибут cellpadding в элементе table. Установим cellpadding равным 10 пикселям:

<table border="1" cellpadding="10">

такое изменение кода приведет к следующему эффекту:

Добавление свободного пространства между ячейками

Атрибут cellspacing задает толщину свободного пространства между ячейками. Установим cellspacing, равным 10 пикселям:

<table border="1" cellpadding="10" cellspacing="10">

такое изменение кода приведет к следующему эффекту:

Год	Продажи
2000	$18M
2001	$25M
2002	$36M

Ширина таблицы

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

<table border="1" cellpadding="10" width="80%">

такое изменение кода приведет к следующему эффекту:

Год	Продажи
2000	$18M
2001	$25M
2002	$36M

Выравнивание текста внутри ячеек

По умолчанию заголовки (th) выравниваются по центру ячеек, а данные (td) по левой границе. Вы можете изменить выравнивание, используя атрибут align, задать выравнивание во всей строке можно при помощи элемента tr. Атрибут align может принимать следующие значения "left", "center" или "right":

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th>Год</th><th>Продажи</th></tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
<tr align="center"><td>2002</td><td>$36M</td></tr>
</table>

такое изменение кода приведет к следующему эффекту:

Атрибут valign используется для вертикального выравнивания содержимого ячейки и принимает значения "top", "middle" или "bottom".

Пустые ячейки

Сравните:

с

Чтобы избежать такого эффекта используйте неразрывающий пробел в пустой ячейке:

<td>&nbsp;</td>

Ячейки охватывающие больше, чем одну строку или столбец

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

Заголовок "Год" занимает две строки, а заголовок "Продажи" три столбца. Такой эффект достигается использованием атрибутов rowspan и colspan :

<table border="1" cellpadding="10" width="80%">
<tr align="center"><th rowspan="2">Год</th><th colspan="3">Продажи</th></tr>
<tr align="center"><th>Север</th><th>Юг</th><th>Итого</th></tr>
<tr align="center"><td>2000</td><td>$10M</td><td>$8M</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$14M</td><td>$11M</td><td>$25M</td></tr>
</table>

Таблицы без рамки

Для представления таблицы без рамки следует установить border="0" и cellspacing="0":

Код:

<table border="0" cellspacing="0" cellpadding="10">
<tr><th>Год</th><th>Продажи</th></tr>
<tr><td>2000</td><td>$18M</td></tr>
<tr><td>2001</td><td>$25M</td></tr>
<tr><td>2002</td><td>$36M</td></tr>
</table>

Если атрибут cellspacing не установить равным 0, эффект будет следующим:

Раскрашивание таблицы

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

<table border="0" cellspacing="0" cellpadding="10">
  <tr>
    <th bgcolor="#CCCC99">Year</th>
    <th bgcolor="#CCCC99">Sales</th>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2000</td>
    <td bgcolor="#FFFF66">$18M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2001</td>
    <td bgcolor="#FFFF66">$25M</td>
  </tr>
  <tr>
    <td bgcolor="#FFFF66">2002</td>
    <td bgcolor="#FFFF66">$36M</td>
  </tr>
</table>

В HTML цвета определяются цифрами в шестнадцатеричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ #. Подробнее см. Определение цветов в HTML.

Как сделать пояснение к таблице

Если вам пояснение к таблице, используйте элемент caption, его следует располагать перед первым элементом tr.

Код:

<table border="1" cellpadding="10" width="80%">
<caption>Отчет по продажам</caption>
<tr align="center">
  <th>Год</th><th>Продажи</th>
</tr>
<tr align="center"><td>2000</td><td>$18M</td></tr>
<tr align="center"><td>2001</td><td>$25M</td></tr>
</table>

Здесь в атрибут caption добавлено align="bottom" :