Шаблон сайта своими руками

Первая страница и шаблон, верстка и смысл тегов

Как вы наверное знаете интернет сайты состоят из страниц, которые являются обычными текстовыми файлами, где информация заключена в различные теги. Теги указывают браузеру как отображать тот или иной элемент. Эти страницы (текстовые файлы) могут быть с различным расширением, но самые распространенные расширения html и php. Html расширение указывает на то что страница содержит html теги, а php это тоже самое, но php скрипты выполняются не в браузере, а на стороне сервера, а браузеру выдается уже обработанная страница. Так же страницы бывают статистические и динамические.

Статистические это реальные файлы, которые лежат на сервере, а динамические страницы не существуют, а генерируются из различных кусочков при загрузке страницы в браузер. Пример динамически генерируемых страниц это Wordpress, в движке вы не найдете страниц с вашими статьями, так как они генерируются по запросу, а текст вообще находится на отдельном сервере БД. Но сейчас не об этом, просто сразу хочу сказать о двух видах существования страниц.

Пример кода обычной html страницы стандарта html5

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" media="all">
<meta name="description" content="Краткое описание содержания статьи, которое будет в выдаче поисковых систем яндекс, google и других, длинна описания обычно два небольших предложения">
<meta name="keywords" content="ключевые слова, метки, обычно два три слова, которые отражают содержание статьи">
<title>Заголовок страницы, который показывается в верхней части браузера</title>
</head>
<container>
<body>
<header>
<hgroup>
<h1><a href="/">Заголовок сайта</a></h1>
<h2>Краткое описание, подзаголовок сайта</h2>
</hgroup>
<nav>
<ul>
<li><a href="page1.php">раздел1</a></li>
<li><a href="page2.php">раздел2</a></li>
<li><a href="page3.php">раздел3</a></li>
<li><a href="page4.php">раздел4</a></li>
</ul>
</nav>
</div>
</header>
<aside class="saitbar">
боковая колонка, здесь можно размещать например ссылки на последние статьи, сделать фото-галерею, вставить рекламу и прочее. </aside>
<main>
<section>
<article class="tekstblok">
<h1>заголовок</h1>
Здесь размещается текст статьи, ниже для примера код для вставки в статью различных изображений. <figure>
<img src="images/1.jpg" alt="описание, что изображено на картинке, не видно пользователям" ></>
<figcaption>заголовок описание к изображению</figcaption>
</figure>
</main>
</article>
<footer>
Подвал сайта, здесь можно разместить информацию о статистике, дополнительный список разделов, или еще что. </footer>
</body>
</container>
</html>

Теперь разберем что означают все теги на странице и зачем они нужны

<!DOCTYPE html> сообщает браузеру что это документ html.

Между тегом <head> ...... </head> заключена служебная информация о странице, которая не видна пользователям.

<head>
<meta charset="utf-8">
<link href="../sait-sistem/style.css" rel="stylesheet" media="all">
<meta name="description" content="Краткое описание содержания статьи, которое будет в выдаче поисковых систем яндекс, google и других, длинна описания обычно два небольших предложения">
<meta name="keywords" content="ключевые слова, метки, обычно два три слова, которые отражают содержание статьи">
<title>Заголовок страницы, который показывается в верхней части браузера</title>
</head>


Эта запись <meta charset="utf-8"> указывает что кодировка документа utf-8, так же у документа могут быть и другие кодировки, например windows-1251. Сейчас большинство сайтов использует кодировку страниц utf-8. Важно чтобы ваш текстовый редактор при сохранении сохранял файл в кодировке utf-8, если кодировки будут разные, то вместо слов на странице будут показываться иероглифы (крокозябры), которые никто не поймет.

Запись <link href="style.css" rel="stylesheet" media="all"> указывает что стили для отображения всех контейнеров находятся в stile.css. Этот файл можно поместить в той же папке что и сам сайт, или в отдельной папке, тогда путь до файла будет другой <link href="путь_до_папки/style.css" rel="stylesheet" media="all">


<meta name="description" content="......"> это краткое описание страницы в выдаче поисковых систем, которое видят люди, поэтому их нужно заинтересовать чтобы они перешли именно на ваш сайт.

<meta name="keywords" content="........."> ключевые слова, чтобы поисковые роботы знали по каким запросам показывать вашу страницу в поиске.

<title>......</title> здесь указывается заголовок страницы

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

Шапка сайта

Дальше идет уже видимая часть страницы, первый блок это шапка сайта,
которая заключена в <header>..........</header>

<container>
<body>
<header>
<hgroup>
<h1><a href="/">Заголовок сайта</a></h1>
<h2>Краткое описание, подзаголовок сайта</h2> </hgroup>
<nav>
<ul>
<li><a href="page1.php">раздел1</a></li>
<li><a href="page2.php">раздел2</a></li>
<li><a href="page3.php">раздел3</a></li>
<li><a href="page4.php">раздел4</a></li>
</ul>
</nav>
</div>
</header>


Между тегом <container> ......... </container> помещается все содержимое сайта от шапки до подвала, он нужен для того чтобы задать потом в таблице стилей CSS размер тела страницы (ширину), задать фон и прочую красоту.

Содержимое между тегом <body>.......</body> указывает что это содержание страницы

Тег <hgroup>........</hgroup> служит для группировки заголовков когда они отображают один и тот же смысл, поэтому два заголовка в шапке сайта заключены в этот тег.

<h1>......</h1> и <h2>.........</h2> указывают что это заголовки и их надо отображать крупным шрифтом, цвет и размер можно указать в файле stile.css. Так же на эти заголовки обращают внимание поисковые роботы.

Между тегом <nav>........ </nav> помещается навигация по сайту, он тоже указывает поисковым роботам что здесь ссылки на разделы и важные страницы, в общем навигация.

Теги <ul>.....</ul> и <li> ....</li> служат для группировки ссылок на разделы, навигации по сайту, им тоже задаются стили в таблице стилей stile.css

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

Основное содержимое страницы

Между тегом <main>........</main> размещается основное содержимое страницы, то есть сама статья

Запись <aside class="saitbar">, это тег <aside> которому в таблице стилей присвоен стиль .saitbar для отображения. Тег <aside> указывает поисковым роботам что его содержимое отдельное и не связано с основным содержимым страницы. В этом теге обычно располагают боковую колонку, где можно сделать блок "последние записи" или вставить рекламу, сделать фото-галерею и пр.

Тег <section>.... </section> секция для определенного содержимого, указывает что в нем заключено определенное содержимое, статья, новость, запись, пост, событие

В этот тег <article class="tekstblok"> служит для указания поисковым роботам что в нем лежит статья или запись в блоге, новость. Аналог тега <section> , но если тег <section> указывает секцию, то тег <article> указывает роботам что здесь статья и именно ее нужно индексировать не вмешивать другие элементы вокруг. Запись в теге class="tekstblok указывает что для article нужно применить стиль .tekstblok в таблице стилей stile.css

Теперь разберем вставку изображения в статью

Этот кусок кода служит для вставки картинок в статью. Тег <figure> указывает роботам что в нем лежит картинка или фото. <figure>
<img src="images/1.jpg" alt="описание, что изображено на картинке, не видно пользователям" ></>
<figcaption>заголовок описание к изображению видно пользователям</figcaption>
</figure>
Этот код служит для вставки самой картинки <img src="путь_до_картинки/1.jpg" alt="описание, что изображено на картинке, не видно пользователям" ></> Здесь указывается описание к картинке которое будет видно если у пользователя отключен показ картинок в браузере alt="......" >.

Тег </figcaption> должен быть внутри тега <figure>, в нем пишется заголовок картинки, который, как и запись в alt тоже учитывают поисковые роботы. Если все заполнено то шансы выше что именно ваше изображение по определенному запросу будет на первых местах в поиске яндекс и google по картинкам.

Дальше идет подвал сайта

Между тегом <footer>...... </footer> помещается содержимое подвала. Этот тег указывает поисковым роботам что это подвал и его содержимое не стоит учитывать при индексации содержимого страницы. Здесь обычно размещают счетчики посетителей, всякие другие коды, рекламу, и другую информацию, например об авторе сайта, правах, и дате создания.

Так же в этом контейнере <footer>, как и в других контейнерах можно создавать и свои контейнеры, которым в таблице стилей можно задать размер и положение, атрибуты и цвет текста. Можно например сделать 3-4 колонки для группировки информации в подвале, тут уже как вам удобно.

В общем о создании страницы.

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

Например если контейнеру <footer> задать стили в файле ctile.css
footer {width:890px; color: #fff; background-color: #0000FF;}
то он будет шириной width:890px; то есть 890 точек, цвет текста color: #fff; белый, а фон контейнера background-color: #0000FF; синий. Так же можно написать так, <footer class="podval">, тогда к footer применится класс подвал в таблице стилей, и начинается класс с точки .podval { в скобках стили, фон, ступы и прочее }.

Разделение страницы на отдельные файлы

Когда шаблон страницы готов, вы прописали все контейнеры, их содержимое, теперь можно брать, копировать страницу вставлять статьи, переименовывать и размножать страницы сайта. Но что делать если вы хотите изменить например пункт в меню, или написать новый раздел, изменить заголовок шапки сайта, вставить счетчик или рекламу. Неужели придется эти изменения делать во всех страницах, а если их станет 100-200 штук, то что, весь день сидеть и записывать новую информацию в каждую страницу и снова загружать на сервер. Нет!

Как вы заметили на страницах совершенно одинаковой будет шапка сайта, подвал, и боковая колонка. Именно в этих контейнерах информация часто изменяется и они одинаковые на всех страницах. Поэтому эти части кода можно вырезать и разместить в отдельных текстовых файлах, которые можно назвать header.txt, saitbar.txt, footer.txt. Вместо них нужно поставить php код, например для вставки подвала <? include ("footer.txt"); ?>, для шапки <? include ("header.txt"); ?>. Теперь код и записи из этих файлов будут вставляться в станицы, и изменяя что-то всего в одном файле изменения произойдут на всех страницах. Например разместив код счетчика в файле footer.txt код счетчика появится на всех страницах и нет нужды его вставлять в каждую страницу, так же и с рекламой, новыми блоками и колонками.

Получается очень удобно, на странице уникальная только статья и ключевые слова, а шапка, подвал, и боковая колонка на всех страницах одинаковые и собираются страницы по запросу в баузер пользователя, и он видит целую страницу. Этот код <? include ("фаил для вставки"); ?> работает на страницах с расширением php, но можно его заставить выполняться и на страницах с расширением html, для этого надо сереверу об этом указать. Запись делается в файле .htaccess, AddHandler application/x-httpd-php5 .html .htm , она сообщает серверу что нужно выполнять php скрипты на html страницах, этот фаил загружается в корневую папку сайта на сервере.

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

<!DOCTYPE html>
<head>
<? include ("header_cod.txt"); ?>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" media="all">
<meta name="description" content="Краткое описание">
<meta name="keywords" content="ключевые слова">
<title>Заголовок страницы</title>
</head>
<container>
<body>
<? include ("header.txt"); ?>
<? include ("saitbar.txt"); ?>
<aside class="saitbar">
боковая колонка, сдесь можно размещать например ссылки на послелдние статьи, сделать фотогалерею, вставить рекламу и прочее.
</aside>
<main>
<section>
<article class="tekstblok">
<h1>заголовок</h1>
Здесь размещается текст статьи, ниже для примера код для вставки в статью различных изображений. <figure>
<img src="images/1.jpg" alt="описание, что изображено на картинке, не видно пользователям" ></>
<figcaption>заголовок описание к изображению</figcaption>
</figure>
</main>
</article>
<? include ("footer.txt"); ?>
</container>
</body>
</html>

Теперь в странице вместо шапки, подвала, и боковой колонки php код <? include ("фаил для вставки"); ?> а сам код шапки, подвала, и боковой колонки теперь в отдельных файлах. Так же если вы заметили в самом верху страницы сразу после тега <head> расположена четвертая вставка, или первая, если считать с верха <? include ("header_cod.txt"); ?>. Часто между тегом <head>.....</head> нужно вставлять метатеги и скрипты для сайта, например метатег для подтверждения владения сайтом для яндекса и гугла. Вот чтобы не прописывать это на каждой странице это можно вставить просто поместив в фаил header_cod.txt, и код вставится во все страницы.

Получается так, создаете шаблонную страницу, в файле stile.css задаете стили отображпния контейнеров и текста. Потом все одинаковые части, которые будут часто изменяться, вырезаете в отдельные файлы. Далее создаете первые разделы, где будут ссылки на статьи, а на сами разделы делаете ссылки с шапки сайта и впринцепе все. Берете шаблон, переименовыааете, наппример novaya_straniza.php пишите статью в ней или вставляете уже написанную. Потом делаете в разделе ссылку на нее и краткое описание, примерно как у меня в разделах и процесс пошел. При небольшом знании "нарисовать" сайт можно за пару часов и далее уже писать статьи и публиковать на сервере. В следующей статье подробнее о структуре сайта, если планируется большой сайт из нескольких сотен страниц.

Этот домен продается здесь: telderi.ru, и еще много других