CSS-live.ru

Cтатьи по тегу «HTML5»

Inspiration #12

3

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

Большие заголовки для сайта

Заголовок на сайте — это наиболее важный элемент на веб-странице. Как правило, посетитель первоначально на него обращает внимание. Для него отводится несколько ролей: заголовок часто используют как логотип; он также несет смысловую нагрузку, т.е. показывает что предлагает сайт. Также к оформлению можно подходить творчески, подбирать новые интересные способы подчеркнуть его более характерно, например, использовать его в качестве декоративного элемента. По нему вас могут узнавать, то есть ваша визитная карточка. Такие способы создают определенное настроение у посетителей. И от этого зависит захочет ли пользователь снова вернуться. Сегодня я приготовила небольшую подборку красивых сайтов с разнообразными заголовками.

«Блочные» Сcылки в HTML5

5

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

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

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

Путь верстальщика

279

Основано на реальных событиях…

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

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

10 популярных мифов о валидности и валидации

45

Миф 1. Валидность — некая единая, универсальная характеристика для любого кода

Примеры употребления: «Поменяй доктайп с X на Y, а то невалидно».

Реальность: валидность — понятие конкретное и относительное. Валидность документа на языке разметки означает соответствие определенной схеме. Указанной (напр. DTD в доктайпе) или подразумеваемой (в HTML5). Схемы бывают разные, и требования у них тоже (аналог из жизни: к строительству жилых домов и атомных электростанций применяются разные СНиПы), поэтому документ, валидный по одной схеме, наверняка будет невалидным по другой (хороша была бы АЭС, построенная по нормативам жилого дома!).

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

Блок-схема алгоритма выбора структурных (секционных) элементов HTML5

15

Лёгкая для понимания блок-схема алгоритма выбора структурных (секционных) элементов HTML5. Она сможет помочь вам разобраться в предназначении некоторых новых элементов HTML5.

Здесь можно увидеть эту схему «в полный рост».

Источник схемы

«Блочных и строчных элементов» в HTML больше нет

54

Для тех, кому лень читать всю статью: в современном HTML нет «блочных» и «строчных» элементов. Это деление — историческая ошибка, условность и анахронизм времен конца 90-х. Что во что можно вкладывать, а что нет, определяется не тем, как элементы выглядят, а тем, что они делают. А «блочностью», «инлайновостью», любыми их комбинациями и др. чисто внешними чертами заведует только CSS.

Остальное — для тех, кто до сих пор не верит или просто желает разобраться до конца.

Адаптивные изображения в HTML5: конец первого раунда

6

Брюс Лоусон, среда, 16 мая 2012

После Великого Апрельского Браузерно-Префиксного Тарарама пришла Великая Майская Адаптивно-Картиночная Шумиха 2012-го.

Адаптивные изображения — очередная неразгаданная загадка «отзывчивого» веб-дизайна. Вы отдаете большие картинки высокого разрешения, подходящие для экранов типа «ретины», которые устройства с меньшим разрешением показывают уменьшенными, зря расходуя трафик? Или вы отдаете картинки низкого разрешения, которые мерзко выглядят, будучи растянутыми на большом экране? Вебмастерам приходится рассчитывать на искусные хаки, чтобы отдавать различные контентные картинки (т.е. <img> в HTML, а не CSS-фоны) для разных типов устройств.

Новые обонятельные, осязательные и вкусовые элементы приходят в HTML5

4

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

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

В ближайшее время W3C представит три новых элемента HTML5, поддерживающих интерфейсы для других органов чувств:

  • <texture> для осязания
  • <aroma> для обоняния
  • <flavor> для вкуса

О семантике HTML и архитектуре веб-фронтенда

5

Перевод статьи Николаса Галлахера «About HTML semantics and front-end architecture», переводчик — SelenIT

Собрание мыслей, опыта, идей, которые мне нравятся и идей, с которыми я экспериментировал последний год. Они охватывают семантику HTML, компоненты и подходы в архитектуре веб-фронтенда, способы именования классов и HTTP-сжатие.

Мы не прервем своих исканий,
И под конец всех странствий наших
Придем туда, откуда вышли,
Узнав впервые этот край.

Т. С. Элиот — «Маленький Гиддинг»

Главный секрет HTML5

20

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

И тем не менее, HTML5 повсюду. Даже там, где его не ждали. Даже там, где нет модного короткого доктайпа <!DOCTYPE html> (кстати, тоже без цифры 5), даже без модных "семантичных" (хотя об их смысле не всегда могут договориться сами разработчики спецификаций, не говоря уже о простых вебмастерах) элементов типа <article> и <nav>. Даже в тех браузерах, где эти новые теги и не работают без пинка. Как это может быть?

Элемент <header>

1

Ричард Кларк, вторник, 16 июня 2009

В последнее время наблюдается повышенный интерес к HTML 5 и его внедрению в работу web-профессионалов. В HTML 5 спецификации мы видим, что была добавлена масса новых тегов, среди которых и элемент <header>, о котором мы поговорим в этой статье. Мы расскажем про то, когда его использовать и  когда не использовать, что он должен содержать и что не должен. Готовы? Тогда начнем.

Итак, вы привыкли видеть

<div id="header">

на большинстве посещаемых вами сайтов. Теперь, с появлением HTML 5 это больше не требуется и мы можем обогатить семантическое содержимое новым элементом <header>.