Языки HTML и CSS. Занятие 9.

Начнём строить сайт. Ставим нижние картинки.

Здгавствуйте догогие дгузя! Пгодолжим гассмотгение темы.

Теперь надо сформировать подобным образом правую колонку. Открываем для этого очередную ячейку.

<td width="202" align="left" valign="middle"> <!-- В ячейке открыли новую таблицу, куда поместим разноцветные ссылки навигации. -->

<table width="98%" border="0" cellspacing="0" cellpadding="0"> <!-- Открыли новую таблицу -->
<tr> <!-- Открыли в таблице строку -->
<td width="98%" height="91" align="left" valign="middle"> <!-- А в строке открыли первую ячейку -->

<!-- Теперь открываем текстовый параграф, оформленный разнообразными текстовыми стилями, единственное отличие в стилях – это цвет шрифта, пара тэгов <span> </span> позволяет выделить фрагмент текста, для того, что бы назначить ему новый цвет (или вообще, любые новые параметры). -->

<p><span class="style31">Саймаа:</span> <span class="style23">Солнце,</span> <span class="style331">острова и</span> <span class="style34">голубой простор! </span><br />
<span class="style4"><a href="/Saimaa.html">Наконец-то долгожданный <br />
отпуск! Свобода!!!</a></span><br /></p> <!-- Закрываем параграф. -->
</td> <!-- Закрываем ячейку. -->
</tr> <!-- Закрываем строку. -->
<tr> <!-- С новой строки. -->

<td width="98%" height="80" align="left" valign="top"><div align="left"> <!-- Открываем ячейку. -->
<p><span class="style331">С корабля на бал: </span><br /> <!-- Открываем новый «разноцветный» параграф, но уже со ссылкой – тэг <a href="/OperaFest.html">Оперный сезон в Савонлинне! </a>. -->

<span class="style4"><a href="/OperaFest.html">Оперный сезон в Савонлинне! </a>Наш теплоход прибывает в старинную крепость на фестиваль...</span><br /></p>
</td> <!-- Закрываем ячейку. -->
</tr> <!-- Закрываем строку. -->
<tr> <!-- Открываем новую строку. -->

<td width="98%" height="80" align="left" valign="top"><span class="style31">Культурная программа: </span><br /> <!-- Здесь идёт аналогичный разноцветный текст со ссылкой. -->

<span class="style4"><a href="/CultureProg.html">Императорский отель в Пункахарью.</a> Сочетаем полезное с приятным, заботясь о душе и теле....</span></td>
</tr> <!-- Закрываем строку. -->

<tr> <!-- Открываем новую строку. -->
<td width="98%" height="80" align="left" valign="top"><span class="style34">Знаменитые имена:</span><br />
<span class="style4"><a href="/FamousNames.html">художник Хелена Шьерфбек, выставка Ретретти.</a> Пол дня<br />в атмосфере утонченности...</span><br /></td> <!-- Всё тоже самое. -->
</tr> <!-- Закрываем строку. -->

<tr> <!-- Снова открываем строку. На этот раз последнюю в этой колонке. -->
<td width="98%" height="80" align="left" valign="top"><span class="style23">Рыбные места:</span><br />
<span class="style4"><a href="/Fish.html">Приходим, встаем, ловим. Готовим и отдыхаем!</a>Наш Капитан покажет, как ловят <br />на Сайме.</span></td>
</tr>
</table> <!-- Всё закрыли: ячейку, строку и таблицу. Идём дальше. -->

<table width="18%" height="37" border="0" align="right" cellpadding="0" cell-spacing="0"> <!-- Открываем новую табличку из одной строки и одной ячейки для размещения там картиночки со штурвалом. Она красиво даёт понять, что текст статьи или страницы кончился. Это распространённый, приём, удобен для читателя. -->

<tr> <!-- Открываем новую строку. -->
<td width="100%" height="36" align="center" valign="top" back-ground="images/Shturval.jpg"></td> <!-- Открываем ячейку, ставим туда фоновый рисунок - штурвал. -->
</tr>
</table> <!-- Опять всё закрыли. -->
</td> <!-- Закрыли ячейку большой таблицы. -->
</tr> <!-- Закрыли строку большой таблицы. -->

Назад