Подробнее об HTML

ART +

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

Рассмотрим структуру HTML страницы.  Как видно, страница состоит из двух частей: это заголовок HEAD и тело BODY. Ниже приведен пример станицы

HTML Комментарии
<html> Начало HTML
<head> Начало заголовка
(Заголовок содержит описательную и служебную информацию)
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<meta name="GENERATOR" content="">

 Метатеги. Метатеги определяют разную служебную информацию.

Здесь один метатег определяет кодировку текста, а другой говорит, кто делал этот HTML.
<title>Заголовок</title> Заголовок для окна браузера
</head> Конец заголовка
<body bgcolor="#FFFFFF" text="#000000"> Начало тела
(Содержание страницы. Оформление.)

 

А здесь собственно все содержание и оформление страницы.

 

  
</body> Конец тела
</html> Конец HTML

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

Пример HTML
Параграф

Еще один параграф

 <p>
Параграф
</p>

<p>
Еще один параграф
</p>
Жирный текст <strong>Жирный текст</strong>
Наклонный текст <em>Наклонный текст</em>
Подчеркнутый текст <u>Подчеркнутый текст</u>
Текст увеличенного размера <big>Текст увеличенного размера</big>
Текст уменьшенного размера <small>Текст уменьшенного размера</small>
Текст другого цвета <font color="#FF0000">
Текст другого цвета
</font>

#FF0000 - Это шестнадцатеричный код цвета
Текст с другим шрифтом <font face="Courier">
Текст с другим шрифтом
</font>

Courier - Имя шрифта

Левое выравнивание текстового параграфа

 <p align="left">
     Левое выравнивание текстового параграфа
</p>

Параметр align задает выравнивание параграфа

Правое выравнивание текстового параграфа

 <p align="right">
Правое выравнивание текстового параграфа
</p>

Выравнивание текстового параграфа по центру

 <p align="center">
Выравнивание текстового параграфа по центру
</p>

Увеличенный отступ текста у какого-то параграфа

 <blockquote>
     <p>Увеличенный отступ</p>
</blockquote>
  1. Список из
  2. Нумерованных
  3. Строчек
 <ol>
     <li>Список из</li>
     <li>Нумерованных</li>
     <li>Строчек</li>
</ol>
  • Список
  • Строк
  • Начинающихся с
  • Точек
 <ul>
     <li>Список</li>
     <li>Строк</li>
     <li>Начинающихся с</li>
     <li>Точек</li>
</ul>
Гиперссылка на Microsoft <a href="http://www.microsoft.ru">

     Гиперссылка на Microsoft

</a>

Между тегами <a ...> и </a> может быть любой   текст и картинки, все это будет гиперссылкой
Перенос на
следующую строку
без начала
нового параграфа		 Перенос на<br>
следующую строку<br>
без начала<br>
нового параграфа
Горизонтальная линия

для разделения

 <p>Горизонтальная линия </p>

<hr>

<p>для разделения </p>
Много   пробелов подряд
(больше, чем один пробел)		 Много&nbsp;&nbsp; пробелов

Так кодируются символы в HTML, если символы с таким кодом нельзя вставить напрямую. (Много идущих пробелов и переводы строки в HTML игнорируются)
Это подпись к картинке <img src="picture.gif" width="262" height="100" alt="Это подпись к картинке">

Параметр src задает файл с картинкой.

width и height - задают ширину и высоту картинки, если реальный размер картинки другой, то она будет выведена отмасштабированной. Если width и height не задавать, то браузер сам определит размер.

alt - задает текст, который будет выведен, если картинка еще не загрузилась
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
<table border="1" width="100%">
  <tr>
    <td width="50%">Ячейка 1</td>
    <td width="50%">Ячейка 2</td>
  </tr>
  <tr>
    <td width="50%">Ячейка 3</td>
    <td width="50%">Ячейка 4</td>
  </tr>
</table>

100% - это размер таблицы в процентах
50% - это относится к ширинам ячеек относительно таблицы
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4 Ячейка 5
Ячейка 6 Ячейка 7
<table border="1" width="100%">
  <tr>
    <td width="66%" colspan="2">
        Ячейка 1</td>
    <td width="34%">Ячейка 2</td>
  </tr>
  <tr>
    <td width="33%">Ячейка 3</td>
    <td width="33%">Ячейка 4</td>
    <td width="34%" rowspan="2">
        Ячейка 5</td>
  </tr>
  <tr>
    <td width="33%">Ячейка 6</td>
    <td width="33%">Ячейка 7</td>
  </tr>
</table>

colspan и rowspan - указывают на то что ячейка занимает не одно место
Ячейка 1 Ячейка 2
Ячейка 3 Ячейка 4
<table border="4" width="70%" cellpadding="3">
  <tr>
    <td width="50%" bgcolor="#FFFF80">
    Ячейка 1</td>
    <td width="50%">Ячейка 2</td>
  </tr>
  <tr>
    <td width="50%">Ячейка 3</td>
    <td width="50%">Ячейка 4</td>
  </tr>
</table>

Здесь задано еще несколько параметров для ячеек и всей таблицы в целом

И еще несколько комментариев:

Размеры таблиц и некоторых других вещей могут быть указаны либо в абсолютных величинах (т.е. в пикселях), либо в относительных (т.е. в процентах). Запись "50" указывает размер в 50 пикселей, а запись "50%" размера - 50% от максимально возможного в данных условиях.

Цвета, обычно кодируются в формате RGB (Красный/Зеленый/Синий). Записывается это как "#RRGGBB", где RR - шестнадцатеричное значение красной составляющей, GG - зеленой, а BB - синей. 00 - обозначает отсутствие свечения, а FF - максимальное свечение.

Шестнадцатеричная кодировка - это почти, то же, что и обычная десятичная, только цифр там не 10, а 16, т.е. 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Таким образом, число FF соответсвует десятичному числу 256.

Вот примеры цветов, закодированных таким образом:

#000000 #FFFFFF #FF0000 #FFFF00 #408080
Цвет Цвет Цвет Цвет Цвет


Hosted by uCoz