Несомненно технология HTML5 развивается очень быстро. С этим возникает причина создания сайта на данной технологии. В этой статье я расскажу как быстро начать создавать сайты на HTML5.
Создание html сайта — способ первый.Первым способом будет это создание самостоятельно с полного нуля сайта на HTML5. Затем проверять сайт во всех браузерах, для того чтобы не было различий. Начало обычно проходит тяжело. И в связи с этим можно упустить из виду некоторые детали.
Создание html сайта — способ второй.Второй же способ это использование HTML5 Boilerplate. Сейчас его можно найти даже на русском языке. У вас наверное возникает вопрос «что же такое HTML5 Boilerplate?».
HTML5 Boilerplate — это набор определенных методик. Его нельзя назвать HTML5 или CSS3 фреймворком. Он представляет из себя html-css-js-шаблон, который можно использовать для создания сайта, при этом все различия браузеров уже учтены. И даже всеми «любимый» IE6 здесь поддерживается.
Вот что находится в архиве с HTML5 Bolilerplate:
Что идет в комплекте с HTML5 Boilerplate:
Если вы разрабатываете или планируете разрабатывать сайты на HTML5, рекомендую Вам обязательно познакомиться с HTML5 Boilerplate. Она значительно облегчит вам выполнение работы и увеличит скорость создания сайта.
Успехов в изучении HTML5 Boilerplate!Создание сайта на HTML5 - создание html сайта 4.43 /5 (88.57%) 7 голос(ов)
Серия контента:HTML5 — это инструмент для упорядочивания Web-контента. Он предназначен для упрощения Web-проектирования и Web-разработки за счет языка разметки, обеспечивающего стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов.
Часто используемые сокращенияHTML5 предоставляет эффективные инструменты для управления данными, для рисования, для воспроизведения видео- и аудиоконтента. HTML5 облегчает разработку кросс-браузерных Web-приложений, а также приложений для мобильных устройств. HTML5 относится к числу технологий, которые стимулируют развитие мобильных сервисов на основе облачных вычислений. Кроме того, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, мультимедийные функции, поддержка баз данных, существенно увеличенная скорость обработки.
Новые теги HTML5 обладают «говорящими» названиями, которые раскрывают назначение и характер использования этих элементов. В предыдущих версиях HTML использовались весьма неопределенные названия тегов. В спецификации HTML5, напротив, используются весьма описательные, интуитивно понятные названия. HTML5 предоставляет информационно-насыщенные названия, которые однозначно идентифицируют соответствующий контент. Например, широко применявшийся до настоящего времени тег был дополнен тегами и . Кроме того, были добавлены теги , , и , которые обеспечивают более точное описание определенных типов контента.
HTML5 предоставляет следующие возможности.
HTML5 позволяет предоставить пользователю более впечатляющие возможности: страницы, спроектированные с использованием спецификации HTML5, способны предоставлять такие же возможности, как приложения для настольных систем. Кроме того, HTML5 существенно улучшает разработку для нескольких платформ благодаря сочетанию возможностей API-интерфейсов с повсеместностью браузера. HTML5 позволяет разработчикам предоставлять возможности современных приложений, беспрепятственно охватывающие несколько платформ.
Фактически HTML5 является синонимом непрерывных инноваций: новые теги, новые методики и общая инфраструктура разработки, базирующаяся на взаимодействии технологии HTML5 с родственными технологиями CSS3 и JavaScript. Это создает основу для функционирования приложений, ориентированных на клиентов. Помимо широкого распространения средств и методик технологии HTML5 на настольных системах, она может быть реализована в функционально насыщенных Web-браузерах для мобильных телефонов. Это растущий рынок, характерными представителями которого являются популярные и вездесущие платформы Apple iPhone, Google Android и Palm webOS.
Важнейшим аспектом мощных возможностей HTML5 является препарирование информации — или разделение контента на блоки, которое делает процесс гораздо понятнее. Высокая эффективность этого инструмента при проектировании и разработке подтверждается его усиливающимся доминированием в сфере Web-обработки.
HTML5 знаменует приход более эффективного семантического процесса на текстовом уровне и преобладание контролируемости над конструированием и использованием форм. Все эти и многие другие инновационные аспекты HTML5 обуславливают усиливающееся доминирование этой новой парадигмы. Этот нарастающий эффект до той или иной степени повлиял на многие организации (причем не только на коммерческие), в том числе на многие организации, у которых обработка информации и коммуницирование лишь недавно вошли в число основных видов деятельности.
Технология HTML5 — это не волшебная лампа с джинном внутри. Тем не менее технические и методические активы этой технологии уже сделали ее вторым по значимости способом решения проблем (первый способ — потереть волшебную лампу).
Планирование страницыМы собираемся создать простую Web-страницу. В ходе этого процесса рассмотрим несколько новых тегов, впервые появившихся в спецификации HTML5. Для создания эффективной и рациональной Web-страницы необходимо разработать план, охватывающий все создаваемые компоненты.
Создаваемая нами страница будет иметь высокоуровневый дизайн, показанный на рисунке 1. Страница состоит из области Header, области Navigation, области Article, содержащей три раздела, области Aside и, наконец, области Footer. Эта страница предназначена для работы в браузере Google Chrome, что исключает возможный визуальный беспорядок, порождаемый стремлением к браузерной совместимости, который мог бы затруднить понимание базовой структуры. Наша цель состоит в создании страницы, которая наглядно демонстрировала бы новые теги HTML5 и показывала возможности их использования для создания хорошо оформленного кода и элегантного дизайна страницы.
Рисунок 1. План Web-страницы Acme United
В процессе создания этой страницы я коснусь технологии CSS3, которая требуется для надлежащего отображения HTML5-страниц. Технология CSS3 необходима для придания определенного стиля HTML5-странице, для навигации по этой странице и для создания общего впечатления об этой странице. Группы свойств, описываемые в разделе CSS3 Reference на Web-сайте W3Schools.com (см. раздел ), охватывают такие полезные теги, как фон, шрифт, выделенные области и анимация.
Однако прежде чем приступать к конструированию страницы, необходимо изучить несколько новых элементов HTML5.
Область HeaderВ рассматриваемом примере область Header содержит заголовок страницы и подзаголовок. Тег используется с целью создания контента для области Header данной страницы. Тег может содержать открывающую информацию о теге и о теге в дополнение к самой Web-странице. Создаваемая нами Web-страница имеет область Header , показанную на высокоуровневом представлении ее дизайна, а также область Header внутри области Article и области Section . В листинге 1 показан пример разметки тега .
Листинг 1. Пример тега Heading TextLogos are frequently placed here too
Тег также может содержать тег (листинг 2). Тег группирует заголовки вместе, используя показанные уровни заголовков с по с главным заголовком и подзаголовком.
Листинг 2. Пример тега Main Heading Sub-headingText or images can be included here
Область NavigationОбласть Navigation на данной странице создается с помощью тега . Тег специфицирует область, специально предназначенную для навигации. Тег следует использовать для навигации по основному сайту, а не для хранения ссылок на другие области данной страницы. Область Navigation может содержать код, подобный показанному в листинге 3.
Листинг 3. Пример тегаПроектируемая нами страница имеет одну область Article, которая содержит реальный контент данной страницы. Для создания этой области мы используем тег , определяющий контент, который может быть использован независимо от остального контента этой данной страницы. Например, если вы хотите создать RSS-поток, то сможете использовать тег для уникальной идентификации соответствующего контента. Тег идентифицирует контент, который при перемещении в другой контекст может стать совершенно недоступным для понимания.
Область Article в плане страницы Acme United содержит три области Section. Мы создаем эти области с помощью тега . Тег содержит релевантные области компонентов Web-контента. Тег — как и тег — способен содержать заголовки, нижние колонтитулы или любые другие компоненты, необходимые для формирования данного раздела. Тег предназначен для группировки контента. Контент для тега и для тега обычно начинается с тега и заканчивается тегом , между которыми находится сам контент соответствующего тега.
Тег также способен содержать теги , а тег способен содержать тег . Тег следует использовать для группировки сходной информации, а тег следует использовать для такой информации, как статья или блог, которая может быть перемещена в новый контекст без искажения смысла контента. Тег , как и следует из его названия («статья»), предоставляет полный пакет информации. Тег , напротив, содержит связанную информацию, однако эта информация не может быть помещена в другой контекст сама по себе, поскольку в этом случае ее смысл будет потерян.
В листинге 4 показан пример применения тега и тега .
Листинг 4. Пример тегов и Content Content Content Content Изобразительные тегиТеги и , как и теги и , способны содержать тег . Этот тег используется для включения изображений, диаграмм и фотографий.
Тег может содержать тег , который, в свою очередь, содержит подпись для иллюстрации, содержащейся в теге . Это позволяет ввести описание, которое будет теснее связывать эту иллюстрацию с контентом. В листинге 5 показан пример структуры с тегом и тегом .
Листинг 5. Пример тега и тега
Caption for the figure
Медиа-тегиТеги и также способны содержать различный медиаконтент. HTML5 предоставляет теги, которые обеспечивают быстрое понимание содержащегося в них контента. До недавнего времени такие медийные компоненты, как музыка и видео, поддерживались только встраиваемыми средствами. HTML5 поддерживает их собственными средствами.
Тег способен содержать аудиоконтент, например, музыкальные или любые другие звуковые потоки. Тег имеет атрибуты, которые определяют, какой аудиоматериал, когда и как будет воспроизводиться. К числу этих атрибутов относятся следующие: src, preload, control, loop, autoplay . В примере, показанном в листинге 6, аудио начинает воспроизводиться немедленно после загрузки страницы и воспроизводится непрерывно. Пользователю предоставляются органы управления, с помощью которых он может остановить или перезапустить воспроизведение аудио.
Листинг 6. Пример тега Your browser does not support the audio tag.Тег позволяет транслировать видеоклипы или потоковые визуальные материалы. Он имеет все атрибуты тега , а также три других атрибута: poster, width и height . Тег poster позволяет указать изображение, которое должно отображаться на протяжении загрузки видео, или в ситуации, когда видео вообще не способно загрузиться.
В листинге 7 показан пример структуры тега .
Листинг 7. Пример тега Your browser does not support the video tagТеги и способны содержать тег , который описывает мультимедийные ресурсы для тегов и . Этот тег позволяет разработчику указать альтернативные видео- и аудиофайлы, из которых браузер сможет затем выбирать в зависимости от типа поддерживаемого медиаформата или кодека. В листинге 8 представлено два варианта выбора. Если используемый браузер не способен воспроизвести WMA-версию файла, попытайтесь использовать версию в формате MP3. В противном случае отобразите соответствующее сообщение, чтобы пользователь понимал, что данный аудиофайл недоступен.
Листинг 8. Пример тегаYour browser does not support the HTML "audio" element.
Тег описывает встроенный контент, который может быть отображен на странице, например, файлы Adobe Flash в формате SWF. Листинг 9 содержит атрибут type , который идентифицирует встроенный источник как Flash-файл.
Листинг 9. Пример тегаВ дополнение к атрибутам src и type тег имеет атрибут height и атрибут width .
Область AsideМы создаем область Aside в плане страницы Acme United с помощью тега . Этот тег предназначен для вспомогательного контента, не являющегося частью основного материала статьи, которую он дополняет. Например, в журналах теги типа aside часто используются для выделения выводов, сделанных в самой статье. Тег содержит контент, который может быть удален без ущерба для информации, излагаемой в статье, секции или странице, содержащей этот тег.
В листинге 10 показан пример применения тега .
Листинг 10. Пример тегаMy family and I visited Euro Disney last year.
Disney in FranceBesides Euro Disney, there is a Disneyland in California.
Область FooterТег содержит информацию о странице, о статье или о разделе, например, сведения об авторе или дату написания. В качестве нижнего колонтитула он может содержать информацию об авторских правах и другую важную юридическую информацию (листинг 11).
Листинг 11. Пример тегаCopyright 2011 Acme United. All rights reserved.
Конструирование страницыТеперь, когда вы познакомились с базовыми тегами, необходимыми для создания HTML5-страницы, приступим к конструированию своей страницы. Мы собираемся сконструировать Web-страницу для компании Acme United. Полностью эта страница показана на рисунке 2. Вы можете загрузить ее для последующего использования (см. раздел ).
Рисунок 2. Web-страница Acme United
SИтак, приступим к формированию страницы. Сначала следует тег . В спецификации HTML5 тег был упрощен: вам достаточно запомнить его атрибут — html . Это не только облегчает ввод этого тега, но и улучшает его защиту от ошибок. Обратите внимание, что атрибут имеет вид html , а не html5 . Вне зависимости от количества версий HTML, тег всегда сможет иметь атрибут html .
Тег содержит все остальные HTML-теги за исключением тега . Каждый из остальных тегов должен быть размещен между тегом и тегом (листинг 12).
Листинг 12. Пример тегаПосле указания атрибута html и английского языка следует тег , который может содержать скрипты, информацию о поддерживаемых браузерах, ссылки на таблицу стилей, метаинформацию и другие инициализационные функции. В разделе head можно использовать следующие теги.
Тег содержит фактический заголовок документа и является обязательным тегом раздела . Этот заголовок можно увидеть в верхней части браузера при просмотре страницы. Тег в листинге 13 указывает CSS3-таблицу стилей, которая будет использоваться для отображения данной HTML5-страницы. Эта таблица стилей имеет имя main-stylesheet.css.
Листинг 13. Пример тега HTML5 Fundamentals ExampleЗатем мы используем тег , за которым следуют теги и , описанные ранее. Область в данном примере содержит название вымышленной компании (Acme United), а область содержит подзаголовок «A Simple HTML5 Example» (простой пример на HTML5). Соответствующая разметка показана в листинге 14.
Листинг 14. Пример тегов и Acme United A Simple HTML5 ExampleТехнология CSS3 используется для формирования облика страницы, как показано в листинге 15. Сначала для страницы задается шрифт, а затем детали для тела страницы. После этого задаются размеры тела, а затем проектируется структура параграфа заголовка для тегов заголовков первого и второго уровней. Именно эти заголовки мы будем использовать для данной страницы.
Листинг 15. Первый пример CSS3 * { font-family: Lucida Sans, Arial, Helvetica, sans-serif; } body { width: 800px; margin: 0em auto; } header h1 { font-size: 50px; margin: 0px; color: #006; } header h2 { font-size: 15px; margin: 0px; color: #99f; font-style: italic; }В листинге 16 показан тег , предназначенный для осуществления навигации по главному сайту.
Листинг 16. Пример тегаВ HTML5 также имеется тег , который вызывает затруднения у некоторых дизайнеров и разработчиков. Это объясняется тем фактом, что под навигацией часто понимается «навигационное меню». Тег , который был исключен в версии HTML 4.01, а затем снова появился в HTML5, предназначен для улучшения интерактивности. Этот тег не следует использовать для основной навигации. Единственный тег, который следует использовать для основной навигации — это тег . Мы используем тег в нашем примере позднее.
Форматирование навигации осуществляется посредством CSS3. Каждое определение тега в листинге 17 отражает определенное состояние тегов
Далее следует область Article. Эта область, определяемая тегом , содержит свой собственный тег . Тег внутри тега также содержит свой собственный тег (листинг 18).
Листинг 18. Пример тегов и Article HeadingPrimum non nocere ad vitam Paramus . . .
This is the first section headingScientia potentia est qua nocent docentp . . .
В листинге 19 показана CSS3-разметка, обеспечивающая визуализацию этого формата. Обратите внимание, что области paragraph, header и section определяются тегом , внутри которого они содержатся. Заданный здесь тег не совпадает по формату с тегом , заданным для уровня страницы.
Листинг 19. Третий пример CSS3 article > header h1 { font-size: 40px; float: left; margin-left: 14px; } article > header h1 a { color: #000090; text-decoration: none; } article > section header h1 { font-size: 20px; margin-left: 25px; } article p { clear: both; margin-top: 0px; margin-left: 50px; }Второй тег в теге содержит ту же базовую информацию, что и первый тег , однако на этот раз мы собираемся использовать теги , , , и (листинг 20).
Тег используется здесь для представления информации, которая не является частью окружающего ее потока. Тег содержит изображение Стоунхенджа. Данный тег также содержит тег , который мы используем для создания кнопок с именами четырех Муз. При нажатии на какую-либо из этих кнопок этот тег предоставляет информацию о соответствующей Музе. Тег внутри тега
Используется для подсвечивания слов veni, vidi, vici.
Листинг 20. Пример тегов и Second section with mark, aside, menu & figureThis is an aside that has multiple lines. . . .
Clio Thalia Urania Calliope
Figure 1. Stonehenge
CSS3-разметка для данного раздела содержит новое определение тега
Который имеет уменьшенную ширину по сравнению с заданной нами шириной страницы. Это изменение позволяет боковой панели (aside) смещаться вправо без перекрытия текста. Соответствующая разметка показана в листинге 21.
Листинг 21. Четвертый пример CSS3 article p.next-to-aside { width: 500px; } article > section figure { margin-left: 180px; margin-bottom: 30px; } article > section > menu { margin-left: 120px; } aside p { position:relative; left:0px; top: -100px; z-index: 1; width: 200px; float: right; font-style: italic; color: #99f; } Теги раздела VideoЗаключительным компонентом тега является раздел video . В данном примере (листинг 22) видео представляет собой видеофайл в формате ogg , который автоматически начинает воспроизводиться при загрузке страницы и воспроизводиться в бесконечном цикле. Пользователю предоставляются органы управления для приостановки и возобновления воспроизведения. Во многих современных реализациях видеофайлы в формате ogg имеют расширение ogv («v » означает видео). Тег функционирует аналогичным образом.
Листинг 22. Пример тегов и This is a video section
This video will work in Mozilla Firefox or Google Chrome only.
В листинге 23 приведены CSS3-определения для раздела video .
Листинг 23. Пятый пример CSS3 article > section video { height: 200px; margin-left: 180px; } article > section div.no-html5-video{ height: 20px; text-align: center; color: #000090; font-size: 13px; font-style: italic; font-weight: bold ; background-color: #99f; }В листинге 24 показан нижний колонтитул и завершающая часть страницы.
Листинг 24. Пример тегаCopyright: 2011 Acme United. All rights reserved.
В листинге 25 показан CSS3-код для нижнего колонтитула.
Листинг 25. Пятый пример CSS3 footer p { text-align: center; font-size: 12px; color: #888; margin-top: 24px; } ЗаключениеИтак, мы создали нашу Web-страницу. На этом завершается первая статья в данной серии из четырех частей. Цель этой статьи состояла в том, чтобы представить новый режим работы HTML5. HTML5 — это не просто модернизация HTML4, — это новый способ цифрового коммуницирования. Благодаря функциональности технологий CSS3 и JavaScript, спецификация HTML5 вплотную приблизилась к тому, чтобы предоставить разработчику все возможности в одном пакете. Если вы усвоите все необходимое из обширного массива имеющейся в открытом доступе информации по HTML5, то сможете присоединиться к растущему сообществу Web-дизайнеров и Web-разработчиков, компетентных в мультимедийных аспектах HTML5. В следующей части данной серии мы рассмотрим, как писать код для HTML5-форм и как структурировать эти формы.
Всем привет. Добро пожаловать на обзор по HTML5. В своих статьях я буду постоянно затрагивать тему нового языка разметки и вместе с Вами создавать поистине великолепные шедевры сайтов. Сразу забегу вперед. Мы действительно! будем создавать отличный игровой портал, благодаря новейшим технологиям. И поэтому нашей основной задачей на сегодня будет понять, что же такое HTML5, что он из себя представляет.
HTML5 – что это?HTML5 – это новый язык разметки. Но не стоит пугаться и думать, что Ваши знания по предыдущей версии html пропадут зря. На самом деле новая разметка воплотила все преимущества предыдущей версии html и добавила много всего вкусного.
Многие искренне считают, что HTML5 – это некий новый язык программирования. На самом деле это не так. Я считаю, что html5 – это совокупность различных самых современных элементов, благодаря которым, мы и получаем такие великолепные страницы.
HTML5 – это совокупность CSS3 (языка представления страницы), разметки (усовершенственный код html) и JavaScript (взаимодествие, интерактивность). Имея такой богатый арсенал мы можем с уверенностью сказать, что HTML5 это поистине новый рывок в создании не только веб-страниц, но и целых веб-приложений.
Естественно, подходить к созданию интерактивных страниц необходимо, имея, хотя бы базовые знания в области программирования на JavaScript и знанием html и css. Без этого никак.
А в сегодняшней статье, я бы хотел обратить Ваше внимание на создании простой, но в то же время очень важной начальной страницы на HTML5. Следуя этим простым принципам, которые я укажу в коде, Вы поймете, что html5 стал более гибок и понятлив. Итак, начнем с кода.
Моя первая страница /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size: 30px; color: red; } Привет var my_first=document.getElementById("first"); my_first.innerHTML="Это моя первая запись"; // Здесь Вы можете писать любую функцию. HTML5 видит css и javascript. Ему теперь не нужно указывать, что перед ним. Очень удобно.
< ! doctype html > < ! -- Обратитевниманиенановоеопределениедокументов. Теперьненужнозапоминатьисохранятькод. Выегосамизапомните. Посмотрите, каквыглядитВашкод. -- > < html > < head > < meta charset = "utf-8" > < ! -- Вотивсеmeta дляВашегодокумента. Короткость, сестраталанта-- > < title > Мояперваястраница< / title > < link rel = "stylesheet" href = "index.css" >
< ! -- Подключениестилейиjavascript сталопрощенекуда-- >
/*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size : 30px ; color : red ;
< / head > < body > |
Также можно скачать XHTML версию данного шаблона!
Шаг 1 - Дизайн
Каждый процесс создания сайта начинается с идеи. В этой стадии дизайнеры обычно используют Photoshop для проработки всех деталей.
После этого весь дизайн кодируются с помощью HTML и CSS.
Шаг 2 - HTML
Важно заметить, что работа над HTML5 все еще ведется. И она по разным оценкам продлится до 2022 года (абсолютно серьезно). Однако, некоторые части уже готовы и ими можно пользоваться сегодня.
В этом уроке мы используем несколько новых тегов:
header
- в него обернем нашу шапку
footer
- для футера
section
- группирует контент в секции (к примеру, главная секция, сайдбар...)
article
- отделяет статьи от всей страницы
nav
- содержит навигацию
figure
- обычно содержит картинку-иллюстрацию к статье
Эти теги используются также, как и обычные div. Единственная разница заключается в том, что данные теги семантически разделяют страницу. Другими словами, Вы можете представить Вашу страницу таким образом, что станет сразу понятно про что она. В результате поисковики будут давать Вам целевых посетителей в бол ьшем количестве.
Однако, есть некоторые ограничения использования HTML5 сегодня. Одно из них - эта вся линейка браузеров Internet Explorer - они не поддерживают эти теги (но это можно решить добавив небольшой JavaScript). Поэтому пока еще рановато полностью переходить на HTML5.
Поэтому в начале урока Вам также доступна ссылка на скачивание такого же шаблона, но в XHTML версии (работает во всех браузерах сейчас).
template.html - шапка
Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo .clear { zoom: 1; display: block; }
Вы можете заметить новый на первой строке, который сообщает браузеру, что страница создана по HTML5 стандарту.
После указания таблицы стилей и названия документа мы подключаем специальный JavaScript, который поможет правильно отображать HTML5 в любом IE. Это означает, что пользователь IE с отключенным JS ничего красивого не увидит. Именно поэтому стоит задуматься об использовании XHTML версии данного шаблона.
template.html - тело документа
В конце у нас идет тег футера.
Шаг 3 - CSS
Поскольку мы используем HTML5, нам необходимо предпринять дополнительны меры для стилизации. Теги новой версии HTML не содержат стилей по умолчанию пока еще. Но это легко поправить несколькими дополнительными строками CSS и страница будет выглядет так, как это необходимо.
styles.css - часть 1
Header,footer, article,section, hgroup,nav, figure{ display:block; } article .line{ /* Разделяющая полоса : */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; } footer .line{ margin:2em 0; } nav{ background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; } nav ul li{ display:inline; } nav ul li a, nav ul li a:visited{ color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; } nav ul li a:hover{ text-decoration:none; background-color:#f0f0f0; } nav, article, nav ul li a,figure{ /* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
Нам необходимо установить значение правила display на block для новых тегов. После этого можем обращаться с ними также, как и с обычными тегами.
Мы придаем стиль горизонтальной линии, статьям, и кнопкам навигации. В самом низу мы прописываем свойство border-radius для четырех разных типов элементов сразу для экономии.
styles.css - часть 2
/* Стили для статей : */ #page{ width:960px; margin:0 auto; position:relative; } article{ background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; } figure{ border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; } figure:hover{ -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; } figure img{ margin-left:-60px; } /* Стили для футера : */ footer{ margin-bottom:30px; text-align:center; font-size:0.825em; } footer p{ margin-bottom:-2.5em; position:relative; } footer a,footer a:visited{ color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; } footer a:hover{ text-decoration:none; background-color:#142830; } footer a.by{ float:left; } footer a.up{ float:right; }Во второй части кода мы придаем более детальные стили нашим объектам.
Давайте перейдем к последнему шагу.
Шаг 4 - jQuery
Для модернизации данного шаблона мы создадим плавный эффект скролла после нажатия на ссылку с использованием jQuery плагина scrollTo. Для его работы необходимо пройтись по всем ссылкам и присвоить событие onclick, которое вызовет функцию $.srollTo(), описанную в скрипте плагина.
$(document).ready(function(){ /* Выполнение скрипта после загрузки страницы */ $("nav a,footer a.up").click(function(e){ // Если нажата ссылка - плавный скролл к нужному объекту : $.scrollTo(this.hash || 0, 1500); e.preventDefault(); }); });
Заключение
В этом уроке мы ознакомились с возможностями новых семантических свойств HTML5 и их помощью создали одностраничный красивый шаблон. Можете использовать его в собственных целях.
Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.
Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.
Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.
Верстка div (старая)Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.
Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.
Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.
А вот сейчас нам нужно данный код перевести в HTML5, но как оказывается что этот новый стандарт принёс с собой не мало новых тегов, о которых нужно знать перед тем как перевести наш код.
Теги HTML5Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:
— данный тег задаёт верхнюю часть сайта, или шапку сайта. В него может входить меню, логотип, и другие элементы которые используются в верхней части сайта.
— данный тег задаётся для важных разделов на сайте, например для таких как статьи, или же важные моменты, которые Вы хотите выделить.
— обычно в этом теге содержаться разнообразные записи на сайте, новости, документы. Например посты на блоге.
— задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.
— в этот тег должен входить низ Вашего сайта (Футер)
— в данный тег входят групы заголовков сайтов, например .
— данный тег включает в себя всю навигацию на сайте (меню).
Хочу сказать, что эти все теги обязательно должны закрываться, например если это тег он должен иметь закрывающий тег и так далее.
Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:
— данный тег выводит аудио на сайте.
— данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.
— в этот тег должны входить список меню, например ul li.
— сюда входят время и дата на сайте. Например на блогах дата размещения поста.
— вставляет видео на страницу.
— данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
.
Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:
А вот как он выглядит по новому:
Ну как Вам разница? :-) По моему существенная. Так же ещё проще стал тег . Он был такой:
А стал такой:
Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.
Верстка (новая)Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:
Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:
Footer, nav, header, section, aside { display: block }
Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:
Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.
Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner — . Как я писал выше, что этот класс выводит блок шапки сайта. А сейчас, когда мы знаем какой тег отвечает за шапку сайта в HTML5 () можем смело его использовать вместо div только с таким же классом. Таким образом у нас получилось следующее:
И не забываем поставить закрывающий тег , а также удалить закрывающий div.
Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так , а в HTML5 будет выглядеть вот так . И опять же не забудьте поставить закрывающий тег и удалить старый div.
Придерживайтесь такого же принципа и в других тегах на сайте. Таким образом я перевёл свой блог в HTML5. И был приятно удивлён тем, что это совсем не сложно.
ВыводДрузья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.
Вот и всё что хотелось сказать по этому поводу. Друзья, если у Вас что то не будет получаться, спрашивайте в комментариях, и я обязательно помогу:-) До скорых встреч.
