Руководство для начинающих по созданию веб-страниц HTML5 / CSS3

Эта статья является частью нашей «Серия руководств по HTML5 / CSS3» - призван помочь вам стать лучшим дизайнером и / или разработчиком. кликните сюда чтобы увидеть больше статей из этой серии.

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

Хотя большинство разработчиков демонстрируют потенциальные, но сложные демонстрации, HTML5 / CSS3 на самом деле не являются ракетостроением, и я проведу вас через процесс расслабления, чтобы создать стандартную веб-страницу HTML5 / CSS3 с подробным, но всесторонним объяснением и тадой! Вам доступны такие бонусы, как учебные ресурсы и бесплатные шаблоны HTML5, так что воспользуйтесь этой возможностью, чтобы начать свое путешествие по HTML5!

Изменения между HTML4 и HTML5

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

(Источник изображения: W3C)

Сравнение между HTML4 и HTML5 трудно обнаружить на уровне поверхности. Из нового черновика HTML5 вы можете увидеть избранные элементы и исправленные процедуры обработки ошибок. Разработчикам браузеров особенно понравились новые спецификации для рендеринга веб-страниц по умолчанию.

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

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

Голый скелет HTML5

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

   Наша первая страница HTML5       Добро пожаловать, один и все!
   Главная
 О нас
 контакты
 
 
 
   некоторый контент здесь.
 
  но некоторые здесь тоже!
 
 
  Некоторые авторские и юридические уведомления здесь. Может быть, использовать символ © немного.

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

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

Это правило все еще применяется в HTML5. Но теперь ты даже не нужна дополнительная косая черта! полностью действительный, хотя вам разрешено продолжать использовать стандарт XHTML / XML. Для всех совместимых со стандартами браузеров оба элемента будут отображаться одинаково.

Определение областей нашей страницы

Большинство нашего нового кода не должно быть слишком шокирующим. наш Доктип весело смешно чем когда-либо, нет необходимости в чрезмерных атрибутах тела, и информация в нашем заголовке четко обозначена. Продолжая, я хотел бы сосредоточить ваше внимание на содержании внутри нашего тег. Это включает в себя всю структуру главной страницы. Я специально использовал несколько хороших тегов HTML5, чтобы показать, как вы можете включить их в свою работу.

Сначала вы увидите всю страницу заключен в капсулу ДИВ тег. Я пометил это с идентификатором обертка, это означает, что он охватывает весь контент нашего сайта. Это полезно установить максимальную ширину или положение контента вокруг на экране. Затем я разбил страницу на 3 основных элемента - один

, ядро

, и короткий

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

помечать как обертку.

Теперь для

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

теги, которые будут включать нашу основную область содержимого и боковую панель соответственно. Мы будем использовать стили CSS, чтобы разделить их.

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

Creative CSS3 Wizardry

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

(Источник изображения: W3C)

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

 nav display: block; нижнее поле: 10 пикселей;  nav ul list-style: none; размер шрифта: 14 пикселей;  nav ul li display: inline;  nav ul li a display: block; плыть налево; обивка: 3px 6px; цвет: # 575c7d; текстовое оформление: нет; вес шрифта: полужирный;  nav ul li a: hover background: # deff90; цвет: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; радиус границы: 3 пикселя; обивка: 3px 6px; поле: 0; текстовое оформление: нет;

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

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

элементы, #оставил а также #право соответствовать их стороне страницы. Я установил каждый с определенной шириной и плавающим влево, чтобы они располагались рядом друг с другом. Так как наш контейнер ДИВ # ядро содержит clearfix класс, это означает, что весь внутренний контент может свободно передвигаться и автоматически очищает дополнительное пространство после.

/ * ядро страницы * / div # core display: block; ясно: оба; нижнее поле: 20 пикселей;  раздел # слева ширина: 550 пикселей; плыть налево; поле: 0 15px;  section # right float: left; ширина: 300 пикселей;  / * clearfix * / .clearfix: after content: "."; дисплей: блок; ясно: оба; видимость: скрытая; высота строки: 0; высота: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix height: 1%;

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

Менее известный синтаксис CSS3

Чтобы создать полноценные веб-страницы HTML5 / CSS3, вы начнете использовать гораздо более сложные таблицы стилей. Многие дизайнеры знают сокращенный код (например, шрифт: свойство), так как они были стандартами еще до CSS2.

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

коробчатого тень: добавляет аккуратный эффект тени на элементы вашей страницы. Вам предоставляется 4 параметра, которые устанавливают положение влево / вправо, вверх / вниз, размытие тени и цвет. Обратите внимание, что тени от ячеек не считаются дополнительным пространством к исходной ширине / высоте..
текст-тень: создает красивые тени за текстом вашей страницы. С правильными эффектами ваши письма могут появиться прямо со страницы.
граница радиуса: Закругленные углы заняли много времени, чтобы стать общепринятыми стандартами. Несколько лет назад многие дизайнеры Web 2.0 создавали фоновые изображения просто для того, чтобы скруглить углы с помощью CSS. Но с помощью CSS3 border-radius вы можете манипулировать кривой каждой границы на любом элементе.
помутнение: Похоже на простое свойство, которое многие дизайнеры не учитывают. Непрозрачность предполагает один числовой ввод в диапазоне от 0 до 1,0 (0% - 100%). Этот эффект прекрасно работает как анимация при наведении.
@ Шрифт-лицоЕще один прекрасный пример некоторых сложных стилей CSS и типографики. Веб-дизайнеры теперь могут работать со своими собственными шрифтами, определяя их как переменные внутри ваших документов CSS.
коробчатого проклейки: по умолчанию box-sizing установит все ваши элементы как Содержание ящика. Это означает, что ширина, отступы и границы включены в максимальную ширину. Но установлено граница-бокс Вы можете определить максимальную ширину (скажем, 20 пикселей), и добавленные отступы / границы будут включать себя в это, тем самым удаляя пространство внутри объекта. Это фантастическая собственность, когда вы овладеете ее находчивостью.

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

Еще одна ключевая часть добавленного синтаксиса, о которой стоит упомянуть: селекторы атрибутов. С CSS3 вы можете теперь определить стили на основе атрибутов HTML (например, type, href, title) и даже предоставляют конкретные значения. Так, например, мы могли бы нацелить ссылки с определенным атрибутом заголовка и дать им набор фонового значка.

 ul li [title ^ = "ico"] background: url ('my-icon.gif');

Если вы заметили, я включил символ каретки перед знаком равенства. Это оператор, который определяет все элементы списка, содержащие префикс, ICO. В качестве альтернативы вы можете заменить символ каретки (^) знаком доллара ($), чтобы указать область суффикса заголовка. Таким образом, CSS3 знает, как добавлять фоновые изображения, где вы можете установить заголовки как «первое ico» или «книга ico». Читайте немного больше о селекторах атрибутов, если вам интересно.

Собираем все вместе

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

(Источник изображения: W3C)

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

Как только вы освоите создание веб-страниц HTML5, вы, вероятно, начнете изучать анимации страниц. Даже незначительные эффекты с JavaScript и AJAX могут в основном улучшить пользовательский опыт и производительность сайта. Хотя это не входит в рамки статьи, я рекомендую поиграть с jQuery, если у вас есть время. Библиотека с открытым исходным кодом поразительна и позволяет быстро создавать прототипы поверх элементов страницы HTML5.

Дополнительные ресурсы

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

Ниже приведены некоторые дополнительные списки, статьи и учебники, которые вам могут понравиться. Я позволил себе разделить списки на ресурсы HTML5 и CSS3. Исходя из того, что вы изучаете, здесь должно быть несколько тем для всех. Также наслаждайтесь краткой галереей бесплатных тем HTML, доступных для скачивания онлайн!

HTML5

HTML5: 15 вдохновляющих экспериментов
HTML5: 19 веб-приложений
HTML5: 48 потенциальных демонстрационных роликов
Создать HTML5 / CSS3 контактную форму на основе Ajax

CSS3

CSS3: руководство для начинающих
CSS3: создание поля поиска
CSS3: использование псевдоклассов
CSS3: 30+ полезных уроков

Бонус: HTML5 шаблоны и темы

Проектная Компания

Готовы шагнуть в удивительный мир HTML5? Вот совершенно бесплатный шаблон HTML5 со скриптами jQuery и пользовательскими шрифтами, которые вы можете бесплатно тестировать.!

Тема HTML5 / CSS3

Эта основанная на HTML5 / CSS3 тема имеет общий дизайн макета блога, чтобы вы могли либо создать свой собственный блог HTML5 с обширными функциями, либо просто покопаться в коде и узнать что-нибудь о нем.

Yoko

Yoko - это современная тема WordPress, рассказывающая о гибкости благодаря адаптивному макету, основанному на медиазапросах CSS3, который позволяет настраиваться на экран разных размеров, узнайте об этом!

Серый

Если вы предпочитаете стиль классического блога WordPress, Grey, вероятно, для вас со своими встроенными функциями CSS3, такими как border-radius, несколько фонов, text-shadow и т. Д..

Руководство для новичков по Flock, браузер социальных сетей

Руководство для начинающих по разработке iOS Интерфейс - Часть I

Руководство для начинающих по настройке Windows 7 Media Center