20 интересных сайтов на HTML5
Подборка великолепных сайтов, которые реализованы при помощи html5. Посетив их, Вы сможете убедиться, что некоторые технологии этого стандарта помогут сделать проект более интересным.С каждым днём HTML5 становится всё популярнее, ведь при помощи этого языка разметки можно значительно улучшить интерактивность сайта. В настоящее время html5 поддерживается многими браузерами, для тех, которые не поддерживают существует плагин html5shiv . Полный переход на этот стандарт запланирован на 2014 год, хотя эта дата не точная. Многие мировые лидеры веб-индустрии уже используют этот язык разметки.
В этой статье мы сделали подборку 20 интересных сайтов, реализованными при помощи html5, для того чтобы Вы лучше могли понять и оценить мощь и универсальность этого стандарта
1. На сайте The Wilderness Downtown. можно посмотреть интерактивный фильм. Введите адрес дома, в котором Вы росли, и Вы сможете совершить виртуальное путешествие на родину. Проект реализован при помощи сервиса Google Earth и HTML5.
2. Universeries — информационный сайт о теле-продюсерах и их шоу.
3. Agent008Ball использует методы canvas языка HTML5. На этом сайте можно играть в бильярд онлайн. Он был создан при поддержке «Microsoft» для демонстрации новых возможностей IE9.
4. Веб-сайт Shell был созданный в «Legwork Studios» для презентации нового альбома Гэмита «Parts». Здесь Вы увидите видео-загадку, решив которую можно получить доступ к бесплатной загрузке музыки в формате MP3.
5. Сервис Vua.la поможет Вам найти новых друзей. Просто напишите сообщение и укажите желаемый возраст собеседника.
6. Railup.com— очень интересный проект, который реализован при помощи HTML5 Canvas. Нарисуйте вагон, и он будет прикреплён к поезду.
7.
На сайте Ричарда Дарана собраны потрясающие фотографии со всего мира. Можно посмотреть всю информацию по снимкам, вплоть до названия камеры и увидеть место на карте, где была сделана фотография.8. Одностраничный сайт веб-студии Vision18. Совершите экскурсию по офису на кресле.
9. При помощи сервиса Bikingboss.com можно отправить своего босса очень далеко.
10. Сайт веб-дизайнера Вильяма Кзете, который реализован при помощи html5 . В разделе песочница (sendbox) Вы также можете увидеть несколько интересных работ, выполненных при помощи CSS.
11. Art Of Stars использует Ваш IP-адрес, чтобы показать картинку звёздного неба над Вами.
12. Сайт музыкальной группы ROME
13. Lost World’s Fairs— красочный сайт, который описывает новые возможности типографики для веб.
14.
15. Rumpetroll — сервис для общения. Здесь Вы выглядите как головастик и плаваете в футуристическом водоеме. Этот сайт даёт нам небольшое представление о том, как будут выглядеть социальные сети будущего.
16. Ghost Shooter- игра-стрелялка, созданная при помощи технологий HTML5.
17. Портфолио Филиппа Эндрюса, фрилансера из Австралии, который делает сайты при помощи флэш и HTML5.
18. Сайт web-разработчика Филидора Визе , проект создан при помощи HTML5,CSS3 и jQuery.
19. Промо-сайт нового альбома Бьорк. Он сложный и непредсказуемый, как сама вселенная, совершите небольшое космическое путешествие при помощи этого проекта.
20. Ella Design — сайт дизайнера из Гон-Конга, который в данный момент проживает в США. Портфолио очень хорошо иллюстрировано и разработано при помощи HTML5 и CSS3.
Автор подборки – Дежурка
Комментарии
Оставить ответ
Похожие статьи
Случайные статьи
10 сайтов написанных на HTML5
Время чтения: 2 мин. Прочитать позже
Всё больше и больше веб-разработчиков переходят на HTML. И в этой статье я покажу некоторые сайты, которые полностью написаны на технологии HTML5.
А сейчас, собственно, сайты:
1. Spigotdesign
2. Black-meridian
3. Marco Barbosa
4. Vision18
5. Html5readiness
6. Teixido
7. Html5lab
8. Full Stop
9. Birrificioirpino
10. Webstandardssherpa
HTML 5
В данной категории Вы сможете познакомиться с новым стандартом HTML — HTML 5, который не так давно появился в нашей жизни, и ещё очень многие про него ничего не знают, либо просто слышали. И данная категория позволит восполнить этот пробел в знаниях, ведь HTML 5 — это будущее Интернета, к которому надо быть готовым любому Web-мастеру.
В статьях этой категории содержится множество нововведений в HTML 5, которые необычайно важны и которые обязательно надо знать. Подробно расписаны новые элементы, а также подробно расписано их назначение.
Прочитав статьи по HTML 5, Вы узнаете:
1) Что нового появилось в HTML 5.
2) Какие элементы появились для создания структуры
3) Какие появились новые блочные элементы в HTML 5.
4) Какие новые теги появились в HTML 5 для форматирования текста.
5) Какие элементы появились для работы с мультимедиа в HTML 5.
6) Какие HTML-теги появились для интерактивной работы с документом.
7) Почему не работает HTML5.
8) Об атрибуте download в HTML5.
9) Нужно ли сейчас использовать HTML5 и CSS3.
10) Новые атрибуты для полей форм, появившиеся в HTML5.
11) Какие новые значения атрибута type появились в HTML5.
12) Зачем нужен атрибут data-* в HTML5.
13) Что такое canvas в HTML5.
14) Как использовать HTML5 Notifications API.
15) Новые атрибуты HTML5: reversed, contenteditable, hidden.
16) Что такое локальное хранилище(localStorage).
17) Что такое viewport.
18) Зачем нужен атрибут read only в HTML5.
19) Что такое HTML5 WebSockets.
20) Как работать с HTML5 Video.
21) Как работать с HTML5 Audio.
22) Как проверить поддержку HTML5 и CSS3 с помощью сервиса Can I Use.
23) Как сделать видео в качестве фона сайта на HTML5. Часть 1.
24) Как сделать видео в качестве фона сайта на HTML5. Часть 2.
25) Популярность браузеров на 2014 год.
26) Что такое адаптивная верстка.
27) Что такое гибкая сетка в адаптивной верстке?
28) Как сделать изображения адаптивными?
29) Как использовать секционные элементы в HTML5.
30) Как правильно использовать теги div, section и article в HTML5.
31) Как сделать 404 страницу.
32) Как сделать верстку сайта с нуля. Меню навигации. Часть 1.
33) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 2.
34) Как сделать верстку сайта с нуля. Верстка портфолио. Часть 3.
35) Как сделать верстку сайта с нуля. Трехколоночный макет. Часть 4.
36) Как сделать верстку формы обратной связи. Часть 5.
37) Как верстать прозрачную форму входа.
38) Как сделать выпадающий список в HTML.
39) Как вставить видео на HTML сайт.
40) Как сделать HTML шаблон для портфолио.
41) Верстка кнопок на сайте.
42) Верстка сайта по PSD макету (часть 1).
43) Верстка сайта по PSD макету (часть 2).
44) Верстка сайта по PSD макету (часть 3).
45) Верстка сайта по PSD макету (часть 4).
46) Красивое оформление статьи на HTML.
47) Кроссбраузерность сайта.
48) Верстка по БЭМ методологии.
49) Как верстать сайт без макета.
50) Как сделать текст в HTML (топ 10 запросов)
51) Как вставить SVG иконку на сайт.
52) Как верстать по БЭМ на flexbox.
53) Флекс контейнер и элементы флекса (верстальщику).
54) Как сделать видео на сайте адаптивным.
55) Всплывающая подсказка в HTML.
Все материалы по HTML 5
Энциклопедия HTML5 » Сайт HTML-5.ru
Энциклопедия HTML5
22 Июн 2015
Тег footer в языке HTML5 Тег footer в HTML5, обрамляет подвал, на странице сайта. В тегах <footer> </footer> оычно содержится инфрмация относящаяся к самому сайту, а не к основному контенту, например: правовая информация (копирайты), имя автора, название сайта и/или компании, телефон и/или адрес компании и т.п. Приведём пример расположения тегов footer в типичном коде шаблона… Читать далее
22 Июн 2015
Тег aside в языке HTML5 Тег aside в HTML5, обрамляет боковую панель (сайдбар), на странице сайта. Тегами <aside> </aside> оычно обрамляют блок виджетов на сайте. В качестве виджетов могут выступать: блок категориев, меток, последних записей, последних комментариев, популярных страниц, поисковая строка и т.п. Приведём пример возможного расположения тегов aside в типичном коде шаблона страницы, созданной… Читать далее
22 Июн 2015
Тег section в языке HTML5 Тег section в HTML5, может обрамлять повторяющиеся элементы (разделы), на странице сайта. Данный тег довольно сложен для понимания, попробуем разобраться когда же его применять. Теги <section> </section> могут обрамлять комментарии на сайте, ответы темы на форуме, анонсы (цитаты) новостей или постов на главной странице, страниц категориев, меток и т.д. Также… Читать далее
16 Июн 2015
Тег nav в HTML5 Тег nav в HTML5, обозначет основное меню сайта (панель навигации). Обычно тегами <nav> </nav> обрамляют основное меню страницы сайта, которое расположено сразу под шапкой сайта. В меню nav, обычно располагают ссылки на важные страницы сайта, это могут быть страницы контактов, о компании, каталог, магазин, главная, описание услуг, новостей и т.д. Рассмотрим… Читать далее
16 Июн 2015
Тег header в HTML5 Тег header в HTML5, обозначет шапку сайта. Обычно тегами <header> </header> обрамляют шапку страницы сайта. В шапке страницы сайта чаще всего располагают заголовок (девиз, слоган компании), логотип сайта (компании), контактную информацию (телефоны, часы работы). В шапке сайта можно встретить ссылки на: карту проезда, заказать звонок, поисковую строку и различные элементы типа… Читать далее
Страница 1 из 512345»HTML5 и CSS3 на примерах
HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.
Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определённом месте и легко «прикручиваются» к любому элементу.
Ещё одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML. CSS представляет собой мощную систему, расширяющую возможности дизайна и вёрстки веб-страниц.
Любой сайт отображается в специальной программе просмотра, называемой браузером. Таким образом, получается, что разработчики сайта зависят от производителей браузеров, от того, насколько корректно и правильно они воплощают стандарты, разработанные Консорциумом W3. Дело осложняется тем, что популярных браузеров существует несколько, и они порой по-разному интерпретируют указанные стандарты.
Таким образом, при создании сайта необходимо решить следующие задачи — придать веб-странице желаемый внешний вид и обеспечить его корректное отображение в популярных браузерах.
Вёрстка веб-страниц — это не просто знание приёмов и хитростей создания различных эффектов. Это умение предугадывать результат действий с элементами веб-страниц и понимание особенностей различных браузеров, которые могут по-разному отображать сайт. Деятельность разработчика сайта сродни работе шеф-повара, который точно знает, какие ингредиенты и в каком количестве нужно положить, чтобы улучшить вкус готового блюда. В большинстве своем простые, но действенные рецепты, содержащиеся в данном руководстве, помогут вам создавать впечатляющие и работоспособные сайты.
Возможно, многие описанные техники вам и не пригодятся, но их главная задача — показать те возможности и перспективы, которые доступны при создании веб-страниц.
Влад Мержевич
Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Как верстать на HTML5 и CSS3
Мы живём в то время, когда сайты стали частью нашей повседневной жизни, заменив газеты с книгами и предложив пользователям целый ряд новых возможностей. Вы, вероятно, посещаете некоторые свои любимые места в Интернете каждый день, будь это магазины, отправка сообщений, игры, проверка новостей или просмотр фотографий друзей. С помощью сайтов вы можете весело проводить время, зарабатывать на жизнь и даже знакомиться с другими людьми.
Как видите, способность создавать сайты была бы чрезвычайно полезной. Интернет предоставляет нам много возможностей для разработки, а знания о том, как построен Интернет позволяют нам понять изменения, происходящие в современном обществе и экономике.
Но вы когда-нибудь задавались вопросом, как создать свой собственный сайт?
Если он у вас возник, то я приглашаю вас совершить путешествие со мной. Мы взглянем на знакомые и ежедневно посещаемые вами сайты. Анализируя их, мы будем использовать сравнения и аналогии, которые помогут вам лучше понять, как эти сайты делаются. Я был веб-разработчиком и профессионально работал в Интернете несколько лет и уверен что в конце нашего совместного приключения мы сделаем свой первый сайт.
Прочесть оригинал и скачать PDF-версию книги вы можете по адресу http://howtocodeinhtml.com.
Дамиан Вельгошик
Основатель и эксперт по образованию в Functionite. Работал в таких компаниях, как Nokia, Roche, Franklin Templeton, Airbnb. Автор десятков учебников и семинаров о фронтенд-разработке. Бывший организатор крупнейшей конференции по фронтенду в Европе — Front-Trends. Основатель свободной сети встреч по JavaScript (10 городов), названной meet.js.
Автор и редакторы
Автор: Дамиан Вельгошик
Последнее изменение: 17.04.2016
Редакторы: Влад Мержевич