Создание двухстраничного сайта


Вот и пришло время для создания кое-чего посложнее. Готовы? Прекрасно. Сейчас мы будем создавать двухстаничный сайт. Ведь мы многое уже знаем, правда?

Для начала нужно придумать, каким мы хотим видеть наш сайт.



На рисунке мы видим шапку сайта, слева - меню, где находятся ссылки страниц, в центре у нас будет контент.

Думаю, пока все понятно? Поехали дальше…

Между тегами <title> и </title> вписываем название, которое мы придумали для нашей интернет-страницы.

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

</body>

</html>


Дальше мы располагаем содержимое сайта по центру. Для этого нам понадобятся теги <center> и </center>:

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

</center>


</body>

</html>


Следующий шаг – делаем каркас сайта. Для этого вспомним, что мы знаем о табличках

Выглядеть она будет такой:

ячейка 1

ячейка 2

ячейка 3



Ячейка 1 – наша шапка, ячейка 2 – меню, ячейка 3 – контент.

Код такой таблички выглядит следующим образом:

<table>

<tr> 

<td colspan="2"></td>

</tr>

<tr> 

<td></td>

<td></td>

</tr>

</table>


Добавим табличку в код интернет-страницы:

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table>

<tr> 

<td colspan="2"></td>

</tr>

<tr> 

<td></td>

<td></td>

</tr>

</table>


</center>

</body>

</html>


Заметили, что в коде нашей таблицы только ОДНА пара тегов <td> в первой строке. Но появился параметр colspan="2", он является размером ячейки. Получится, что ячейки 2 и 3 должны быть по ширине такими, как ячейка 1.
Дальше нужно задать параметры ширины и высоты нашей таблицы. Высота пусть будет 700, ширина – 800.

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table width="800" height="700">

<tr> 

<td colspan="2">Шапка</td>

</tr>

<tr> 

<td>Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


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

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99">Шапка</td>

</tr>

<tr> 

<td bgcolor="#CCCCCC">Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


Сохраняем плоды трудов под именем  index.html, для того что бы можно было увидеть все это в браузере.

И посмотрим, как она выглядит

Сохраняем файл под именем index.html. И теперь можно посмотреть в браузере, как это будет выглядеть.Почему именно index.html ?

Есть такое правило: главная страница сайта должна называться index.html или index.htm или index.php

А теперь займемся шапкой сайта.




Сохраняем ее под тем же именем, как в оригинале. Вставляем картинку для шапки на сайт. Если вы забыли, как это сделать, можно вспомнить тут.

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99"><img src="sitelogo.jpg" width="800" height="117">Шапка</td>

</tr>

<tr> 

<td bgcolor="#CCCCCC">Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


Ну а теперь установим точный размер ячейки с шапкой. Он должен быть таким же, как и размер шапки. В нашем случае это 800х117.

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117">Шапка</td>

</tr>

<tr> 

<td bgcolor="#CCCCCC">Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


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

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200">Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


Заливаем задний план любым фоном (можете моим), сохраняем его под его родным именем, туда, где уже хранятся остальные файлы для нашего сайта.



И добавляем его в код

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg">Меню</td>

<td>Контент</td>

</tr>

</table>

</center>

</body>

</html>


И смотрим, что получается

Вы заметили, что ширина меню кажется больше, чем 200 пикселей? Да, все верно, это такой глюк браузера. Чтобы было все правильно, надо начать писать текст в разделе «контент». Или же задать жесткую ширину ячейки для него, например width="600".

Давайте попробуем:

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg">Меню</td>

<td> Если вы попали сюда, то, скорее всего, вы ищете полезную информацию. И это неудивительно, ведь с каждым днем людей, интересующихся заработком в интернете, становится все больше.</td>

</tr>

</table>

</center>

</body>

</html>


Теперь наш сайт стал выглядеть еще лучше

Можно навести красоту: добавим в тег <td>, который отвечает за контент и меню сайта, еще один параметр, а именно valign="top".

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg" valign="top">Меню</td>

<td valign="top"> Если вы попали сюда, то, скорее всего, вы ищете полезную информацию. И это неудивительно, ведь с каждым днем людей, интересующихся заработком в интернете, становится все больше.</td>

</tr>

</table>

</center>

</body>

</html>


Красота теперь должна выглядеть так

И наконец-то заканчиваем меню.Сделаем наш сайт 2х-страничным. Придумаем, что  пункты нашего меню будут называтся Главная и Ссылки.

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg" valign="top">Главная<br><br> Ссылки</td>

<td valign="top"> Если вы попали сюда, то, скорее всего, вы ищете полезную информацию. И это неудивительно, ведь с каждым днем людей, интересующихся заработком в интернете, становится все больше.</td>

</tr>

</table>

</center>

</body>

</html>


Посмотреть на результат здесь

Теперь поработаем над ссылками на будущие страницы нашего сайта. Страничку Главная сделаем ссылкой с именем index.html, а страничку со сслыками - silki.html. Где же нам ее взять? У нас золотые руки, сами сделаем!

<html>

<head>

<title>Заработок в интернете. Ссылки на сайты о заработке в интернете.</title>

</head>

<body>

<center>

<table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg" valign="top"><a href="index.html">Главная</a><br><br>

<a href="silki.html">Ссылки</a>

</td>

<td valign="top"> Если вы попали сюда, то, скорее всего, вы ищете полезную информацию. И это неудивительно, ведь с каждым днем людей, интересующихся заработком в интернете, становится все больше.</td>

</tr>

</table>

</center>

</body>

</html>


И теперь все хорошенько рассмотрим

Переходим к созданию второй страницы сайта - silki.html. Можно начать все сначала, но есть вариант проще. Давайте просто сохраним нашу страницу index.html под другим именем - silki.html, ну а потом отредактируем его. В меню Блокнота выбираем Файл > Сохранить как… , и сохраняем туда же, где находятся все файлы для нашего сайта.

И теперь все просто - открываем silki.html, и начинаем редактировать:

<html>

<head>

<title>Ссылки на сайт о заработке в интернете.</title>

</head>

<body>

<center>

 <table width="800" height="700">

<tr> 

<td colspan="2" bgcolor="#00CC99" width="800" height="117"><img src="sitelogo.jpg" width="800" height="117"></td>

</tr>

<tr> 

<td bgcolor="#CCCCCC" width="200" background="images.jpg" valign="top"><a href="index.html">Главная</a><br><br>

<a href="silki.html">Ссылки</a>

</td>

<td valign="top"> Здесь у нас будут ссылки на сайты о заработке в интернете<br><br>

<a href="http://readymoney.ru"> Заработок в интернете Readymoney.ru</a>


</td>

</tr>

</table>

</center>

</body>

</html>




Сохраняем… И смотрим, что у нас получилось

УРА!!! Вот мы и сделали простой двухстраничный сайтик.



Мы немного отклонились от темы сайта, если хотите почитать о заработке в интернете милости прошу.

Если понравилась статья, буду признателен, если воспользуетесь кнопочками:



Подписаться на новости





Яндекс.Метрика