Учебник HTML

Базовые HTML теги

   Естественно, мы хотим как можно быстрее начать создавать свои сайты. Даже самый простой сайт уже позволяет привлечь посетителей (ну если, конечно, сайт посвящён тому, что интересует целевую аудиторию). С помощью парочки рекламных блоков мы можем "монетизировать" сайт, и начать зарабатывать. Ведь имено для ради заработка это всё и затевается!

   Страница сайта состоит из нескольких блоков. Поэтому в первую очередь необходимо создать структуру, шаблон HTML-страницы. Вы сами можете отметить, что почти все сайты содержат HTML-страницы, стостоящие из шапки, подвала и рабочей области. Рабочая область страницы в свою очередь состоит из нескольких, чаще 3 блоков. Например, так как HTML-страница, которую вы сейчас читаете:

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

   Проще всего создать структуру HTML-страницы с помощью таблицы, создав нужное количество строк и ячеек и объединив некоторые из них. Таблица задаётся сдвоенным HTML-тегом table:

   <table>
      Здесь содержатся теги, описывающие строки и я
   </table>

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

   <table>
     <tr>
       <td>Содержимое ячейки</td>
     </tr>
   </table>

   Стркутура из трёх строк, состоящих из трёх ячеек, получается комбинированием трёх парных тегов <tr></tr>, в каждом из которых содержатся три парных тега <td></td>.

   Но мы собрались не в крестики - нолики играть на доске 3*3. Шапка и подвал состоят из единственной ячейки! Поэтому в первой строке вместо пяти мы и записываем одинственный парный тег ячейки, но указываем браузеру, что эта ячейка является объединением нескольких, в данном случае трёх ячеек. Ячейки объединяются с помощью артибута colspan тега td:

   <td colspan="3">Содержимое ячейки</td>

   Вот описание страницы, пример которой приведён выше:

<table width="60%" border="1" align="center">
<tr><td colspan="3" align="center" ><br>Шапка страницы, содержащая логотип и т.д.<br><br></td></tr>
<tr><td colspan="3" align="center" >Горизонтальное меню<br></td></tr>
<tr><td width="20%" align="center">Вертикальное<br>меню</td><td align="center"><br>Основной блок, содержащий контент страницы.<br><br><br><br><br><br><br><br><br></td><td width="20%" align="center">Рекламный<br>блок</td></tr>
<tr><td colspan="3" align="center"><br>Подвал, содержащий, например, счётчик посетителей и другую побочную информацию<br><br></td></tr>
</table>

   Дополнительно поясню, что атрибут width="60%" тега table задаёт ширину таблицы в 60% относительно контейнера (того элемента, в котором она содержится, например целиком экрана монитора). Атрибут align размещает таблицу в центре контейнера, а атрибут border создаёт границы ячеек толщиной в 1 пиксел. Атрибут width="20%" тега td задаёт ширину данной ячейки в 20% относительно всей таблицы. Одинарный тег <br> создаёт перенос на следующую строку.

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