<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

Весь курс соткан из практических примеров реальной вёрстки. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены!

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

HTML 5 Интерактивные элементы

HTML 5 Интерактивные элементы

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

Вот список интерактивных элементов появившихся в HTML 5:

1) menu.

2) command.

3) datagrid.

4) details.

Элемент menu в HTML 5 является достаточно любопытным, в том плане, что он был ещё в более старых версиях языка HTML, но потом был признан устаревшим, и вот в HTML 5 он неожиданно вернулся вновь.

Элемент menu содержит элементы command (подобно списку и его элементам), каждый из которых способен запускать определённое действие.

<html>
<head>
</head>
<body>
<menu>
  <command onclick="alert('Первая команда')" label="Первая команда"/>
  <command onclick="alert('Вторая команда')" label="Вторая команда"/>
</menu>
</body>
</html>

Соответственно, атрибут label отвечает за заголовок команды, а атрибут onclick обрабатывает событие "Щелчок мыши". Здесь при нажатии, например, по метке "Первая команда" выскочит окно, в котором будет написано: "Первая команда". Благодаря элементам menu и command можно легко делать различные панели инструментов, интересную навигацию по сайту и тому подобное.

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

<html>
<head>
</head>
<body>
<datagrid>
  <table>
    <tr>
      <td>Имя</td>
      <td>Фамилия</td>
      <td>Зарплата</td>
    </tr>
    <tr>
      <td>Василий</td>
      <td>Васильев</td>
      <td>15000</td>
    </tr>
    <tr>
      <td>Иван</td>
      <td>Иванов</td>
      <td>20000</td>
    </tr>
  </table>
</datagrid>
</body>
</html>

Также вместо таблицы дочерним элементом datagrid может быть, например, элемент select. Главный смысл этого элемента, что создаётся массив с данными из дочерних элементов, и это может быть либо таблица, либо даже обычный список.

Элемент details используется для указания информации, которая не является обязательной к показу. Различные браузеры по-разному будут обрабатывать данный элемент. Например, какой-нибудь браузер сделает просто сноску, а другой браузер сделает всплывающую подсказку. Пример использования элемента details ниже:

<html>
<head>
</head>
<body>
<p>
  Основное повествование <details>Детали...</details>
</p>
</body>
</html>

Вот и все нововведения в HTML 5 относительно интерактивных элементов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (7):

serega44022 serega44022 13.11.2012 10:59:41

По моему "Иван" с "Ивановым" местами надо поменять

Ответить

Admin Admin 13.11.2012 11:04:07

Спасибо, исправил!

Ответить

s.s.v.2002 s.s.v.2002 13.06.2013 20:34:52

Когда я полключил иконку на сайт она не стала работать, почему?

Ответить

aazkem aazkem 31.07.2013 17:43:16

тоже details не работает, просто текст без всяких подсказок

Ответить

lev_100rus lev_100rus 04.09.2013 17:35:45

У вас ошибка в тексте. Не detaiils, а details И в КОДЕ в alert кавычка не закрыта <command onclick="alert('Первая команда)" label="Первая команда"/>

Ответить

Admin Admin 04.09.2013 23:44:58

Спасибо, исправил.

Ответить

lev_100rus lev_100rus 05.09.2013 00:47:18

И во второй строке тоже кавычка не закрыта <command onclick="alert('Вторая команда)" label="Вторая команда"/>

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.