HTML5

Структурные элементы страницы

Влад Мержевич

Набор структурных элементов HTML5 вызывает массу вопросов у начинающих верстальщиков. Чем отличается <article> и <section>? В каком случае надо писать <main>, а в каком <article>? Что ставить в <aside>? Можно ли добавлять <section> в <footer>? В общем, вместо того, чтобы облегчить работу и упростить код, эти элементы только запутали. Казалось бы, есть спецификация HTML, к ней и надо обращаться по спорным вопросам. Но беда в том, что тексты спецификации можно трактовать по разному, поэтому на форумах часто происходят словесные баталии, каждый отстаивает свою противоположную позицию.

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

  • «шапка»;
  • «подвал»;
  • навигация;
  • статья;
  • боковая панель;
  • раздел.

Основы HTML

Влад Мержевич

Приложение Основы HTML достигло показателя 5 тысяч установок. Более 30 положительных отзывов, более 100 оценок на пять звёзд и лишь единственная на единицу. Да, всегда найдётся пчёлка, которая в бочку несёт дёготь, а не мёд.

В общем, если вы ещё не установили это приложение на свой Андроид, то самое время это сделать. Приложение бесплатное, не содержит рекламы и каких-либо скрытых платежей.

Справочник HTML

Влад Мержевич

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

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

Основы HTML

Влад Мержевич

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

Скачать приложение бесплатно без рекламы, регистрации и СМС.

Устанавливайте, используйте, делитесь и пишите письма, если заметите какие-либо ошибки.

Продвинутые уроки по HTML и CSS

Влад Мержевич

Вот и всё. Книга Шэя Хоу полностью переведена и выложена для всеобщего обозрения. Это обзор веб-технологий, которые применяются при разработке сайтов и ориентированы они на тех, кто уже освоил HTML5 и CSS3.

Курс «Содержимое в HTML»

Влад Мержевич

На сайте webref.ru появился новый курс Содержимое в HTML от Джереми Томаса, который закрывает тему основ HTML. К каждому уроку идут интерактивные задания для закрепления знаний, в конце курса проверочный тест. Задания разнообразных типов, так что на будущее будет полезно, если в комментариях вы скажете, какой тип заданий вам понравился больше всего.

Курсы по HTML

Влад Мержевич

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

Курсы

Влад Мержевич

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

В общем, смотрите, читайте, делитесь впечатлениями.

Уроки по HTML и CSS

Влад Мержевич

Начал переводить замечательную книгу Шэя Хоу Уроки по HTML и CSS. Книга довольно объёмная, состоит из 12 глав, так что решил выкладывать её постепенно, по мере перевода каждой главы, а не ждать завершения работы целиком.

Сейчас можно ознакомиться с первыми главами, в которых рассказывается что такое HTML и CSS на примере вёрстки сайта.

Погружение в HTML5

Влад Мержевич

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

  • HTML5 перестал быть экзотикой и воспринимается большинством как полноценный и удобный инструмент.
  • Браузеры поддерживают, хотя и не всё, но уже большинство технологий. Даже IE, да.

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

С учётом этого обновления и внесены правки в перевод и исправлены мелкие ошибки (самая главная — с буквой ё!).

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

Как верстать на HTML5 и CSS3

Влад Мержевич

Появилось новое руководство по HTML5 и CSS3 от Дамиана Вельгошика. Ориентировано на новичков, которые вообще знать не знают ничего о вёрстке. Остальным рекомендую заглянуть в последнюю главу, где приведены полезные ссылки.

HTML5 и CSS3 на примерах

Влад Мержевич

На сайте webreference.ru добавлено руководство HTML5 и CSS3 на примерах. Более 70 материалов охватывающих популярные темы по вёрстке. Кое-что из них уже публиковалось ранее, но часть написана специально для этого сайта, особенно это касается новых тем вроде анимации, переходов и трансформации. Из-за большого объёма пришлось выбросить ряд тем, они будут оформлены позже в виде отдельных руководств. Потому что под формат сайта больше подходят небольшие руководства охватывающие узкую тему.

Руководство ориентировано на тех, кто уже знаком с основами HTML и CSS и теперь хочет знать, что с этим делать дальше. Читать можно как последовательно, так и по отдельным интересующим темам.

Также вы можете купить руководство за 40 рублей в формате CHM. Удобно тем, что не требует выхода в сеть и всё хранится в одном файле. Заодно поддержите тем самым сайт.

Купить HTML5 и CSS3 на примерах

Шаблоны HTML5

Реми Шарп

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

Как создать таблицу в HTML5 и указать её параметры через стили?

Таблица состоит из строк и столбцов ячеек, которые могут содержать текст и рисунки. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>. Таблица должна содержать хотя бы одну ячейку. Допускается вместо тега <td> использовать тег <th>. Текст в ячейке, оформленной с помощью тега <th>, отображается браузером шрифтом жирного начертания и выравнивается по центру ячейки.

Контекстное меню в Firefox

Влад Мержевич

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

Страницы