Html5 css3 помогите — html5 css3 помогите


Содержание

Представляю самую свежую подборку замечательных CSS3, HTML5 и JQuery плагинов для сайта

Приветствую Вас, дорогие читатели блога beloweb.ru. Сегодня я спешу представить Вам замечательную и свежую подборку удивительных HTML5, CSS3 и JQuery плагинов для сайта за 2012 год.

Друзья, здесь Вы найдёте для себя очень много полезного и интересного. Но меня поразил старый кассетный магнитофон, который сделан только на HTML5. По моему это шедевр. Чего стоит только додуматься до этого, не говоря уже о реализации. В общем, вау :-)

Если Вы случайно пропустили прошлые подборки, то рекомендую посмотреть:

HTML5CSS Как сделать

Фрагменты кода для HTML, CSS и JavaScript.

Слайд-шоу

Форма входа

Аккордеон

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ссылки в HTML5

Собирать все стили в одном внешнем файле и вставлять этот файл во все нужные документы довольно удобно. Читать далее →

Свойство text-shadow

Итак, мы узнали о тенях все, и теперь вы, вероятно, захотите создать тени для всех элементов в своем документе. Свойство box-shadow специально предназначено для добавления теней к полям. Читать далее →

Новая иерархия заголовков

В нашем шаблоне использованы элементы

для объявления заголовков и подзаголовков различных разделов документа. Стили по умолчанию для этих элементов всегда далеки от того, что нам хотелось бы видеть на экране. Читать далее →

Одновременное использование всех видов трансформации

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

Строение тела документа

Описание тела нашего документа готово. Базовая структура определена, но необходимо еще поработать над содержанием. Пока мы изучили только элементы HTML5, помогающие определять разделы макета и указывать их назначение, однако все самое важное находится внутри этих разделов.

Принципы работы гибкой блочной модели

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

Одной из главных причин создания гибкой блочной модели была необходимость иметь возможность эффективно распределять экранное пространство между элементами. Приходилось увеличивать или уменьшать элементы в зависимости от того, сколько свободного места было в соответствующем контейнере. Чтобы понимать, какое количество пространства доступно для распределения, нужно было точно определять размер контейнера, и это привело к возникновению понятия родительских блоков. Родительские блоки определяются свойством display, и их можно описывать как блочные элементы, используя значение box, либо как строчные элементы, если задать значение inline-box.

рис. 2.4. Родительский блок с четырьмя потомками

HTML-код для генерации блоков, изображенных на рис. 2.4, может выглядеть примерно так, как показано в листинге 2.45.

Листинг 2.45. Базовый HTML-код, с которым мы будем работать

Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер

Видеоурок

Cсылки из видео:

Исходный код

Также стоит посмотреть

  • Учим HTML5 за 45 минут!
  • Учим CSS3 за 45 минут!
  • Сайт на Bootstrap за 45 минут
  • Изучение JavaScript в одном видео за час!
  • Изучение C++ в одном видео за час!
  • Изучение GitHub за один урок
  • Изучение Си в одном видео уроке за час!
  • Экспресс курс Java — краткий курс изучения Джава на сайте itProger
  • Изучение C# в одном видео уроке за час!
  • Изучение PHP в одном видео уроке за час!
  • Изучение Python в одном видео уроке за час!
  • Изучение Swift в одном видео уроке за час!
  • Flexbox CSS3 в одном видео за 20 минут!
  • Изучение Go в одном видео уроке за 30 минут!
  • Создание 2D игры за 25 минут на Corona SDK!
  • Верстка сайта на HTML5 и CSS3 за час! + Публикация на сервер

Консультация

Необходима консультация? Вы можете задавать все свои вопросы из личного кабинета и получать ответы в удобном формате прямиком на сайте!

Тест на выбор языка

Не знаете какой язык изучать? Пройдите быстрый тест и определите какой язык программирования подходит именно вам

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

Оформите подписку и после этого вам будут доступны: домашние задания, программный код, материалы, консультации и многое другое!

Мы используем файлы cookie, чтобы улучшить работу и повысить эффективность сайта. Продолжая пользование данным сайтом, вы соглашаетесь с использованием файлов cookie.

Рецепты HTML5: Погружаемся в кодинг под HTML5 на конкретных примерах

Содержание статьи

Кто на свете всех милее, всех румяней и желанней? Не подумай ничего пошлого, я имею в виду всего лишь новую версию языка разметки — HTML5. Последние версии современных браузеров уже понимают некоторые HTML5-фишки, а значит — самое время начать применять его в своих проектах.

Что такое HTML5?

На первый взгляд HTML5 — это всего лишь новая версия языка разметки. Однако сейчас под этим термином подразумевают несколько иное. Рассматривать HTML5 без упоминания того же CSS3 просто нелепо, поскольку для разработки действительно современных web-приложений без него никак не обойтись. Нельзя забывать и о JavaScript. С его помощью реализуется обращение к богатому API, описанному в стандарте HTML5. Резюмируя все вышесказанное, напрашивается определение: HTML5 — это совокупность современных технологий/стандартов (JS, HTML5, CSS3 и так далее), применяемых для разработки web-приложений.

Капелька истории

HTML5 появился отнюдь не внезапно. Его разработка началась еще в 2007 году. За процесс работки отвечала специально созданная группа от консорциума W3C. Но многие возможности HTML5 были придуманы еще в рамках стандарта Web Application 1.0, а над ним корпели аж с 2004 года. Так что в реальности HTML5 не такая уж и юная технология, как может показаться на первый взгляд.

Первая черновая версия спецификации HTML5 стала доступна уже 22 января 2008 года. Прошло три года, но окончательная версия спецификации так и не готова и вряд ли поспеет в ближайшие годдва. Этот печальный момент обязывает разработчиков аккуратно применять новые возможности в своих проектах. Спецификация может запросто поменяться, да и не все современные браузеры (FireFox 4, Google Chrome 10, IE9, Opera 11) в полной мере поддерживают новые возможности.

Полезные рецепты

Говорить о теории HTML5 можно очень долго, но рубрика у нас называется «Кодинг», поэтому я предлагаю тебе прочувствовать возможности стандарта на практике. Я не стал заморачиваться над созданием сверхоригинальных рецептов, а решил привести примеры вещей, которые действительно полезны и которые уже сейчас можно и нужно применять на своих сайтах. Итак, поехали.

Рецепт №1: Включаем Drag&Drop на полную

Одной из приятных няшек (наверное, зря ты употребил столько энергетиков, ведь тут должно быть слово «фишек» — прим. ред.) HTML5 стала возможность применения File API и Drag and Drop API.

С их помощью можно организовать красивую передачу файлов с компьютера пользователя на сервер. Помнишь, раньше для отправки файлов всегда было поле с кнопочкой «Browse»? После ее нажатия появлялся стандартный диалог выбора файлов, в котором и требовалось выбрать файл для передачи. Назвать этот способ удобным язык не поворачивается. Особенно если речь идет о добавлении в очередь загрузки нескольких файлов.

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

А ведь технология Drag&Drop применяется в системе сплошь и рядом. Мне лично всегда хотелось просто выделить нужные файлы и легким взмахом крысы кинуть на страницу. Это куда удобней, чем рыскать в поисках файла при помощи стандартного диалога.

Очередной блог фрилансера

коротко и полезно о веб-разработке

HTML 5 и CSS3: Техники, которые мы скоро будем использовать

В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.

Что мы собираемся создавать

Вот так будет выглядеть наша страница, когда мы закончим:

Практически обычный дизайн вашего ежедневного блога. Заголовок с названием, горизонтальная навигация, контент с комментариями и формой отправки, сайдбар и подвал. Ничего особенного. Давайте начнем. Ничего особенного. Давайте начнем.

HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

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

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  • В HTML 5, есть только один doctype . Он объявляется в начале страницы через . Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header , является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от
. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.
  • Вместо того чтобы использовать тэг

    Разметка для Навигации

    Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .

    Разметка для Вступления

    Мы уже описали новую секцию документа, используя тег section . Теперь просто добавим немного контента.

    Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header , для заключения элемента h2 . Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

    Разметка Основного контента

    Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко .

    Разметка для Записи

    Посмотрите разметку, и я расскажу о новых элементах ниже.

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

    Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

    Год, затем тире (знак минус)

    1. Месяц, затем тире
    2. Дата
    3. Прописная T, для определения того, что мы собираемся указывать местное время
    4. Местное время в формате hh:mm:ss
    5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

    Разметка для Комментариев

    Разметка для комментариев очень простая. Никаких новых тэгов и атрибутов не используется.

    Разметка для Формы Комментирования

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

    Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

    Разметка Сайдбара и Подвала

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

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

    Стилизация с CSS 3

    CSS 3 основывается на принципах стиля, селекторов и каскада, как нам хорошо известно из предыдущих версий CSS . CSS 3 содержит множество новых функций, селекторов, псевдо-классов и свойств. Использование новых возможностей, значительно облегчит верстку ваших макетов. Давайте начнем.

    Основные настройки

    Для начала, нам понадобится определить некоторые основные правила, касающиеся типографии, фонового цвета страницы и т.д. Все это должно быть вам известно еще из CSS 2.1.

    Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.

    Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

    Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или % . Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS 3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

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

    Стилизация Навигации

    Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

    Мы позиционировали элемент nav абсолютно, выровняли его по левому краю окна и растянули по всей доступной ширине. Теперь центрируем вложенный список, для его отображения в границах нашей раскладки:

    После этого мы добавим некоторые дополнительные стили, чтобы навигационный список выглядел красивее, и расположим его в сетке, на которой основан наш макет. Я также добавил стиль для подсветки текущей страницы и настроил внешний вид RSS -ссылки.

    Стилизация Предисловия

    Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS 3-свойств, чтобы сделать ее более привлекательной.

    Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

    Второе новое свойство это – border — radius , которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px , для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

    К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .

    После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.

    Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции # intro .

    Мы назначили два фоновых изображения, измерив напоследок, чтобы убедиться, что они не перекрывают друг друга. Обратите внимание на короткую запись свойства background-size .

    К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS .

    Стилизация Контента и Сайдбара

    Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!

    «Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.

    Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:

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

    Стилизация Записи

    Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.

    Множественные колонки

    Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.

    Теперь мы можем добавить два простых свойства.

    Нам нужно создать 2 колонки с расстоянием 22 px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column — span , и написать всего лишь:

    Конечно, свойства column — count и column — gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.

    Box-shadow

    Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .

    Первые «3 px » сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3 px », сообщают, где мы хоти расположить тень по вертикали. Последние «7 px », как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.

    Наверное, вы не удивитесь, узнав, что это свойство еще не поддерживается во всех браузерах. Фактически оно работает только в Safari , и вам опять придется использовать специфические расширения браузеров.

    Полосатые Комментарии

    Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript , затем прогон их в цикле и подсветка всех четных элементов. CSS 3 предоставляет псевдо-класс « nth — child », который делает это до смешного легко, без использования JavaScript . Мы используем его для полосатой раскраски комментариев.

    Таинственное значение «2 n +1», на самом деле очень простое, если вы понимаете что это значит:

    2 n – выбор каждого второго элемента списка. Если вы напишете 3 n , будет выбран каждый третий элемент, 4 n – четвертый, и так далее.

    +1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

    В качестве альтернативы, вы можете написать просто:

    Здесь используется один из наиболее часто используемых стандартных значений, odd и even . Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

    Стилизация Формы отправки комментариев, Подвала и Сайдбара

    Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border — radius , для добавления закругленных углов различным секциям.

    Финальный Дизайн

    Смотрите результат нашей работы, со всеми стилями.

    Заключение

    Когда HTML 5 и CSS 3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript -кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    ВИДЕОУРОК №2. Введение в HTML5

    Доступ к полному курсу с учебными материалами и тестированием на 30 дней за 9.99 USD

    История развития HTML

    Возможности HTML5

    Примеры новой структуры HTML-документа

    Примеры элементов mark и abbr

    Использование ссылок в HTML5

    Пример элемента details

    Списочные элементы в HTML5

    Пример атрибута contenteditable

    Устаревшие элементы и атрибуты

    Библиотека Modernizer

    HTML валидаторы

    Элемент time и атрибут hidden

    Пример создания контекстного меню

    Полезные ресурсы при разработке HTML5 сайтов

    Новые семантические элементы HTML5

    Сравнение HTML4 и HTML5 страничек

    Пройдите тестирование по данному уроку. У вас есть три попытки на урок

    HTML5 и CSS3 Essential
    Введение в HTML5

    Количество вопросов: 5
    Время на тестирование: 5 минут

    Кандидат: <>
    Дата сдачи: <>
    Правильные ответы: <> из 5
    Время, потраченное на тест: <>

    Здравствуйте, Я рад приветствовать Вас на курсе, который посвящен разработке приложений на HTML 5 и CSS3. Это базовый курс. Что бы успешно усвоить материал данного курса, вы должны знать основы HTML верстки и иметь базовые навыки работы с JavaScript кодом. Тема урока: введение в HTML5. Мы сегодня с вами разберем кратко историю развития спецификации, увидим основные возможности, так же мы разберем семантическую разметку, это новые элементы, которые применяются при делении структуры документа и так же рассмотрим несколько особенностей, о которых вы должны знать создавая новый документ используя HTML 5. Что такое HTML я думаю уже знают все, даже те кто не имеют отношения к веб программированию.

    HTML – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

    HTML5 – это пятая версия языка разметки HTML, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и другие функции необходимые для разработки мультимедийных приложений.

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

    Язык HTML был разработан вначале 90-х годов британским ученым Бернардсом Ли, он так же является автором многих других веб-стандартов и веб-технологий, например протокол HTTP.

    Его биографию, историю созданий некоторых приложений вы можете посмотреть на Википедии.

    Язик HTML 5, если посмотреть на историю, достаточно быстро начал развиваться. С 1995 – 1997 год, вышло 3 версии. В 1999 году вышел HTML версии 4.1 и на этом этапе развитие HTML затихло.

    Я думаю вы все знаете организацию World Wide Web Consortium, которая занимается стандартизацией веб технологий. В 2004 году несколько крупных производителей браузеров собрали группу и под ее руководством было положено развитие новой спецификации HTML5. К 2008 году консорциум переподключился к развитию этой спецификации и со временем от разработки XML и XHTML второго стандарта отказались. Акцент был сделан на HTML5 спецификацию. В 2008 году появилась первая версия и на данный момент HTML5 все так же остается в разработке. На текущий момент спецификация еще не завершена. Завершение разработки планируется в 2014 году. Всю историю разработки вы можете посмотреть на Википедии или на сайте самой группы разработчиков. Давайте перейдем к следующему слайду и посмотрим идеологию, которой придерживается компания разрабатывающая HTML5 спецификацию. Первый пункт это

    Совместимость – если вы разрабатываете сайт на HTML5, то можете не беспокоится, он будет корректно работать, без сбоев, даже в тех браузерах, которые не поддерживает HTML5.

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

    Упрощение взаимодействия с браузером. В HTML5 есть много функций, которые предоставляются браузером. Раньше нужно было писать большие блоки кода для решение поставленных задач, сейчас решение задачи будет в вызове 1-2 строчек кода, которые будут обращаться к инструментам браузера.

    Универсальность доступа – возможность получения информации с сайта всеми пользователями в независимости от их возможностей, от языка и т.п. По сути универсальность доступа базируется на 3-х принципах: доступность, сайт HTML5 спецификации работает с несколькими стандартами, которые предназначены для предоставления функциональности пользователям с ограниченными возможностями. Следующий пункт это – независимость от мультимедийных устройств.

    Парадигма без подключаемых модулей – для поставки решения не надо использовать внешние плагины.

    Первый пункт: Canvas – элемент для использования растровых изображений в документе.

    Передача сообщений между документами – 2 разных документа могут наладить между собой общение.

    Geolocation API – возможность, встроенная в браузер, которая дает информацию об текущем расположении пользователя.

    MathMl – набор элементов для отображения сложных формул.

    Microdata – элемент для добавления специальных данных. Можно добавить элементы для читания поисковиками.

    WebSocket – протокол для создания приложений реального времени. Можно сделать приложение, в котором серверная сторона может обратится к клиентской. Например: чат.

    С использованием данного инструмента можно оповестить всех участников чата об сообщении.

    Веб-хранилища – дополнительные возможности сохранять данные на стороне клиента.

    Web SQL Database – возможность использование базы данных в коде. База будет собой представлять текстовый файл.

    Web Workers – инструмент для создания отдельных веб приложений.

    XMLHttpRequest Level 2 – инструмент для написания Ajax сайта.

    Теперь давайте перейдем в Visual Studio и начнем разбирать примеры по текущему уроку. Конечно вы можете использовать не только Visual Studio, но и любой другой текстовый редактор, которым вам удобно пользоваться. Если вы будете пользоваться Visual Studio, чтобы открыть файлы к текущему уроку, воспользуйтесь меню file – open – web site, найдите текущий урок и откройте его в студии. В Solution Explorer у вас загрузится контент урока, в каждом уроке у вас есть презентация и файл с описанием, в котором находятся домашние задания и рекомендации по прохождению текущего урока. Начнем мы урок с примеров показывающих новую структуру работы HTML документа. Открываем первый пример и смотрим как мы можем определить, что текущий документ является документом написанным на HTML 5. В обычных HTML документах, на первой строчке у нас всегда находилась строка doctypes с достаточно сложным и непонятным содержимым. Мало кто из вас на память знает, что нужно писать. Обычно все полагаются на возможности текстового редактора в котором вы разрабатываете свою страницу. В зависимости от этой строки, у нас браузеры будут определять какой версией HTML разметки мы пользовались и в зависимости от этого браузер будет делать какие то отметки при визуализации документа. Я думаю, вы легко сможете найти в интернете описание всем возможным доктайпам, сейчас мы не будем разбирать это. Так как курс предназначен для изучения HTML5. Поэтому постарайтесь самостоятельно найти описание doctype, если вам интересна данная тема. Строка 6-я, вместо того, чтобы использовать doctype старый, в HTML5 doctype сильно упростили и если вы собираетесь создать HTML5 документ, вам достаточно сделать doctype с атрибутом HTML. Эта строчка будет указывать, что текущий документ написан с помощью HTML5 спецификации. Теперь вы можете полагаться не на инструмент, которым разрабатываете страницу, а самостоятельно определить doctype. Следующее упрощение относиться к определение кодировки, которая используется на странице. Кодировка в большинстве случаев возвращается самим сервером, когда браузер скачивает HTML, в заголовках с ответом сервера, иногда находится кодировка, которой браузер должен пользоваться для отображения самой страницы. Но если кодировка не предоставлена, в таком случае мы можем использовать специальные элементы разметки, которые скажут браузерам, какую кодировку следует использовать. Для того, чтобы указать кодировку в предыдущих версиях HTML, нам нужно было использовать элемент meta в head. Вот такая строка указывала бы, что текущий документ использует кодировку UTF8. Сейчас, для того чтобы определить кодировку в HTML5 нам достаточно атрибут и использовать элемент. Вот таким вот способом определяется кодировка в HTML5. Следующее изменение и упрощение относится к подключения java script кода и css файлов. Если посмотреть на 12 строчку, мы подключаем css, в 13 строчке мы используем script, где указываем путь к подключенному элемент кода. Вот выглядит подключение сценариев и стилей в HTML5. Если сравнить это с HTML4, то по сути отличия заключаются только в 1-м атрибуте type, для каждого типа содержимого, которое возвращается со стороны сервера или отправляет на сервер есть такая строчка, которая определяет формат данных. Сейчас эти атрибуты необязательны для сценариев определения стилей на странице, достаточно просто определить те атрибуты, которые указывают на сценарий или стиль. Большинство браузеров не требуют атрибута type, даже старые версии будут корректно работать со стилем или скриптом, если вы этот атрибут не предоставили. Вот первые 3 файла, мы увидели самые простые элементы страницы, с которыми мы сталкиваемся постоянно. В следующих примерах мы пройдемся по некоторым новым атрибутам, которые можно использовать непосредственно в теле документа. Пример номер 4, элемент mark. С помощью этого элемента мы можем определить текст в документе, который должен быть помеченным, так как будто мы производили поиск и ключевую фразу, которую мы искали, нам нужно выделить. Элемент mark в большинстве браузерах он будет использовать дополнительные стили. Этот элемент мы можем стилизовать и определить как именно контент может отображаться пользователю. Давайте посмотрим этот пример, запустим его в браузере. Мы можем нажать на комбинацию ctrl f5, visual studio запустит браузер, который установлен в ToolBar visual studio и в браузере мы увидим, что 2 элемента, которые были помещены в mark. Следующий пример, это элемент abbr, использующийся для указания аббревиатуры в коде. 8-я строчка, определяем элемент abbr и в него помещаем текст, который является аббревиатурой, также в title мы определяем расшифровку аббревиатуры или какую то подсказку, которая будет показываться пользователю, если навести мышку на текст, у нас появляется title, в котором выводится сообщение, заложенное в атрибут. Это тоже один из элементов, который появился в HTML5.

    Следующие возможности, которые касаются ссылок. Если вы создаете HTML5 документ, в браузере который поддерживает HTML5, если вы создаете ссылку и в эту ссылку помещаете несколько HTML элементов, вот например у нас сейчас ссылка, которая ведет на сайт и в этой ссылке у нас находится элемент H1 и картинка. Если мы сейчас запустим этот пример, то мы увидим, что элемент H1 и изображение будут кликабельны и каждый с элементов будет представлять отдельную ссылку. Но между ними пространство не является ссылкой, хотя все это помещено в один тег /А. Если мы хотим сделать такое же в HTML4, то нам придется использовать 2 отдельные ссылки, иначе это все будет единой ссылкой, если мы будем использовать оба элемента в одной ссылке /А.

    Следующий пример, пример использования элемента details. К сожалению этот элемент на данный момент работает только в google chome. Посмотрите, что у нас сейчас находится внутри страницы. Строка 13-я, у нас есть элемент details, ниже элемент summary, где определяется текст привязанный к details, а дальше контент, который мы хотим поместить в блок details. Я думаю вы все видели элементы управления, которые принято называть аккордеонами, которые разворачиваются при клике и сворачиваются при повторном клике. Вот, по сути, с помощью элемента details, без подключения внешних плагинов, мы можем использовать некоторое подобие аккордеона на своей странице. Сейчас, если мы запустим этот пример в visual studio, которая запускает его в FireFox, на данный момент. При запуске приложения у нас отображается обычная HTML разметка. Все, что находилось внутри элемента details, оно отображается как обычный HTML текст, но мы переключимся на google chrome, то увидим, что у нас отображается стрелочка, которая определяет текст, который мы заложили в элемент summary, если мы кликаем по стрелочке, то разворачивается контент, который был помещен в элемент details. Кликаем повторно, контент сворачивается. В других браузерах, данная функция еще не реализована. Следующий пример – order list. В этом примере мы разберем элемент /оl, который вы все использовали на своих сайтах, естественно этот элемент не является частью HTML5 спецификации, он появился достаточно давно, но в HTML5 спецификации появляются атрибуты, которые мы можем использовать в данном тэге. Если мы посмотрим в начало нашего документа. В строке /оl, определяем в нем 3 элемента и на 12-й строчке указываем, что /оl должен начинаться с символа 3. По умолчанию /оl нам рисует список, который пронумерован, если мы не укажем старт = 3 тогда HTML будет первым пунктом, java script вторым, jquery третьим. Если мы запустим пример, первый список, 3..4..5, благодаря атрибуту start, Если посмотреть на следующий список /оl с атрибутом reversed, это означает, что при отображении в браузере все элементы, которые находятся в документе будут происходить в противоположном направлении. Вот вы видите в хроме, как отобразился этот документ. Если мы будем использовать /ul с атрибутом reversed, то это никак не повлияет на отображение списка. Вы видите как в хроме отобразились данные. Никакого обратного вывода не получилось. И последний блок кода в этом документе, это /оl, в котором каждый лист item использует атрибут value. С помощью атрибута мы можем явно указать какой индекс будет использоваться возле одного элемента списка. Обратите внимание как данные отобразились в хроме. Строка 39, здесь у нас пункт с индексом 1, потом 40-я строчка пункт с индексом 1.

    Следующий пример, это атрибут Contenteditable, если вы создаете элемент разметки и добавляете к этому элементу атрибут Contenteditable, это значит что содержимое элемента может быть отредактировано пользователем. Элемент article мы с вами разберем в следующих примерах. Этот элемент никаких дополнительных возможностей для HTML разметки текущей страницы не добавляет. Но вы видите, что article использует атрибут Contenteditable, это значит, что если мы запустим этот пример, и поставим курсор внутри данного элемента, то мы сможем производить редактирование. Вот допустим в конце я могу написать сообщение Hello World или удалить текст внутри данного блога. Естественно, сейчас изменения, которые я произвел, они происходят только локально, на стороне сервера ничего не меняется. Другие пользователи эти изменения не увидят. Если вы хотите, чтобы данные, которые вы сейчас вносили, сохранились на сервер. Необходимо добавить java script код, который будет собирать изменения с элемента article и производить изменения Ajax-ом, например, и отправлять их на сервер.

    Следующий пример, в котором указаны, по сути мы должны его просто запустить и посмотреть на те элементы разметки, которые уже устарели, которые мы не должны использовать, если делаем верстку с использованием HTML5. Элементы которые мы не должны использовать это:

    big, который позволяет делать текст больших размеров,

    center, который позволяет центрировать элемент,

    font для указания шрифта,

    plaintext для отображения чистого текста, определения, что блок документа содержит в себе содержимое текстового типа,

    s и stike для того чтобы указать, что блок текста должен быть перечеркнутым

    tt, эдля определения того, что текст должен быть моножирным шрифтом

    u, для того чтобы сделать подчеркнутым элемент.

    От этих элементов в HTML5 спецификации мы отказываемся и использовать не должны. Так же у нас есть ряд атрибутов, которые тоже устарели в HTML5 спецификации. Это атрибут

    Align для выравнивания текста внутри блока,

    Background для задания фона,

    Bgcolor, так же для задания фона,

    Border, для задания цвета фона,

    Атрибут cellpadding, cellspacing, height, align, width. По сути эти атрибуты мы должны заменять css стилями, от них мы должны отказаться, но я думаю, что большинство из вас не пользовались этими элементами, а использовали уже css правила, для того что бы оформить документ. Посмотрите на эти элементы, запомните их и постарайтесь не применять.

    В следующем примере мы разберем использование очень полезной библиотеки для HTML5 сайта, библиотеки modernizer. Эта библиотека используется, что бы определить возможности текущего браузера, который скачал HTML страницу. Библиотеку вы можете бесплатно скачать по указанному вначале файла сайту. Давайте сейчас перейдем по этому адресу и посмотрим, что из себя представляет эта библиотека, как вы можете ее получить. Modernizer это java script библиотека, которая распостраняется бесплатно. На сайте вы можете найти документацию, дополнительные ресурсы, последние новости по разработке библиотеки, ну и естественно можете ее скачать. Вы видите 2 кнопки: development и production, у вас есть возможность собрать необходимые себе функции и скачать эту библиотеку в несжатом виде. Если вы собираетесь использовать библиотеку у себя на продакшн сайте, то естественно вы должны воспользоваться кнопкой и скачать библиотеку, которая будет минимизирована, В исходно коде будут удалены все комментарии, все переносы в новую строчку, лишние пробелы и локальные переменные, их имена будут переименованы в максимально короткие времена. Это делается для того, чтобы библиотека весила минимум и как можно быстрее скачивалась клиентами. Если вы кликаете, например по кнопке development, видите, как выглядит страница скачивания. Вы указываете, какие именно функции вам необходимо поместить в библиотеку и нажимая на кнопку download, вы скачиваете выбранный набор функционала в виде единой библиотеки. Если же вы собираетесь работать с продакшн версией, то в таком случае нажимаете кнопку production, выбираете только необходимые себе функции. Обратите внимание, что на пред идущем слайде все галочки были проставлены для development версии. Давайте посмотрим как выглядит наш пример с использование библиотеки. Вот она скопирована в наш проект. Если мы откроем ее, это продакшн версия, невозможно разобрать тот код, который здесь находится, у нас все превратилось в линейную строчку и все элементы у нас превратились в АСDE, библиотека была минимизирована и были удалены все лишние имена. Вот эту библиотеку мы скопировали к себе в проект и в приложении, которое мы сейчас разбираем, строка 10-я, библиотека подключена с помощью элемента script. Что мы делаем в самом теле документа. Библиотека предоставляет нам глобальный обьект. У которого есть много различных свойств, если мы хотим проверить наличие в браузере canvas, мы проверяем modernizer canvas, если это свойство с значением true, мы видим, что браузер поддерживает canvas, если false, браузер не поддерживает. Строка 19, мы узнаем, поддерживает ли браузер воспроизведение видео вот в таком формате. 23 строчка – проверка геолокации. 27 – проверка возможности использовать input с типом color. Для чего нужна вот такая проверка. Когда вы на своих страницах используете различные фичи HTML5, которые еще не всеми браузерами поддерживаются, вы можете сделать проверку. Получается, что modernizer, это важная библиотека, которая позволяет делать приложения, корректно работающие как в современных браузерах и браузерах, которые не поддерживают возможности HTML5. Давайте запустим в хроме. Если переключимся на фаерфокс, увидим, что он поддерживает то же самое, но элемент color он не воспроизводит. Следующий пример использования, покажет нам как загрузить, в зависимости от наличия поддержки, загрузить документ, необходимый для имитации какого ни будь функционала. Посмотрите на 15 строку, мы вызываем функцию load и в качестве параметра передаем java script объект. Этот блок проверяет знает ли modernizer о свойстве placeholder для input. Если мы загрузим пример, фаерфокс поддерживает, поэтому выводиться yep, если загрузим браузер, который не поддерживает placeholder, увидим другое сообщение. По сути все браузеры поддерживают атрибут placeholder. Теперь давайте разберем следующий пример, в котором показаны 2 HTML валидатора, позволяющие проверить, насколько ваша разметка соответствует стандартам. Если мы запустим этот пример, то вы видите, в браузере у нас есть 2 ссылки, которые ведут на стандартный валидатор консорциума и валидатор, разработанный посторонними разработчиками. Если вы перейдете по ссылке, то сможете на главной странице этого валидатора указать адрес сайта, который вы собираетесь проверить, либо файл, в котором находится исходный код для проверки, либо указать непосредственно контент, вставив его в текстбокс. Возьмем какой-нибудь сайт. Нажмем проверить его, и увидим перечень тех ошибок, которые не соответствуют стандартам на странице Google, точно так же вы можете проверить свои собственные страницы и постараться избавится от ошибок, которые вводит валидатор. Если взять следующий валидатор, он тоже очень похожий, вы можете взять текст либо выбрать файл, либо указать адрес и проверить содержимое документа.

    14-й пример показывает использование элемента time, вы можете в тело документа использовать данные о времени. Вы можете добавлять значения определяющие время и дату. Вы видите в строке 18 у нас есть текст опубликован и элемент, который будет указывать, когда именно элемент был опубликован в текущий документ. Если мы семантически выделить внутри документа, что по смыслу, данный контекст является временем, для того что бы поисковики могли понимать, где у нас обычный текст, а где текст, который определяется наличием даты/времени. Это нужно для поисковой оптимизации, для того что бы определить, что данный блок текста является временем. Так же мы можем стилизовать этот элемент. На 11 строке мы создали стиль, который меняет фон. И видите? как у нас отображаются даты. Следующий элемент показывает использование атрибута hidden, с помощью него вы можете указать, что элемент не должен отображаться пользователю. По сути это эквивалент использования сss стилей, когда мы в css указываем видимость элемента. В 11-й строке мы определяем атрибут hidden и при загрузке элемента, текст не отображается.

    16-й пример показывает использование контекстного меню. Контекстное меню будет у нас работать только в фаерфоксе. Пока еще не все браузеры поддерживают данную возможность. Мы запускаем текущий пример, у нас в браузере появляется изображение, если мы правой кнопкой кликаем по нему, то в стандартном окне появляется 2 пункта меню. Можно повернуть на 90 градусов по часовой стрелке или против. Если мы кликаем по пункту меню, происходит вращение, происходят изменения. Давайте посмотрим на 38-ю строку, где реализована наша картинка. Для того что бы к картинке привязать контекстное меню, используем атрибут контекст меню и указываем имя элемента на данной странице, которая представляет контекстное меню. Мы указали edit, а на 40 строчке у нас есть элемент id edit. Строка 41 и 43 определяет элементы этого меню. Закончив разбор этих примеров, мы рассмотрели основные изменения, касающиеся важных элементов документа, указывание доктайпа, указывание кодировки, так же мы посмотрели несколько новых атрибутов, которые появились в HTML5, обсудили какие атрибуты устарели, посмотрели какие есть инструменты библиотеки modernizer и разобрали использование контекстного меню и использование валидаторов. Перед тем как перейти к примеру, в котором мы изучим с вами семантическую разметку, в котором разберем те новые теги, которые вы должны использовать делая верстку страниц. Давайте мы рассмотрим ресурсы, которые будут полезными для разработки HTML5 сайтов. В фаерфоксе я подготовил уже перечень вкладок, которые вы должны будете себе записать и пользоваться, изучать материал под средством этих сайтов. В презентации есть ссылки на несколько из этих сайтов. Самый первый сайт это Caniuse, с его помощью вы можете проверить поддержку либо HTML5 либо CSS в современных браузерах. Мы хотим проверить, можно ли использовать, например canvas, вводим в поисковой строке, и сайт отображает нам информацию о том в каких браузерах и на каком этапе находится сейчас поддержка канваса. В правом верхнем углу вы видите общее описание того, насколько элемент сейчас поддерживается в общем браузерами. Так же вы можете увидеть список всех браузеров которые поддерживают или не поддерживают canvas. Здесь есть дополнительные ресурсы, на которых вы можете почитать подробнее о канвасе. Вы можете здесь встретить статьи или ссылки на документацию, поэтому обращайтесь к этому сайту, когда вы сталкиваетесь с проблемами использования какой то функции HTML5. Второй сайт, который будет полезный, это html5test.com. Заходя на этот сайт с помощью браузера, вы увидите то, как браузер поддерживает HTML5 спецификацию. Те цифры, которые выводятся на главной странице, это очки которые набрал браузер в соответствии с поддержкой функций HTML5. Откроем эту вкладку, например в хроме, и видим что хроме намного лучше поддерживает HTML5 спецификацию. У хрома очкой 463, у фаерфокса 410. Так же на этом сайте что является полезным, вы видите что поддерживается, а что не поддерживается. Вот допустим фаерфокс поддерживает элемент видео, поддерживает некоторые кодеки, mpeg4 они не поддерживает. Другие кодеки он поддерживает. Вы можете просмотреть информацию о том, что поддерживается, что не поддерживается в конкретных браузерах и так же вы можете перейти по документации, посмотреть описание по каждому пункту. Большинство здесь элементов ссылаются на w3c консорциум, либо на другие ресурсы. Вы можете детально узнать о том, как использовать ту или иную функцию HTML5. Эти 2 сайта нужны для того, чтобы проверить насколько та функция, которую вы используете поддерживается на данный момент, можно ли ее добавить на сайт или лучше найти какой нибудь другой вариант. Если открыть следующую вкладку, html5rock.com. Этот сайт содержит в себе много полезных статей, Если вы откроете главную странице сайта, вы увидите, что все статьи разбиты на блоки. То что относиться к использованию web storage, написанию оффлайн приложений, использования семантическою разметки новых элементов. Заходите на этот сайт, посмотрите этот сайт. Просмотрите какие здесь есть статьи, я думаю что много с этого сайта вам будет интересно и будет полезным. И последний ресурс, рускоязычный, это htmlbook.ru, он тоже может вам пригодится при изучении HTML5. На этом сайте есть отдельно глава, с переведенной книгой к HTML5, рекомендую книгу эту читать по мере прослушивания курса. Она достаточно на простом языке написана, вы можете заходить на этот сайт и смотреть статьи, которые безплатны. И так же можете проверять поддержку тех или иных элементов в браузере и смотреть документацию или краткое описание того, для чего нужен тот или иной элемент. Вот допустим элемент, который мы вначале урока смотрели, abbr. Мы вводим его в поиске и переходим на страницу, на которой идет описание этого элемента. Где он поддерживается, в каких браузерах и в какой спецификации он появился. Слева отображается перечень атрибутов, которые вы можете использовать вместе с этим элементом. Идет краткое описание, пример кода и комментарии пользователей, обсуждающих то, как этот элемент правильно использовать на своем сайте. Вот такие ресурсы, которые, я думаю вам пригодятся по мере разработке, по мере изучения HTML5.

    И теперь у нас остается рассмотреть вторую часть первого урока. Вторая часть посвящена семантической разметке HTML5. Перед тем, как мы перейдем к примерам самого кода, давайте рассмотрим презентацию, и перейдем к 7-му слайду, где у нас перечислены новые семантические элементы, которые появились в HTML5, для определения структуры документа. Видите какие у нас есть элементы. Если обратить внимание на первые элементы, я думаю многие и вас при создании сайта, создавали шапку сайта в виде div, этому диву давали >

    Хотите изучить HTML5 и CSS3

    их при создании сайтов?

    Если да, то тогда внимательно посмотрите видео

    Меня зовут Михаил Русаков, и я уже около 9 лет занимаюсь программированием и из них последние 5 лет — созданием сайтов. На данный момент у меня больше сотни заказчиков, с некоторыми из которых я работаю постоянно. Так же я веду обучающую деятельность, и сейчас у меня несколько десятков тысяч учеников по всему миру и несколько тысяч клиентов. С отзывами некоторых из моих учеников Вы можете ознакомиться у меня на стене в контакте:
    http://vk.com/myrusakov

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

    А что особенного в HTML5 и CSS3?

    Действительно, ведь обходились же как-то и HTML 4.01, разработанной ещё в 1999 году. То же самое касается и CSS 2.1. Однако, HTML5 и CSS3 внесли огромные возможности по вёрстке страниц сайта, в разы упростив этот процесс.

    Вот лишь некоторые новые возможности HTML5:

    Вот лишь некоторые новые возможности HTML5:

    • Возможность вставки аудио и видео без использования Flash. Это стало возможным благодаря новым тегам, добавленным в HTML5.
    • Улучшенные возможности по поисковой оптимизации. В HTML5 страницы не будут создаваться на одних только div-ах. Теперь есть масса элементов, характеризирующих конкретную часть сайта (шапка сайта, подвал, меню навигации, статья и т. д.). Это очень хорошо скажется на оптимизации под поисковые системы.
    • Богатые возможности по работе с формами. Появилась масса новых типов полей. Например, e-mail, tel, url. Благодаря этим типам Вам больше не нужно писать код на JavaScript для проверки формы. Теперь с помощью HTML5 форма автоматически проверяется на корректность заполнения, сразу выдавая все сообщения об ошибках пользователю. Причём всё это сделано очень красиво и аккуратно, впрочем, через CSS можно будет изменить внешний вид всего этого. Также появился элемент datalist, позволяющий создать список вариантов, которые пользователь сможет выбрать при наборе текста. Такой функционал очень часто используется при наборе поискового запроса, когда вводя первые символы, сразу появляются возможные варианты. Никогда такая сложная функциональность не создавалась так легко. В общем, здесь ещё очень долго можно говорить, возможностей по работе с формами стало очень много.
    • Упрощённая реализация drag and drop. Теперь реализовать подобный механизм стало намного проще. Пример использования drag and drop – это, например, перетаскивание мышкой картинку товара в корзину, и он автоматически туда добавляется. Раньше это была достаточно сложная задача, теперь же она делается в течение нескольких минут.
    • Появилась возможность узнать местоположение пользователя. То есть узнать точные координаты, где находится посетитель Вашего сайта. Использование этого механизма вносит такие возможности, что дух захватывает.
    • Появились Canvas, что позволило рисовать прямо на Web-странице через JavaScript. Это позволяет генерировать картинки без перезагрузки страницы. Раньше без использования PHP это было сделать невозможно.

    Это не все возможности HTML5, но и этого достаточно, чтобы Вы поняли, что изучать HTML5 обязательно нужно.

    А что же нового в CSS3?

    • Появились новые селекторы, которые упрощают выборку. Например, простая задача – сделать особый стиль у последнего пункта меню (например, у всех пунктов внизу есть рамка, а у последнего пункта её нет). Раньше нужно было задавать отдельный класс для последнего пункта, а в CSS3 есть новый селектор, который поможет сразу вытащить этот последний элемент. Это сократит время работы и уменьшит размер кода. И таких полезных мелочей в CSS3 очень и очень много благодаря новым селекторам.
    • Богатые возможности по работе с фоном. Наконец-то, в CSS3 появилась возможность задать для одного элемента сразу несколько фонов. Так же их теперь можно растягивать по ширине и высоте.
    • Появилась возможность задать прозрачный цвет, чего сильно не хватало раньше. Так же появилась возможность задать цвет через HSL (оттенок-насыщенность-яркость).
    • Очень легко стало создавать закруглённые рамки. Практически в любом более-менее сложном дизайне присутствуют закругления у различных блоков и элементов формы. Раньше это была целая проблема, а в CSS3 это делается одной строчкой.
    • Теперь можно задать свой шрифт на сайте, и не нужно бояться, что у кого-то он не отобразится. Вы просто скачиваете шрифт, копируете на свой сайт, а через CSS3 его подключаете к странице. В CSS 2.1 не было такой возможности, что сильно ограничивало возможности по дизайну страницы.
    • Необычайно легко стало добавлять тень к элементам. На многих сайтах есть тень у некоторых элементов, и если раньше её делали долго и напряжённо, то сейчас это опять же одна небольшая строчка в файле стилей.
    • Можно создавать линейные и сферические градиенты. Очень часто на страницах встречаются градиенты, и раньше без нарезки картинок, подключения её в качестве фона и повторения по X или по Y не обходилось. В CSS3 же задать градиент очень и очень легко, а возможности там таковы, что можно создать даже очень сложный градиент, где хоть 10 переходов между цветами.
    • Появились трансформации. Теперь очень легко можно, например, повернуть, например, целый блок на определённый угол, или растянуть/сжать его на определённый процент, или подвинуть его (особенно полезно в совокупности с JavaScript).
    • Появилась анимация. Теперь Вам не нужно при наведении курсора мыши на элемент плавно менять его состояние через JavaScript. Огромное количество возможностей, которые встречаются на сайтах, теперь можно сделать через анимацию в CSS3. В некоторых случаях это поможет Вам отказаться от того же jQuery, который весит весьма прилично, тем самым, Вы увеличите скорость загрузки страницы, что так же хорошо скажется на поисковой оптимизации.

    Опять же это не все возможности, появившиеся в CSS3, но даже это уже позволит упростить вёрстку страницу, порой, многократно.

    Таким образом, HTML5 и CSS3 уже надо изучать и можно использовать уже сейчас. Вопрос только один.

    Как изучить HTML5 и CSS3?

    Тут надо всё разбить на 3 этапа.

    ЭТАП 1

    Нужно изучить всё новое, что есть в HTML5. Найти примеры, понять их и закрепить материал на практике.

    ЭТАП 2

    Нужно изучить все новые возможности CSS3: селекторы, свойства и их значения. Так же найти и понять примеры, а также попытаться самому что-то сделать.

    ЭТАП 3

    Нужно сверстать хотя бы одну достаточно сложную страницу с использованием HTML5 и CSS3.

    1-й и 2-й этапы относительно несложные. Благо, книг достаточно много, в некоторых есть и упражнения. Поэтому можно поискать и что-нибудь найти.

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

    Плюс большой минус книг, что они очень долго издаются. А HTML5 и CSS3 – это новинки, поэтому абсолютно все книги, которые Вы найдёте уже устарели. Отсюда вывод: искать информацию по HTML5 и CSS3 можно в онлайн-справочниках (убедитесь, что там есть постоянное обновление), где упражнений нет, да и покопаться там ещё придётся немало, а пример вёрстки и вовсе не сыскать. Плюс всех этих мучений только один – бесплатно.

    Я предлагаю Вам не только
    самый простой,
    но и самый лучший путь!

    Представляю Вашему вниманию свой новый Видеокурс, который называется «HTML5 и CSS3 с Нуля до Гуру»:

    Курс состоит из нескольких разделов, которые Вы можете увидеть на скриншоте главного меню:

    Что Вы узнаете из этого курса? Начнём с раздела по HTML5.

    Из этого раздела:

    1. Вы узнаете очень важные особенности HTML5, которые обязательно необходимо учитывать при использовании этой Web-технологии.
    2. Вы узнаете, как правильно вставлять видео и аудио на сайт. Тут тоже есть свои нюансы, без учёта которых у некоторых пользователей Ваше видео или аудио просто не запустится. Обо всех этих нюансах Вы узнаете из этого раздела.
    3. Вы узнаете, как использовать новые семантические теги для грамотной оптимизации под поисковые системы.
    4. Вы увидите все новые возможности по работе с формами.
    5. Вы увидите на конкретном примере, как реализуется с использованием HTML5 механизм Drag and Drop.
    6. Вы узнаете, как можно получить координаты местоположения посетителей Вашего сайта.
    7. Вы узнаете, как можно рисовать на Web-странице, используя новый элемент Canvas.

    Следующий раздел – это CSS3.

    Из этого раздела:

    1. Вы узнаете особенности CSS3, которые обязательно нужно знать, прежде чем его использовать. Без учёта этих особенностей могут возникнуть огромные проблемы с отображением сайта в разных браузерах (кроссбраузерностью).
    2. Вы увидите, как использовать новые селекторы.
    3. Вы увидите новые возможности по работе с текстом.
    4. Вы узнаете все возможности по заданию фона через CSS3.
    5. Вы узнаете, как создавать прозрачный цвет с помощью CSS3.
    6. Вы узнаете, как правильно задавать собственный шрифт. В этом разделе разбираются мелкие детали, которые очень многие верстальщики не учитывают, а потом появляются проблемы со шрифтами на сайте. После просмотра соответствующего урока из этого раздела Вы будете знать, что это за проблемы и как их решить очень быстро и легко.
    7. Вы узнаете, как создаются тени у текста и блоков.
    8. Вы увидите, как делаются самые различные градиенты.
    9. Вы узнаете, как трансформировать элементы, например, поворачивать те же изображения на определённый угол.
    10. Вы узнаете, как сделать анимацию на CSS3. Несколько самых различных и в то же время очень используемых в практике примеров Вы увидите своими глазами. Когда я впервые увидел возможности по анимации в CSS3, то был очень удивлён, уверен, что и Вам всё очень понравится.

    После этих 2-х разделов по HTML5 и CSS3 Вы будете обладать всеми необходимыми знаниями для успешной вёрстки страниц.

    Однако, крайне важно увидеть пример вёрстки
    реальной страницы на HTML5 и CSS3

    Поэтому в курсе «HTML5 и CSS3 с Нуля до Гуру» есть ещё один раздел, где показывается вёрстка для моего сайта с использованием HTML5 и CSS3.

    Кстати, вот дизайн страницы, которая верстается в курсе абсолютно с нуля:

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

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

    А что насчёт вёрстки под мобильные устройства?

    Вполне справедливый вопрос, ведь мобильные устройства такие как смартфоны и планшеты давно вошли в нашу жизнь. В 2013-м году мобильный трафик составил в среднем 38% от общего числа. Это очень крупная доля пользователей, о которых не стоит забывать. Поэтому для многих сайтов обязательно требуется создание мобильной версии сайта. И самая главная задача – это сделать правильную вёрстку для мобильной версии сайта.

    А как сделать вёрстку для мобильной версии сайта?

    Для ответа на этот вопрос был записан
    Бонусный Видеокурс «Вёрстка под мобильные устройства».

    Пройдя этот курс:

    1. Вы узнаете все особенности вёрстки под мобильные устройства. Эти особенности крайне важно знать перед тем, как делать вёрстку.
    2. Вы узнаете, как правильно изменить дизайн для вёрстки под мобильные устройства.
    3. Вы увидите, как верстается главная страница MyRusakov.ru под мобильные устройства.
    4. Вы сможете самостоятельно создавать мобильные версии своих сайтов, и это самое главное, что Вы получите, изучив этот курс.

    И самое главное, что этот курс является бесплатным Бонусом к курсу «HTML5 и CSS3 с Нуля до Гуру».

    А нужно ли знать HTML 4.01 и CSS 2.1,
    если теперь есть HTML5 и CSS3?

    Обязательно! HTML5 и CSS3, несмотря на всю их глобальность, являются лишь расширением базовых возможностей HTML и CSS. Поэтому прежде чем приступать к изучению HTML5 и CSS3, обязательно нужно знать все базовые возможности этих технологий, а также уметь верстать сайты с их помощью.

    Всему этому обучает Видеокурс «Вёрстка сайта с нуля».

    Пройдя данный курс, Вы сможете сверстать страницы любой сложности. А уже после надо проходить курс «HTML5 и CSS3 с Нуля до Гуру», который упростит Вашу работу и увеличит её качество.

    Для тех, кто любит всё по максимуму!

    У данного курса есть несколько различных комплектов.

    1) Комплект «Стандарт» — сюда входит курс «HTML5 и CSS3 с Нуля до Гуру» с Бонусным курсом «Вёрстка под мобильные устройства».

    2) Комплект «Вёрстка+». В данный комплект входит всё то, что есть в комплекте «Стандарт», а также курс «Вёрстка сайта с нуля», важность которого была описана немного выше. Если Вы ещё не умеете верстать сайты, или ещё даже плохо знаете HTML или CSS, то обязательно изучите сначала именно курс «Вёрстка сайта с нуля».

    3) Комплект «Профи в создании страниц». В данный комплект входит всё то, что есть в комплекте «Вёрстка+», а также курс «JavaScript, jQuery и Ajax с Нуля до Гуру», который позволит Вам «вдохнуть жизнь» в страницы Вашего сайта. Несмотря на богатые возможности HTML5 и CSS3, даже им необходим JavaScript. Например, та же работа с Canvas или механизмом Drag and Drop требует JavaScript, поэтому его знать необходимо, если Вы хотите создавать страницы с любой сложностью и с любым функционалом.

    4) Комплект «Профи в создании сайтов». Данный комплект содержит всё то, что есть в «Профи в создании страниц», а также курс «PHP и MySQL с Нуля до Гуру». Данный курс научит Вас создавать весь внутренний функционал сайта: регистрацию, авторизацию, поиск по сайту, динамическую генерацию страниц сайта и многое-многое другое. Комплект «Профи в создании сайтов» научит Вас создавать любые сайты с использованием самых современных Web-технологий.

    Видеоотзыв о курсе от ученика

    На мой взгляд, никто лучше и честнее не расскажет о курсе, чем те, кто его уже прошёл.

    Отзыв от Рустама Садыкова

    Подведём итог того, что Вы получаете

    Приобретя Видеокурс «HTML5 и CSS3 с Нуля до Гуру»:

    1. Вы узнаете новые возможности HTML5, а также увидите, как они работают.
    2. Вы узнаете, что нового появилось в CSS3, и как это используется на практике.
    3. Вы увидите конкретный пример вёрстки сайта.
    4. Вы сможете верстать любые сайты с использованием HTML5 и CSS3.
    5. Вы сможете создавать мобильную версию для своих сайтов.
    6. Приобретя комплект «Профи в создании страниц», Вы сможете использовать максимум возможностей HTML5 и CSS3 с помощью JavaScript.
    7. Приобретя комплект «Профи в создании сайтов», Вы сможете не только верстать любые сайты, но и реализовывать весь функционал, который делается на PHP и MySQL.

    Вы боитесь, что у Вас ничего не получится?

    Представляю самую свежую подборку замечательных CSS3, HTML5 и JQuery плагинов для сайта

    Приветствую Вас, дорогие читатели блога beloweb.ru. Сегодня я спешу представить Вам замечательную и свежую подборку удивительных HTML5, CSS3 и JQuery плагинов для сайта за 2012 год.

    Друзья, здесь Вы найдёте для себя очень много полезного и интересного. Но меня поразил старый кассетный магнитофон, который сделан только на HTML5. По моему это шедевр. Чего стоит только додуматься до этого, не говоря уже о реализации. В общем, вау :-)

    Если Вы случайно пропустили прошлые подборки, то рекомендую посмотреть:

    Какие инструменты/библиотеки/шаблоны помогут начать работу с HTML5/CSS3?

    Мы являемся небольшой компанией по разработке веб-приложений. Мы планируем перейти на HTML5/CSS3, и мы проходим тренировочную фазу (мы используем видеоуроки). Хотя HTML5/CSS3 кажется многообещающим, похоже, так много проблем с кросс-браузерной совместимостью, а также с множеством новых API. Есть ли какой-либо шаблон, который мы можем использовать сразу, ожидая полной рекомендации от W3C? В настоящее время существуют библиотеки/инструменты, которые мы можем использовать для обеспечения поддержки кросс-браузера?

    HTML5. С чего начать?

    Теперь лучше всего следить за тем, что могут сделать браузеры. Поэтому следуйте блогам разработчиков браузеров разных производителей по этому вопросу.

    Кстати, HTML5 — это в основном набор несвязанных функций, идущих от разметки до новых функциональных возможностей, таких как WebGL и клиентское хранилище (WebSQL). HTML5 основывается на предыдущих спецификациях стандартов HTML и разъясняет многие функции. С другой стороны, CSS является кульминацией CSS1 + CSS2 + CSS3.

    Идите в Интернет, вся информация есть!

    Ресурсы

    • Краткая история разметки (информация)
    • HTML5 Rocks (информация + учебники)
    • Погружение в HTML5 (информация)
    • CSS3 (информация + учебники)
    • Quirksmode (совместимость с браузером)
    • Эксперименты WebGL (эксперименты, вы можете просмотреть источник, который вы узнаете)
    • демонстрации HTML5 (демо)
    • Блог разработчиков Mozilla
    • Webkit

    Librairies and Templates

    Инструменты

    Связанный вопрос и ответы StackOverflow

    Я попытаюсь продолжать добавлять ресурсы.

    Вы не обновляете HTML5 и CSS3. HTML5 — это HTML, период. Поскольку для завершения таких стандартов требуется годы и годы, вы переходите к использованию новых элементов и свойств. Это никогда не оптовые изменения, когда в один прекрасный день вы используете все новые инструменты, не заботясь о старших.

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

    Будет некоторое время, прежде чем html и css3 будут поддерживаться, но в среднем, если вы хотите получить начальный старт, выберите themeforest у них есть много шаблонов html5 и php, которые вы можете начать взломать. Еще один отличный инструмент — проверить это сообщение noupe, где они перечисляют некоторые бесплатные учебники html5/css3.

    Позвольте разделить кросс-браузерную совместимость на две части: новые элементы HTML5/атрибуты и API HTML5.

    Элементы. Браузеры, которые не поддерживают новые элементы HTML5 (например, ), например. более старые версии IE, просто распечатывают содержимое и игнорируют стиль. Вы можете использовать небольшой JavaScript-хак, чтобы элементы были стильными в IE: HTML5shim.

    Атрибуты. Использование новых атрибутов HTML5 также отлично. Браузеры, которые их не понимают, просто игнорируют их. С помощью Modernizr вы можете проверить, доступна ли функция HTML5/CSS3, и если вы не просто откажитесь от JavaScript.

    Чтобы обеспечить поддержку новых API HTML5, вы можете использовать polyfills для добавления поддержки отсутствующих функций. Вот хороший список: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

    Кстати: Хорошая идея использовать некоторые API-интерфейсы HTML5, такие как localStorage , как прогрессивное усилие. Если это всего лишь небольшая функция, которая для улучшения пользовательского интерфейса, это хорошо сделать с помощью HTML5 и позволить старым браузерам иметь нормальную версию.

    jQuery — самая популярная библиотека кросс-браузера. Он будет использовать функции HTML5 в браузерах, которые поддерживают его, и изящно откатывается к чему-то еще, когда это необходимо. Он часто обновляется и очень богат.

    quirksmode http://www.quirksmode.org/compatibility.html — это список всех функций HTML/CSS/DOM и какие браузеры поддерживают их и в какой степени.

    w3schools http://www.w3schools.com/ — отличный ресурс для просмотра того, как конкретные функции HTML/CSS/DOM работают с кодом образцы.

    jsfiddle http://jsfiddle.net/ — это онлайн-редактор javascript/HTML/CSS. Это отличный способ проверить идеи, прежде чем вводить их в код. Это также отличный способ поделиться образцами кода с другими.

    jsPerf http://jsperf.com/ — это программа проверки скорости в Интернете. Если вы не уверены в лучшем способе сделать что-то в javascript, вы можете запустить образцы здесь. Результаты также доступны.

    Пол Ирландский и друзья просто запустили Переместить веб-трансляцию:

    Вам нравятся веб-стандарты. Вы хотите вернуть сообщество. Любопытно, с чего начать? Мы здесь, чтобы помочь.

    Learn

    Одна из самых красивых вещей в Интернете — это то, что она постоянно меняется. Хотя эти изменения и улучшения могут быть ошеломляющими, мы здесь, чтобы помочь вам подняться! Вот несколько отличных ресурсов, которые помогут вам разобраться в работе браузеров и помогут вам обновить их улучшения.

    Цукерберг рекомендует:  Обучение - javascript settimer
    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих