Пример создания сайта. Итак. Пришло время создать нечто более сложное, чем мы делали до этого, но используя полученные знания в предыдущих уроках.
В этом заключительном уроке курса мы сделаем 2х страничный сайт...например о заработке в интернете.
Сначала определимся как это будет приблизительно выглядеть.
Вверху сайта мы сделаем "шапку сайта". Слева будет меню сайта с ссылками на другие страницы сайта, остальное место будет занимать контент (содержимое ) сайта.
Идея понятна ? Приступаем.
Запускаем Блокнот и пишем наш минимальный набор для создания
страницы.
<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
Теперь напишем между тегами <title> </title> название нашей страницы,
например вот так
<html>
<head>
<title>Сайт о заработке в интернете. Информация
и ссылки на сайты о заработке в интернете</title>
</head>
<body>
</body>
</html>
Далее разместим теги <center> и </center>, чтобы все содержимое
нашего сайта было размещено по центру страницы.
Если вы не забыли, теги <center> и </center> надо разместить между
<body> и </body>, т.е. вот так
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
</center>
</body>
</html>
Для создания каркаса страницы мы будем использовать таблицу, но чуть более
хитрую чем мы проходили в HTML-уроке о таблицах. Нам нужна
таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет 2
ячейки, т.е. вот такая нам нужна таблица :
ячейка 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>
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара
тегов <td> в первой строке таблицы, а не два, как при построении таблицы
2х2. Но зато появился параметр colspan="2". Этот параметр как бы говорит,
какого размера должна быть ячейка. В данном случае ячейка должна быть шириной
в 2 ячейки.
Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из
рассчета что кто-то из посетителей сайта может использовать монитор 800х600
точек, и просматривать более широкий сайт ему будет не комфортно.
Высоту таблицы сделаем 600 пикселей
Т.е. код нашей страницы теперь будет вот такой.
<html>
<head>
<title>Сайт о заработке в интернете. Информация и ссылки на сайты о заработке
в интернете</title>
</head>
<body>
<center>
<table width="750"
height="600">
<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="750" height="600">
<tr>
<td colspan="2" bgcolor="#00CC99">Здесь
у нас будет шапка</td>
</tr>
<tr>
<td bgcolor="#CCCCCC">
Здесь будет меню</td>
<td> Здесь будет содержимое страницы </td>
</tr>
</table>
</center>
</body>
</html>
Сохраните файл под именем index.html , для того чтобы его можно было
просмотреть как он будет выглядеть в браузере.
Администрация
