Разработка и оформление электронного издания – учебного сайта "HTML5&CSS3"
Формирование и структура, взаимосвязь основных элементов учебного сайта "HTML5&CSS3" для предоставления пользователям информации о новейших технологиях в web-индустрии и обучения практическим навыкам их применения. Разработка руководства пользователя.
| Рубрика | Программирование, компьютеры и кибернетика |
| Вид | курсовая работа |
| Язык | русский |
| Дата добавления | 17.06.2014 |
| Размер файла | 329,2 K |
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
и JavaScript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.</p>
<p>W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.</p>
<p>Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.</p>
<ul class= «mark_text»>
<li>Поддержка геолокации - определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.</li>
<li>Воспроизведение видеороликов.</li>
<li>Воспроизведение аудиофайлов.</li>
<li>Локальное хранилище - позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.</li>
<li>Фоновые вычисления - стандартный способ запуска JavaScript в браузере в фоновом режиме.</li>
<li>Оффлайновые приложения - страницы, которые могут работать при отключении Интернета.</li>
<li>Рисование - внутри тега<code> < canvas></code> с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.</li>
<li>Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.</li>
</ul>
<p>Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести страницу на HTML5.</p>
</div>
</div>
</div>
<div class= «footer»>
© made by Nastya Trofimenko<br/>
VPS-09-02
</div>
</body>
</html>
Код страницы structure.html
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= «Content-Type» content= «text/html; charset=utf-8» />
<link rel= «stylesheet» type= «text/css» href= «style.css» />
<title>HTML</title>
</head>
<body id= «structure»>
<div class= «conteiner»>
<div class= «head»>
<a href= «index.html»><img alt=»» src= «images/logo-html.png» width= «160»/></a>
<div class= «head_p»><p>Харьковский Национальный Университет Радиоэлектроники</p>
<p>Кафедра ИКГ</p>
<h2>Справочник по HTML5</h2>
</div>
<p class= «cleaner»></div>
<div class= «main_menu»>
<ul>
<li class= «red»><a href= «html.html» >Введение</a></li>
<li class= «orange»><a href= "#» >Структура кода</a></li>
<li class= «yellow»><a href= «new_tags.html»>Теги разметки</a></li>
<li class= «green»><a href= «forma.html»>Элементы формы</a></li>
<li class= «blue»><a href= «media.html»>Медиа</a></li>
</ul>
</div>
<div class= «content»>
<h3>СТРУКТУРА КОДА</h3>
<p>Любой код разметки начинается с доктайпа, этот элемент говорит браузеру, на каком языке разметки и его версии написан документ. Также доктайп переводит браузер в один из возможных режимов: стандартный, почти стандартный и режим совместимости. В HTML5 нет подобных делений, доктайп один единственный и при его наличии браузер работает в стандартном режиме.</p>
<p><code class= «mark_text»><! DOCTYPE html></code></p>
<p>Из всех видов это самый короткий доктайп, его легко запомнить и набирать по памяти.</p>
<p>Изменения претерпели и другие теги, так, у тега <span class= «or-color»>< html> </span>нет атрибута <span class= «or-color»>xmlns</span>, а кодировка документа сократилась до такой записи.</p>
<p><code class= «mark_text»>< meta charset= «utf-8»></code></p>
<p>Впрочем, старый способ указать кодировку также остался.</p>
<p><code class= «mark_text»>< meta http-equiv= «Content-Type» content= «text/html; charset=utf-8»></code></p>
<p>Атрибут type у тега <span class= «or-color»>< script></span> и <span class= «or-color»>< style></span> можно опустить, браузер автоматически понимает содержимое этих тегов и ему уже не требуется
явно об этом напоминать. Простейший код приведён в примере 1.1.</p>
<p>Пример 6.1. Код на HTML5</p>
<p class= «mark_text»> <code><! DOCTYPE html><br />
< html><br />
< head><br />
< meta charset= «utf-8»><br />
< title> Пример страницы</title><br />
< style><br />
p {color: navy;}<br />
</style><br />
</head><br />
< body><br />
< p> Страница на HTML5</p><br />
</body><br />
</html></code></p>
<p> <a href= «examples/example1.1.html» title= «Открыть в текущем окне»><img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a><a href= «examples/example1.1.html" title= «Открыть в новом окне» target=»_blank»><img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a></p>
</div>
</div>
<div class= «footer»>
© made by Nastya Trofimenko<br/>
VPS-09-02
</div>
</body>
Код страницы new_tags.html
<! DOCTYPE html>
<html>
<head>
<meta http-equiv= «Content-Type» content= «text/html; charset=utf-8» />
<link rel= «stylesheet» type= «text/css» href= «style.css» />
<title>HTML</title>
</head>
<body id= «new_tags»>
<div class= «conteiner»>
<div class= «head»>
<a href= «index.html»><img alt=»» src= «images/logo-html.png» width= «160»/></a>
<div class= «head_p»><p>Харьковский Национальный Университет Радиоэлектроники</p>
<p>Кафедра ИКГ</p>
<h2>Справочник по HTML5</h2>
</div>
<p class= «cleaner»></div>
<div class= «main_menu»>
<ul>
<li class= «red»><a href= «html.html» >Введение</a></li>
<li class= «orange»><a href= «structure.html» >Структура кода</a></li>
<li class= «yellow»><a href= "#»>Теги разметки</a></li>
<li class= «green»><a href= «forma.html»>Элементы формы</a></li>
<li class= «blue»><a href= «media.html»>Медиа</a></li>
</ul>
</div>
<div class= «content»>
<img class= «img-aside» alt=»» src= «images/booktree.gif» />
<h3>Новые теги разметки</h3>
<p>В HTML5 для структуры кода введено несколько новых тегов:</p>
<ul>
<li><span class= «or-color bold»>< article></span></li>
<li><span class= «or-color bold»>< aside></span></li>
<li><span class=«or-color bold «>< footer></span></li>
<li><span class= «or-color bold»> < header></span></li>
<li><span class= «or-color bold»> < nav></span></li>
</ul>
<p>которые заменяют в некоторых случаях привычный <span class= «or-color italic»> < div></span>. Хотя кажется, что особой разницы между тегами <span class= «or-color italic»>< div class= «header»></span> и
<span class= «or-color italic»>< header> </span>нет, между ними лежит огромная пропасть. Теги ориентированы не на людей, которым нет смысла заглядывать в исходный код страницы, а на машины, интерпретирующих код. Машины или роботы не понимают <span class= «or-color italic»>< div class= «header»></span>, для них это типовой тег разметки - замени его на <span class= «or-color italic»> < div class= «abrakadabra»></span> и смысл не поменяется. Другое дело <span class= «or-color bold»>< header></span>, робот, обнаружив этот тег, воспринимает его именно как шапку сайта или раздела.</p>
<p>Что это даёт в итоге? Поисковые системы начинают лучше индексировать сайт, потому что чётко отделяют контент страницы от вспомогательных элементов. Речевые браузеры, предназначенные для слепых людей, пропускают заголовок и переходят непосредственно к содержимому. Сайты могут автоматически обмениваться контентом и другой информацией между собой. Все эти возможности называются <span class= «or-color italic»>семантикой</span> и позволяют представить данные в удобном для роботов виде.</p>
<p class= «example bold»>Пример 1.2. Использование < header> </p>
<p class= «mark_text»>
<code>< header><br />
< img src= «images/header-title.png» alt= «Как поймать льва в пустыне» /><br />
</header><br />
</code></p>
<p>Попытка добавить в стилях фон к тегу <span class= «italic»>< header></span> ни к чему не привела, фон в некоторых браузерах отображаться не желает.
Все новые теги следует сделать вначале блочными через свойство <span class= «or-color italic»>display</span>, тогда они начнут корректно выводиться (пример 1.3).</p>
<p class= «example bold»>Пример 1.3. Шапка сайта</p>
<p class= «mark_text»>
<code>< style><br />
header {<br />
display: block;<br />
background: #00B0D8 url (images/header-gradient.png) repeat-x;<br />
}<br />
</style><br />
</code></p>
<p>Данный пример будет работать во всех браузерах, кроме IE7 и IE8. Internet Explorer не добавляет стиль к элементам, которые не понимает. Это недоразумение можно исправить, если создать фиктивный элемент с помощью JavaScript. Для этого включим в <span class= «italic»>< head> </span>такой код.</p>
<p class= «mark_text»>
<code>< script><br />
document.createElement («header»);<br />
</script><br />
</code></p>
<p>Если на странице встречается один тег, этот скрипт вполне подойдёт для работы. Но не хочется повторятьстроку десять раз для десяти разных тегов, поэтому автоматизируем этот процесс через цикл. Сами теги указываются списком, разделяясь запятой (пример 1.4).</p>
<p class= «example bold»>Пример 1.4. Скрипт для IE</p>
<p class= «mark_text»>
<code>
<! - [if lt IE 9]>
< script><br />
var e = («article, aside, figcaption, figure, footer, header, hgroup, nav, section, time»).split (', ');<br />
for (var i = 0; i < e.length; i++) {<br />
document.createElement (e[i]);<br />
}<br />
</script><br />
<! [endif]->
</code></p>
<p>Сам скрипт заключается в условные комментарии, чтобы выполнялся только для IE версии 8.0 и ниже. В IE9 поддержкановых тегов HTML5 уже включена.</p>
<p>Пример выше не обязательно вставлять к себе на сайт, можно воспользоваться общедоступным скриптом написанным Реми Шарпом и распространяемым по лицензии MIT. Для этого достаточно указать на него ссылку, как показано в примере 1.5.</p>
<p class= «example bold»>Пример 1.5. Скрипт для IE</p>
<p class= «mark_text»>
<code>
<! - [if lt IE 9]> <<br />
< script src= «http://html5shiv.googlecode.com/svn/trunk/html5.js»></script> <br />
<! [endif]-><br />
</code></p>
<p>Все указанные скрипты должны располагаться в коде перед CSS.</p>
<p>Таким образом, для полноценного использования тегов HTML5 во всех браузерах достаточно выполнить три условия:</p>
<ul>
<li>установить доктайп <span class= «italic»><! DOCTYPE html></span>;</li>
<li>включить скрипт из примера 1.4 или 1.5;</li>
<li>в стилях для новых тегов установить display: block.</li>
<ul>
<p>Теперь рассмотрим некоторые теги HTML5 более подробно, чтобы понять область их применения.</p>
<p class= «title bold»>< article></p>
<p>Задаёт содержание сайта вроде новости, статьи, записи блога, форума или др. В примере 1.6 показано добавление тега<span class= «or-color bold»>< article></span>.</p>
<p class= «example bold»>Пример 1.6. Использование тега < article></p>
<p class= «mark_text»>
<code>
<! DOCTYPE html><br />
< html><br />
< head><br />
< meta charset= «utf-8»><br />
< title> article</title><br />
</head><br />
< body><br />
< header>< h1> Следы невиданных зверей</h1></header><br />
< article><br />
История о том, как возле столовой появились загадочные розовые <br />
следы с шестью пальцами, и почему это случилось. <br />
</article><br />
</body> <br />
</html><br />
</code></p>
<p><a href= «examples/example1.6.html» title= «Открыть в текущем окне»><img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a><a href= «examples/example1.6.html" title= «Открыть в новом окне» target=»_blank»><img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a></p>
<p class= «title bold»>< aside></p>
<p>Определяет блок, который не относится к основному контенту, для размещения рубрик, ссылок на архив, меток и другой информации (пример 1.7).Такой блок, если он располагается сбоку, называется, как правило, «сайдбар» или «боковая панель».</p>
<p class= «example bold»>Пример 1.7. Использование < aside></p>
<pre class= «or»>
<! DOCTYPE html>
< html>
< head>
< meta charset= «utf-8»>
< title> aside</title>
< script>
document.createElement('aside');
document.createElement('article');
</script>
< style>
aside {
background: #f0f0f0; <span class= «comment»> /* Цвет фона */</span>
padding: 10px; <span class= «comment»>/* Поля */</span>
width: 200px; <span class= «comment»>/* Ширина сайдбара */</span>
float: right; <span class= «comment»>/* Обтекание слева */</span>
}
article {
margin-right: 240px;<span class= «comment»> /* Отступ справа */</span>
display: block; <span class= «comment»>/* Блочный элемент */</span>
}
</style>
</head>
< body>
< aside>
< p> Экономьте электричество</p>
< p> Хороший язык</p>
< p> Чья палка больше</p>
</aside>
< article>
История о том, как приходилось экономить электричество,
какие меры для этого принимались, и куда оно на самом деле уходило.
</article>
</body>
</html>
</pre>
<p>
<a href= «examples/example1.7.html» title= «Открыть в текущем окне»>
<img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a> <a href= «examples/example1.7.html" title= «Открыть в новом окне» target=»_blank»>
<img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a>
</p>
<p class= «title bold»>< figure></p>
<p>Используется для группирования любых элементов, например, изображений и подписей к ним (пример 1.8).</p>
<p class= «example bold»>Пример 1.8. Использование <figure></p>
<pre class= «or»>
<! DOCTYPE html>
< html>
< head>
< meta charset= «utf-8»>
< title> figure</title>
< script>
document.createElement('figure');
document.createElement('figcaption');
</script>
< style>
figure {
background: #5f6a72; <span class= «comment»>/* Цвет фона */</span>
padding: 10px; <span class= «comment»>/* Поля вокруг */</span>
display: block; <span class= «comment»>/* Блочный элемент */</span>
width: 150px; <span class= «comment»>/* Ширина */</span>
float: left; <span class= «comment»>/* Блоки выстраиваются по горизонтали */</span>
margin: 0 10px 10px 0; <span class= «comment»>/* Отступы */</span>
text-align: center; <span class= «comment»>/* Выравнивание по центру */</span>
}
figcaption {
color: #fff; <span class= «comment»>/* Цвет текста */</span>
}
p {
width: 150px;
height: 150px;
overflow:hidden;
}
img {
height: 150px;
}
</style>
</head>
< body>
< article>
< figure>
< p>< img src= «images/sof.jpg» alt=»«></p>
< figcaption> Софийский собор</figcaption>
</figure>
< figure>
< p>< img src= «images/pol.jpg» alt=»«></p>
< figcaption> Польский костёл</figcaption>
</figure>
</article>
</body>
</html>
</pre>
<p>
<a href= «examples/example1.8.html» title= «Открыть в текущем окне»>
<img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a>
<a href= «examples/example1.8.html" title= «Открыть в новом окне» target=»_blank»>
<img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a>
</p>
<p class= «title bold»>< figcaption></p>
<p>Содержит описание для тега <span class= «or-color bold»>< figure></span>. Тег <span class= «or-color bold»> < figcaption> </span>должен быть первым или последним элементом в группе.</p>
<p class= «title bold»>< footer></p>
<p>Задаёт <span class= «or-color italic»> «подвал»</span> сайта или раздела, в нем обычно располагается имя автора, дата документа,
контактная и правовая информация (пример 1.9).</p>
<p class= «example bold»>Пример 1.9. Использование <footer></p>
<pre class= «or»>
<! DOCTYPE html>
< html>
< head>
< meta charset= «utf-8»>
< title> footer</title>
</head>
< body>
< header>
< h1> Персональный сайт Кристины Ветровой</h1>
</header>
< article>
< h2> Добро пожаловать!</h2>
< p> Рада приветствовать вас на своем сайте.</p>
</article>
< footer>
Copyright Кристина Ветрова
</footer>
</body>
</html>
</pre>
<p>
<a href= «examples/example1.9.html» title= «Открыть в текущем окне»>
<img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a>
<a href= «examples/example1.9.html" title= «Открыть в новом окне» target=»_blank»>
<img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a>
</p>
<p class= «title bold»>< hgroup></p>
<p>Используется для группирования заголовков веб-страницы или раздела (пример 1.10).</p>
<p class= «example bold»>Пример 1.10. Использование < hgroup></p>
<pre class= «or»>
<! DOCTYPE html>
< html>
< head>
< meta charset= «utf-8»>
< title> hgroup</title>
< style>
hgroup {
color: #a20000;
}
</style>
</head>
< body>
< hgroup>
< h1> Кристина Ветрова</h1>
< h2> Персональный сайт</h2>
</hgroup>
< h1> Кристина Ветрова</h1>
< h2> Опанасенко Андрей</h2>
< h3> Лошкарёв Александр</h3>
< hgroup>
< h4> Кухтенко Владимир</h4>
< h5> Зашаловская Анастасия</h5>
</hgroup>
< h6> Кислый Руслан</h6>
</body>
</html>
</pre>
<p>
<a href= «examples/example1.10.html» title= «Открыть в текущем окне»>
<img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a>
<a href= «examples/example1.10.html" title= «Открыть в новом окне» target=»_blank»>
<img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a>
</p>
<p class= «title bold»>< nav></p>
<p>Задаёт навигацию по сайту (пример 1.11). Если на странице несколько блоков ссылок, то в <span class= «or-color bold»>< nav></span>обычно помещают приоритетные ссылки. Также допустимо использовать несколько тегов <span class= «italic»>< nav></span> в документе. Запрещается вкладывать <span class= «italic»>< nav></span> внутрь <span class= «or-color italic»>< address></span>.</p>
<p class= «example bold»>Пример 1.11. Использование < nav></p>
<pre class= «or»>
<! DOCTYPE html>
< html>
< head>
< meta charset= «utf-8»>
< title>nav</title>
</head>
< body>
< header>
< h1>Чебурашка и крокодил Гена</h1>
</header>
< nav>< a href= "#»>Чебурашка</a> | < a href="#>Гена</a> |
< a href= "#»>Шапокляк</a> | < a href= "#»>Лариска</a></nav>
< article>
< h2>Добро пожаловать!</h2>
</article>
</body>
</html>
</pre>
<p>
<a href= «examples/example1.11.html» title= «Открыть в текущем окне»>
<img alt=»» src= «images/Action-window-no-fullscreen-icon.png» width= «50» /></a><a href= «examples/example1.11.html" title= «Открыть в новом окне» target=»_blank»>
<img alt=»» src= «images/Action-window-new-icon.png» width= «50» /></a>
</p>
</div>
</div>
<div class= «footer»>
© made by Nastya Trofimenko<br/>
VPS-09-02
</div>
</body>
</html>
Размещено на Allbest.ru
Подобные документы
История появления HTML5. Отличия HTML5 от предыдущих версий. Сравнительный анализ плюсов и минусов. Примеры российских сайтов на HTML5. Увеличение скорости работы. Технология Web Storage. Структурные возможности HTML5. Сравнение популярных браузеров.
курсовая работа [4,2 M], добавлен 23.10.2013Анализ сайтов для обучения иностранным языкам в сети Интернет и методик их изучения. Разработка сайта Foreign Dimension для обучения английскому языку. Структура сайта, разработка упражнений, базы данных, интерфейса. Тестирование основных элементов сайта.
дипломная работа [966,9 K], добавлен 19.01.2017Сущность, предназначение и виды электронного учебного издания. Обзор современных электронных учебных изданий. Основные компоненты графического интерфейса модели. Реализация модели лектронного учебного издания "Основы высшей математики" в Delphi.
дипломная работа [1,3 M], добавлен 26.03.2013HTML как язык разметки гипертекста, его структура, элементы. Каскадные таблицы стилей, их разработка. Верстка: страницы как мы их видим. Новые технологии – HTML5, CSS3. LESS. Динамический язык стилевой разметки. Технологии упрощенной разметки HAML, SASS.
дипломная работа [3,4 M], добавлен 19.04.2013Преимущества CSS3 - расширенной и усовершенствованной спецификации таблиц стилей. Оформление текстов и изображений на веб-страницах с помощью закругленных углов, теней, поворотов и трехмерных эффектов. Особенности разработки меню, навигации и кнопок.
курсовая работа [2,4 M], добавлен 12.12.2013Разработка сайта в приложении FrontPage. Программные средства и технологии, используемые при разработке сайта. Основная структура сайта и размещение исходных файлов. Создание графических страниц, элементов и рисунков. Размещение сайта в сети Internet.
курсовая работа [1,6 M], добавлен 13.06.2013Формирование виртуальной странички предприятия в Internet. Обоснование выбора платформы. Разработка структуры и дизайна сайта, электронного каталога продуктов фирмы. Оптимизация сайта под поисковые системы. Основные принципы и правила продвижения сайта.
дипломная работа [3,0 M], добавлен 01.01.2018Проектирование web-сайта кафедры для освещения деятельности учебного заведения. Выбор программных средств для его разработки. Разработка интерфейса и административной части сайта. Описание и принцип работы свободного програvмного обеспечения CMS PHP-NUKE.
курсовая работа [2,0 M], добавлен 16.12.2009Понятие сайта как Интернет-ресурса. Специфические особенности сайтов учебных заведений. Видимость сайта в поисковых выдачах. Анализ сайта учебного заведения на примере сайта Тираспольского межрегионального университета. Составляющие (рубрики) сайта.
курсовая работа [403,8 K], добавлен 27.04.2013Анализ сетевых технологий в гостиничном деле. Официальные сайты компаний. Технологии при создании и поддержке сайтов. Разработка модели web-ресурса, шаблона, тестового примера. Основные этапы создания веб-сайта и презентации. Цены на разработку сайта.
курсовая работа [3,6 M], добавлен 30.03.2014
