Информация
Интересности
Литература
Искусство
Детям
Предложения
Каталог
Об авторе


Детский интернет-журнал «Санька - Бешеный кролик!»

Превосходное место для Вашей рекламы!

Мой мир. Персональный сайт Ольги Тышковец

Архив: история как она есть и загадочные явления

Украина.doc - Сетевое издание



Краткий учебник по HTML

      Главная - Информация - Интернет-справочник - Эта страница



Продвинутый HTML
адаптированный перевод статьи Dave Raggett's Introduction to HTML
Источник: KM.RU

Смотрите также:
Основы HTML | Определение цветов в HTML

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

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

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

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

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

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

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

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

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

Символ
Код
Пример
Знак авторского права
&copy;
Copyright © 1999 KM.ru
Зарегистрированная марка
&reg;
MagiCo ®
Торговая марка
&#8482;
Webfarer™
Меньше чем
&lt;
<
Больше чем
&gt;
>
Амперсант
&amp;
&
не разрывающий пробел
&nbsp;
 
тире
&#8212;
двойная кавычка
&quot;
"

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

Допустим, вам нужно написать длинную 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>
Результат:
sunburst graphic Обтекаемое текстом изображение прижато к левой стороне окна браузера.

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

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

Таблицы

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

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

Ее 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">
Такое изменение кода приведет к следующему эффекту:

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

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

Атрибут 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>

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

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

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

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

Сравните:

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

и

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

Чтобы избежать такого эффекта, используйте неразрывающий пробел в пустой ячейке:
<td>&nbsp;</td>

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

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

Год Продажи
Север Юг Итого
2000 $10M $8M $18M
2001 $14M $11M $25M

Заголовок "Год" занимает две строки, а заголовок "Продажи" три столбца.
Такой эффект достигается использованием атрибутов 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":

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

Код:


<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, эффект будет следующим:

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

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

Для установки различных цветов заголовков и ячеек, содержащих данные, в атрибуте 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>

Результат такой раскраски:

Year Sales
2000 $18M
2001 $25M
2002 $36M

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

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

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

Отчет по продажам
Год Продажи
2000 $18M
2001 $25M

Код:


<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":

Отчет по продажам
Год Продажи
2000 $18M
2001 $25M

Смотрите также:
Основы HTML | Определение цветов в HTML


 

      Главная - Информация - Интернет-справочник - Эта страница

яВОТ. Интернет-всячина


казино азартплей