Преподаватель который помогает студентам и школьникам в учёбе.

Основы программирования на языке HTML (Техническое задание)

Содержание:

ВВЕДЕНИЕ

Что такое HTML? Это язык разметки гипертекста. То есть каждый день, когда Вы садитесь за свой ПК или ноутбук для того что бы зайти в социальные сети или посмотреть кино, Вы сталкиваетесь с этим языком, не на прямую, но косвенно.

HTML (HyperText Markup Language) - язык разметки гипертекста-предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. Сам язык не является языком программирования, это язык разметки. Естественно HTML это только фундамент профессионального сайта, т.к. этот язык «примитивен» и является скорее оболочкой сайта, нежели новомодной начинкой. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Язык HTML очень прост, и пользоваться им может абсолютно каждый, для этого быть программистом необязательно, достаточно иметь навыки пользования Интернетом.

1.Основные сведения о HTML

Язык HTML. Краткая история

HTML появился в конце 1980-х годов (а вместе с ним и для WWW), когда ученые из лаборатории элементарных частиц в Европе (CERN) появилась необходимость обмениваться множеством различной информации и документами в сети Интернет (тогда очень быстро развивающейся). В тот момент необходимо было придумать как разместить необходимую информацию так, что бы она была доступна всем пользователям данной сети и в других сетях в Интернете и одинаковым образом, то есть что бы было одинаково все, цвет, шрифт и т.д. Решение поставленной задачи было найдено сотрудником CERN Бернерс-Ли. В 1989 году Тим Бернерс-Ли создал новый язык форматирования документов. Он взял в его основу ранее используемый язык– SGML, который так же предусматривал использование гиперссылок между ними. Новый язык получил свое название HyperText Markup Language. Так же для просмотра HTML-документов был необходим ресурс, и этот же человек его изобрел – браузер. [3]

Язык гиперссылок быстро прижился. Вскоре в Интернет стала заполнять сеть, в которой было большое количество подобных документов, которую постепенно стали называть World Wide Web. Уже в 1993 году команда программистов, руководителем которой являлся основатель компании Netscape Марк Андриессен, спрограммировали первый браузер, с полноценным графическим инструментом и позволяющий работать мышкой – Mosaic. Он быстро приобрёл популярность в развивающейся Сети. Со временем Интернет стал всем областям, не только в среде ученых. Со временем ля многих стало очевидно, что HTML, не развивающийся в динамике в создаваемых с его помощью документах, скучен и невзрачен. Это был толчок к созданию CSS, введению поддержки апплетов Java, а после и сценариев (первым языком был JavaScript). С выходом на рынок новых браузеров, было многое внесено в изменения гиперссылок, а так же и постоянные собственные качество браузеров. Это привело к срочному созданию организации, которая должна было следить за стандартами, и уже в 1994 году она было создана получив название WWW – World Wide Web Consortium (W3C). Эта организация сразу начла заниматься подготовкой стандартов HTML (начиная с HTML 2.0). Организация W3C существует и сейчас. Она до сих пор занимается вопросыми стандартизации. Развитие языка HTML сегодня практически завершено, и все основные усилия направлены на более новые технологии, например недавно новым и расширяемым языком разметки XML и языком преобразований XSLT и др.[12]

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

Базовые понятия HTML

Весь процесс написания любого HTML документа заключается в планирование страницы, то есть выбора основных тегов и стилей, а так же в среде написания. Основной средой написания является обыкновенный блокнот, которому мы даем определенное расширение и направляем открытие в браузере. Сейчас рассмотрим предназначение и преимущества каждого дополнения. [2]

Каждый разработчик при написании любого документа придерживается своего основного стиля, но процесс начала и конца прописан точно, то есть теги головы, тела и подвала всегда открываются включают в себя основные элементы и закрываются. Каждый документ HTML начинается с главного и не парного тега <!DOCTYPE html>, именно этот тег означает, что документ будет написан именно на языке HTML. После выше приведенного тега начинается сам документ, который обязательно сопровождается парным тегом <html> </html>. Между этими тегами располагается два основных блока, таких как голова HTML – документа, который сопровождается тегом <head> </head>. Второй блок это тело HTML документа, который сопровождается парным тегом <body> </body>.[11]

Первый блок документа HTML, это голова, парный тег <head> </head>. Блок головы начальный, включает в себя подготовку в написании тела HTML документа. Вся служебная информация, содержащаяся в голове не видна, кроме единственного тега <title> , который мы так же рассмотрим позже. Через этот блок можно добавить стилевые эффекты, определенные сценарии или же служебную информацию.

Приступим к рассмотрению основных тегов (элементов), использующихся в блоке головы.

Тег <title> </title> - единственный тег отображающий информацию. Тег используется для отображения названия документа HTML.

Тег <meta> - мета тег, оставляет определенный метки или служебную информацию, например о версии HTML или другую служебную информацию. Этот тег не парный.

Тег <link> - тег ссылающийся на внешние источники данных, по другому можно сказать, что тег прикрепляет к документу HTML файлы, документы или стили. Прикрепляемая информация может быть видна, а может быть не видна, все зависит от вида прикрепляемой информации. Данный тег так же не парный. [10]

Тег <script> </script> тег испозующийся для прикрепления внешних сценариев или просто содержит сценарий от JavaScript. JavaScript это язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Изначально придуман для того, что бы сделать документы HTML «живыми». Для написания программ нет необходимой подготовки, так же имеются определенные правила.

Второй блок документа HTML, это тело. Этот блок содержит всю информацию документа, то есть страницы, ссылки, картинки и т.д. Блок сопровождается парным тегом <body></body>. Внутри тега можно задать необходимые для страницы атрибуты. Атрибуты – это значения расширяющие возможности тегов. Атрибуты в основном влияют на внешний вид документа, так например при помощи атрибутов можно изменить цвет страницы, или поставить картинку, можно изменить цвет или вид шрифта. В общем атрибуты дают большие возможности для стиля. Атрибуты содержатся не внутри парного тега, а присваиваются тегу, то есть <BODY bgcolor="#00ff00">, пишется название атрибута и при помощи «=» присваивается его значение обязательно в двойных кавычках «” ”». [12]

(Табл1.1 Основные атрибуты и их значения.)

Атрибут	Свойства	Теги
align	выравнивание left right center justify bottom (снизу) middle (по центру) top (сверху)	н, р, div, hr, table, embed, img, marquee
background	имя файла для обоев	body, table, td
bgcolor	цвет фона	body, table, tr, td, marquee
border	ширина рамки	img, table, marquee
bordercolor bordercolorlight bordercolordark	цвет рамок в таблице для освещенной части для затененной части	table
color	цвет текста	font, hr
cols	задает столбцы	textarea, frameset
face	название шрифта, напр. arial, times new roman	font
(Табл1.1 Основные атрибуты и их значения.)
Height	высота	img, marquee, td, embed
href	адрес загружаемого файла или закладки	a, area, base
lang	язык en en-us de ru uk	почти все теги
src	имя файла рисунка	img, frame, input, bgsound, embed
text	цвет текста	body
title	всплывающий текст	почти все теги

Существует так же парный тег <div></div> про который нельзя не рассказать. Данный тег выступает в роли контейнера. То есть мы можем видимо или невидимо разделить страницу на контейнеры и в них поместить какую либо информацию. Это начальная стадия создания «таблиц». Но на самом деле, мы просто можем определенно разделить страницу, так что бы можно было визуально комфортно расположить информацию. Он так же имеет свои собственный параметры и свойства.[5] Приведем наглядный пример:

<div>

<p>

Привет Мир!

</p>

<p>

В первых строках своего письма передаю поклон Марье Ивановне.

</p>

</div> [1]

Свойства:

Style – это определенное свойство, при помощи которого мы можем задать нужный нам стиль. Стиль подразумевает в себе изменение стиля контейнера, можно так же поставить какую либо картинку, либо изменить шрифт. Преимущество в том, что можно это все использовать не по отдельности, а вместе. Либо через присоединенный файл CSS, который подключается в первом блоке HEAD, обраться к его стилистике.

А так же имеются определенные стандартные атрибуты, которые могут быть использованы, а могут быть неиспользованные. Все зависит от того, в какой момент используется парный тег <div></div>. Рассмотрим основные атрибуты парного тега <div></div>:

CLASS – определяет к какому классу будет относится контейнер.

DIR – определяет направление теста внутри контейнера.

LANG – название говорит само за себя, определяет язык, который будет использоваться внутри контейнера.

TITLE – дает дополнительную информацию для контейнера, она будет видна в документе HTML.

Это были самые основные атрибуты, которые использует парный тег <div></div>.

Так же парный тег <div></div> не может существовать без парного тега <p></p>, который отвечает за заголовок и абзац. То есть нам необходимо разделить страницу на определенные контейнеры, что бы разместить в нем информацию. Именно с этого парного тега начинается размещение информации в контейнере. У этого парного тега так же имеются свои свойства.

Рассмотрим основные теги, которые могут применяться внутри парного тега <div></div>:

<h1> </h1> - парный тег, который отвечает за заголовок, имеет параметр от 1 до 6 и каждый параметр делает определенный стиль заголовка. На данные момент увеличивает шрифт заголовка.

<li> </li> - парный тег, который определяет номер строки, где будет содержаться та или иная информация.

<p> </p> - парный тег, который отвечает за создания параграфа. Внутри себя так же может содержать еще параграфы.

<u> </u> - парный тег, который подчеркивает тест внутри контейнера.

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

Для того, что бы в т=документе присутсвовали внешние файлы, такие как картинки, музыка и т.д. применяется специальный тег <link>. У этого тега так же имеются свои атрибуты. Рассмотрим основные атрибуты:

Charset – этот атрибут отвечает за кодировку ссылки.

Href – этот атрибут определяет внешний путь, то есть расположение документа, на который идет ссылка.

Hreflang – этот атрибут определяет каким будет зык, на который идет ссылка.

Естественно без атрибута «Href», который отвечает за расположение файла, к которому ссылается документ, работать не будет. Это самый основной и стандартный атрибут.[6]

CSS

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

CSS – это каскадная таблица стилей. Данные таблицы можно разработать отдельно, а потом присоединить HTML документу. Данные таблицы могут содержать не только стилистические особенности, но и переметенные данные, такие как задать определенный размер для страницы, или задать определенный размер таблицы, или задать определенный размер для контейнеров. К одной странице может быть присоединено как одна каскадная таблица данных, так и несколько, от двух и более, и каждая может отвечать за стиль определенного элемента на странице. Так же каждая из страниц HTML документа может определенно обращаться к одной каскадной таблице, так и к нескольким.

CSS получила такое называние из-за того что вся информация о стиле в этом документе представляется в виде таблицы. То есть идет наименование тега, потом его атрибуты и свойства этих атрибутов и тегов. Пример выглядит так:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address {

margin: 0;

padding: 0; }

То есть сначала представлен тег <body>, прописаны все его атрибуты и свойства.

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

Представляю вам пример каскадных таблиц стиля:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, address {

margin: 0;

padding: 0;

}

table {

border-collapse: collapse;

border-spacing: 0;

font-size: inherit;

}

fieldset, img {

border: 0;

}

address, caption, cite, code, dfn, em, strong, th, var {

font-style: normal;

font-weight: normal;

}

li {

list-style: none;

}

caption, th {

text-align: left;

}

q:before, q:after {

content: '';

}

abbr, acronym {

border: 0;

font-variant: normal;

}

sup {

vertical-align: text-top;

}

sub {

vertical-align: text-bottom;

}

input, textarea, select {

font-family: inherit;

font-size: inherit;

font-weight: inherit;

}

legend {

color: #000;

}

pre, code, kbd, samp, tt {

font-family: monospace;

line-height: 100%;

}

em {

font-style: italic;

}

strong {

font-weight: bold;

}

@font-face {

font-family: 'Lobster13Regular';

src: url('Lobster_1.3-webfont.eot');

src: url('Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');

font-weight: normal;

font-style: normal;

}

body {

background: #f5f0e0 url(../images/noise.png);

font-family: Century Gothic, sans-serif;

color: #252525;

font-size: 14px;

text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);

}

h1 {

font-size: 50px;

}

h2 {

font-size: 45px;

}

h3 {

font-size: 40px;

}

h4 {

font-size: 35px;

}

h5 {

font-size: 30px;

}

h6 {

font-size: 25px;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Lobster13Regular', cursive;

color: #9c5959;

text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);

font-weight: normal;

}

a {

color: #9c5959;

text-decoration: none;

border-bottom: 1px dotted #9c5959;

}

.pikachoose a, #fancybox-close, .fancyimage {

border-bottom: 0px dotted #9c5959;

}

.clear {

clear: both;

}

.left {

float: left;

margin-right: 10px;

}

.right {

float: right;

margin-left: 10px;

}

.title {

font-family: 'Lobster13Regular', cursive;

font-size: 80px;

float: left;

-webkit-transition: all .20s ease-out;

-moz-transition: all .20s ease-out;

-o-transition: all .20s ease-out;

-ms-transition: all .20s ease-out;

transition: all .20s ease-out;

}

.title:hover {

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(156, 89, 89,.1), 0 0 5px rgba(156, 89, 89,.1), 0 1px 3px rgba(156, 89, 89,.3), 0 3px 5px rgba(156, 89, 89,.2), 0 5px 10px rgba(156, 89, 89,.25), 0 10px 10px rgba(156, 89, 89,.2), 0 20px 20px rgba(156, 89, 89,.15);

-webkit-transition: all .20s ease-out;

-moz-transition: all .20s ease-out;

-o-transition: all .20s ease-out;

-ms-transition: all .20s ease-out;

transition: all .20s ease-out;

}

.tagline {

font-family: 'Lobster13Regular', cursive;

clear: both;

font-size: 27px;

float: left;

text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);

}

.intro {

float: left;

width: 500px;

}

.reservations {

float: right;

width: 200px;

font-family: 'Lobster13Regular', cursive;

font-size: 20px;

text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);

text-align: center;

color: #9C5959;

}

.reservations-title {

font-size: 27px;

}

.hr-solid {

border: 0;

border-bottom: 1px solid #9c5959;

margin: 2px;

}

.hr-dashed {

border: 0;

border-bottom: 1px dotted #9c5959;

margin: 2px;

}

.button {

font-family: 'Lobster13Regular', cursive;

color: #f5f5f5;

padding: 8px 14px 10px;

background-color: #9c5959;

border: none;

position: relative;

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);

-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);

box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);

-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);

text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);

text-decoration: none;

font-size: 20px;

}

.reservations .button {

padding: 4px 47px 9px;

}

.button:active {

position: relative;

top: 3px;

-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);

-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);

box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);

}

.button:active:after {

content: "";

width: 100%;

height: 3px;

background: #fff;

position: absolute;

bottom: -1px;

left: 0;

}

.date {

float: left;

position: relative;

margin-right: 10px;

padding: 44px 5px 0;

color: #9c5959;

}

.date .month {

text-transform: uppercase;

font-size: 25px;

}

.date .day {

font-size: 35px;

line-height: 45px;

position: absolute;

left: 5px;

top: 0;

}

.date .year {

display: block;

position: absolute;

right: -5px;

top: 15px;

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

-ms-transform: rotate(-90deg);

transform: rotate(-90deg);

}

#container {

background: url(../images/bg.png) center top repeat-x;

width: 960px;

margin-left: auto;

margin-right: auto;

}

ul#nav {

font-family: 'Lobster13Regular', cursive;

width: 1000px;

margin: 0 auto;

text-align: center;

overflow: hidden;

font-size: 22px;

letter-spacing: 1px;

}

ul#nav li {

float: left;

list-style: none;

}

ul#nav li a {

letter-spacing: 2px;

display: block;

width: 95px;

height: 85px;

padding: 65px 0 0 0;

margin: 0 32px 0 32px;

color: #9c5959;

text-decoration: none;

background: url(../images/label.png) 0 -149px no-repeat;

-webkit-transition: all .20s ease-out;

-moz-transition: all .20s ease-out;

-o-transition: all .20s ease-out;

-ms-transition: all .20s ease-out;

transition: all .20s ease-out;

border-bottom: 0px dotted #9c5959;

}

ul#nav li a:hover, ul#nav li .current {

background: url(../images/label.png) 0 0 no-repeat;

color: #eee9d9;

-webkit-transition: all .20s ease-out;

-moz-transition: all .20s ease-out;

-o-transition: all .20s ease-out;

-ms-transition: all .20s ease-out;

transition: all .20s ease-out;

}

.border {

height: 3px;

border-top: 1px solid #9c5959;

border-bottom: 1px dashed #9c5959;

}

.border2 {

height: 3px;

clear: both;

border-bottom: 1px solid #9c5959;

border-top: 1px dashed #9c5959;

}

.border3 {

height: 3px;

clear: both;

border-bottom: 1px dotted #9c5959;

}

.wrapper {

margin-top: 30px;

}

p {

font-size: 14px;

font-family: Century Gothic, sans-serif;

padding: 10px;

}

article {

width: 630px;

float: left;

padding: 10px;

border-right: 1px dashed #9c5959;

}

.fullwidth {

border-right: 0px dashed #9c5959;

width: 960px;

}

.sidebar {

width: 280px;

height: 100%;

float: right;

padding: 10px;

}

aside h3, .footer-widget h4 {

text-align: center;

}

.home-widget, .footer-widget {

width: 310px;

float: left;

margin-top: 5px;

margin-right: 10px;

margin-bottom: 10px;

text-align: left;

}

.content-widget, .content-menu {

margin-right: 10px;

margin-bottom: 50px;

}

.home-widget h3 {

text-align: center;

margin-bottom: 10px;

}

.content-widget h1, .content-menu h1 {

text-align: center;

margin-bottom: 10px;

}

.home-widget img {

background: #9C5959;

padding: 1px;

margin-left: 4px;

-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.50);

-moz-box-shadow: 0 0 4px rgba(0,0,0,0.50);

box-shadow: 0 0 4px rgba(0,0,0,0.50);

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.pikachoose img, article img, aside img {

background: #9C5959;

padding: 1px;

-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.50);

-moz-box-shadow: 0 0 4px rgba(0,0,0,0.50);

box-shadow: 0 0 4px rgba(0,0,0,0.50);

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

border-radius: 2px;

}

.noeffects {

background: none;

padding: 0;

margin-left: 0;

-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.50);

-moz-box-shadow: 0 0 0 rgba(0,0,0,0.50);

box-shadow: 0 0 0 rgba(0,0,0,0.50);

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}

Среды разработки

Среда разработки – это платформа для создания HTML документа. Первый HTML документ был создан в простом тестовом редакторе, то есть в блокноте. Имея установленный блокнот, Вы уже можете создать HTML документ, используя основные теги. Но писать в ручную все теги и всю информацию для отображения долго и для упрощения создания документов HTML были придуманы специальные среды разработки, это как усовершенствованные блокноты, так и отдельные программы. Естественно самым главным инструментом в разработке HTML документов останется блокнот. Рассмотрим на сегодняшний день самые популярные среды создания HTML документов.[3]

Блокнот – самая первая и самая популярная среда разработки для HTML документов. Блокнот полностью адаптирован для написания кода. В настоящее время есть множество других блокнотов, которые были усовершенствованы и целенаправлены на создание HTML документов и WEB страниц.

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

Macromedia HomeSite - редактор HTML/XML.

NOTEPAD++ - не ориентирован на разработку web-страниц, но подсвечивает синтаксис умеет.

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

BlueFish - Редактор с подсветкой синтаксиса для linux. Поддерживает DNS, PHP, HTML, CSS и т.п. Есть примеры готовых решений и инструменты проверки кода.

После блокнота идут уже программные среды, то есть уже визуальная программа, дающая возможность визуально видеть, управлять и изменять необходимые вам параметры. То есть в обычном написании мы можем взять теги и начать составлять HTML документ, а в данной специальной среде мы уже видим визуально какой объект, и может редактировать его «мышкой». Сама задумка данных сред очень полезна для будущего, она экономит время, а так же помогает нам перейти на новый уровень создания HTML документов. Ну конечно же, у этих сред есть и минусы, к таким минусам относятся то, что мы не сможем корректировать уже готовые элементы, которые мы выставляем на страницу. То есть, нам предоставляется уже готовые элементы, будто элемент таблицы или определенное вставки для картинки, они нам даётся в таком виде в каком были созданы изначально, редактировать их мы не сможем. [3]

Описание создания сайта "Кондитерская"

Сайт – это электронная страница, активная страница, то есть активный HTML документ. Сайт содержит в себе не только язык HTML, но и другие языки для активного или «живого» сайта. Приступая к созданию сайта, как и к созданию программы, всегда необходимо собрать информацию. Информацию о том, что требуется, как хотят видеть заказчики и т.д., а так же необходима и техническая информация, например: наименования, если это продажа то и стоимость. Так же клиент попросил сохранить в тайне информацию о заведении и об изделиях. Поэтому попросил представить в виде шаблона.[1,2]

Для написания полноценного сайта, одного языка HTML не достаточно, потому необходимо будет добавить немного PHP, JavaScript, и немного внешней стилистики CSS. [11]

И так, нам поступил заказ, на создание сайта для кондитерской, которая называется условно «Кондитерская». Заказчик предоставил всю необходимую информацию, теперь начнем основывать техническое задание.

Техническое задание

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

Сайт будет состоять из 6 страниц HTML документов, которые связаны между собой. Каждая страница предоставляет определенную информацию. Каждая страница имеет свое название. Так же присоединен специальный стиль CSS и JavaScript.

Каждая из страниц будет содержать анимацию и ссылки на другие страницы. Как и всегда первая страница будет иметь название Index[1]. Рассмотрим каждую страницу и их примерное содержание:

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

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

Menu – название этой страницы говорит само за себя, дословный перевод как «Меню». На этой странице мы отобразим специальный перечень кондитерских изделий, их цены, примерное время приготовления а так же их состав, и примерное время доставки, так как у нас так же имеется доставка.

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

Reviews – это следующая страница, дословный перевод которой «Отзыв». Эта страница нацелена на отзывы, которые будет оставлять клиенты и пользователи сайта, отзывы могут быть как положительные, так и отрицательные.

Contact – страница которая дословно переводится как «Контакты», и естественно вы уже понимаете что будет содержаться на этой странице. Здесь будет номера, по которым мы сможем связаться с кондитерской, подробный адрес всех магазинов или одного магазина, а так же вы можете оставить свои контактные данные и задать вопрос, что бы с вами связались.

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

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

CSS – это язык визуального оформления сайта, написанный на языке HTML. Он содержит в себе основные теги, которые могут менять цвет, шрифт и другие визуальные параметры. Для создания этого инструмента, необходимо отдельное пространство. Поэтому создается отдельная папка, туда помещаются отдельные свойства, то есть файл с дизайнами шрифтов, стилей и т.д. Как правило такая папка называется styles.[3]

Выполнение технического задания

Итак, у нас будет 6 HTML документов, которые связаны между собой. Это index, menu, gallery, contact, about, reviews.

Index – это главная страница, от нее будут идти основные понятия. Рассмотрим синтаксис.

Страница Index:

Первый блок, блок HEAD

<head> ( Парный тег, который открывает первый блок)

<title>CONFECTIONERY</title> (Этот тег отображаемый, но отображаться он будет только в наименовании страницы. То есть наш сайт называется кондитерская)[9]

$(document).ready(function() {

$("#pikame").PikaChoose(); });

</script> (После подключения скрипта JavaScript задаем определённые параметры.)

</head> ( На данном теге происходит закрытие первого блока)

И так, мы рассмотрели первый блок, о котором уже говорилось ранее в первой главе курсовой работы. Итоги таковы, что каждый блок конечно же отвечает на свои определенно отведенные нормы. Таким образом первый блок или блок HEAD, рассказывает нам о его предназначении – это подключённые специализированные файлы, такие как стиль, определенная анимация или движения на странице и т.д.

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

<body> (Парный тег открывает второй блок)

<div id="container"> (данный тег не парный, и применяет для деления страницы на определенные контейнеры, какими они будут выбираем мы сами при помощи специальных свойств этого тега)

<header> (этот тег парный и служит для обозначения определенного заголовка для страницы. Заголовок как правило содержит в себе мини меню, навигацию по сайту и ссылки на другие страницы, которые предназначены для сайта) [6]

<nav> (Парный тег, в который обычно помещают приоритетные данные)

<ul id="nav"> ( Начало блока)

<li><a href="index.html" class="current">Home</a></li> (Ссылка на главную страницу, где содержится основная информация о сайте)

<li><a href="about.html">About</a></li> (Ссылка на страну «о нас», где находится описание чем занимается компания и т.д.)

<li><a href="menu.html">Menu</a></li> (Ссылка на страницу «меню», где содержится каталог предлагаемых услуг или товаров)

<li><a href="gallery.html">Gallery</a></li>(Ссылка на страницу «галерея», где содержится основные фотографии какие бывают товары или услуги в данном заведении)

<li><a href="reviews.html">Reviews</a></li>(Ссылка на страницу «отзывы», где содержатся отзывы клиентов и предложения для компании)

<li><a href="contact.html">Contact</a></li>(Ссылка на страницу «контакты», где содержится информации о местонахождении данной компании и о всех контактных телефонах и электронных адресах)

</ul> (Закрытие основного блока)

</nav> (Закрытие основного блока)

<hgroup class="intro"> (Парный тег, специальное обозначение подзаголовка)[7]

<h1 class="title">CONFECTIONERY</h1> ( Обозначение стиля подзаголовка и его название)

</hgroup> (Закрытие парного тега подзаголовка)

<div class="reservations"><br /> (Обозначение еще одного небольшого блока)

<span class="reservations-title">Call Us:</span> (Обозначение стиля и отображаемая информация на странице)

<hr class="hr-solid" /> ( Стилевое обозначение)

<span style="font-family: 'Lobster13Regular', cursive;">+*** *** ***</span> (Обозначение стиля и внесение отображаемой информации)

<hr class="hr-dashed" />(Обозначение стиля и внесение отображаемой информации)

<div style="margin-top:15px"> <a class="button" href="#" title="Email Us">Or Email Us</a> </div>(Обозначение стиля и внесение отображаемой информации)

</div>

<br />

<br /> ( Все вышеприведенный теги закрывают открытые блоки в заголовке)[12]

</header> (Этот тег закрывает сам заголовок)

<div class="wrapper"> ( Снова делим страницу на нужный нам блок и обозначим его размер и стиль)

<div class="pikachoose"> (Стиль и размер блока)

<ul id="pikame"> (Деление блока еще на фрагменты)

<li><a href=""><img src="images/home/1.jpg" alt="" /></a></li> (Ссылка на обращение к выводимой картинке)

<li><a href=""><img src="images/home/2.jpg" alt="" /></a></li> (Ссылка на обращение к выводимой картинке)[5]

<li><a href=""><img src="images/home/3.jpg" alt="" /></a></li> (Ссылка на обращение к выводимой картинке)

<li><a href=""><img src="images/home/4.jpg" alt="" /></a></li> (Ссылка на обращение к выводимой картинке)

</ul> (Закрытие отдельного фрагмента)

</div> (Закрываем открытый блок)

<div class="clear"></div> (Тег образующий разделение)

<div class="border"></div> (Тег обозначающий границу)

<div class="home-widget"> (Тег дающий правила отображения отдельно разделенных блоков)

<h3>Lorem Ipsum</h3> (Подзаголовок для блока)

<img src="images/home/3.jpg" width="300" alt="" /> (Ссылка на изображение в блоке)

</div> (Закрытие блока)

<div class="home-widget"> (открытие деления блока в блоке)

<h3>Lorem Ipsum</h3>(Подзаголовок для блока)

<img src="images/home/4.jpg" width="300" alt="" />(Ссылка на изображение в блоке)[3]

</div>(Закрытие блока)

<div class="home-widget">(открытие деления блока в блоке)

<h3>Lorem Ipsum</h3>(Подзаголовок для блока)

</div>(Закрытие блока)[10]

<div class="border2"></div>(Тег обозначающий границу)

<br /> (Закрытие деления)

<aside id="pricing-table" class="clear"> (Отображение посередине)

<div class="plan">(Деление блока)

<h3>Breakfast<span>$99</span></h3> (Заголовок для блока)

<a class="button" href="">Order Now</a> (Активная кнопка)

<ul> (Отступ или перенос на следующую строку)

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li> ( Описание)

</ul> (Закрытие отступа)

</div> (Закрытие блка)

<div class="plan"> (Открытие блока)

<h3>Lunch<span>$99</span></h3> ( Описание)

<a class="button" href="">Order Now</a> (Активная кнопка)

<ul> (Отступ) [4]

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li> ( Описание)

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li> ( Описание)[8]

</ul> ( Закрытие отступа)

</div> (Закрытие деления блока)

<div class="plan"> (Начало деления блока)

<h3>Dinner<span>$99</span></h3> (Описание)

<a class="button" href="">Order Now</a> (Активная кнопка)

<ul> (Открытие отступа)

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li> ( Описание)

</ul> (Закрытие отступа)

</div> (Закрытие деления)

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

<footer> (Начало блока «подвал»)

<div class="border"></div> (Граница деления)

<div class="footer-widget"> (Деление подвала)

<h4>Some Title</h4> (Подзаголовок деления)

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulu) m tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p> (Описание)

</div> (Закрытие деления)

<div class="footer-widget"> (Деление на блоки)

<h4>From The Blog</h4> (Подзаголовок блока)

<ul class="blog"> (Отступ)

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>(Описание)

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>(Описание)

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>(Описание)

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>(Описание)

</ul>(Закрытие отступа)[5]

</div> (Закрытие блока)

<div class="footer-widget"> (Начало деления блока)

<h4>We Are Social!</h4> (Заголовок блока)

<div id="social"> <a href="http://twitter.com/priteshgupta" class="s3d twitter"> Twitter <span class="icons twitter"></span> </a> <a href="http://www.facebook.com/priteshgupta" class="s3d facebook"> Facebook <span class="icons facebook"></span> </a> <a href="http://forrst.com/people/priteshgupta" class="s3d forrst"> Forrst <span class="icons forrst"></span> </a> <a href="http://www.flickr.com/photos/priteshgupta" class="s3d flickr"> Flickr <span class="icons flickr"></span> </a> <a href="#" class="s3d designmoo"> Designmoo <span class="icons designmoo"></span> </a> </div> (Деление, активные кнопки и ссылки на социальные сети)

</div> (Закрытие деления)

<div class="border2"></div> (Закрытие деления)

<br /> (Закрытие деления)

<br>

<br />

</span></span></footer>

</div>

</body> (Закрытие тела)

</html> (Закрытие HTML документа)

Теперь мы рассмотрели. [6]

Заключение

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

HTML язык удобный и гибкий. Имеет в себе множество элементов. Постоянно находится в доработке своей структуры.

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

HTML5, JavaScript, PHP и тд.

Сам язык гипертекстовой разметки мне очень понравился, он простой в использовании, иногда может запутать. Прекрасен тем, что заставляет задумываться и сосредоточится.

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

Всем спасибо за внимание и удачи!!!

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

1. Вадим Дунаев. Самоучитель основы WEB дизайна 2-е издание / Вадим Дунаев - Санкт-Петербург БВХ-Петербург 2012г. – 479с.

2. Чак Муссиано, Билл Кеннеди. HTML И XHTML / Чак Муссиано. Билл Кеннеди. СанктПетербург–Москва. 2008г. – 748с.

3. Лоунс Б., Шарп Р., Изучаем HTML5 / Лоунс Б., Шарп Р. Москва – Екатеринбург. 2011г. – 271с.

4. Хеник Б. HTML и CSS Путь к совершенству. / Хеник Б. Питер 2011г. – 336с.

5. Лабберс П., Олберс Б., Салим Ф. HTML5 для профессионалов / Лабберс П., Олберс Б., Салим Ф. Москва – Санкт-Петербург – Киев 2011г. – 272с.

6. Чиртик А.А. HTML Самоучитель / Чиртик А.А. Санкт-Петербург 2008г. – 320с.

7. Дронов В. HTML 5 CSS3 и WEB 2.0 Разработка современных Web – сайтов / Дронов В. БХВ-Петербург. 2013г. – 408с.

8. Фримен Эрик, Фримен Элизабет. Изучаем HTML, XHTML и CSS. / Фримен Эрик, Фримен Элизабет. Питер. 2012г. – 656с.

9. Фримен Эрик. Изучаем HTML, XHTML и CSS. / Фримен Эрик. Питер. 2012г. – 656с.

10. Сухов К. HTML5 - путеводитель по технологии / Сухов К. ДМК Пресс. 2013г. – 352с.

11. Гладкий А. Веб-Самоделкин. Как самому создать сайт быстро и профессионально. / Гладкий А. Литрес. 2012г. – 250.

12. Дэвид Кроудер. Создание веб-сайта для чайников / Дэвид Кроудер. Вильямс. 2009г. – 352с.

Приложения

Страница Index

<!DOCTYPE HTML>

<html>

<head>

<title>CONFECTIONERY</title>

$(document).ready(function() {

$("#pikame").PikaChoose(); });

</script>

</head>

<body>

<nav>

<li><a href="about.html">About</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<h1 class="title">CONFECTIONERY</h1>

</hgroup>

<div style="margin-top:15px"> <a class="button" href="#" title="Email Us">Or Email Us</a> </div>

</div>

<br />

</header>

</ul>

</div>

<h3>Lorem Ipsum</h3>

</div>

<h3>Lorem Ipsum</h3>

</div>

<h3>Lorem Ipsum</h3>

</div>

<br />

<h3>Breakfast<span>$99</span></h3>

<a class="button" href="">Order Now</a>

<ul>

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li>

</ul>

</div>

<h3>Lunch<span>$99</span></h3>

<a class="button" href="">Order Now</a>

<ul>

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li>

</ul>

</div>

<h3>Dinner<span>$99</span></h3>

<a class="button" href="">Order Now</a>

<ul>

<li><strong style="text-transform:uppercase">lorem Ipsum</strong> Dolor Sit Amet</li>

</ul>

</div>

</aside>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение Contact

<!DOCTYPE HTML>

<html>

<head>

<title>Connoisseur</title>

</head>

<body>

<nav>

<li><a href="about.html">About</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html" class="current">Contact</a></li>

</ul>

</nav>

</header>

<h3>Contact Us</h3>

<br />

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>

<br>

<br>

<label for="name">Subject:</label>

<br>

<br>

<label for="name">Email:</label>

<br>

<br>

<label for="textarea">Message:</label>

<br>

<br>

</form>

<br>

</article>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

<h3>Sidebar Widget</h3>

<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. In turpis pulvinar facilisis. Ut felis.<br>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading »</strong></a></p>

</aside>

<br>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение Gallery

<!DOCTYPE HTML>

<html>

<head>

<title>Connoisseur</title>

$(document).ready(function() {

$("a.fancyimage").fancybox({

'overlayShow' : false,

'transitionIn' : 'elastic',

'transitionOut' : 'elastic' });

});

</script>

</head>

<body>

<nav>

<li><a href="about.html">About</a></li>

<li><a href="gallery.html" class="current">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h3>Gallery</h3>

<br>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение Menu

<!DOCTYPE HTML>

<html>

<head>

<title>Connoisseur</title>

</head>

<body>

<nav>

<li><a href="about.html">About</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h3>Pizza Type A: $45</h3>

</div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

<p class="left">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae.</p>

<h3>Pizza Type B: $40</h3>

</div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

<h3>Pizza Type C: $35</h3>

</div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

<h3>Pizza Type D: $30</h3>

</div>

<div class="right menu-order"><a class="button" href="">Order Now</a></div>

</article>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

<h3>Sidebar Widget</h3>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading »</strong></a></p>

</aside>

<br>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение Rewiews

<!DOCTYPE HTML>

<html>

<head>

<title>Connoisseur</title>

</head>

<body>

<nav>

<li><a href="about.html">About</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html" class="current">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h3>Reviews</h3>

<blockquote>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.<span>~Lorem</span></blockquote>

</article>

<h3>Sidebar Widget</h3>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading »</strong></a></p>

</aside>

<br>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>

Приложение About

<!DOCTYPE HTML>

<html>

<head>

<title>Connoisseur</title>

</head>

<body>

<nav>

<li><a href="about.html" class="current">About</a></li>

<li><a href="gallery.html">Gallery</a></li>

<li><a href="reviews.html">Reviews</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h3>Headline: Lorem Ipsum</h3>

<p>Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>

<h1>Header Level 1</h1>

<h2>Header Level 2</h2>

<h3>Header Level 3</h3>

<h4>Header Level 4</h4>

<h5>Header Level 5</h5>

<h6>Header Level 6</h6>

</code></pre>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consectetur elementum molestie. Donec eget orci vitae felis malesuada gravida a a magna. Nulla quis nisi dui. Aliquam eu risus et dui tempus pretium. Nunc vulputate ante ut dui cursus ultricies. Aliquam eu arcu et neque molestie porta vitae quis magna. Quisque convallis, justo in sagittis egestas, arcu diam malesuada eros, non dignissim turpis lacus sed dolor.</p>

</blockquote>

</article>

<h3>Sidebar Widget</h3>

<a href="" class="right" style="padding-top:7px"><strong>Continue Reading »</strong></a></p>

</aside>

<br>

</div>

<h4>Some Title</h4>

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>

</div>

<li><a href="#">Lorem Ipsum Dolor</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Praesent Et Eros</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

<li><a href="#">Suspendisse In Neque</a><br/>

Orciint erdum condimen terdum nulla mcorper elit nam curabitur... </li>

</ul>

</div>

<h4>We Are Social!</h4>

</div>

<br />

<br>

<br />

</span></span></footer>

</div>

</body>

</html>