Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Завершам создание Web-страницы.

Viktor | 24.02.2014 | нет комментариев

Как Вы помните в прошлом уроке мы остановились с Вами на создании предварительного кода нашей web-странички, а именно на вложенных таблицах. Сегодня мы закончим написание кода, придадим страничке завершенный вид и …. растиражируем эту страницу. В результате к концу урока мы получим простой, полноценный сайт построенный написанный на языке HTML.

Итак в прошлом уроке мы остановились вот на этом коде:

Листинг 11.1.

<table align=”center” border=”3″  width=”780″ bordercolor=”green” bgcolor=”#ffffff”>
<tr>
<td>Шапка сайта</td>
</tr>
      <tr>
            <td>

<table align=”center” border=”1″  width=”780″  bgcolor=”#ffffff”>
<tr>
          <td width=”180″>меню</td>
          <td>Основное содержание страницы</td>
</tr>
</table>

            </td>
      </tr>
<tr>
<td>Нижний графический блок</td>
</tr>
</table>

Чего здесь не хватает???? Правильно, служебных тегов говорящих браузеру о том, что это HTML документ (вспоминайте первые уроки). Добавляем эти теги и получаем листинг 11.2:

Листинг 11.2.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1251″>
<title>Автомобили со всего мира</title>
<meta name=”keywords” content=”автомобили, легковые, гараж, автопутешествия, гараж “>
<meta name=”description” content=”все что вы хотите знать про современные автомобили”>
</head>

<body bgcolor=”#FFDEAD”

<table align=”center” border=”3″  width=”780″ bordercolor=”green” bgcolor=”#ffffff”>
<tr>
<td>Шапка сайта</td>
</tr>
      <tr>
<td>

<table align=”center” border=”1″  width=”780″  bgcolor=”#ffffff”>
<tr>
          <td width=”180″ bgcolor=”#f6f6f6″>меню</td>
          <td>Основное содержание страницы</td>
</tr>
</table>

            </td>
</tr>
<tr>
<td>Нижний графический блок</td>
</tr>
</table>

</body>
</html>

Теперь в ячейки выделенные жирным цветом вставляем предварительно подготовленные картинки (шапку сайта и нижний графический блок). Если Вы не помните, как вставляются рисунки в HTML-код просмотрите еще раз урок по вставке изображений. В ячейку “Основное содержание страницы” вставляем все что мы наработали ранее. То что у нас получилось можно увидеть здесь.

Теперь несколько слов о разделе меню. Обычно раздел меню представляет собой блок ссылок на другие разделы или страницы сайта. Следовательно эти разделы (страницы) должны быть в наличии. Что бы отделить блок меню от основного содержания страницы предадим этому столбцу светло серый цвет bgcolor=”#f6f6f6″. Если Вам что-то не понятно напоминаю, что в браузере IE открываем: вкладку Вид > просмотр HTML кода и смотрим исходный HTML-код страницы.

Как создаются ссылки Вы уже знаете. А вот другие страницы сайта создаются очень просто. Берем нашу индексную страницу (Листинг 11.2) и просто копируем, естественно сохраняя эти страницы под другими именами, обязательно с расширением .html . Так как наш сайт посвящен автомобилям, создадим еще несколько страниц посвященных автомобилям других марок. Я например создал странички: bmw.html , audi.html , toyota.html , reno.html . Естественно содержание каждой страницы должно быть свое и соответсвовать ссылке т.е. на странице audi.html должно располагаться информация об автомобилях Ауди и т.д.

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

Поздравляю, теперь Вы знаете как создаются простые сайты на языке HTML и у Вас есть исходный код сайта. Доработав этот код под свои нужды Вы можете разместить его в сети Интернет и развивать например свой бизнес на качественно новом уровне. Или просто создать сайт по своим интересам и т.д. вариантов очень много все зависит только от Вашей фантазии. Главное Вы теперь знаете принцип: как самому построить сайт ведь все сайты строяться именно таким образом. Согласитесь это очень просто!!!

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

Если у Вас возникли вопросы или Вам что-то не понятно в разделе “О нас” Вы найдете адрес электронной почты, пишите и спрашивайте, обязательно отвечу.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB