Цвет замещающего текста

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

<input placeholder="Текст">

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

Эволюция творчества

25 мая в Москве компания Adobe Systems проводит мероприятие «Эволюция творчества» посвященное выходу Creative Suite 5.5. Участники мероприятия смогут прослушать лекции по основным направлениям: видео и продакшн, дизайн для печати и Digital Publishing Suite, работа с цифровыми изображениями (графика и фото), создание кросс-платформенных приложений на Flash и веб-разработка с помощью HTML5 и CSS3. Мастер-классы ведут международные эксперты по продуктам Adobe — Джейсон Левин (Jason Levine), Терри Уайт (Terry White), Грег Рьюис (Greg Rewis) и Пол Трэни (Paul Trani), которые продемонстрируют новые фичи адобовских программ.

Программа мероприятия

Участие платное, но для посетителей сайта htmlbook.ru доступен специальный промо-код, дающий скидку на 80%: BEGURU80%HTML. Укажите его при регистрации.

Регистрация для участия

Справочник по HTML в формате CHM

По многочисленным просьбам добавил для приобретения справочник по HTML в формате CHM. Фактически это тот же материал, что содержится на сайте, но оптимизированный для локального просмотра.

В справочник включены все теги HTML4 и HTML5 (как же без него), атрибуты тегов, а также значения атрибутов. Плюс добавлены события вроде onmouseover.

Стоимость 30 рублей.

Управление историей для пользы и развлечения

Оригинал: http://diveintohtml5.info/history.html

Перевод: Влад Мержевич

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

API истории HTML5 представляет собой стандартизированный способ манипулировать историей браузера через скрипт. Часть этого API — навигация по истории — была доступна в предыдущих версиях HTML. Новые части в HTML5 включают способ добавления записей в историю браузера, чтобы заметно изменить URL в адресной строке браузера (без переключения обновления страницы) и события, которые запускаются, когда эти записи удаляются из стека пользователя нажатием кнопки браузера «Назад». Это означает, что URL в адресной строке браузера может продолжать выполнять свою работу как уникальный идентификатор для текущего ресурса, даже в приложениях нагруженными скриптами, которые не всегда выполняют полное обновление страницы.

Синтаксис HTML5

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

Довольно предвзятая история HTML5

Оригинал: http://diveintohtml5.info/past.html

Перевод: Влад Мержевич

Недавно я наткнулся на цитату разработчиков Mozilla о напряженности, связанной с разработкой стандартов:

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

Держите эту цитату в глубине сознания и позвольте мне объяснить про становление HTML5.

Вёрстка веб-страниц

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

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

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

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

Содержание книги

  1. Основы CSS
  2. Режимы браузеров
  3. Принципы вёрстки слоями
  4. Вёрстка с помощью таблиц
  5. Браузер Internet Explorer
  6. Макеты, применяемые на сайтах
  7. Типовые элементы веб-страницы
  8. Вёрстка сайта на практике
  9. Использование HTML5
  10. Тестирование и отладка готового кода

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

Формат PDF, 378 страниц, стоимость 50 руб.

Купить книгу

Улучшите ваши формы с помощью HTML5!

Оригинал: http://dev.opera.com/articles/view/improve-your-forms-using-html5/

Перевод: Влад Мержевич

HTML  в действительности не обновлялся с версии 4 выпущенной ещё в 1998 году. Однако сообщество WHATWG работает над HTML с 2004 года, а затем передаёт материалы в W3C, где они становятся спецификацией HTML5. В этой статье показаны некоторые новые функциональные возможности форм HTML5 предлагаемые в главе Web Forms 2. Опера поддерживает Web Forms 2, начиная с версии 9.5 или более поздней версии.

Новый раздел

Добавлен новый раздел, посвящённый HTML5, в котором собраны воедино материалы сайта об этой технологии.

Справочник CSS в формате CHM

В дополнение к формату PDF сделана локальная версия справочника CSS в формате CHM. Это популярный формат справки для операционной системы Windows, который позволяет в одном файле хранить веб-страницы, изображения и скрипты. Кроме того доступна удобная навигация, поиск и добавление отдельных страниц в Избранное.

Выглядит это все наглядно и красиво. Подсветка синтаксиса в примерах имеется.

Стоимость 35 рублей. Цена смешная, сам бы взял, но у меня уже есть.

Справочник CSS

По многочисленным просьбам добавил для приобретения обновленный справочник CSS в формате PDF.

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

Включены свойства CSS3, а также свойства характерные для браузеров Firefox, Opera, IE, Safari и Chrome.

Стоимость всего 35 рублей, оплатить можно разными способами, например, через WebMoney, Яндекс.Деньги, терминалы оплаты и др. Если вам нравятся материалы сайта, можете считать приобретение справочника формой поддержки. Заодно получаете и полезный материал, который всегда рядом.

Советы по написанию статей

Написание статей — мощный инструмент маркетинга, позволяющий раскрутить ваш ресурс.

Вебмастера и владельцы рассылок всегда ищут хороший контент для статей. Статьи — это лучшая бесплатная реклама для вашего сайта.

Вот 10 советов, как создать эффективную статью.

1. Перед тем, как приступить к написанию статьи, сядьте, и ответьте на вопрос: какую проблему вы поможете решить этой статьей?

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

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

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

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

6. Делайте ваши параграфы краткими. Идеальный объем текстового блока 4–6 строк. Они выглядят более читабельными.

7. Вдохновите на действие вашей статьей. Если ваша статья направлена на решение проблем, дайте читателю конкретный план действия.

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

9. Подведите итог. Изложите основные мысли в последних 1–2 параграфах. Обозначьте, какие действия читатель может предпринять, и чего он при этом достигнет.

10. Теперь не забудьте о самом главном: текст-блок информации о вас. Напишите ваши фамилию и имя, род вашей деятельности, контактный адрес. Затем укажите свой URL, если он у вас есть.

Практическое применение этих советов даст большой отклик от читателей.

Нестандартный вид текстовых полей

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

Форма с нестандартными элементами

Изящная деградация

Конечно, Internet Explorer содержит большое количество ошибок в разных версиях, но с помощью условных комментариев с ними можно бороться, добиваясь их устранения. Но вот чего нельзя ничем исправить, так это то, что IE безнадёжно устарел. Пока остальные браузеры включают всё больше свойств CSS3, поддерживают различные новомодные технологии, IE топчется на месте. Выход IE9 не решит проблему, предыдущие версии от этого в одночасье не испарятся. В такой ситуации наилучшим решением будет изящная деградация (graceful degradation) — принцип сохранения работоспособности при потере части функциональности.

Ошибка с блочными ссылками в IE6

В IE6 содержится некоторое количество ошибок, так или иначе связанных со свойством hasLayout. Непосредственно установить его нельзя, но можно сделать это косвенно. Так что большинство проблем связанных с этим свойством можно исправить его установкой, добавляя в стилях элементу zoom: 1 или height: 1%. Эти свойства кроме своих непосредственных характеристик устанавливают hasLayout.

Блочные ссылки это приём, который активно используется в различных меню, таким способом повышается полезная площадь ссылки. В IE6 если ссылка установлена блочной с помощью display: block она не занимает доступное пространство родителя и ссылкой является только текст. Эта ошибка проявляется в том случае, когда к родителю добавляется свойство float (пример 1).

Страницы