как сделать сайт самому
Основные теги тела сайта. Тег TABLE
Одним из основных тегов тела сайта является <TABLE></TABLE>. Им можно разбивать страницы сайта или их часть на ячейки, в которые можно помещать текст, картинки и даже другие таблицы. Для примера построим простую таблицу. Тег <TR> добавляет строку таблицы, а тег <TD> количество ячеек в этой строке. Построим простую таблицу.
| <table border="1"> <tr> <td> 1.1 </td> <td> 1.2 </td> </tr> </table> |
⇑ Так будет выглядеть наша таблица. В ней одна строка (один тег <tr>), а в строке две ячейки. Атрибут border служит для прорисовки рамки таблицы, задается в пикселах. При разбивке страницы на фрагменты, атрибут border не указывается, тогда линии не будут видны. Если указать атрибут bordercolor, то он задаст цвет рамки. Например, <table border="1" bordercolor="#FF0000">, что означает: ширина рамки 1 пиксель, цвет рамки красный. Цвет вы можете выбрать из стандартной палитры цветов. |
| <table border="1"> <tr><td> 1.1</td> <td> 1.2</td> <td> 1.3</td> </tr> <tr><td> 2.1</td> <td> 2.2</td> <td> 2.3</td> </tr></table> |
Сейчас разобьем страницу сайта на фрагменты. Построим небольшую табличку. В ней две строки (два тега <tr>), по три ячейки.
Объединим ячейки 1.1 и 2.1, 2.2 и 2.3. Атрибут colspan объединяет ячейки по горизонтали, атрибут rowspan по вертикали. |
| <table border="1"> <tr><td rowspan ="2"> 1.1+2.1</td> <td> 1.2</td> <td> 1.3</td> </tr> <tr><td></td> <td colspan ="2"> 2.2+2.3</td> <td></td> </tr></table> |
Получилось не очень хорошо.
Так получилось, потому что мы не удалили ячейки, с которыми объединялись (отмечены красным). Удалим их в html-коде.
| ||||||||||||
Теперь определимся с размерами таблицы. Для ширины таблицы используется атрибут width, для высоты - height. Размер таблицы можно задать в пикселах, но удобнее в процентах. Расширение мониторов у всех разное, поэтому если вы зададите ширину 100%, то на любом мониторе таблица будет во весь экран, 50% - пол-экрана. Для ячеек также используется атрибут width. Чтобы код-html не занимал у меня много места на странице, я буду писать его в строчку.
<table border="1" width="100%"><tr><td width="50%"> 1</td>
<td width="20%"> 2</td><td width="30%"> 3</td></tr></table>
В нашей таблице одна строка, три ячейки. Первая ячейка занимает 50% от ширины таблицы, вторая - 20%, третья - 30%. Если ширина таблицы будет не 100% или мы зададим ее в пикселах, то мы можем сдвинуть ее относительно страницы сайта. Для смещения таблицы по горизонтали используется атрибут align с параметрами center (центр), left (левый), right (правый). Обозначим ширину таблицы в пикселах.
<table border="1" width="400" align="center"><tr><td width="50%"> 1</td>
<td width="20%"> 2</td><td width="30%"> 3</td></tr></table>
Атрибутом align можно выравнивать содержание внутри ячеек по горизонтали <td align="...">. Атрибутом valign, используя значения top (верх), middle (середина), bottom (нижний), содержимое ячейки выравнивается по вертикали.
<table border="1" width="100%"><tr><td width="50%"> 1</td>
<td width="20%"> 2</td><td width="30%"> 3</td></tr></table>
| 1 | 2 | 3 |
В нашей таблице одна строка, три ячейки. Первая ячейка занимает 50% от ширины таблицы, вторая - 20%, третья - 30%. Если ширина таблицы будет не 100% или мы зададим ее в пикселах, то мы можем сдвинуть ее относительно страницы сайта. Для смещения таблицы по горизонтали используется атрибут align с параметрами center (центр), left (левый), right (правый). Обозначим ширину таблицы в пикселах.
<table border="1" width="400" align="center"><tr><td width="50%"> 1</td>
<td width="20%"> 2</td><td width="30%"> 3</td></tr></table>
| 1 | 2 | 3 |
Атрибутом align можно выравнивать содержание внутри ячеек по горизонтали <td align="...">. Атрибутом valign, используя значения top (верх), middle (середина), bottom (нижний), содержимое ячейки выравнивается по вертикали.
Чтобы подвести итог этому разделу, скопируйте нижеприведенный html-код в блокнот, поменяйте расширение txt на html, откройте браузером, и вы увидите простенькую страничку сайта.
<table border="5" width="100%" height="100%">
<tr><td colspan ="2" height="150">
<img src="http://musiz.ucoz.ru/imeges/dengi.jpg" width="100%" height="100%">
</td></tr>
<tr><td width="20%" bgcolor="#FFFFCC" align="center" valign="top">
МЕНЮ САЙТА</td>
<td align="center">Здесь вы можете вставить все, что угодно. Картинки, текст, таблицы и т.д.</td></tr></table>
<table border="5" width="100%" height="100%">
<tr><td colspan ="2" height="150">
<img src="http://musiz.ucoz.ru/imeges/dengi.jpg" width="100%" height="100%">
</td></tr>
<tr><td width="20%" bgcolor="#FFFFCC" align="center" valign="top">
МЕНЮ САЙТА</td>
<td align="center">Здесь вы можете вставить все, что угодно. Картинки, текст, таблицы и т.д.</td></tr></table>
