Пошаговый разбор, комментарии

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.1//EN" " https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <! DOCTYPE>.

< html xmlns=" https://www.w3.org/1999/xhtml" >

< hmtl> - заключает весь сайт. Вначале пишется и в конце закрывается < /html>

< head>

Используется для содержания дополнительных элементов. Например заголовок страницы, ссылка на css файлы, на java script файлы, мета тэги.

< title> Строительная компания " Рост" < /title>

Заголовок страницы. В браузере отображается следующим образом (см. рис.1.1):

Рис. 2.1 Заголовок браузера Firefox

< meta content=" " name=" keywords" /> - ключевые слова (стройка, кирпич, камень, отделка и т.д.)

< meta content=" " name=" description" /> - описание (Наша фирма строит великолепные дома из кирпича)

< meta http-equiv=" Content-Type" content=" text/html; charset=windows-1251" /> - сообщает какую кодировку использовать и тип документа - документ текстовый содержащий html правила.

< meta http-equiv=" Content-Style-Type" content=" text/css" /> - задается язык таблиц стилей - документ текстовый содержащий css правила.

< meta http-equiv=" pragma" content=" no-cache" /> - не разрешает браузеру кэшировать содержимое страницы. Для разработки хорошо, потому что изображения в КЭШе браузера не сохраняются.

< meta> определяет метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешается использовать более чем один метатег, все они размещаются в контейнере < head>. Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv.

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

Указывает на то, где находится CSS файл.

< body>

В этом тэге начинается написание страницы, это тело всего документа.

< div id=" wrapper" >

< div id=" header" >

< div class=" helper" >

< /div>

< /div>

< div id=" content" >

< div class=" helper" >

< /div>

< /div>

< div id=" footer" >

< div class=" helper" >

< /div>

< /div>

< /div>

Многие страницы сайта сделаны аналогично главной. Код одной из них описан ниже:

Рис. 2.2 Заголовок в верхней части главной страницы

Код, комментарии:

< div class=" right about-company" > - блок с текстом

О компании & laquo; Рост& raquo; - текст: О компании «Рост», где & laquo; - левая кавычка, & raquo; - правая кавычка

< /div> - конец блока

/********************************************/

.about-company,.uslugi-zag,.uslugi-zag2 { - стиль используется еще для двух элементов

color: #8c9fb1; - цвет текста

font-size: 20px; - размер текста

margin-right: 202px; - внешний отступ справа

margin-top: 38px; - внешний отступ сверху

position: relative; - позиционирование

z-index: 5; - слой; чем выше слой, тем он виднее.

}

< div class=" company-txt" > - блок, в котором располагается текст страницы

< p> Наша организация - динамично развивающаяся компания… < p> < br/> - текст заключен в тэг параграфа, < br/> - переход на новую строку.

< p> Мы осуществляем весь комплекс работ при проведении строительства Вашего …< /p> < br/>

< p> Качество предоставляемых услуг - наша основная задача. Заказывая у нас… < p> < br/>

Рис. 2.3 Вид web-страницы строительной компании (главная → О компании)

< p> При производстве работ мы используем только сертифицированные и …< p> < br/>

< p> Ремонтно-строительные и отделочные работы, выполненные специалистами нашей < /p>

< br/> < br/>

/*************************************************************/

.company-txt,.uslugi-txt,.decor-gips-txt{ - стиль еще используется у двух элементов

color: #8c9fb1;

width: 790px;

padding: 10px 8px 8px; - внутренний отступ у блока 10 пикселей сверху 8 пикселей слева и справа и 8 пикселей снизу

font-size: 17px;

}

Рис. 2.4 Ссылка для перехода на следующую страницу сайта

< div class=" dop-spisok" > - блок в котором располагается ссылка для перехода на следующую страницу

< a href=" o_maloet_i_dacha.html" > Наша специализация - малоэтажное строительство! О дачах и коттеджах & gt; & gt; < /a>

- ссылка < /div>

< /div>

/**************************************************************/

.dop-spisok ul{ - стиль применяется к тэгу UL

position: absolute; - позиционирование абсолютное, то есть блок исключается из основного потока

right: 1px; - справа 1 пиксели отодвигается

top: 1px; - сверху на 1 пиксель отодвигается

color: #2e6c8a; - цвет

width: 150px; - ширина 150 пикселей

text-align: left; - выравнивание текста по левому краю

}

.dop-spisok a{ - тэг применяется к ссылкам

color: #2e6c8a; - цвет

font-size: 13px; - размер шрифта

text-decoration: none; - подчеркивание ссылок отключено

}

.dop-spisok a: hover,.next a: hover{ - при наведении на ссылку

color: #8C9FB1; - цвет

}

Рис. 2.5 Ссылка для перехода на главную страницу сайта

< div class=" back" > < ul> - блок

< li> < a href=" index.html" > Вернуться на главную< /a> < /li> - ссылка

< /ul> < /div>

< /div>

< /div>

/****************************************************/

.back ul,.back a{ - стили для ссылки и блока

color: #2E6C8A; - цвет

text-decoration: none; - подчеркивание ссылки нет

font-size: 17px; - размер шрифта

font-weight: bold; - шрифт жирный

}

.back{

position: absolute; - абсолютная позиция

bottom: 60px; - снизу 60 пикселей

right: 60px; - справа 60 пикселей

padding: 20px; - внутренние отступы 20 пикселей

background: url(../pic/pl.png) repeat; - фоновая картинка

border-radius: 20px; - скругляет углы (так как технология новая, то не во всех браузерах скругляет. Использован CCS3. Современные браузеры выводят так, как требуется.)

z-index: 5; - слой

}

Код страницы «Карта сайта» рассмотрим отдельно. Его описание расположено ниже.

< div style=" padding-top: 0px; " class=" decor-kamen-txt" > - общий блок

< ul class=" karta-line1" > - список общий и первого уровня

< li> < a href=" o_kompanii.html" > О компании< /a> < /li> - элемент списка первого уровня

< ul class=" karta-line2" > - список второго уровня

< li> < a href=" o_maloet_i_dacha.html" > Малоэтажное строительство - о дачах и коттеджах< /a> < /li> - элемент списка второго уровня

< ul class=" karta-line3" > - список третьего уровня

< li> < a href=" activnoe_stroitelstvo.html" > Активно ли ведется продажа малоэтажных строений? < /a> < /li> - элемент списка третьего уровня

< ul class=" karta-line4" > - список четвертого уровня

Рис. 2.6 Отображение всех ссылок, расположенных на странице «Карта сайта»

< li> < a href=" vigodnoe_reshenie.html" > Выгодные решения для дачников< /a> < /li> - элемент списка четвертого уровня

< /ul>

< /ul>

< /ul>

< li> < a href=" project.html" > Проекты< /a> < /li> - элемент 1 уровня

< li> < a href=" uslugi.html" > Услуги< /a> < /li> - элемент 1 уровня

< ul class=" karta-line2" >

< li> < a href=" design_interier.html" > Дизайн интерьеров< /a> < /li> - элемент 2 уровня

< ul class=" karta-line3" >

< li> < a href=" disign_kvartir_ofis.html" > Дизайн интерьеров при ремонте квартиры и офиса< /a> < /li> - элемент 3 уровня

< li> < a href=" disign_komnata_deti.html" > Дизайн комнаты для двух детей< /a> < /li> - элемент 3 уровня

< li> < a href=" disign_landshaft_dacha.html" > Ландшафтный дизайн на даче< /a> < /li> - элемент 3 уровня

< li> < a href=" disign_exclusiv_otdelka.html" > Эксклюзивная отделка< /a> < /li> - элемент 3 уровня

< li> < a href=" disign_speshit_na_pomosh.html" > Дизайнер спешит на помощь! < /a> < /li> - элемент 3 уровня

< /ul>

< li> < a href=" remont.html" > Ремонт и отделка< /a> < /li> - элемент 2 уровня

< ul class=" karta-line3" >

< li> < a href=" decor_gips.html" > Декор из гипса и искуственного камня< /a> < /li> - элемент 3 уровня

< ul class=" karta-line4" >

< li> < a href=" decor_gips_v.html" > Гипсовый декор< /a> < /li> - элемент 4 уровня

< li> < a href=" decor_kamen.html" > Лепнина из искуственного камня< /a> < /li> - элемент 4 уровня

< /ul>

< /ul>

< li> < a href=" maloet_stroitelstvo.html" > Малоэтажное строительство< /a> < /li> - элемент 2 уровня

< /ul>

< li> < a href=" stroi_material.html" > Материалы< /a> < /li> - элемент 1 уровня

< ul class=" karta-line2" >

< li> < a href=" material_peschanik.html" > Наша компания предлагает следующую продукцию< /a> < /li> - элемент 2 уровня

< ul class=" karta-line3" >

< li> < a href=" bruschatka_peschanik.html" > Песчаник и брусчатка< /a> < /li> - элемент 3 уровня

< /ul>

< /ul>

< li> < a href=" statya_o_stroit.html" > Статьи о строительстве< /a> < /li> - элемент 1 уровня

< ul class=" karta-line2" >

< li> < a href=" remont_kvartir.html" > Какие услуги по ремонту квартиры сейчас наиболее востребованы? < /a> < /li> - элемент 2 уровня

< li> < a href=" derev_da4a.html" > Чем хорош деревянный дачный дом? < /a> < /li> - элемент 2 уровня

< ul class=" karta-line3" >

< li> < a href=" derevo_kak_stroi_material.html" > Дерево - как строительный материал< /a> < /li> - элемент 3 уровня

< /ul>

< li> < a href=" design_kvartir.html" > Как заказывать дизайн проект квартиры, и каким он должен быть? < /a> < /li> - элемент 2 уровня

< /ul>

< /ul> < /div>

/****************************************************************/

.karta-line1 a{

color: #2E6C8A;

font-size: 20px;

font-weight: bold;

text-decoration: none;

}

.karta-line2,.karta-line2 a{

font-size: 17px;

font-weight: normal; - текст не жирный

margin-left: 10px; - внешний отступ слева 10 пикселей

}

.karta-line3,.karta-line3 a{

font-size: 15px;

font-weight: normal;

margin-left: 10px;

}

.karta-line4,.karta-line4 a{

font-size: 12px;

font-weight: normal;

margin-left: 10px;

}

.karta-line1 a: hover{

text-decoration: underline;

}