Создание динамического сайта и интерактивного приложения

Размещено на http://www.allbest.ru/

Оглавление

• Введение
• 1. Теоретическая часть
• 1.1 Введение в динамическое содержание Web - страниц
• 1.2 Включение PHP в HTML
• 1.3 Основные характеристики MySQL
• 1.4 Основы JS
• 2. Практическая часть

Заключение

Список используемой литературы

компьютерный сеть программа клиентский



Введение

Компьютерная сеть - объединение нескольких компьютеров для решения информационных и других задач.

Обычно сети классифицируются по географическому принципу.

Локальные сети - позволяет обмениваться информацией в ограниченных пределах.

Региональные сети - позволяют обмениваться информацией в определённом регионе.

Глобальные сети - охватывает всё пространство и позволяет обмениваться информацией в режиме реального времени.

World Wide Web - глобальная компьютерная сеть - на сегодняшний день содержит миллионы сайтов, на которых размещена всевозможная информация.

При предоставлении информации по глобальной сети возникает необходимость:

1. Обнаруживать ошибки при предоставлении информации.

2. Возможность устранение ошибки.

3. Учитывать, что приём и передача информации могут работать: под разными ОС, могут использоваться различными физическими устройствами, могут использовать различное ПО.

Основные задачи при формировании сети являются:

1. Согласование предоставления информации и данных.

2. Согласование ПО и физических устройств.

Люди получают доступ к этой информации посредством использования технологии Internet. Для навигации в WWW используются специальные программы - веб-браузеры, которые существенно облегчают путешествие по бескрайним просторам WWW. Вся информация в веб-браузере отображается в виде веб-страниц, которые являются основным элементом байтов WWW.

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



1. Теоретическая часть

1.1 Введение в динамическое содержание Web-страниц

Первая Всемирная паутина -- это непрерывно развивающаяся сеть, ушедшая далеко вперед от своей концепции ранних 1990-х, когда ее создание было обусловлено решением конкретных задач. Высокотехнологичные эксперименты в ЦЕРНе (Европейском центре физики высоких энергий, известном в наши дни в качестве обладателя большого адронного коллайдера) выдавали невероятно большой объем данных, который был слишком велик для распространения среди участвующих в экспериментах ученых, разбросанных по всему миру.

К тому времени Интернет уже существовал и к нему было подключено несколько сотен тысяч компьютеров, поэтому Тим Бернерс-Ли (специалист ЦЕРНа) придумал способ навигации между ними с использованием среды гиперссылок -- так называемого протокола передачи гиперссылок (Hyper Text Transfer Protocol (HTTP)). Он также создал специальный язык разметки, названный языком гипертекстовой разметки (Hyper Text Markup Language (HTML)). Для того чтобы собрать все это воедино, он создал первые браузер и веб-сервер, которые теперь воспринимаются нами как должное.

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

Но Бернерс-Ли изменил все это одним махом, и к середине 1990-х годов уже существовали три основных конкурирующих друг с другом графических браузера, пользовавшихся вниманием 5 млн посетителей. Но вскоре стало очевидно, что кое- что было упущено. Конечно, текстовые и графические страницы, имеющие гиперссылки для перехода на другие страницы, были блестящей концепцией, но результаты не отражали текущий потенциал компьютеров и Интернета по удовлетворению насущных потребностей пользователей в динамическом изменении контекста. Всемирная паутина оставляла весьма невыразительное впечатление, даже при наличии прокрутки текста и анимированных GIF-картинок.

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

1.2 Включение PHP в HTML

PHP - это язык обработки гипертекста (HTML), используемый на стороне сервера (server side scripting language), конструкции которого вставляются в HTML-текст. Его цель - позволить максимально быстро создавать динамически генерируемые web-страницы. PHP является открытым программным продуктом, что означает его бесплатность и возможность создавать свои собственные расширения языка.

PHP является самым молодым, перспективным и быстроразвивающимся из языков программирования для Интернет, доля его использования по сравнению с другими языками быстро растет.

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

Основные характеристики.

*совместимость с различными серверами и платформами;

*поддержка технологий COM, XML, Java, CORBA, WDDX, Macromedia Flash;

*поддержка взаимодействия с различными сервисами посредством соответствующих протоколов (LDAP, SNMP, IMAP, NNTP, POP3, HTTP и др.);

*развитая функциональность для работы с сетевыми соединениями;

*наличие функций для работы с текстовыми данными любых форматов, включая XML;

*поддержка свыше 20 баз данных, развитая функциональность для работы с ними;

*возможность создания полноценных объектно-ориентированных приложений;

*сравнительно простой синтаксис и удобство в практическом использовании;

*бесплатность;

*открытость кода, благодаря которой можно создавать собственные расширения языка.

Специальные теги позволяют переключаться между режимами HTML и PHP. Программа на РНР - это набор команд (инструкций). Обработчику программы необходимо как-то отличать одну команду от другой. Для этого используются специальные символы - разделители.

Использование PHP существенно упрощает встраивание средств, придающих веб-страницам динамические свойства. Когда страницам присваивается расширение PHP, у них появляется прямой доступ к языку сценариев. Разработчику нужно лишь написать код, похожий на этот:

<?php

echo "Today is ".date("1"). ".";

?>

Here`s the latest news.

Открывающий тег <?php дает веб-серверу разрешение на интерпретацию всего последующего кода вплоть до тега ?>. Все, что находится за пределами этой конструкции, отправляется клиенту в виде простого HTML. Поэтому текст Here's the latest news просто выводится в браузере. А внутри PHP-тегов встроенная функция date отображает текущий день недели, соответствующий системному времени сервера.

В итоге на выходе из этих двух частей получается примерно следующее: Today is Wednesday. Here's the latest news. PHP -- довольно гибкий язык, и некоторые разработчики предпочитают помещать PHP-конструкцию непосредственно рядом с кодом PHP, как в этом примере:

Today is <?php echo "Today is ".date("1"); ?>. Here's the latest news.

Переменная в PHP обозначается знаком доллара, за которым следует ее имя (например: $my_var). Имя переменной чувствительно к регистру, т.е. переменные $my_var и $My_var различны.

Имена переменных соответствуют тем же правилам, что и остальные наименования в PHP: правильное имя переменной должно начинаться с буквы или символа подчеркивания с последующими в любом количестве буквами, цифрами или символами подчеркивания.

В PHP переменные всегда присваивались по значению. То есть когда вы присваиваете выражение переменной, все значения оригинального выражения копируется в эту переменную. PHP, кроме этого, предлагает еще один способ присвоения значений переменным: присвоение по ссылке. Для того чтобы присвоить значение переменной по ссылке, это значение должно иметь имя, т.е. оно должно быть представлено какой-либо переменной. Чтобы указать, что значение одной переменной присваивается другой переменной по ссылке, нужно перед именем первой переменной поставить знак амперсанд &.

Для хранения постоянных величин, т.е. таких величин, значение которых не меняется в ходе выполнения скрипта, используются константы. Такими величинами могут быть математические константы, пароли, пути к файлам и т.п. Основное отличие константы от переменной состоит в том, что ей нельзя присвоить значение больше одного раза и ее значение нельзя аннулировать после ее объявления. Кроме того, у константы нет приставки в виде знака доллара и ее нельзя определить простым присваиванием значения. Для определения константы существует специальная функция define(). Ее синтаксис таков:

define("Имя_константы", "Значение_константы", [Нечувствительность_к_регистру])

По умолчанию имена констант чувствительны к регистру. Существует соглашение, по которому имена констант всегда пишутся в верхнем регистре. Получить значение константы можно, указав ее имя. В отличие от переменных, не нужно предварять имя константы символом $. Кроме того, для получения значения константы можно использовать функцию constant() с именем константы в качестве параметра.

Кроме переменных, объявляемых пользователем, в PHP существует ряд констант, определяемых самим интерпретатором. Например, константа FILE хранит имя файла программы (и путь к нему), которая выполняется в данный момент, FUNCTION содержит имя функции, CLASS - имя класса, PHP_VERSION - версия интерпретатора PHP.

Массивы в PHP - это упорядочное отображение, которое устанавливает соответствие между значением и ключом. Этот тип оптимизирован в нескольких направлениях, поэтому вы можете использовать его как собственно массив, список (вектор), хеш-таблицу (являющуюся реализацией карты), словарь, коллекцию, стек, очередь. Так как значением массива может быть любой другой массив PHP, можно так же создавать деревья и многомерные массивы. Пример простого массива:

<?php

$array = array(

"foo" => "bar",

"bar" => "foo",

);

?>

Дополнительно с ключом key будут сделаны следующие преобразования:

· Строки, содержащие целое число будут преобразованы к типу integer. Например, ключ со значением "8" будет в действительности сохранен со значением 8. С другой стороны, значение "08" не будет преобразовано, так как оно не является корректным десятичным целым.

· Числа с плавающей точкой (тип float) также будут преобразованы к типу integer, т.е. дробная часть будет отброшена. Например, ключ со значением 8.7 будет в действительности сохранен со значением 8.

· Тип bool также преобразовываются к типу integer. Например, ключ со значением true будет сохранен со значением 1 и ключ со значением false будет сохранен со значением 0.

· Тип null будет преобразован к пустой строке. Например, ключ со значением null будет в действительности сохранен со значением"".

· Массивы (тип array) и объекты (тип object) не могут использоваться в качестве ключей. При подобном использовании будет генерироваться предупреждение: Недопустимый тип смещения (Illegal offset type).

Если несколько элементов в объявлении массива используют одинаковый ключ, то только последний будет использоваться, а все другие будут перезаписаны.

Часто при написании программ возникает необходимость делать какие-либо комментарии к коду, которые никак не влияют на сам код, а только поясняют его. PHP поддерживает несколько видов комментариев: в стиле Cи, C++ и оболочки Unix. Символы // и # обозначают начало однострочных комментариев, /* и */ - соответственно начало и конец многострочных комментариев.

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

Используя PHP, вы получаете средство управления своим веб-сервером с неограниченными возможностями. Если понадобится на лету внести изменения в HTML, обработать данные кредитной карты, добавить сведения о пользователе в базу данных или извлечь информацию из стороннего сайта, все это можно будет сделать из тех же самых PHP-файлов, в которых находится и сам код HTML.

1.3 Основные характеристики MySQL

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

MySQL взаимодействует с базой данных на языке, называемом SQL (Structured Query Language -- язык структурированных запросов).

SQL предназначен для манипуляции данными, которые хранятся в Системах управления реляционными базами данных (RDBMS). SQLимеет команды, с помощью которых данные можно извлекать, сортировать, обновлять, удалять и добавлять. Стандарты языка SQLопределяет ANSI (American National Standards Institute). В настоящее время действует стандарт, принятый в 2003 году (SQL-3).

Консоль MySQL позволяет вводить как инструкции SQL, так и служебные команды MySQL, предназначеные для администрирования и использования таблиц в базах данных MySQL. К основным командам относятся SHOW, USE и CREATE.

SHOW

Эта команда предназначена для просмотра доступных баз данных и таблиц в конкретных базах данных. Для просмотра списка баз данных необходимо ввести такую команду: SHOW DATABASES;

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

CREATE

Эта команда позволяет создавать новые базы данных. Как было сказано выше, по умолчанию сервер создает две базы данных - mysql и test. Для удобства стоит создавать новую базу данных для каждой отдельной задачи, потому что легче работать с набором таблиц, которые связаны между собой (даже если эта связь только смысловая). Создадим новую базу данных при помощи этой команды:

CREATE DATABASE staff;

USE

Как уже было сказано выше, в один и тот же момент только одна база данных может быть активна. Команда USE служит для выбора этой активной базы. Для перехода к некоторой базе данных необходимо выполнить следующую операцию: USE staff;

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

Получение информации через БД происходит в несколько этапов.

§ Посетитель запрашивает веб-страницу, указывая в браузере ее адрес (URL).

§ Веб-сервер (Apache в нашем случае) определяет, что запрашивается PHP-файл и запускает его интерпретатор.

§ Скрипт PHP обращается к MySQL и запрашивает требуемую информацию.

§ База данных MySQL возвращает результат запроса обратно в программу PHP.

§ Скрипт анализирует полученную информацию и сохраняет ее в одной или нескольких переменных. Затем текст выводится с помощью функции echo.

§ Окончательно сформированный программой код HTML отправляется на веб-сервер, где он пересылается посетителю.

Подключение к существующей БД используется с помощью функции mysql_connect. Пример:

<?php

$dbhost = "localhost"; // Имя хоста БД

$dbusername = "root"; // Пользователь БД

$dbpass = ""; // Пароль к базе

$dbconnect = @mysql_connect ($dbhost, $dbusername, $dbpass);

if (!$dbconnect) { echo ("Не могу подключиться к серверу базы данных!"); }

?>.



1.4 Основы JS

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

Для объявления или, другими словами, создания переменной используется ключевое слово var:

var message;

После объявления, можно записать в переменную данные:

var message;

message = 'Hello'; // сохраним в переменной строку

Эти данные будут сохранены в соответствующей области памяти и в дальнейшем доступны при обращении по имени:

var message;

message = 'Hello!';

alert( message ); // выведет содержимое переменной

Для краткости можно совместить объявление переменной и запись данных:

var message = 'Hello!';

Можно даже объявить несколько переменных сразу:

var user = 'John', age = 25, message = 'Hello';

Проще всего понять переменную, если представить её как «коробку» для данных, с уникальным именем.

Можно объявить две переменные и копировать данные из одной в другую:

var hello = 'Hello world!';

var message;

// скопировали значение

message = hello;

alert( hello ); // Hello world!

alert( message ); // Hello world!

Please note:

На имя переменной в JavaScript наложены всего два ограничения.

1. Имя может состоять из: букв, цифр, символов $ и _

2. Первый символ не должен быть цифрой.

Например:

var myName;

var test123;

Что особенно интересно -- доллар '$' и знак подчеркивания '_' являются такими же обычными символами, как буквы:

var $ = 1; // объявили переменную с именем '$'

var _ = 2; // переменная с именем '_'

alert( $ + _ ); // 3

А такие переменные были бы неправильными:

· var 1a; // начало не может быть цифрой

· var my-name; // дефис '-' не является разрешенным символом

· Регистр букв имеет значение.

· Переменные apple и AppLE -- две разные переменные.

· Русские буквы допустимы, но не рекомендуются

В названии переменных можно использовать и русские буквы, например:

var имя = "Вася";

alert( имя ); // "Вася"

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

Существует список зарезервированных слов, которые нельзя использовать для переменных, так как они используются самим языком, например: var, class, return, export и др.

Например, такой пример выдаст синтаксическую ошибку:

var return = 5; // ошибка

alert(return);

Константа -- это переменная, которая никогда не меняется. Как правило, их называют большими буквами, через подчёркивание. Например:

var COLOR_RED = "#F00";

var COLOR_GREEN = "#0F0";

var COLOR_BLUE = "#00F";

var COLOR_ORANGE = "#FF7F00";

var color = COLOR_ORANGE;

alert( color ); // #FF7F00

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

Цикл while

Цикл while имеет вид:

while (условие) {

// код, тело цикла

}

Пока условие верно -- выполняется код из тела цикла.

Повторение цикла по-научному называется «итерация». Цикл в примере выше совершает три итерации. Если бы i++ в коде выше не было, то цикл выполнялся бы (в теории) вечно. На практике, браузер выведет сообщение о «зависшем» скрипте и посетитель его остановит.

Бесконечный цикл можно сделать и проще:

while (true) {

//...

}

Условие в скобках интерпретируется как логическое значение, поэтому вместо while (i!=0) обычно пишут while (i):

var i = 3;

while (i) { // при i, равном 0, значение в скобках будет false и цикл остановится

alert( i );

i--;

}

Цикл do..while

Проверку условия можно поставить под телом цикла, используя специальный синтаксис do..while:

do {

// тело цикла

} while (условие);

Цикл, описанный, таким образом, сначала выполняет тело, а затем проверяет условие.

Синтаксис do..while редко используется, т.к. обычный while нагляднее -- в нём не приходится искать глазами условие и ломать голову, почему оно проверяется именно в конце.

Цикл for

Чаще всего применяется цикл for. Выглядит он так:

for (начало; условие; шаг) {

//... тело цикла...

}

Пример цикла, который выполняет alert(i) для i от 0 до 2 включительно (до 3):

var i;

for (i = 0; i < 3; i++) {

alert( i );

}

Здесь:

· Начало: i=0.

· Условие: i<3.

· Шаг: i++.

· Тело: alert(i), т.е. код внутри фигурных скобок (они не обязательны, если только одна операция)

Цикл выполняется так:

1. Начало: i=0 выполняется один-единственный раз, при заходе в цикл.

2. Условие: i<3 проверяется перед каждой итерацией и при входе в цикл, если оно нарушено, то происходит выход.

3. Тело: alert(i).

4. Шаг: i++ выполняется после тела на каждой итерации, но перед проверкой условия.

5. Идти на шаг 2.

Иными словами, поток выполнения: начало > (если условие > тело > шаг) > (если условие > тело > шаг) > и так далее, пока верно условие.



2. Практическая часть

2.1 Программный код главной HTML - страницы

<!DOCTYPE html>

<html dir="ltr" lang="ru">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

Купить строительные материалы в Хабаровске | Стройматериалы по выгодной цене

</title>

<meta name="description" content="Купить стройматериалы в Хабаровске по отличной цене вам поможет наш сайт.">

<link rel="stylesheet" type="text/css" href="./css/stylesheet.css">

<link rel="stylesheet" type="text/css" href="./css/cloud-zoom.css">

<link rel="stylesheet" type="text/css" href="./css/prettyPhoto.css">

<link rel="stylesheet" type="text/css" href="./css/tip-twitter.css">

<link rel="stylesheet" type="text/css" href="./css/colorbox.css" media="screen">

<script async="" src="./css/analytics.js"></script>

<script type="text/javascript" async="" src="./css/watch.js"></script>

<script async="" type="text/javascript" src="./css/ca-pub-3812497516370708.js"></script>

<script type="text/javascript" src="./css/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="./css/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="./css/jquery-ui-1.8.16.custom.css">

<script type="text/javascript" src="./css/common.js"></script>

<script type="text/javascript" src="./css/cloud-zoom.1.0.2.js"></script>

<script type="text/javascript" src="./css/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="./css/jquery.poshytip.min.js"></script>

<script type="text/javascript" src="./css/tabs.js"></script>

<script type="text/javascript" src="./css/jquery.colorbox-min.js"></script>

<script type="text/javascript" src="./css/gototop.js"></script>

<link rel="stylesheet" type="text/css" href="./css/gototop.css">

</head>

<body>

<!-- Боковой бегунок-->

<div id="top-link" style="padding-bottom: 652px; padding-right: 134px; display: none;" class="">

<a href="Glavnaja.html//#top">Наверх</a>

</div>

<div id="top-bg">

<div id="container">

<div id="header">

<!-- Логотип компании -->

<div id="logo">

<a href="./Glavnaja.html">

<img src="./image/cooltext1555400441.png" title="Строительные материалы в Хабаровске" alt="Строительные материалы в Хабаровске"></a>

</div>

<!-- Переход на сайт города -->

<div id="sityselect">

<select onchange="location.href=this.value">

<option value="./Glavnaja.html">Ижевск</option>

<option value="./Glavnaja.html">Москва</option>

<option value="./Glavnaja.html">Санкт-Петербург</option>

<option value="./Glavnaja.html">Альметьевск</option>

<option value="./Glavnaja.html">Архангельск</option>

<option value="./Glavnaja.html">Астрахань</option>

<option value="./Glavnaja.html">Балаково</option>

<option value="./Glavnaja.html">Барнаул</option>

<option value="./Glavnaja.html">Белгород</option>

<option value="./Glavnaja.html">Бийск</option>

<option value="./Glavnaja.html">Благовещенск</option>

<option value="./Glavnaja.html">Брянск</option>

<option value="./Glavnaja.html">Великий&nbsp;Новгород</option>

<option value="./Glavnaja.html">Владивосток</option>

<option value="./Glavnaja.html">Владимир</option>

<option value="./Glavnaja.html">Волгоград</option>

<option value="./Glavnaja.html">Волгодонск</option>

<option value="./Glavnaja.html">Волжский</option>

<option value="./Glavnaja.html">Вологда</option>

<option value="./Glavnaja.html" selected="selected">Хабаровск</option>

</select>

</div>

<!-- Регистрация в ВК, Твитер, Фейсбук.-->

<div id="cart">

<img height="30px" src="./image/VKontakte.png"></a>

<img height="30px" src="./image/Twitter1.png"></a>

<img height="30px" src="./image/Facebook.png"></a>

</div>

</div>

<div id="menu">

<ul>

<li>

<a class="home" href="./Glavnaja.html"></a>

</li>

<!-- Меню пола-->

<li class="dropdown">

<a href="pol.html">Для пола</a>

<div class="dropdown-block" style="display: none;">

<ul>

<li class="dropdown-level">

<a href="./laminat.html">Ламинат (6)</a>

</li>

<li class="dropdown-level">

<a href="./linoleum.html">Линолеум (14)</a>

</li>

<li class="dropdown-level">

<a href="./parket.html">Паркет (12)</a>

</li>

</ul>

</div>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Кирпич</a>

</li>

<!-- Кровля-->

<li class="dropdown"><a href="./krovlya.html">Кровля</a>

<div class="dropdown-block" style="display: none;">

<ul>

<li class="dropdown-level">

<a href="./ondulin.html">Ондулин (2)</a>

</li>

</ul>

</div>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Отделочные материалы</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Пиломатериалы</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Сантехника</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Спецодежда</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Сыпучие материалы</a>

</li>

</ul>

</div>

<div class="clear"></div>

<div id="notification"></div>

<div id="wrapper">

<div id="content">

<div class="box">

<div><h2>Каталог стройматериалов</h2></div>

<div class="box-content">

<div class="box-product">

<div>

<div class="image">

<a href="pol.html">

<img src="./image/pol-110x110.jpg" title="Для пола" alt="Для пола"></a>

</div>

<div class="name"><a href="pol.html">Для пола</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/21745-110x110.jpeg" title="Кирпич" alt="Кирпич"></a>

</div>

<div class="name"><a href="Glavnaja.html">Кирпич</a></div>

</div>

<div>

<div class="image">

<a href="./krovlya.html">

<img src="./image/krovlya-110x110.png" title="Кровля" alt="Кровля"></a>

</div>

<div class="name"><a href="./krovlya.html">Кровля</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/otdelochnie-110x110.jpg" title="Отделочные материалы" alt="Отделочные материалы"></a></div>

<div class="name"><a href="Glavnaja.html">Отделочные материалы</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/pilomateriali-110x110.png" title="Пиломатериалы" alt="Пиломатериалы"></a></div>

<div class="name"><a href="Glavnaja.html">Пиломатериалы</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/santehnika-110x110.png" title="Сантехника" alt="Сантехника"></a>

</div>

<div class="name"><a href="Glavnaja.html">Сантехника</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/specodejda-110x110.jpg" title="Спецодежда" alt="Спецодежда"></a>

</div>

<div class="name"><a href="Glavnaja.html">Спецодежда</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/ddd83-110x110.png" title="Сыпучие материалы" alt="Сыпучие материалы"></a>

</div>

<div class="name"><a href="Glavnaja.html">Сыпучие материалы</a></div>

</div>

<div>

<div class="image">

<a href="Glavnaja.html">

<img src="./image/stroitelniecompanii-110x110.png" title="Компании" alt="Компании"></a>

</div>

<div class="name"><a href="Glavnaja.html">Компании</a></div>

</div>

</div>

</div>

</div>

<script async="" src="./css/adsbygoogle.js"></script>

<div class="box">

<div class="box-heading"><h1>Строительные материалы в Хабаровске</h1></div>

<div class="box-content">

<div class="box-welcome">

<div class="box-welcome">

<p>Купить стройматериалы в Хабаровске по отличной цене вам поможет наш сайт. «stro18» -- это крупнейший независимый рейтинг магазинов строительных материалов.</p>

<p>Строительство коттеджа, дачного дома, бани или гаража - это целый проект. Если вы сейчас что-то строите или планируете, обязательно столкнётесь с вопросами: где купить строительные материалы по выгодной цене, где заказать ворота, где нанять рабочих или в какую компанию обратиться, чтобы построили всё под ключ. Вопросов много, приходится изучать кучу информации: там сосед сказал, что дешевле, здесь коллега убеждает, что качественнее…</p>

<p>Не нужно тратить время на поиски по крупицам -- в нашем каталоге стройматериалов вы найдёте полную информацию о строительных организациях и сможете сделать правильный выбор. Каталог большой - представлен во всех городах и регионах России, для всех жителей РФ.</p>

<p>Если вы являетесь владельцем строительной фирмы и хотите разместить информацию о вашей компании на stro18, мы будем рады вам помочь более подробную информацию о размещении вы найдете на странице «Добавить компанию»</p>

<h2>6 причин почему с нами удобно:</h2>

<ol>

<li><span style="line-height: 1.6em;"><strong>Простой поиск по категориям и компаниям.</strong> Вы не потратите много времени и не потеряетесь на страницах нашего сайта, воспользовавшись кнопкой поиска.</span></li>

<li><strong>Достоверная информация.</strong> Пользователи сайта в режиме онлайн оценивают организации и магазины стройматериалов в Хабаровске, таким образом, вы можете узнать о качестве из первых рук и самостоятельно решить, куда обратиться.</li>

<li><span style="line-height: 1.6em;"><strong>Удобный функционал сайта.</strong> Пользователь имеет возможность быстрого просмотра карточки товара и просмотра увеличенного изображения. Кроме того, присутствует очень удобная система сравнения товаров. Для того чтобы сравнить несколько продуктов вам необходимо нажать на галочку рядом с изображением и перейти на страницу сравнения. Так вы сможете посмотреть все характеристики и выбрать наиболее подходящий товар.</span></li>

<li><span style="line-height: 1.6em;"><strong>Независимый рейтинг.&nbsp;</strong>Не знаете, где осуществляется продажа строительных материалов в Хабаровске по низкой цене? Где лучший сервис доставки и самые быстрые менеджеры? А мы знаем! Рейтинг строительных компаний пользователи формируют сами, оставляя отзывы и оценки. &nbsp;Вам легко будет выбрать, опираясь на него. Вы, кстати, тоже можете помочь другим определиться с выбором и оставить отзыв о той или иной фирме.</span></li>

<li><span style="line-height: 1.6em;"><strong>Дизайн.</strong> Лаконичный и не перегруженный дизайн сайта позволит вам изучать информацию, получая при этом массу удовольствия и не отвлекаться на другие факторы, а удобная навигация позволит быстро найти, интересующий вас товар.</span></li>

<li><span style="line-height: 1.6em;"><strong>Много полезного.</strong> Хотите узнать, отчего зависит стоимость строительных материалов или чем клинкерный кирпич отличается от обычного? Где производится продажа стройматериалов в Хабаровске по доступным ценам, или, какие компании продают клееный брус? Обо всём этом можно узнать на нашем сайте в соответствующем разделе.</span></li>

</ol>

В общем, если вам нужно купить строительные материалы, но вы не знаете, куда обратиться, не спешите заказывать в первой попавшейся компании, -- зайдите в каталог stro18, здесь представлены все строительные и отделочные материалы и цены на них в компаниях вашего города. Вы сами можете сравнить и принять решение!

Надеемся, что наш каталог поможет вам завершить строительство удачно!<br><br>

<p style="text-align: center;"><span style="font-size:11px;">Отзывы и предложения о работе сайта вы можете оставлять круглосуточно, пишите: POVT@4kurs.ru</span></p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

2.2 Программный код HTML - страницы «Pol.html»

<!DOCTYPE html>

<!-- Разметка с помощью микроданных, созданная Мастером разметки структурированных данных Google. -->

<html dir="ltr" lang="ru">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

Напольные покрытия в Хабаровске -- где купить напольные покрытия по выгодной цене

</title>

<base href = "Pol.html">

<meta name="description" content="Сегодня, многообразие покрытий для пола настолько велико, что вопрос: &quot;Какое напольное покрытие выбрать для дома?&quot; -- задают себе многие покупатели. Однозначно на этот вопрос ответить невозможно, нужно индивидуально подходить к выбору пола для ка" />

<link rel="stylesheet" type="text/css" href="./css_pol/stylesheet.css" />

<link rel="stylesheet" type="text/css" href="./css_pol/cloud-zoom.css" />

<link rel="stylesheet" type="text/css" href="./css_pol/prettyPhoto.css" />

<link rel="stylesheet" type="text/css" href="./css_pol/tip-twitter.css" />

<link rel="stylesheet" type="text/css" href="./css_pol/colorbox.css" media="screen" />

<script type="text/javascript" src="./css_pol/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="./css_pol/jquery-ui-1.8.16.custom.min.js"></script>

<link rel="stylesheet" type="text/css" href="./css_pol/jquery-ui-1.8.16.custom.css" />

<script type="text/javascript" src="./css_pol/common.js"></script>

<script type="text/javascript" src="./css_pol/cloud-zoom.1.0.2.js"></script>

<script type="text/javascript" src="./css_pol/jquery.prettyPhoto.js"></script>

<script type="text/javascript" src="./css_pol/jquery.poshytip.min.js"></script>

<script type="text/javascript" src="./css_pol/jquery.total-storage.min.js"></script>

<script type="text/javascript" src="./css_pol/tabs.js"></script>

<script type="text/javascript" src="./css_pol/jquery.colorbox-min.js"></script>

<script type="text/javascript" src="./css_pol/gototop.js"></script>

<link rel="stylesheet" type="text/css" href="./css_pol/gototop.css" />

</head>

<body>

<!-- Боковой бегунок-->

<div id="top-link" style="padding-bottom: 652px; padding-right: 134px; display: none;" class="">

<a href="Pol.html//#top">Наверх</a>

</div>

<div id="top-bg">

<div id="container">

<div id="header">

<!-- Логотип компании -->

<div id="logo">

<a href="./Glavnaja.html">

<img src="./image_pol/cooltext1555400441.png" title="Строительные материалы в Хабаровске" alt="Строительные материалы в Хабаровске"></a>

</div>

<!-- Переход на сайт города -->

<div id="sityselect">

<select onchange="location.href=this.value">

<option value="./Glavnaja.html">Ижевск</option>

<option value="./Glavnaja.html">Москва</option>

<option value="./Glavnaja.html">Санкт-Петербург</option>

<option value="./Glavnaja.html">Альметьевск</option>

<option value="./Glavnaja.html">Архангельск</option>

<option value="./Glavnaja.html">Астрахань</option>

<option value="./Glavnaja.html">Балаково</option>

<option value="./Glavnaja.html">Барнаул</option>

<option value="./Glavnaja.html">Белгород</option>

<option value="./Glavnaja.html">Бийск</option>

<option value="./Glavnaja.html">Благовещенск</option>

<option value="./Glavnaja.html">Брянск</option>

<option value="./Glavnaja.html">Великий&nbsp;Новгород</option>

<option value="./Glavnaja.html">Владивосток</option>

<option value="./Glavnaja.html">Владимир</option>

<option value="./Glavnaja.html">Волгоград</option>

<option value="./Glavnaja.html">Волгодонск</option>

<option value="./Glavnaja.html">Волжский</option>

<option value="./Glavnaja.html">Вологда</option>

<option value="./Glavnaja.html" selected="selected">Хабаровск</option>

</select>

</div>

<!-- Регистрация в ВК, Твитер, Фейсбук.-->

<div id="cart">

<img height="30px" src="./image/VKontakte.png"></a>

<img height="30px" src="./image/Twitter1.png"></a>

<img height="30px" src="./image/Facebook.png"></a>

</div>

</div>

<div id="menu">

<ul>

<li>

<a class="home" href="./Glavnaja.html"></a>

</li>

<!-- Меню пола-->

<li class="dropdown">

<a href="pol.html">Для пола</a>

<div class="dropdown-block" style="display: none;">

<ul>

<li class="dropdown-level">

<a href="./laminat.html">Ламинат (6)</a>

</li>

<li class="dropdown-level">

<a href="./linoleum.html">Линолеум (4)</a>

</li>

<li class="dropdown-level">

<a href="./parket.html">Паркет (3)</a>

</li>

</ul>

</div>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Кирпич</a>

</li>

<!-- Кровля-->

<li class="dropdown"><a href="./krovlya.html">Кровля</a>

<div class="dropdown-block" style="display: none;">

<ul>

<li class="dropdown-level">

<a href="./ondulin.html">Ондулин (2)</a>

</li>

</ul>

</div>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Отделочные материалы</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Пиломатериалы</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Сантехника</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Спецодежда</a>

</li>

<li class="dropdown">

<a href="Glavnaja.html">Сыпучие материалы</a>

</li>

</ul>

</div>

<div class="clear"></div>

<div id="notification"></div>

<div id="wrapper">

<div class="breadcrumb">

<a href="Glavnaja.html">Главная</a>

<a href="Pol.html">Для пола</a>

<a href="laminat.html">Ламинат</a>

</div>

<div id="column-left">

<div class="box">

<div class="box-heading">Категории</div>

<div class="box-content">

<ul class="box-category">

<li class="active">

<a href="Pol.html" class="active">Для пола (13)</a>

<a href="Pol.html" class="category-button"></a>

<ul>

<li><a href="./laminat.html">Ламинат (6)</a></li>

<li><a href="./linoleum.html">Линолеум (4)</a></li>

<li><a href="./parket.html">Паркет (3)</a></li>

</ul>

</li>

<li><a href="./Glavnaja.html">Кирпич (0)</a></li>

<li>

<a href="./krovlya.html">Кровля (2)</a>

<a href="./krovlya.html" class="category-button"></a>

<ul>

<li><a href="./ondulin.html">Ондулин (2)</a></li>

</ul>

</li>

<li><a href="Glavnaja.html">Отделочные материалы (0)</a></li>

<li><a href="Glavnaja.html">Пиломатериалы (0)</a></li>

<li><a href="Glavnaja.html">Сантехника (0)</a></li>

<li><a href="Glavnaja.html">Спецодежда (0)</a></li>

<li><a href="Glavnaja.html">Сыпучие материалы (0)</a></li>

<li><a href="Glavnaja.html">Компании (0)</a></li>

</ul>

</div>

</div>

</div>

</div>

<div id="content"> <h1>Напольные покрытия</h1>

<div class="main-content">

<br><br>

<div class="category-info">

<div class="image"><img src="./image_pol/pol-220x220.jpg" alt="Напольные покрытия" /></div>

<p>Сегодня, многообразие покрытий для пола настолько велико, что вопрос: "Какое напольное покрытие выбрать для дома?" --&nbsp;задают себе многие покупатели. Однозначно на этот вопрос ответить невозможно, нужно индивидуально подходить к выбору пола для каждого помещения.</p>

<p>Сначала нужно продумать какие полы будут в прихожей. В этом месте оседает много грязи и пыли, здесь проходит много людей за день и это помещение, в первую очередь, видят гости. Исходя из этого мы можем определить параметры: это покрытие должно быть презентабельным, долговечным и не требовать специального ухода. Можем предложить несколько вариантов: ламинат (особенно популярен 32 класс) или кафельная плитка.</p>

<p>Для кухни необходимо подобрать удароустойчивый и долговечный материал. Потому что, здесь&nbsp; довольно часто падают острые и железные предметы, проливается жидкость и капает жир. Это может повредить непрочный пол. Наиболее практичным вариантом будет линолеум или ламинат.</p>

<p>Для ванной комнаты рекомендуем теплые полы (водяные или электрические). В качестве покрытия может служить керамическая плитка или пробковый пол.</p>

<p>Гостиная является лицом вашего дома.&nbsp;Здесь необходима отделка на высшем уровне, поэтому предлагаем вам рассмотреть такие варианты напольного покрытия как штучный паркет или паркетная доска. Первый вариант очень красиво смотрится и имеет хорошее качество, однако второй гораздо дешевле. Так же не стоит забывать о ковре. Во все времена ковер ассоциировался с благополучием и уютом.</p>

<p>Чтобы напольное покрытие имело хороший и законченный вид, следует использовать напольный плинтус, который спрячет изъяны и&nbsp;недочеты укладки. Стыки помогут скрыть стыковочные пороги из металла или пластика. Они могут быть различных цветов и форм.</p>

</div>

<div class="box-category">

<div class="box-heading-subcategory">Подкатегории</div>

<div class="box-subcategory">

<div style="width: 202px;">

<div class="image">

<a href="./laminat.html"> <img src="./image_pol/laminat-200x200.jpg" alt="Ламинат (6)" /></a>

</div>

<div class="description-box">Купить ламинат в Хабаровске по доступной цене очень легко: достаточно обратиться к по адресу...</div>

<div class="name"><a href="./laminat.html">Ламинат (6)</a></div>

</div>

<div style="width: 202px;">

<div class="image">

<a href="./linoleum.html"><img src="./image_pol/linoleum-200x200.jpg" alt="Линолеум (14)" /></a>

</div>

<div class="description-box">Если вы хотите купить линолеум в Хабаровске по доступной цене, вам поможет линолиумный спезиалист в нашем офи...</div>

<div class="name"><a href="./linoleum.html">Линолеум (14)</a></div>

</div>

<div style="width: 202px;">

<div class="image">

<a href="./parket.html"><img src="./image_pol/parket-200x200.jpg" alt="Паркет (12)" /></a>

</div>

<div class="description-box">Купить паркет в Хабаровске по низким ценам вы можете у нас...</div>

<div class="name"><a href="./parket.html">Паркет (12)</a></div>

</div>

</div>

</div>

<div class="product-list">

<div>

<div class="image">

<a href="./lam5.html"><img src="./image_pol/germetik-dla-laminata-220x220.JPG" title="Герметик для ламината" alt="Герметик для ламината" /></a>

...