Приложение и Листинг 2.Html

<DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Электронное пособие Landing Page</title>

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

</head>

<body>

<div id="top_bar"><!--начало бара-->

<div id="logo_container"> <!--лого на баре-->

<div id="logo_image"></div><!--само лого-->

<div id="bar_block"><!--кнопки с бара -->

<a class="bar_button" href="index.html">На главную</a>

<a class="bar_button" href="content.html">Содержание</a>

<a class="bar_button" href="random.html">Случайная глава</a>

<a class="bar_button" href="link.html">Полезные ссылки</a>

</div><!--кнопки кончились-->

</div> <!--лого на баре,конец-->

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

<div id="content2">

<div id="headercontent">

<div id="pagecontentmain">Урок второй</div>

<div id="pagecontentmain2">Выбираем наш уникальный шаблон</div>

</div>

<div id="header_lower">

<div id="pagecontenttextbig">Где взять шаблон?</div>

<div id="pagecontenttext">

<a class="gmailsend" href="http://psd-html-css.ru/shablony/html-landing-page">Нашими будущие страницы тут</a></div>

<div id="pic">

<img src="images/site.png">

</div>

<div id="pagecontenttext">На сайте всё понятно и удобно расположено, есть <b>предпросмотр</b>, думаю проблем возникнуть не должно.

</div>

<div id="linkhtml">

<a class="whylink" href="3.html">Теперь выбрав шаблон который Вам нравится, перейдём к следующей части.</a><a href="http://psd-html-css.ru/shablony/html-landing-page"></a></div>

</div>

</div>

</div>

</div>

</div>

<div id="bottom_bar">

<div id="main_container"><!--нижний бар-->

<div id="header_lower">

<div id="header_content_lowerline">

<div id="header_content_lowerboxcontent">

</div>

</div>

</div>

<div id="header_lower"> <div id="header_content_lowerline">

<div id="header_content_lowerboxcontent"></div>

</div>

</div>

</div>

</div>

<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>

</body>

</html>

Приложение к Листинг 3.Html

<DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Электронное пособие Landing Page</title>

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

</head>

<body>

<div id="top_bar"><!--начало бара-->

<div id="logo_container"> <!--лого на баре-->

<div id="logo_image"></div><!--само лого-->

<div id="bar_block"><!--кнопки с бара -->

<a class="bar_button" href="index.html">На главную</a>

<a class="bar_button" href="content.html">Содержание</a>

<a class="bar_button" href="random.html">Случайная глава</a>

<a class="bar_button" href="link.html">Полезные ссылки</a>

</div><!--кнопки кончились-->

</div> <!--лого на баре,конец-->

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

<div id="content3">

<div id="headercontent">

<div id="pagecontentmain">Урок третий</div>

<div id="pagecontentmain2">Меняем код под себя</div>

</div>

<div id="header_lower">

<div id="pagecontenttextbig">Как мы сможем добиться уникальности?</div>

<div id="pagecontenttext">Загрузив выбранный вами шаблон, у вас в распоряжении появится папка с HTML, CSS, JavaScript.

</div>

<div id="pic">

<img src="images/folder.png">

</div>

<div id="pagecontenttext">Папку JS в которой содержится JavaScript файлы,Bootstrap-специальное приложение для придания красоты вашему сайту.

В файлах basicelements и jquery инструкции позволяющие работать самому landing-эффекту, а файл SmoothScroll обеспечевает эффект плавной прокрутки. Это <b>папку</b> желательно <b>не трогать</b>, так как всё уже настроено за Вас.

</div>

<div id="pic">

<img src="images/javascript.png">

</div>

<div id="pagecontenttext">В папке CSS содержутся файлы для<b>задания стилей</b> вашей посадочной страницы. Из всех файлов в данной папке нам понадобиться только файл <b>basicelement</b>, ибо файлы bootstrap и bootstrap.min взаимодайствуют с JavaScript, и Bootstrap файлами.</div>

<div id="pic">

<img src="images/css.png">

</div>

<div id="pagecontenttext">В файле basicelement содержутся необходимые нам элементы используемые для задания условий HTML-элементам в HTML файле.Самые часто используемые: <b>смена шрифта, его размера, начертание и отступы от других блоков.</b></div>

<div id="pic">

<img src="images/cssexaple.png">

</div>

<div id="pagecontenttext">В файле index и находится скаченный или уже изменённый вам непорсредственно Вами наша страница, со всеми возможностями и предоставляет нам <b>текущий вид страницы</b>, с всевозможными подключёнными элементами и скриптами.</br>

В нём мы в прямом смысле как в "блокноте", протисываем необходимый нам текст, а затем применяем к блоку условия заданные в CSS-файле , и работа всех подключённых вами скриптов, и плагинов, происходит исключительно тут.</div>

<div id="pic">

<img src="images/html.png">

</div>

<div id="linkhtml">

<a class="whylink" href="4.html">Поняв основы перейдём к выводу</a><a href="http://psd-html-css.ru/shablony/html-landing-page"></a></div>

</div>

</div>

</div>

</div>

</div>

<div id="bottom_bar">

<div id="main_container"><!--нижний бар-->

<div id="header_lower">

<div id="header_content_lowerline">

<div id="header_content_lowerboxcontent">

</div>

</div>

</div>

<div id="header_lower"> <div id="header_content_lowerline">

<div id="header_content_lowerboxcontent"></div>

</div>

</div>

</div>

</div>

<div id="copyright"> Иркутский Авиационный Техникум 2016г. </div>

</body>

</html>