Home О нас Самоучитель иврита Путеводитель по Израилю Фотопутешествия Города Израиля Телефонный справочник Еврейские имена Еврейские праздники Ивритская поэзия
Как построить сайт
Учебник HTML и Photoshop. Построение блога на WordPress. Построение портала на Drupal.




HTML
Photoshop
WordPress
Drupal

Учебник HTML и Photoshop



Предыдущая глава


Строим таблицу для Лены



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

Допустим, мы хотим разместить слева картинку, справа - имя, а внизу - текст. Нам понадобится для этого таблица с двумя строчками, в верхней из которых будет два столбца, а в нижней один. Код будет выглядеть следующим образом:

<table>
<tr>
<td>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
</td>
<td>
<b>Лена Петрова</b>
</td>
</tr>
<tr>
<td>
Я рада, что вы ко мне зашли!!
<p>
<i>Добро пожаловать!</i>
</td>
</tr>
</table>

Первая проблема, которая сразу же бросается в глаза: если мы просто вставим этот код после тега <body>, то все содержимое нашей страницы примостится в левом верхнем углу экрана. Решений здесь несколько, и, раз уж мы сейчас изучаем таблицы, то воспользуемся тем из них, которое еще раз продемонстрирует нам широкие возможности использования в коде табличных тегов. То есть, решим проблему при помощи таблицы: поместим в новую таблицу все содержимое страницы целиком, а саму эту "глобальную" таблицу поставим при помощи тегов <center>....</center> в середину страницы. «Глобальная» таблица будет состоять из одного ряда с одним столбцом в нем.

Если мы хотим, чтобы содержимое страницы не "упиралось" в самый верх экрана, то мы еще добавим сверху пару тегов <br>.

Весь наш код целиком примет следующий вид:

<html>
<head>
</head>
<body bgcolor=yellow>

<br><br>

<center>

<table>
<tr>
<td>

<table>
<tr>
<td>
<img src="lena.jpg" alt="Лена Петрова" width=300 height=200 border=0>
</td>
<td>
<b>Лена Петрова</b>
</td>
</tr>
<tr>
<td>
Я рада, что вы ко мне зашли!!
<p>
<i>Добро пожаловать!</i>
</td>
</tr>
</table>

</td>
</tr>
</table>

</center>

</body>
</html>

И вот что получается:

Пока не очень красиво. Но мы же пока что не использовали параметры для таблицы!



Следующая глава






О чем здесь можно узнать: УЧЕБНИК HTML И PHOTOSHOP

ПОСТРОЕНИЕ БЛОГА НА WORDPRESS
ПОСТРОЕНИЕ ПОРТАЛА НА DRUPAL








© Netzah.org.
Разрешается свободное цитирование материалов сайта
при условии указания активной ссылки на эту страницу: http://textbook.netzah.org/