Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

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

Автор: Андрей Краснокутский

Дата: 2009-02-05

Создаём модель многостраничного сайта

Как Вы помните в прошлом уроке мы остановились на создании исходного кода вложенных таблиц нашей web-странички. Сегодня мы закончим написание кода, придадим web-страничке завершенный вид и растиражируем эту страницу. В результате к концу урока мы получим простой, но полноценный и работоспособный 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-код страницы.

Как создаются ссылки Вы уже знаете. А вот другие web-страницы сайта создаются очень просто. Берем нашу индексную страницу файл: index.html (Листинг 11.2), копируем данный файл и сохраняем под другими именами, обязательно с расширением .html.

Так как наш сайт посвящен автомобилям, создадим еще несколько страниц посвященных автомобилям других марок. Я например создал странички: bmw.html, audi.html, toyota.html, reno.html.

Естественно содержание каждой страницы должно быть свое и соответствовать ссылке т.е. на странице audi.html должно располагаться информация об автомобилях Ауди и т.д.

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

Теперь осталось все созданные web-страницы связать ссылками. Вот собственно и все, можно сказать ваш web-сайт готов.

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

Согласитесь, на самом деле все очень просто!!! Конечно это самый простой и по сегодняшним меркам примитивный web-сайт. Например без использования каскадных таблиц стилей CSS очень трудно придать сайту красивый дизайн. А без использования PHP невозможно сделать динамичный сайт. На современных web-сайтах еще много других технических хитростей и различных технологий. Информацию об этих технологиях Вы найдете в других разделах.

Но зато Вы уже научились создавать настоящую, работоспособную модель web-сайта. И если всё, что мы наработали загрузить в Интернет, то у вас будет свой собственный сайт.

Если у Вас возникли вопросы или Вам что-то не понятно Вы всегда можете написать мне и задать интересующий Вас вопрос.

Всего Вам доброго.

Обновлено: 09.10.2014 г.

 

Читайте также:

Скачать бесплатно CCleaner 2.16.830

Чем клиентские языки веб-программирования отличаются от серверных.

Как настроить автозапуск CD, DVD, USB дисков на компьютере.

Что такое DNS сервера и для чего они нужны?

Электронная платежная система: WebMoney. Практическое руководство.

 

Просмотров: 10767


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Алик
Дата: 2009-12-16

А как сделать дальше чтоб разместить страницу в сети???

Комментарии добавил(а): Андрей_К
Дата: 2009-12-16

Дальше купить домен и хостинг и закачать в Интернет. Подпишитесь на рассылку и следите за новостями. Готовится полный подробный пошаговый курс Сайт от А до Я. Скоро курс появится на сайте

Комментарии добавил(а): Oleg
Дата: 2010-02-11

Как понять тег (valign="top")в этой строке (<td width="180" valign="top" background="bmw.php" bgcolor="#f6f6f6">)? И правильна ли запись тега (bordercolor="green") в строке (<table align="center" border="3" width="780px" bordercolor="green" bgcolor="#ffffff">), а то я меняю цвета (например "red" но на html странице ничего не меняется?

Комментарии добавил(а): Oleg
Дата: 2010-02-11

Как понять тег (valign="top")в этой строке (<td width="180" valign="top" background="bmw.php" bgcolor="#f6f6f6">)? И правильна ли запись тега (bordercolor="green") в строке (<table align="center" border="3" width="780px" bordercolor="green" bgcolor="#ffffff">), а то я меняю цвета (например "red" но на html странице ничего не меняется?

Комментарии добавил(а): Андрей_К
Дата: 2010-02-11

Всё верно. Здесь: valign="top" - это выравнивание по вертикали (текст прижимается к верху). bordercolor="green" - цвет рамки вокруг таблицы. bgcolor="#ffffff" - цвет фона.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT