Блог



Буквица

Буквица является художественным приёмом оформления текста и представляет собой увеличенную первую букву, базовая линия которой находится на одну или несколько строк ниже базовой линии основного текста. Буквица привлекает внимание читателя к началу текста, особенно если страница лишена других ярких деталей. Обычно кроме самого символа используются изображения растений, животных и других объектов. Это, конечно, не обязательно, но может придать определённый настрой содержанию. Если хочется применить на сайте этот эффект, лучше всего для этого подойдет рисунок, выровненный по левому краю (пример 1).

Форум заработал

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

forum.htmlbook.ru

Комментарии для современного сайта

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

Создание и стилизация индикатора выполнения в HTML5

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

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

Математика в картинках

Мне очень не нравится MathML — он громоздкий, неудобный, избыточный и не приспособлен для редактирования вручную. Попробуйте быстро поменять один символ в длинной формуле и вы возненавидите MathML. Вот то ли дело TEX, старина Кнут знал своё дело и писал систему для себя, впоследствии TEX стал стандартом де-факто в научной среде для написания формул. Если вы знакомы с HTML и CSS, то разобраться в TEX не составит никакого труда, он интуитивно понятен и имеет синтаксис, в чём-то схожий с этими языками.

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

Справочник по HTML

С 1 сентября по 1 октября для посетителей сайта небольшая акция — бесплатно доступен справочник по HTML в формате CHM. Справочник обновлён и содержит ту же информацию, что и на сайте.

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

В формате CHM

В формате PDF

Элемент <main>

Недавно <main> был официально добавлен в спецификацию W3C HTML. Теперь, когда осела пыль, настало время погрузиться и узнать, где и когда будет уместно использовать <main>. Давайте начнём.

4 метода создания колонок одинаковой высоты

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

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

Шаблоны HTML5

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

Список с русскими буквами

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

Жемчужина CSS3 — функция calc()

В модулях спецификации CSS3 найдётся множество скрытых жемчужин. В этой статье мы взглянем на calc() — невероятно полезное свойство, которое может изменить ваш подход к вёрстке сайта.

Функция CSS3 calc() в первую очередь используется для вычисления длины, чисел, углов, времени перехода или анимации, а также частоты звука. Тем не менее, она позволяет смешивать типы значений — это мощная идея в CSS.

Графики и диаграммы

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

Элемент output

Посещая Интернет вы увидите ряд сайтов, которые используют калькулятор для расчёта разных вещей, таких как: погашение ссуды, ставки по ипотечным кредитам, налоги, страхование и многое другое. До сегодняшнего дня у вас не было способа семантической разметки результата таких вычислений. Встречайте — элемент <output>! В этой статье мы расскажем об этом элементе и некоторых связанных с ним трюках JavaScript. Расщёлкнем этот орешек.

DIV-ные колонки одинаковой высоты на CSS

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

Одна из таких — используя только обожаемую заказчиком DIV-ную вёрстку и вообще не привлекая JavaScript, дать колонкам сайта автоматическое выравнивание высоты по наиболее заполненной колонке, подобно тому как это происходило бы в нелюбимой табличной вёрстке.

Ниже предлагаю элементарное решение на основе всего двух объявлений в стилях сайта и одного обёрточного контейнера в теле страницы. Решение валидно для множества браузеров, кроме IE6-IE7, и при удалении одного свойства из стилей, привнесённых этим решением, может быть преобразовано под браузеры без поддержки CSS3.

Переносы слов

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

Страницы

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.