Создание WEB страницы

И так пробуем создать WEB страницу. Для начала пишем код страницы и таблицы с помощью которой мы делаем разметку этой страницы.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body> <table border="3" width="100%" align="center">
<tr>
<td colspan="3" align="center">1х1</td>
</tr>
<tr>
<td align="center">2х1</td>
<td rowspan="2" align="center">2х2</td>
<td align="center">2х3</td>
</tr>
<tr>
<td align="center">3х1</td>
<td align="center">3х3</td>
</tr>
<tr>
<td colspan="3" align="center">4х1</td>
</tr>
</table>
</body>
</html>
    посмотреть

Размер таблицы задан 100% относительно окна браузера width="100%".
Следующим шагом будет наполнение страницы содержимым, вставка вложенных таблиц, удаление рамок вокруг таблиц.

  <html>
<head>
<title>Моя первая страничка</title>
</head>
<body>
<h2><font color="#666666">Моя первая страничка</font></h2>
<table border="0" width="100%" align="center" cellpadding="5">
<tr>
<td colspan="3" align="center">
<table width="100%" border="0" bgcolor="#CCCC99">
<tr>
<td>меню 1</td>
<td>меню 2</td>
<td>меню 3</td>
<td>меню 4</td>
<td>меню 5</td>
</tr>
</table>

</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#CCCCFF">
<table border="0" width="160">
<tr>
<td background="Fon1.jpg">подменю 1</td>
</tr>
<tr>
<td background="Fon2.jpg">подменю 2</td>
</tr>
<tr>
<td background="Fon3.jpg">подменю 3</td>
</tr>
<tr>
<td>подменю 4</td>
</tr>
<tr>
<td>подменю 5 и т.д</td>
</tr>
</table>

</td>
<td rowspan="2">
<p align="Justify">
Едва утренний петербургский поезд, еще толком не вынырнув из клубов паровозного дыма, остановился у перрона Николаевского вокзала, едва кондукторы откинули лесенки и взяли под козырек, как из вагона первого класса на платформу спрыгнул молодой человек весьма примечательной наружности. Он словно сошел с картинки парижского журнала, воспевающего моды летнего сезона 1882 года: светло-песочный чесучовый костюм, широкополая шляпа итальянской соломки, остроносые туфли с белыми гамашами и серебряными кнопками, в руке - изящная тросточка с серебряным же набалдашником. Однако внимание привлекал не столько щегольской наряд пассажира, сколько импозантная, можно даже сказать, эффектная внешность. Молодой человек был высок, строен, широкоплеч, на мир смотрел ясными голубыми глазами, ему необычайно шли тонкие подкрученные усики, а черные, аккуратно причесанные волосы имели странную особенность - интригующе серебрились на висках.
</p>
<p align="Right">Борис АКУНИН</p>
<hr size="1" noshade color="#000000" width="350">
</td>
<td align="center" bgcolor="#CCCCFF">сюда можно поместить какие-нибудь новости
<br>
или рекламу</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCFF"><img src="1.jpg" width="180" height="135"></td>
<td align="center" bgcolor="#CCCCFF"><img src="2.jpg" width="180" height="135"></td>
</tr>
<tr>
<td colspan="3" align="center" bgcolor="#FFCCCC"><font color="#666666"> Здесь можно разместить контактную информацию, баннеры, счетчики и т.д</font></td>
</tr>
</table>
</body>
</html>
    посмотреть

Я не задавал высоту (height), так как нельзя задать стопроцентную высоту (во весь экран) для таблиц, это не предусмотрено спецификацией, так что, таблица сама растянется, по мере того как вы будете наполнять ее содержимым. И еще один не мало важный момент при создании таблиц, бывают случаи когда одну или несколько ячеек таблицы необходимо оставить пустой и конструкция типа <td></td> будет не верна. Дело в том, что пустые ячейки некоторые браузеры просто-напросто игнорируют, для корректного отображения вашей таблицы вставляйте в пустые ячейки вот такой знак &nbsp; (это спец символ неразрывного пробела) и тогда запись пустой ячейки будет выглядеть следующим образом <td>&nbsp;</td>


Вернуться назад Перейти к следующей странице

2009 - 2018г. andron09_73@mail.ru
  Самая актуальная информация гибдд 2017 билеты тут.