Привет всем. Сегодня речь пойдет о том, как прейти от одиночных страничек к полноценному сайту. В предыдущих статьях я рассказал вам, из чего состоит web-страничка и как её создать. Но одна html страница, подпадает под поговорку «один в поле не воин», поэтому, чтобы создать полноценный сайт, нам нужно, по крайней мере, несколько страниц с различной информацией.
Для того чтобы из некоторого количества html-страниц получить сайт, нам нужно их связать между собой. Для этого нам пригодится тег <a>, кто читал мои статьи, и справочник по тегам уже догадался, что это тег гиперссылки. Элемент, который будет выполнять функцию связующего звена — это меню. Меню сайта представляет собой набор навигационных ссылок, которые присутствуют на каждой web-странице сайта. Давайте рассмотрим в качестве примера сайт визитку. Сайт будет состоять из следующих страниц: главная, чем занимаюсь, о себе, контакты.
Вот небольшая схемка:
Теперь, когда все наглядно, я объясню что к чему. «Главная» страница сайта представлена файлом index.html. У главной страницы сайта всегда должно быть такое имя, и не иначе, потому, что браузер первым делом открывает её. Остальные страницы мы называем по смысловому содержанию. Их вы можете называть как угодно, только латинскими символами, и не забываем расширение «.html». Каждая страница сайта на html имеет свой собственный код, поэтому, если на всех страницах сайта будет одинаковая шапка и меню, то код этих элементов мы должны скопировать в каждую страницу. Дальше, когда все повторяющиеся элементы страниц мы скопировали, переходим к наполнению страниц информацией.
Важно, чтобы все файлы сайта находились в одной директории. Желательно, чтобы директория имела название вашего сайта.
Код.
Когда мы разобрались, как выглядит карта сайта, перейдем к коду главной страницы (index.html).
&amp;amp;amp;amp;amp;amp;amp;amp;lt;!DOCTYPE html PUBLIC &amp;amp;amp;amp;amp;amp;amp;amp;quot;-//W3C//DTD XHTML 1.0 Transitional//EN&amp;amp;amp;amp;amp;amp;amp;amp;quot; &amp;amp;amp;amp;amp;amp;amp;amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;html xmlns=&amp;amp;amp;amp;amp;amp;amp;amp;quot;http://www.w3.org/1999/xhtml&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;meta http-equiv=&amp;amp;amp;amp;amp;amp;amp;amp;quot;Content-Type&amp;amp;amp;amp;amp;amp;amp;amp;quot; content=&amp;amp;amp;amp;amp;amp;amp;amp;quot;text/html; charset=utf-8&amp;amp;amp;amp;amp;amp;amp;amp;quot; /&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;title&amp;amp;amp;amp;amp;amp;amp;amp;gt;Главная страница&amp;amp;amp;amp;amp;amp;amp;amp;lt;/title&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/head&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;body bgcolor=&amp;amp;amp;amp;amp;amp;amp;amp;quot;#FFFFCC&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;h1 align=&amp;amp;amp;amp;amp;amp;amp;amp;quot;center&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Мой сайт визитка&amp;amp;amp;amp;amp;amp;amp;amp;lt;/h1&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;p align=&amp;amp;amp;amp;amp;amp;amp;amp;quot;center&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;index.html&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Главная&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;mywork.html&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Чем занимаюсь&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;info.html&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;Контакты&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;a href=&amp;amp;amp;amp;amp;amp;amp;amp;quot;about.html&amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;gt;О себе&amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;gt;Рад видеть вас на своем сайте визитке. Здесь вы найдете информацию о моих занятиях и немного обо мне.&amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/body&amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;lt;/html&amp;amp;amp;amp;amp;amp;amp;amp;gt;
Поясню пару моментов коде. Для фона страницы я использовал бледно желтый цвет, за это отвечает параметр тега <body> «bgcolor=»#FFFFCC»»,где аргумент в кавычках цвет в шестандцатиричной системе счисления.. А так же перед тем как помещать наше меню заключенное между тегами <P></P> нужно заполнить все ведущие к страницам ссылки, чтобы исключить ошибки при связывании.В итоге мы получили четыре связанные между собой страницы при помощи элемента меню. В каждую страницу мы поместили одинаковые по составу элементы, такие как: шапка сайта и меню.
_________________
Еще один интересный ресурс блогосферы: Реальный заработок в интернете для новичка.
Еще интересные записи:
Полезная статья
Спасибо. Буду стараться. (:
Прикольный сайт! Надеюсь теперь после этой информации мой сайт нормально проиндексируется, а то наверно ошибки у меня в перелинковке.