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

Для изучения урока, скачайте архив с необходимыми файлами .

HTML - это язык разметки документов . Правильное произношение - Эйч Ти Эм Эль .

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

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

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

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

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

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы - W hat Y ou S ee I s W hat Y ou G et. То есть, если перевести на русский: что видим, то и получаем.

Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки
      , редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
    • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру - от каждого действия остается след в исходном HTML коде. Редактор - это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
    • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов - вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
    • Поддерживать такие проекты и развивать - кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

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

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

    Структура документа HTML

    Рекомендую для занятий скачать и установить редактор Sublime Text . Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.

    Мы решили, что код HTML документа будем писать вручную, то есть верстать . HTML Верстка - процесс создания HTML документа. В простонародье и осведомленных кругах - просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

    Давайте создадим на компьютере первоначальный шаблон - файл index.html , откроем с помощью редактора и вставим в него следующий код:

    Заголовок Тело документа Обратите внимание, документы HTML имеют расширение .html .

    Итак, по порядку из примера.

    - тип документа (доктайп)

    Данная конструкция всегда указывается в начале документа для правильного "понимания" браузером того, какая версия HTML используется при построении документа.

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

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

    - начало документа

    Первый тег, который мы встречаем после доктайпа, это .

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

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

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

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

    Тег

    Далее, мы видим тег , который содержит другие, пока не понятные нам элементы. Содержит другие элементы - это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

    содержание или другие теги

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

    Тег - заголовок документа Заголовок

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

    Метатег

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

    Фавиконка (favicon)

    Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

    CSS стили документа

    Подключает к документу CSS файл со стилями оформления HTML.

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

    Примечание: свойство href конструкции указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico , находятся в той-же папке, что и файл index.html . не имеет закрывающего тега.

    Тег

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

    В нашем примере подключается внешний файл script.js , который находится в той-же папке, что и основной файл index.html.

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

    Тело aka body

    Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

    Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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

    Тег Описание
    Тег для создания ссылок в документе.
    Пример: текст ссылки Атрибут href указывает документ, на который будет вести данная ссылка.
    , Делает текст курсивом или жирным (акцентируемым).
    Пример: текст курсивом жирный (акцентируемый) текст
    , , , , , Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа.
    Примеры: Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня ... и т. д.
    ,
    		Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег

  • Примеры:
  • Элемент нумерованного списка 1
  • Элемент нумерованного списка 2
    		•

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

    Внешний вид HTML разметки во многом определяется CSS стилями.

    Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.
    Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся".
    Пример:
    + + Формы и элементы ввода.
    Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер.
    Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: Текст сообщения
    Определяет подстроку в строке.
    Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
    Пример: Изучение HTML, в большинстве случаев, не вызывает ни каких сложностей у новичков.
    , Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
    Примеры: Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
    Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги .
    Пример: Текст во вложенном блоке Все элементы , в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег .
    Данный тег загружает внешнюю страницу в документ.
    Пример:

    Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

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

    Например, не:

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

    Итак, теперь мы знаем некоторые основы HTML : какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.

    Практическое задание по HTML верстке

    Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.

  • Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
  • Создайте первоначальную структуру документа с доктайпом, тегом , содержащим и и перейдите к редактированию содержимого тега ;
  • Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

    • На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

    До новых встреч, друзья!

    Reg.ru: домены и хостинг

    Крупнейший регистратор и хостинг-провайдер в России.

    Более 2 миллионов доменных имен на обслуживании.

    Продвижение, почта для домена, решения для бизнеса.

    Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

    *Наведите курсор мыши для приостановки прокрутки.

    Назад Вперед

    30 хороших практик в CSS для новичков

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

    1. Сделайте его легко читаемым

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

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

    Группа 1: Все в одну линию

    SomeDiv { background: red; padding: 2em; border: 1px solid black; }

    Группа 2: Каждому стилю - отдельная строка

    SomeDiv { background: red; padding: 2em; border: 1px solid black; }

    На самом деле обе практике вполне хороши, хотя между представителями данных групп нередки разногласия! Просто имейте в виду - выбирать нужно тот вариант, на который вам приятно смотреть. Вот и все.
    Заметка

    2. Сделайте его целостным

    Помимо повышения читабельности кода, сделайте его более целостным. Вы должны начать разрабатывать свой "суб-язык" CSS, который позволит вам придерживаться определенного стиля именования. Есть определенное количество классов, которые я создаю практически всегда, при этом я даю им одни и те же имена каждый раз. К примеру, я использую .caption-right для выравнивания картинок по правой стороне.

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

    3. Начните с фреймворка

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

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


    Заметка
    Не соглашусь. CSS-фреймворки - незаменимая вещь, но лишь для немногих, для тех, кто хорошо умеет ими пользоваться.

    "Это скорее не вопрос изобретения колеса, а вопрос понимания того, как оно работает"

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

    4. Используйте обнуление

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

    Вот ссылки на одни из наиболее популярных сбросов: MeyerWeb , Yahoo’s developer reset . Как вариант, вы можете придумать свой "обнулятор", взяв за основу следующий .

    5. Структурируйте ваши файлы стилей по принципу "сверху вниз"

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

    1. Общие классы (body, a, p, h1, и т.д.) 2. #header 3. #nav-menu 4. #main-content

    Не забудьте снабдить каждую секцию комментариями!

    /****** main content *********/ здесь идут стили... /****** footer *********/ здесь идут стили...

    6. Группируйте элементы

    Часто элементы могут иметь пересекающиеся, общие стили. Вместо того, чтобы переписывать уже имеющийся код, лучше просто сгруппируйте элементы. К примеру, ваши заголовки h1, h2 и h3 могут иметь одинаковый шрифт и цвет:

    H1, h2, h3 {font-family: tahoma, color: #333}

    7. Создайте сперва HTML-разметку

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

    8. Применяйте несколько классов к элементу, если нужно

    Иногда бывает лучше применить к элементу сразу несколько классов. Предположим, у вас есть контейнер div , которому вы хотите задать float:right , и у вас уже есть класс .right в вашем файле стилей, который выравнивает все по правому краю. Вы можете просто добавить еще один класс к вашему контейнеру div :

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

    Заметка
    Будьте очень осторожны, используя имена вроде left и right . Представьте, что вам вдруг понадобилось выровнять контейнер по левой стороне. В этом случае вам нужно вернуться в HTML-код и изменить имя класса - и все это для того, чтобы изменить визуальное отображение на странице. Это несемантично. Запомните: HTML - для разметки, CSS - для визуального представления.

    Если вам нужны правки в HTML для смены оформления страницы, вы делаете что-то не так!

    9. Используйте правильный тэг Doctype

    К элементам, относящимся к обоим типам можно отнести:

    Span, a, strong, em, img, br, input, abbr, acronym

    К блочным элементам относятся:

    Div, h1...h6, p, ul, li, table, blockquote, pre, form

    13. Располагайте свойства в алфавитном порядке

    Применение такой системы расположения свойств позволит вам сэкономить немало времени при поиске нужного свойства.

    #cotton-candy { color: #fff; float: left; font-weight: height: 200px; margin: 0; padding: 0; width: 150px; }

    Заметка
    Эх.., принести скорость в жертву слегка улучшенной читабельности.. Смотрите сами..
    Заметка

    14. Используйте CSS-компрессоры

    Сжиматели CSS помогают значительно уменьшить размера файла стилей посредством удаления лишних переводов строк и комбинирования элементов. Все это позволяет вашему сайту загружаться быстрее. CSS Optimizer и CSS Compressor - два замечательных онлайн-сервиса для выполнения таких задач.


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

    15. Используйте общие классы

    Вы скоро заметите, что есть стили, которые вы применяете снова и снова. Вместо того, чтобы добавлять этот стиль к каждому ID, вы можете создать общие классы и добавлять их к ID других классов CSS (смотрите рекомендацию №8 данной статьи).

    К примеру, я заметил, что я использую float:right и float:left снова и снова в своих дизайнах. Я просто добавляю классы .left и .right в свой файл стилей и применяю его к элементам.

    Left {float:left} .right {float:right} ...

    Таким образом, вам не нужно постоянно писать float:left для всех элементов, к которым нужно применить данное свойство.

    16. Используйте "Margin: 0 auto" для центрирования дизайна

    Многие новички в CSS не понимают, почему они не могут просто использовать float: center чтобы добиться эффекта центрации для блочных элементов. Если бы все было так просто! К сожалению, нужно делать это так:

    Margin: 0 auto; /* 0 - для top и bottom; auto - для left и right */

    17. Не заключайте все подряд в DIV

    Частенько возникает соблазн сделать что-то вроде:

    Текст заголовка

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

    Header Text

    И уже для тэга h1 вы можете задать любое оформление, которое вам нужно.

    18. Используйте Firebug

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


    Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML , комментарии в HTML, основные теги , основные атрибуты HTML . .

    Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения , выравнивание изображения … в HTML.

    Задания по углубленной работе с HTML и CSS

    Задания по HTML с Emmet. Быстрая верстка , команды Emmet (так называемая шпаргалка Emmet ). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. .

    Задания по CSS-селекторам. Селекторы CSS : css селекторы классов , css селекторы атрибутов , соседние селекторы css , контекстные селекторы css, дочерние селекторы +в css , приоритет селекторов . .

    Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute , position relative , position fixed и position static , CSS-свойств top left bottom right . .

    Задания по верстке форм
  • Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в .
  • Сверстайте форму диспетчера на сайте
  • Подключить jQuery-плагин для выбора даты/месяца из поля
  • Создайте чекбокс по аналогии с социальной сетью.
  • Создайте форму регистрации посетителя сайта
  • Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

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

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

    Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта — важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта , проверка мобильной версии сайта . .

    Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания .