Файл: Основы программирования на языке HTML (Техническое задание).pdf

И так, мы рассмотрели первый блок, о котором уже говорилось ранее в первой главе курсовой работы. Итоги таковы, что каждый блок конечно же отвечает на свои определенно отведенные нормы. Таким образом первый блок или блок 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="" /> (Ссылка на изображение в блоке)

<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.</p> ( Текст в блоке)

</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>

Смотрите также файлы

Оборотные активы предприятия (Сущность, структура и классификация оборотных средств предприятия).pdf

Конкурентные стратегии фирм на внутреннем и/или мировом рынках (Виды стратегии конкуренции).pdf

Нотариат и его роль в защите гражданских прав и охраняемых законом интересов.pdf

Структура нормы права.pdf

Правовые основы организации нотариата ( Понятие нотариальной деятельности).pdf

Файл: Основы программирования на языке HTML (Техническое задание).pdf

Заключение

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

Смотрите также файлы

Информация

Списки файлов

Дополнительно