<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

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

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

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

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

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

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

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

Как использовать секционные элементы в HTML5.

Как использовать секционные элементы в HTML5.

Всем привет! Стандарт HTML5 используется уже практически везде, однако многие до сих пор не умеют делать правильную разметку с использованием новых тегов. Если вы относитесь к одним из них, то эта статья для вас.

Main

Элемент main должен содержать основную информацию вашей страницы. Весь контент должен быть уникальным и не появляться где-либо еще на сайте. Любой контент, который повторяется на нескольких страницах(лого, поисковые блоки, ссылки в футере и т.д.) не должны быть помещены в элемент main.

Пример использование тега main ниже.

<body>
<header>
<div id="logo">Rocking Stone</div>
<nav>...</nav>
</header>
<main role="main">
<h1>Guitars</h1>
<p>The greatest guitars ever built.</p>

<article>
<h2>Gibson SG</h2>
<p>...</p>
</article>

<article>
<h2>Fender Telecaster</h2>
<p>...</p>
</article>
</main>
</body>

Заметка! Мы использовали атрибут role='main' для программ, которые еще не поддерживают тег main.

Вам следует использовать только один элемент main на странице, и он не должен быть помещен в теги article, aside, header, footer или элемент nav.

Article

Элемент article должен содержать часть автономного содержания, которое может быть распределено вне контекста страницы. Это включает такие вещи, как новостные статьи, посты блога или комментарии пользователей.

<article>
<header>
<h1>Blog Post Title</h1>
<p>Posted 13th February 2014</p>
</header>
<p>
...
</p>
</article>

Вы можете вкладывать элементы article в друг друга. В таком случае подразумевается, что вложенные элементы связаны с внешним элементом article.

<article>
<header>
<h1>Blog Post Title</h1>
<p>Posted 13th February 2014</p>
</header>
<p>...</p>
<p>...</p>
<p>...</p>
<section>
<h2>Comments</h2>
<article>
<footer>
<p>Posted by: Joe Balochio</p>
</footer>
<p>This was a great article</p>
</article>
<article>
<footer>
<p>Posted by: Casey Brock</p>
</footer>
<p>How do you think this applies to the plan for world domination?</p>
</article>
</section>
</article>

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

Section

Данный элемент используется для представления группы связанного содержания. Он очень похож на элемент article, однако различие в том, что содержание в section не обязательно дожно иметь смысл с контекстом страницы.

Желательно использовать элементы заголовка, чтобы определить тему для раздела. Использование поста блога в качестве примера, вы могли использовать элементы section, которые представляют каждую из отдельных частей в пределах поста.

<article>
<h1>How to use HTML5 Sectioning Elements</h1>
<p>...</p>

<section>
<h2>The <main> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <article> Element</h2>
<p>...</p>
</section>
<section>
<h2>The <section> Element</h2>
<p>...</p>
</section>
...
</article>

Здесь мы использовали элемент article, чтобы определить пост, как единое целое, а затем множество элементов section, чтобы определить каждую отдельную часть, рассмотренную в статье.

Если вам нужно просто сгруппировать контент вместе для стилизации, то лучше использовать элемент div, нежели section.

Nav

Элемент nav используется для того, чтобы определить группу ссылок на страницы сайта.

<nav>
<ul>
<li><a href="#chapter-one">Chapter One</a>
<li><a href="#chapter-two">Chapter Two</a>
<li><a href="#chapter-three">Chapter Three</a>
</ul>
</nav>

Использование списков для создания навигации часто делает ее проще, однако это не обязательное требование при использовании элемента nav.

Aside

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

<article>
<header>
<h1>Google Buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>
<p>...</p>
<p>...</p>

<aside>
<h1>Google (GOOG)</h1>
<p>Google was founded in 1998 by Larry Page and Sergey Brin. The company...</p>
</aside>
</article>

В этом примере мы использовали этот элемент, чтобы разметить информацию о Google в новостной статье. Информация о компании может быть полезна для читателей, однако непосредственно не связана с темой статьи.

Header

Элемент header используется для того, чтобы выделить начало контента в статье или страницы. Он, как правило, содержит элементы заголовка, а также некоторые метаданные, которые относятся к содержанию, например, дату статьи. Он также может содержать оглавление(в пределах nav элемента ) для больших документов.

Элемент header будет связан с ближайшей секцией, как правило, это ближайший родительский элемент в структуре документа.

<header>
<h1>Google buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>

В этом примере элемент header содержит заголовок и дату публикации новостной статьи.

Footer

Содержит такие элементы, как автор, информацию о правах или ссылки, связанные со страницей.

<footer>
Copyright Matt West 2014
</footer>

Также, как и элемент header, элемент footer связан с ближайшим элементом section.

Address

Элемент address является самым непонятным для большинства. Он не предназначен для обозначения почтовых адресов, а предназначен для обозначения какой-либо контактной информации для статьи странице. Например, это может быть ссылка на сайт автора или его email.

<address>
Contact <a href="mailto:matt@example.com">Matt West</a>
</address>

Этот элемент часто используется внутри footer для article.

<article>
<header>
<h1>Google buys Nest</h1>
<p>Posted at 11:34am 13th January 2014</p>
</header>
<p>...</p>
<p>...</p>
<footer>
<address>
By <a href="mailto:matt@example.com">Matt West</a>
</address>
<p>Copyright Matt West 2014</p>
</footer>
</article>

Заключительные мысли по поводу секционных элементов

В этой статье вы узнали, как использовать секционные элементы HTML5 на странице. Использование этих элементов дает огромные преимущества. Одно из самых больших - семантическое понимание. Это позволит компьютерным программам лучше понимать структуру вашей страницы. Такая информация будет очень полезна для ридеров.

Заметка! Не все ридеры поддерживают современные HTML5 теги, поэтому используйте атрибут role, если вам нужна их поддержка.

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

Источник: teamtreehouse.com

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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