Модуль для ссылок

Создаём модуль для ссылок
Громким названием «модуль» я называю маленькую табличку, в которую будут помещены ссылки. Поскольку эту маленькую табличку легко будет вставить в любое нужное место страницы, назовём её модулем.
Определение слова «модуль»: Понятие модуль (от лат. modulus в?» «маленькая мера») в общем означает составную часть, отделимую или хотя бы мысленно выделяемую из общего. Модульной обычно называют вещь, состоящую из чётко выраженных частей, которые нередко можно убирать или добавлять, не разрушая вещь в целом.
Так что слово «модуль» как раз хорошо подойдёт для обозначения той таблички, в которую будут помещены ссылки, поскольку она будет легко заменяемая и её можно будет по желанию переставлять, убирать, переносить в другие части страницы и даже на другие страницы, если потребуется.

Для того, чтобы создать модуль, в котором будут помещаться наши ссылки, которые мы делали на третьем уроке, пропишем под него маленькую табличку вот такого вида:

1. Пишем код для такой таблички по принципу всех предыдущих кодов. Но в данном случае, кроме ячеек у нас появились ещё и строки, которые обозначаются тегом <tr>
Строка — это пространство между двумя горизонтальными линиями таблицы:

Ячейка — это пространство между двумя вертикальными линиями таблицы:

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

<table border=»1″>
<tr>
<td> Кнопка </td>
<td> Ссылка </td>
</tr>
<tr>
<td> Кнопка </td>
<td> Ссылка </td>
</tr>
</table>

Получится вот такая табличка: Модуль для ссылок

2. Теперь зададим нужные параметры нашей табличке, чтобы получилась вот такая, как мы видим на Главной странице сайта, в левом верхнем углу, под логотипом.

«Всё течёт, всё меняется…» На данный момент (2 января 2010 года) в правом верхнем углу страниц нашего сайта уже стоит не модуль со ссылками, а поисковая форма Google. А модуль со ссылками окончательно переселился в левый угол, под логотип. Тем не менее, вообразите себе, что модуль со ссылками стоит именно в правом верхнем углу — и пойдём дальше.

Нам нужны атрибуты, отвечающие за ширину ячеек с кнопками, а так же атрибуты выравнивания текста по ширине и по верхнему краю ячейки:
align=»center» — выравнивание по центру.
WIDTH=19px — ширина ячейки (в данном случае наша кнопка сделана 20рх, но если задать ширину ячейки под кнопку 20рх, будет смотреться менее аккуратно. Поэтому рекомендую всегда задавать в таких случаях ширину ячейки на 1рх меньше).
VALIGN=top — выравнивание по верхнему краю ячейки.
А так же зададим ширину таблицы — 100%.

Пояснение: ширина таблицы 100% — это не значит, что ваш модуль займёт в ширину 100% экрана. Это значит, что когда вы вставите модуль во вторую ячейку вашей таблицы сайта, которая у вас задана в 200рх, он займёт по ширине 100% от этих 200рх. В противном, если вы не зададите конкретную ширину, ваша табличка будет масштабироваться в зависимости от того, какой длинны ваши ссылки. Это будет некрасиво и непредсказуемо.
Поставим в те ячейки, где будут ссылки, выравнивание по левому краю (align=»left»), чтобы текст ссылок начинался от самой границы ячеек.
Теперь вставим эти атрибуты в соответствии с тем, что нам нужно задать в ячейках:

<table width=»100%» border=»1″>
<tr>
<td align=»center» WIDTH=19px> Кнопка </td>
<td align=»left» VALIGN=top> Ссылка </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> Кнопка </td>
<td align=»left» VALIGN=top> Ссылка </td>
</tr>
</table>

3. Теперь сделаем необходимые для модуля действующие кнопки и ссылки.

<a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a>
<a href=»http://dugward.ru/Sod.html»> Читать книгу </a>
<a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a>
<a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a>
4. Теперь все эти кнопки и ссылки ставим на места наших надписей в таблице:

<table width=»100%» border=»1″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»> Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a> </td>
</tr>
</table>

5. Поставим получившуюся конструкцию всю как есть в ячейку 200рх рядом с логотипом, на место слова «Ссылки»:

<table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px>

<table width=»100%» border=»1″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»> Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a> </td>
</tr>
</table>

</td>
</table>

<table width=»100%» border=»1″>
<td WIDTH=200px> Ссылки<br> 200рх</td>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width=»100%» border=»1″>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>

Красным цветом обозначен вставленный модуль. Теперь поставим всё это на нашу страницу и посмотрим, что получилось:
Таблица сайта с логотипом и модулем со ссылками.
Чтобы оживить страничку, я поставила на неё несколько баннеров

6. Как видите, у нас получилось не совсем так, как на Главной сайта «Созвездие Близнецов». Там модуль в рамочке, но внутри ссылки и кнопки рамочкой не разделены. Это происходит потому, что во внутренней табличке (которую мы делали на этом уроке), стоит border=»0″. Но если поставить таким же образом и здесь, получится, что рамочка пропадёт совсем. Потому что рамочка у нас задана на всю табличку модуля, а задать рамочку только на внешнюю границу таблички у нас не получится.
От такой беды есть очень простой способ: надо окружить весь модуль ещё одной табличкой на одну ячейку, поставить в этой табличке border=»3″ (или такой, какой устроит вас), а в самой табличке модуля сделать border=»0″. И вся конструкция будет выглядеть так:

<table width=»100%» border=»3″ VALIGN=top> <td> <table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px>

<table width=»100%» border=»3″ VALIGN=top>
<td>

<table width=»100%» border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»> Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width=»100%» border=»1″>
<td WIDTH=200px> Ссылки<br> 200рх</td>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width=»100%» border=»1″>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>

Я обозначила синим цветом табличку на одну ячейку, в которую вставила наш модуль.
Теперь наша таблица с модулем выглядит так:
Таблица сайта с логотипом и модулем со ссылками, готовая

7. А теперь повторим этот увлекательный процесс ещё раз и вставим в левую ячейку второй таблицы, на место слова «Ссылки», ещё один такой же модуль, но с другими ссылками:

<table width=»100%» border=»3″ VALIGN=top> <td> <table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px>

<table width=»100%» border=»3″ VALIGN=top>
<td>

<table width=»100%» border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»> Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width=»100%» border=»1″>
<td WIDTH=200px>

<table width=»100%» border=»3″ VALIGN=top>
<td>

<table width=»100%» border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://forum.dugward.ru»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://forum.dugward.ru»> Форум </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://lezione.dugward.ru»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://lezione.dugward.ru»> Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>

</td>

<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width=»100%» border=»1″>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>

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

Не обязательно делать и кнопки, и ссылки рядом с ними. Вы вполне можете обойтись либо одними ссылками в модуле, либо кнопками, на которых будет написано, куда они ведут.
Однако, вы видите, что здесь не хватает одной детали — цвета фона в модулях. Из-за этого текст на полосатом фоне несколько теряется. Зададим напоследок цвет фона, как мы это делали на четвёртом уроке. Но не для всей страницы, а для маленьких внутренних табличек модулей. Код будет выглядеть так:

<table width=»100%» border=»3″ VALIGN=top> <td> <table width=»100%» border=»1″>
<td align=»left»> <img src=»logo.jpg» border=»0″> </td>
<td WIDTH=200px>

<table width=»100%» border=»3″ VALIGN=top>
<td>

<table width=»100%»
bgcolor=#e5e5e7
border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://dugward.ru/Sod.html»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://dugward.ru/Sod.html»> Читать книгу </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://septemberfox.ucoz.ru/publ/»> Статьи </a>
</td>
</tr>
</table>
</td> </table>

</td>
</table>

<table width=»100%» border=»1″>
<td WIDTH=200px>

<table width=»100%» border=»3″ VALIGN=top>
<td>

<table width=»100%»
bgcolor=#e5e5e7
border=»0″>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://forum.dugward.ru»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://forum.dugward.ru»> Форум </a> </td>
</tr>
<tr>
<td align=»center» WIDTH=19px> <a href=»http://lezione.dugward.ru»> <img src=»pa1.jpg» border=»0″> </a> </td>
<td align=»left» VALIGN=top> <a href=»http://lezione.dugward.ru»> Как мы делали этот сайт </a>
</td>
</tr>
</table>
</td> </table>

</td>

<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. </td>
<td WIDTH=200px> Баннеры <br> и реклама </td>
</table>

<table width=»100%» border=»1″>
<td> Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. Текст, выровненный по ширине. <br> Место для рекламных баннеров. </td>
</table>

Я взяла не c0c0c0, а более светлый серый цвет e5e5e7. Зелёным цветом я обозначила, куда вставляется цвет фона. Теперь загружаем всё это на нашу страницу и получается вот что:
Таблица сайта с логотипом и двумя модулями со ссылками, готовая

Create a module reference

 

Sounding name «module» I call a small plate, which will be placed links. Since this small plate to easily be inserted at any desired position on the page, let’s call it the module.

The definition of the word «unit»: The concept of the module (from the Latin. Modulus in? «» Little action «) generally means a component part, separable, or at least mentally stands out. Modular commonly called a thing, consisting of clearly expressed parts, which can often remove or add, without destroying the whole thing.

So the word «unit» is just well suited to indicate that plates, which are placed links, as it will be easy to replace, and it will be desired to rearrange, remove, move to other parts of the page, and even to other pages if required.

 

To create a module that will be placed our links that we have done in the third lesson, we prescribe for him a small plate that’s like this:

 

 

1. Writing the code for a plate according to the principle of all previous codes. But in this case, in addition to the cells we were still and the lines that are indicated by the tag <tr>

String — the space between the two horizontal lines of the table:

 

 

Cell — the space between the two vertical lines of the table:

 

 

That is, we have in the table should be two horizontal rows of two cells each.

 

<table border = «1»>

<tr>

<td> button </ td>

<td> Link </ td>

</ tr>

<tr>

<td> button </ td>

<td> Link </ td>

</ tr>

</ table>

Got this label: Module Reference

 

2. Now we define the desired parameters of our plate to get here such as we see on the home page, in the upper left corner, under the logo.

 

«Everything flows, everything changes …» At this point (2 January 2010) in the top right corner of our website is already not a module with links and search form Google. A module with reference finally moved into the left corner, under the logo. However, imagine that the module is to link it to the upper right corner — and go further.

 

We need the attributes corresponding to the width of the cells with the buttons, as well as the attributes of the text is justified and the upper edge of the cell:

align = «center» — centered.

WIDTH = 19px — width of the cell (in this case our button is made 20px, but if you set the width of the cell under the button 20px, will look less accurately. Therefore, I recommend always ask in such cases, the cell width to 1 pixel less).

VALIGN = top — aligns the top edge of the cell.

And also define the width of the table — 100%.

 

Explanation: The table width is 100% — this does not mean that your unit will take in 100% of the screen width. This means that when you insert the module into the second cell of the table of your site that you have set in 200rh, it will take 100% of the width of these 200rh. Otherwise, if you do not specify a specific width, your tablet will be scaled depending on how long your links. It will be ugly and unpredictable.

We put in those cells, which will link left aligned (align = «left»), to link text starts from the border of cells.

Now paste these attributes in accordance with the fact that we need to ask in the cells:

 

<table width = «100%» border = «1»>

<tr>

<td align = «center» WIDTH = 19px> Button </ td>

<td align = «left» VALIGN = top> Link </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> Button </ td>

<td align = «left» VALIGN = top> Link </ td>

</ tr>

</ table>

3. Now make the necessary module operating buttons and links.

 

<a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a>

<a href=»http://dugward.ru/Sod.html»> Read the book </a>

<a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a>

<a href=»http://septemberfox.ucoz.ru/publ/»> Article </a>

4. Now all the buttons and links are put in place our label in the table:

 

<table width = «100%» border = «1»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»> Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a> < / td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a> </ td>

</ tr>

</ table>

5. We put the resulting design as a whole is in the cell next to the logo 200rh, in place of the word «Links»:

 

<table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px>

 

<table width = «100%» border = «1»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»> Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a> < / td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a> </ td>

</ tr>

</ table>

 

</ td>

</ table>

 

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200rh </ td>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

Red indicates the inserted module. Now we put it all on our web page and see what happens:

Table site with a logo and a module with links.

To revive the page, I put on it some banners

 

6. As you can see, we have not quite turned out as the main site «Gemini». There is a module in the frame, but in outline in links and buttons are not separated. This is because the inner plate (which we did in this lesson), standing border = «0». But if you put in the same way, and here we find that the frame will disappear altogether. Because the frame we have set for the whole module plate, and set a frame only to the external border signs we did not succeed.

From such troubles there is a very simple way: it is necessary to surround the entire module is another sign one cell, put in the plate border = «3» (or be what you want), but in the plate module to make border = «0». And the whole structure looks like this:

 

<table width = «100%» border = «3» VALIGN = top> <td> <table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» VALIGN = top>

<td>

 

<table width = «100%» border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»> Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a> < / td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

</ table>

 

<table width = «100%» border = «1»>

<td WIDTH = 200px> Links <br> 200rh </ td>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

I marked in blue plate on a single cell, which put our module.

Now our table with the module looks like this:

Table with logo and website with links module ready

 

7. Now repeat this fascinating process again and insert into the left cell of the second table, in place of the word «Links», another of the same module, but with the other links:

 

<table width = «100%» border = «3» VALIGN = top> <td> <table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» VALIGN = top>

<td>

 

<table width = «100%» border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»> Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a> < / td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

</ table>

 

<table width = «100%» border = «1»>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» VALIGN = top>

<td>

 

<table width = «100%» border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://forum.dugward.ru»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://forum.dugward.ru»> Forum </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://lezione.dugward.ru»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://lezione.dugward.ru»> As we did this site </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

 

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

And feel free to load the entire structure to our page. It turns out here that:

Table site with a logo and two modules with links, is almost ready

 

It is not necessary to do, and the buttons and links with them. You may well do either one link module, or buttons, which will be written, where they lead.

However, you see that there is not enough of one detail — the background color of the modules. Because of this text on striped background somewhat lost. Let’s set the background color in the end, as we did in the fourth lesson. But not for the whole page, and for small domestic tablets modules. The code would look like this:

 

<table width = «100%» border = «3» VALIGN = top> <td> <table width = «100%» border = «1»>

<td align = «left»> <img src = «logo.jpg» border = «0»> </ td>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» VALIGN = top>

<td>

 

<table width = «100%»

bgcolor = # e5e5e7

border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://dugward.ru/Sod.html»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://dugward.ru/Sod.html»> Read the book </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://septemberfox.ucoz.ru/publ/»> <img src = «pa1.jpg» border = «0»> </a> < / td>

<td align = «left» VALIGN = top> <a href=»http://septemberfox.ucoz.ru/publ/»> Article </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

</ table>

 

<table width = «100%» border = «1»>

<td WIDTH = 200px>

 

<table width = «100%» border = «3» VALIGN = top>

<td>

 

<table width = «100%»

bgcolor = # e5e5e7

border = «0»>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://forum.dugward.ru»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://forum.dugward.ru»> Forum </a> </ td>

</ tr>

<tr>

<td align = «center» WIDTH = 19px> <a href=»http://lezione.dugward.ru»> <img src = «pa1.jpg» border = «0»> </a> </ td>

<td align = «left» VALIGN = top> <a href=»http://lezione.dugward.ru»> As we did this site </a>

</ td>

</ tr>

</ table>

</ td> </ table>

 

</ td>

 

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. </ td>

<td WIDTH = 200px> <br> Banners and ads </ td>

</ table>

 

<table width = «100%» border = «1»>

<td> Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. Text aligned on width. <br> Place for banner ads. </ td>

</ table>

 

I took no c0c0c0, and lighter gray e5e5e7. Green I marked where the background color is inserted. Now we load it all on our website and get this:

Table site logo and link the two modules with ready