- •Міністерство освіти і науки україни
- •Програмування для internet Конспект лекцій
- •Верстка
- •Редакторы для верстки
- •Валидаторы
- •Графические редакторы
- •Другие программы
- •Основные понятия Теги
- •Атрибуты и их значения
- •Семантическая верстка
- •Содержимое тега head
- •Работа с макетом
- •Контейнеры
- •Изображения и ссылки
- •Адреса в Интернете
- •Особенности свойств тегов Свойства: отступ
- •Отступы по умолчанию
- •Свойства: тип тега
- •Свойство visibility
- •Свойства: границы
- •Свойства: размер
- •Свойство: позиционирование
- •Центрирование блока
- •Документы html5
- •Структура документа
- •Структура тела документа
- •Макет страницы
- •Строение тела документа
- •Отображение документа в окне браузера
- •Контрольные вопросы и задания:
- •Задание для самостоятельной работы:
- •Стили css
- •Стили и стуктура
- •Блочные элементы
- •Основы применения стилей
- •Строчные стили
- •Встроенные стили
- •Внешние файлы
- •Ссылка по любому атрибуту
- •Определение ссылок по псевдоклассам
- •Новые селекторы
- •Контрольные вопросы и задания:
- •Блочные модели
- •Традиционная блочная модель
- •Универсальный селектор *
- •Новая иерархия заголовков
- •Объявление новых элементов html5
- •Выравнивание тела документа по центру
- •Создание главного блока
- •Заголовок
- •Навигационная полоса
- •Раздел и боковая врезка
- •Нижний колонтитул
- •Контрольные вопросы и задания:
- •Принцип работы гибкой блочной модели
- •Свойство display
- •Свойство box-orient
- •Свойство box-direction
- •Свойство box-ordinal-group
- •Сойство box-pack
- •Свойство box-flex
- •Свойство box-align
- •Гибкая блочная модель
- •Контрольные вопросы и задания:
- •Свойства css3
- •Свойство border-radius
- •Свойство box-shadow
- •Свойство text-shadow
- •Свойство @font-face
- •Линейный градиент
- •Радиальный градиент
- •Свойство outline
- •Свойство border-image
- •Свойства transform и transition
- •Функция transform: rotate
- •Функция transform: skew
- •Функция transform: translate
- •Одновременное использование всех видов трансформации
- •Динамические трансформации
- •Переходы
- •Внедрение JavaScript
- •Обработчики событий
- •Контрольные вопросы и задания:
- •Воспроизведение видеои аудио с помощью html5
- •Программирование видеопроигрывателя
- •Свойства
- •Выполнение кода
- •Воспроизведение аудио с помощью html5
- •Программирование видеопроигрывателя
- •Контрольные вопросы и задания:
- •Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм
- •Атрибут multiple
- •Атрибут autofocus
- •Атрибут pattern
- •Атрибут form
- •Новые элементы форм
- •Контрольные вопросы и задания:
- •Швець н.В. Програмування для internet Конспект лекцій
- •65039, Одеса, вул. Канатна, 112
Строение тела документа
Базовая структура нашего документа определена. Теперь разберемся с его содержанием. Пока мы рассмотрели только элементы HTML5, помогающие определять разделы макета и указывать их назначение.
Информация в документе может включать в себя разные визуальные элементы, такие как заголовки. тексты, изображения, видео. Нам необходимо различать эти элементы и устанавливать взаимоотношения между ними.
Рассмотри пример кода:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="description" content="Это пример HTML5">
<meta name="keywords" content="HTML5, CSS3, JavaScript">
<title>Этот текст - заголовок документа</title>
<link rel="stylesheet" href="mystyles.css">
</head>
<body>
<header>
<h1>Это главный заголовок веб-сайта</h1>
</header>
<nav>
<ul>
<li>Домой</li>
<li>Фотографии</li>
<li>Видео</li>
<li>Контактыt</li>
</ul>
</nav>
<section>
<article>
<header>
<hgroup>
<h1>Заголовок статьи 1</h1>
<h2>Подзаголовок статьи 1</h2>
</hgroup>
<p>Опубликовано 12-10-2012</p>
</header>
This is the text of my first post
<figure>
<img src="myimage.jpg">
<figcaption>
Это текст первой статьи
</figcaption>
</figure>
<footer>
<p>Комментарии (0)</p>
</footer>
</article>
<article>
<header>
<hgroup>
<h1>Заголовок статьи 2</h1>
<h2>Подзаголовок статьи 2</h2>
</hgroup>
<p>Опубликовано 12-15-2012</p>
</header>
Это текст второй статьи
<footer>
<p>Комментарии (0)</p>
</footer>
</article>
</section>
<aside>
<blockquote>Статья номер 1</blockquote>
<blockquote>Статья номер 2</blockquote>
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
<article>. Содержимое веб-сайтов чаще всего делится на фрагменты, обладающие схожими характеристиками. Определить каждый из этих фрагментов позволяет тег <article>. Название элемента <article> никак не ограничивает его применение, т. е. не обязательно описывать с его помощью только новостные статьи. Элементы <article> могут описывать любые независимые части содержимого документа: публикации на форуме, статьи в журнале, записи блога, комментарии пользователей и т.п. Данный элемент всего лишь группирует связанные друг с другом фрагменты информации, независимо от характера этой информации.
<header> </header> |
|
<nav> </nav> |
|
<section> <article> </article>
<article> </article> </section> |
<aside>
</aside> |
<footer> </footer> |
|
Как любая независимая часть документа, содержимое каждого элемента <article> обладает собственной структурой. При определении этой структуры мы можем пользоваться преимуществами, которые дает нам универсальность тегов <header> и <footer>. Это переносимые теги, и их можно использовать не только в теле документа, но и внутри любого его раздела.
В нашем листинге описаны две статьи с помощью элемента <article>, и у каждой статьи задана своя структура. Вначале определен тег <header> с заголовками <h1> и <h2>. Далее идет основное содержимое, т.е. текст статьи. Завершает каждую статью тег <footer> с указанием количества комментариев.
<hgroup>. Для создания заголовков мы можем использовать теги <h>: <h1>, <h2>. <h3>, <h4>, <h5> и <h6>. Однако для ускорения обработки документа и для того чтобы во время его интерпретации не создавались множественные разделы и подразделы, эти теги желательно группировать. Для этой цели в HTML5 используется тег <hgroup>. Необходимо соблюдать иерархию тегов <h>, т.е. сначала должен быть объявлен тег <h1>, затем для подзаголовка тег <h2> и т.д. Но в отличие от предыдущих версий HTML, в HTML5 тег <h> можно использовать в каждом разделе и заново строить такую иерархию.
Элемент <hgroup> следует добавлять только в том случае, если в одном теге <header> есть заголовки разных уровней. Если нужно использовать только тег <h1>, то в <hgroup> нет необходимости.
<figure> и <figcaption>. Элемент <figure> предназначен для более точного определения содержимого документа. До его появления невозможно было объявить содержимое, которое представляет собой изолированную часть документа: иллюстрации, рисунки, видео и т.п. Как правило. такие элементы являются частью основного раздела, но их можно спокойно удалять из документа, не нарушая его структуру. Если такая информация присутствует в документе, то она определяется тегом <figure>. В нашем листинге тег <figure> определяет визуальное дополнение текста и помогает отличить его от остальной информации в документе. Такие блоки информации, как изображения и видео, принято подписывать. В HTML5 предусмотрен специальный элемент для создания таких подписей. Тег <figcaption> определяет текст, относящийся к содержимому <figure>, и устанавливает отношение между этим элементами и их содержимым.