Создание документа HTML5. Вот лишь некоторые новые возможности HTML5. Что думает общественность

Простой документ HTML5

Рассмотрим один из простейших документов HTML5. Он начинается с указания типа документа с помощью специального кода описания типа документа (значение этого кода объясняется в следующем разделе), после чего задается кодировка и название документа, а потом идет его содержимое. В данном случае содержимое состоит из одного абзаца текста:

Крошечный документ HTML5

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

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

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

Наконец, весь документ (за исключением строки doctype) можно облачить в традиционный элемент , как показано в следующем листинге:

Крошечный документ HTML5

Дадим встряску браузеру в стиле HTML5!

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

Использование элементов , и является просто вопросом стиля. Страница без этих элементов будет работать отличнейшим образом даже на старых браузерах, которые и слыхом не слыхивали ни о каком HTML5. Фактически, браузер автоматически предполагает наличие этих элементов. Поэтому, если посмотреть на модель DOM (набор программных объектов, представляющих страницу) страницы с помощью сценария JavaScript, она будет содержать объекты для элементов , и , даже если разработчик и не использовал их.

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

Описание типа документа HTML5

В первой строке каждого HTML5-документа всегда дается описание типа документа. Это описание ясно указывает, что далее следует HTML5-содержимое, и выглядит следующим образом:

Первое, что бросается в глаза в описании типа документа HTML5 - это его поразительная простота. Сравните его, например, с неуклюжим описанием типа документа, который требуется использовать веб-разработчикам при работе со строгим XHTML 1.0:

Даже профессиональные веб-разработчики были вынуждены вставлять описание типа документа XHTML методом копирования и вставки из другого документа. А описание типа документа HTML5 короткое, четкое и легко вводится вручную.

Описание типа документа HTML5 также примечательно тем, что оно не содержит номера официальной версии HTML (5 для HTML5). В нем просто указывается, что страница является HTML-страницей. Это соответствует новой концепции HTML5 как живого языка. Добавленные в HTML новые возможности автоматически доступны для размещения на странице, не требуя для этого изменений в описании типа документа.

Все это порождает непростой вопрос: если HTML5 - живой язык, то зачем тогда для страницы вообще нужно описание типа документа?

Ответ на этот вопрос таков: описание типа документа продолжает использоваться по историческим причинам. При обработке страницы с отсутствующим описанием типа документа большинство браузеров (включая Internet Explorer и Firefox) переходят в режим совместимости (quirks mode) . В этом режиме они пытаются отобразить страницу с учетом ошибок в правилах, которые использовались в более ранних версиях. Проблема с этим состоит в том, что режим совместимости одного браузера может отличаться от режима совместимости другого браузера, вследствие чего страницы, разработанные для одного браузера, на другом браузере будут, скорее всего, отображаться с ошибками, такими как неправильный размер шрифта, нарушенная структура оформления и т.п.

А обнаружив на странице описание типа документа, браузер знает, что обработку этой страницы требуется выполнять, следуя более строгим правилам режима стандартов (standards mode) , который обеспечивает единообразное форматирование и структуру страницы при ее отображении любым современным браузером. За некоторыми исключениями, браузеру совершенно безразлично, какой именно тип документа указан в описании. Он просто проверяет, что страница имеет какое-либо описание типа документа. Описание типа документа HTML5 просто самое короткое действительное описание типа документа, которое задействует режим стандартов браузера.

Кодировка символов

Кодировка - это стандарт, указывающий компьютеру, каким образом преобразовывать текст в последовательность байтов при записи текста в файл (а также, как выполнять обратное преобразование при открытии файла). По историческим причинам в мире существует множество разных кодировок. В настоящее время практически на всех веб-сайтах используется компактная и быстрая кодировка UTF-8, поддерживающая все символы других алфавитов, которые вам когда-либо могут потребоваться.

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

HTML5 делает эту задачу легкой. Для этого нужно лишь вставить элемент в самом начале блока (или, если элемент не используется, сразу же после кода описания типа документа):

Крошечный документ HTML5

Инструменты для веб-разработки, такие как Dreamweaver или Expression Web, вставляют этот элемент автоматически при создании страницы. Эти инструменты также обеспечивают сохранение файлов в кодировке UTF. Но при создании веб-страницы с помощью обычного текстового редактора, чтобы обеспечить сохранение файлов в правильной кодировке, может потребоваться выполнить дополнительные шаги.

Язык

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

Вставить в веб-страницу информацию о языке легче всего через элемент :

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

Добавление таблицы стилей

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

Крошечный документ HTML5

Этот способ похож на указание таблиц стилей в традиционных HTML-документах, но немного проще. Так как существует единственный язык каскадных таблиц стилей - CSS, то в добавлении атрибута type="text/css", который требовался ранее, больше нет надобности.

Добавление JavaScript-кода

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

Код JavaScript вставляется в документ HTML5 по большому счету таким же способом, как и в традиционную HTML-страницу. В следующем листинге приводится пример вставки в веб-документ кода JavaScript по ссылке на внешний файл:

Крошечный документ HTML5

Атрибут language="JavaScript" не является обязательным, т. к. если не указан какой-либо другой язык сценариев (а поскольку JavaScript - единственный широко-поддерживаемый язык сценариев для HTML, то вероятность такого развития ничтожно мала), браузеры автоматически предполагают, что используется JavaScript. Но даже ссылаясь на внешний файл с кодом JavaScript, все равно нужно помнить о закрывающем теге . Если упустить этот тег по недосмотру или при попытке укоротить код, используя синтаксис пустых элементов, то страница не будет работать должным образом.

Если вы уделяете много времени тестированию своих страниц с JavaScript в Internet Explorer, может быть полезным добавление метки MOTW (Mark of the Web - метка особенности сети) в блок сразу же после строки кодировки. Делается это таким образом:

Крошечный документ HTML5

Эта строка кода указывает Internet Explorer обрабатывать страницу таким образом, как будто бы она была загружена с удаленного веб-сайта. В противном случае IE переключается в особый режим блокировки, выводит предупреждение безопасности в строке сообщений и отказывается исполнять любой код JavaScript до тех пор, пока вы не нажмете кнопку "Разрешить заблокированное содержимое".

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

Сегодня Андрей Бернацкий завершил работу над своим новым курсом по HTML5 и CSS3. Видеокурс «HTML5 и CSS3 с Нуля до Профи» доступен для заказа со скидкой 40%...

Без преувеличения можно сказать, что сегодня видеокурс Андрея Бернацкого «HTML5 и CSS3 с Нуля до Профи» является наиболее полным и актуальным видео-руководством в РуНете.

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

Посмотрите интересный видео-обзор самого курса:

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

Андрей Бернацкий в своем видеокурсе дает обучение на примере макетов, и все макеты верстаются сразу АДАПТИВНЫМИ и КРОССБРАУЗЕРНЫМИ. Вы осваиваете тему «от простого к сложному» и от «теории к практике сайтостроения».

Автор не просто научит вас верстать простейшие html-страницы. Вы вместе с опытным преподавателем и программистом подробно и детально проработаете верстку на примере трех разных по сложности видов сайтов в современном Интернете. Это будет сайт-визитка, блог и Интернет-магазин. С каждым типом сайта вы поработаете от А до Я.

На видеокурс «HTML5 и CSS3 с Нуля до Профи» Андрей Бернацкий в период выхода нового курса установил специальные условия — скидку в размере 40%!

Так, цифровую версию курса (скачивание видеокурса «HTML5 и CSS3 с Нуля до Профи» после оплаты) вы сможете получить всего за 2.982 рубля вместо 4.970 рублей. А версия на DVD-диске будет стоит в период акции всего 3.282 рубля вместо 5.470 рублей. Не упустите такую возможность!

Видеокурс «HTML5 и CSS3 с Нуля до Профи» – единственный на российском и западном рынке ПОЛНОЦЕННЫЙ обучающий продукт, который раскрывает все аспекты верстки при помощи технологий HTML5 и CSS3. Речь идет о полноте, качестве, систематичности и актуальности данного материала. Аналогов видеокурсу Андрея Бернацкого просто нет!

Но самое главное — Андрей Бернацкий оказывает поддержку клиентов на закрытом форуме клиентской поддержки издательства WebForMyself.com. Аналогов такому обучению не предвидится даже в обозримом будущем. Каждый клиент получает личную поддержку и консультации автора в неограниченном размере по ВСЕМ вопросам видеокурса, но при этом платит как за обычный курс по сайтостроению!

Автор дает гарантию, что в ближайшие 2 месяца после изучения видеокурса «HTML5 и CSS3 с Нуля до Профи» вы даже будучи полным новичком, превратитесь в профессионального верстальщика web-проектов и на высоком уровне освоите верстку с HTML5 и CSS3.

Напомню, что курс вышел в свет 19 апреля 2016 года и акция со скидкой 40% продлится всего 36 часов. А с 21 апреля вы сможете купить видеокурс «HTML5 и CSS3 с Нуля до Профи» уже за полную стоимость. Поспешите!

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

Будьте уверены, что ваши успешные и высокооплачиваемые конкуренты уже давно используют в создании сайтов связку HTML5 + CSS3!!!

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

Если вы следите за СЕО и продвижением сайта в поисковиках, то наверное знаете — уже около года адаптивность веб-сайта вовсю учитывает в своей поисковой выдаче поисковик Google. Машина отдает предпочтение в поисковой выдаче сайтам, которые имеют адаптивную верстку, и которые написаны на HTML5 и CSS3. Это факт.

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

HTML5 – что это?

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

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

HTML5 – это совокупность CSS3 (языка представления страницы), разметки (усовершенственный код html) и JavaScript (взаимодествие, интерактивность). Имея такой богатый арсенал мы можем с уверенностью сказать, что HTML5 это поистине новый рывок в создании не только веб-страниц, но и целых веб-приложений.

Естественно, подходить к созданию интерактивных страниц необходимо, имея, хотя бы базовые знания в области программирования на JavaScript и знанием html и css. Без этого никак.

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

Моя первая страница /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size: 30px; color: red; } Привет var my_first=document.getElementById("first"); my_first.innerHTML="Это моя первая запись"; // Здесь Вы можете писать любую функцию. HTML5 видит css и javascript. Ему теперь не нужно указывать, что перед ним. Очень удобно.

< ! doctype html > < ! -- Обратитевниманиенановоеопределениедокументов. Теперьненужнозапоминатьисохранятькод. Выегосамизапомните. Посмотрите, каквыглядитВашкод. -- > < html > < head > < meta charset = "utf-8" > < ! -- Вотивсеmeta дляВашегодокумента. Короткость, сестраталанта-- > < title > Мояперваястраница< / title > < link rel = "stylesheet" href = "index.css" > < ! -- Подключениестилейиjavascript сталопрощенекуда-- > /*Стиле прописываем теперь любые. Удобно, неправда ли?*/ body { font-size : 30px ; color : red ; < / head > < body >

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

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h1 и h2.

Элемент hgroup используется для группирования набора элементов h1-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h1).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как "Untitled Section" (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как "Navigation" (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

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

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

Связанные посты.

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

Элемент Article

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

XHTML

2010 16apr Sample Post 1 38

Curabitur ut congue hac, diam turpis[…]

Written by: Author Name Tags: coolmodernhype-friendly Continue Reading

2010 16 apr Sample Post 1 38 Curabitur ut congue hac, diam turpis[…] Written by: Author Name Tags: cool modern hype-friendly Continue Reading

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации ) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

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

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

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

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

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

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

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

Спасибо за прочтение и не пропустите вторую часть статьи, где мы обсудим свойства CSS3, используемые для декорирования разметки.

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

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Название : HTML5 и CSS3 с нуля до профи
Автор : Андрей Бернацкий
Год выхода : 2016
Жанр : Видеокурс
Язык : Русский

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

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

Верстка макета сайта-визитки

Урок 2. Определение разметки для страницы
Урок 3. Описание стилей шапки сайта
Урок 4. Описание стилей основного блока сайта. Часть1
Урок 5. Описание стилей основного блока сайта. Часть2. Заключение

Верстка макета блога

Урок 1. Введение. Настройка страницы
Урок 2. Определение разметки шапки сайта
Урок 3. Подключение нестандартных шрифтов
Урок 4. Описание стилей шапки сайта
Урок 5. Описание разметки основного блока сайта
Урок 6. Описание разметки блока постов
Урок 7. Назначение стилей для блока постов
Урок 8. Описание разметки боковой колонки
Урок 9. Назначение стилей для боковой колонки
Урок 10. Описание разметки постраничной навигации
Урок 11. Назначение стилей для постраничной навигации
Урок 12. Верстка footer’а сайта
Урок 13. Доработка верстки макета
Урок 14. Адаптация верстки под мобильные устройства. Часть 1
Урок 15. Адаптация верстки под мобильные устройства. Часть 2
Урок 16. Добавление эффектов CSS3 на страницу. Часть 1
Урок 17. Добавление эффектов CSS3 на страницу. Часть 2

Верстка макета интернет-магазина

Урок 1. Введение
Урок 2. Подключение нестандартного шрифта к странице
Урок 3. Определение разметки шапки сайта
Урок 4. Описание стилей шапки сайта. Часть 1
Урок 5. Описание стилей шапки сайта. Часть 2
Урок 6. Подключение слайдера к странице
Урок 7. Назначение стилей и настройка слайдера
Урок 8. Описание разметки блока новостей
Урок 9. Назначение стилей для блока новостей
Урок 10. Описание разметки блока «Популярные продукты»
Урок 11. Назначение стилей для блока «Популярные продукты». Часть 1
Урок 12. Назначение стилей для блока «Популярные продукты». Часть 2
Урок 13. Улучшение блока «Популярные продукты»
Урок 14. Описание разметки блока «О магазине»
Урок 15. Назначение стилей для блока «О магазине»
Урок 16. Описание разметки блока «Подписка»
Урок 17. Назначение стилей для блока «Подписка»
Урок 18. Описание разметки для footer’a
Урок 19. Назначение стилей для блока «footer»
Урок 20. Делаем макет адаптивным. Часть 1
Урок 21. Делаем макет адаптивным. Часть 2
Урок 22. Делаем макет адаптивным. Часть 3
Урок 23. Делаем макет адаптивным. Часть 4
Урок 24. Делаем макет адаптивным. Часть 5
Урок 25. Заключение

Выпущено : Россия
Продолжительность : 25:51:27

Файл
Формат : HTML, MP4
Видео : AVC, 1024x768, ~651 Kbps
Аудио : AAC, 106 Kbps, 48.0 KHz