Здравствуйте, уважаемые читатели, ранее, когда мы начали изучать html основы я показал вам, как с 0 создать html сайт, страничку. Так вот, сегодня мы с вами перейдем на следующий уровень и вновь создадим страничку для публикации в интернете, но! На этот раз, при создании html странички в качестве каркаса, мы будем использовать таблицу, про которую я писал вам в предыдущем уроке, и так, хватит теории, пришло время перейти к практике. Первым делом создаем на рабочем столе новую папку, называем ее к примеру «проект№2», далее создаем в ней новый текстовый документ. Пример на рисунки ниже.
Следующий шаг происходит точно так же, как и в самом первом уроке по созданию странички. А именно, открываем текстовый документ, вставляем в него html код, который я опубликовал для вас строчкой ниже, а затем сохраняем его как index.html
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>После всего вышеперечисленного, первым делом пропишем в title название странички и добавим теги, при помощи которых высь будущий контент будет располагаться по центру.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center></center>
</body>
</html>Теперь предлагаю вспомнить предыдущий урок, с html таблицами и дописать к своей страничке таблицу, но с некими изменениями. Пример ниже.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</center>
</body>
</html>Обратите внимание на первую строку нашей таблицы, в ней появился новый параметр «colspan 2». По факту, он говорит компьютеру, что ширина данной строки будет равняться двум ячейкам второй строки. Теперь нам с вами нужно задать необходимую ширину и высоту нашей таблицы. Для этого, как и в предыдущем уроке к коду таблицы я допишу теги, которые отвечают за размеры. И вот еще что. Для того, чтобы вы, более-менее, поняли структуру таблицы, я разметил ее зеленым цветом. Пример ниже.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table width="800" height="700">
<tr>
<td colspan="2">Тут будет шапка для страницы</td>
</tr>
<tr>
<td colspan="2">Тут будет горизонтальное меню</td>
</tr>
<tr>
<td>Место для меню</td>
<td>Место для контента</td>
</tr>
</table>
</center>
</body>
</html>Собственно, после всего вышеперечисленного, ваша страничка должна быть такой.
Теперь создайте в папке «проект 2» новую папку и назовите ее images, затем сохраните в нее все изображения, которые я опубликовал для вас строчкой ниже. Первое изображение мы будем использовать в качестве шапки! Следует учесть, что в дальнейшем, когда мы перейдем к более продвинутым урокам, я научу вас рисовать с полного нуля такие вот картинки, это не сложно, главное желание.
Второе изображение мы будем использовать в горизонтальном меню.
Третье изображение мы добавим в левую колонку нашей странички.
И так, в предыдущих уроках я вам показывал, как добавлять картинки с помощью html. Так вот, предлагаю сейчас вспомнить данный урок и разместить картинку в первую ячейку вашей таблицы, за место текста «тут будет шапка сайта». За одно зададим данной ячейке необходимые размеры. Пример кода чуть ниже.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table width="800" height="700">
<tr>
<td colspan="2" width="800" height="200"><img src="images/33.jpg" border="0"></td>
</tr>
<tr>
<td colspan="2">Тут будет горизонтальное меню</td>
</tr>
<tr>
<td>Место для меню</td>
<td>Место для контента</td>
</tr>
</table>
</center>
</body>
</html>Теперь сохраните и посмотрите, что у вас получилось. Если вы все сделали правильно, то ваша страничка должна быть такой.
Сейчас, наша задача заключается в том, чтобы добавить фоновую картинку с горизонтальным меню во вторую строчку, но на этот раз мы должны сделать ее фоновой, если вы забыли как это делается, то освежите память и прочтите урок по созданию html таблиц еще раз, мы это уже проходили. Не забываем удалить текст «Тут будет горизонтальное меню». Пример ниже.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table width="800" height="700">
<tr>
<td colspan="2" width="800" height="200"><img src="images/33.jpg" border="0"></td>
</tr>
<tr>
<td colspan="2" width="800" height="40" background="images/34.jpg"></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" width="800" height="200"><img src="images/33.jpg" border="0"></td>
</tr>
<tr>
<td colspan="2" width="800" height="40" background="images/34.jpg"></td>
</tr>
<tr>
<td width="200" background="images/35.jpg">Место для меню</td>
<td>Место для контента</td>
</tr>
</table>
</center>
</body>
</html>После последних изменений ваша страничка должна быть такой.
Ребята, помните в предыдущем уроке, когда мы с вами учились создавать таблицы я показывал вам, как создавать таблицы внутри других таблиц? Так вот, давайте теперь добавим новую таблицу в строчку с горизонтальным меню. И вот еще что… Для того, чтобы не растягивать этот урок на целую поэму я сразу заполнил ячейки текстом, с которых вы в дальнейшем, при желание можете сделать ссылки на любые сайты.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table width="800" height="700">
<tr>
<td colspan="2" width="800" height="200"><img src="images/33.jpg" border="0"></td>
</tr>
<tr>
<td colspan="2" width="800" height="40" background="images/34.jpg">
<table>
<tr><td> </td><td> </td><td> </td><td>Главная </td><td>| </td><td>Страны </td><td>| </td><td> Отзывы</td><td>| </td><td>Контакты </td></tr>
</table>
</td>
</tr>
<tr>
<td width="200" background="images/35.jpg">Место для меню</td>
<td>Место для контента</td>
</tr>
</table>
</center>
</body>
</html>После последних изменений ваша страничка должна быть такой.
Коллеги, в заключении этого урока давайте внесем последние изменение и сделаем так, чтобы будущий контент публиковался не по центру странички, а как положено с верху, для этого внесем в наш код пару изменений. Пример ниже.
<html>
<head>
<title>Блог о путешествиях.</title>
</head>
<body>
<center>
<table width="800" height="700">
<tr>
<td colspan="2" width="800" height="200"><img src="images/33.jpg" border="0"></td>
</tr>
<tr>
<td colspan="2" width="800" height="40" background="images/34.jpg">
<table>
<tr><td> </td><td> </td><td> </td><td>Главная </td><td>| </td><td>Страны </td><td>| </td><td> Отзывы</td><td>| </td><td>Контакты </td></tr>
</table>
</td>
</tr>
<tr>
<td width="200" background="images/35.jpg" valign="top">Место для меню</td>
<td valign="top">Место для контента</td>
</tr>
</table>
</center>
</body>
</html>Друзья, теперь ваша страничка должна быть такой!
На этом, данный урок закончен. В следующем уроке я расскажу и само собой покажу вам, как опубликовать в интернете вашу первую страничку, и это еще не все. После этого, вы с высоко поднятой головой, сможете показать всем своим друзьям и знакомым свою первую страничку, которая будет доступна в любое время дня и ночи. А затем, мы с вами создадим вот такой вот сайт с полного нуля. И самое главное.