Самоучитель и справочник HTML, CSS, XML, JavaScript, jQuery

Создание сайта требует определенных знаний. Источником знаний всегда были книги. Однако в определенный момент сюда добавилась еще одна чрезвычайно обширная база данных – сеть Интернет. Данный сайт собирает в одном месте информацию, которая необходима или может оказаться интересной начинающему вебмастеру. Это своего рода самоучитель и справочник по тем или иным интернет-технологиям — HTML, CSS, XML, JavaScript, jQuery и др.

HTML

Язык для создания веб-страниц

Изучить HTMLСправочник по HTML

Пример HTML:

<!DOCTYPE html>
<html>
<title>Учебник HTML</title>
<body>
<h2>Это заголовок</h2>
<p>Это параграф или абзац.</p>
</body>
</html>

Пример CSS:

body {
  background-color: lightblue;
}
h2 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}

CSS

Язык для оформления/стилизации веб-страниц

Изучить CSSСправочник по CSS

XML

Язык разметки для хранения и передачи данных

Изучить XML

Пример XML:

<?xml version="1. 0" encoding="UTF-8"?>
<note>
   <to>Tove</to>
   <from>Jani</from>
   <heading>Напоминание</heading>
   <body>Не забудь обо мне в эти выходные!</body>
</note>

Еще

60 классных кнопок на CSS с анимацией

14/04/2023, 10:26

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

Магические числа в CSS

06/04/2023, 8:50

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

Разные способы создать градиентную тень на CSS

29/03/2023, 17:50

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

Функции плавности в CSS переходах и анимации

24/02/2023, 9:25

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

Как создать сложную анимацию на CSS

30/01/2023, 9:24

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

Руководство по CSS анимации: Принципы и примеры

28/12/2022, 17:56

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

Простая адаптивная типографика при помощи clamp() — Используем возможности SASS

27/10/2022, 9:21

Адаптивная типографика становится все более популярной, тем более что CSS функция clamp() теперь доступна в каждом браузере. Но, если честно, для достижения нужного результата все еще требуется провести много вычислений. Поэтому вместо того, чтобы добавлять полную функцию clamp() непосредственно в код, мы можем облегчить нашу работу с помощью Sass.

Функции CSS, за которые мы благодарны, и функции CSS, которые нам нужны

10/10/2022, 10:08

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

Руководство по медиа-запросам определения типа устройства ввода

21/09/2022, 8:34

В этой статье мы поговорим о том, как адаптировать наши сайты в зависимости от типа устройства: есть ли у него указатель или нет, и насколько он точен. Чтобы адаптировать наш сайт к возможностям этих устройств, мы поговорим о том, как правильно использовать специальные медиа-запросы hover, pointer, any-hover и any-pointer

Раздел «Как сделать»

Сниппеты кода для HTML, CSS, JavaScript

Оригинальное изображение

Черно-белое изображение

Узнать Как сделать

Интервью с Владом Мержевичем / Хабр

Наверняка многие из вас, кто верстает, активно использует htmlbook.ru в качестве онлайн справочника, к примеру, по стилям. Кто-то, возможно, является постоянным посетителем форума htmlbook.ru. Я уверен, что среди читателей есть те, кто читал книги «Ускорение работы сайта» и «HTML и CSS на примерах», а возможно и учились по ним. Кто объединяет всё это? Влад Мержевич, встречаем аплодисментами 🙂


Привет, Влад!
Привет, Дмитрий.
Расскажи, пожалуйста, когда ты заинтересовался Вебом?
Наверное, мне в некотором роде повезло, что первым редактором для создания веб-страниц, с которым я столкнулся, был WebEdit. Это не визуальный редактор и, хотя все можно было делать через кнопки меню, невольно приходилось учить HTML. Так и научился самостоятельно создавать веб-страницы. Потом, как и у многих начинающих было увлечение фреймами, но быстро с ними распрощался, когда понял, что это вещь недостаточно гибкая. Как пример, из-за небольшой ошибки фреймовая структура открывалась сама в себе несколько раз. Это, конечно, говорит не о недостатках фреймов, а о неправильном их использовании, тем не менее, после этого перешёл на другую систему вёрстки, а именно на таблицы. Было ещё увлечение программой Microsoft FrontPage, именно тогда понял в чем её основной недостаток. Нет, дело совершенно не в том, что она создана Microsoft, это ребячество. FrontPage много берет на себя, считая, что сам сделает гораздо правильней, чем человек. Как итог — приходится постоянно контролировать эту программу, «держать её в узде», при этом требуется знать и HTML и особенности вёрстки во FrontPage, а у новичков этих знаний как раз пока и нет.

А когда и как родилась идея издать первую книгу?
В свое время написал несколько статей, посвящённых сокращению объёма данных на сайте и ускорению его работе. Но оказалось, что статей хватает на небольшую книжку, так что решил связаться с различными издательствами, чтобы ее опубликовать. И в этот момент ко мне обратился Евгений Рыбаков из BHV и предложил написать книгу. Вот такое удивительное совпадение желаний и возможностей. После обсуждения концепции и содержания книги она вышла под названием «Ускорение работы сайта».
Какой общий тираж? Кстати, сколько книг всего?
Две книги — «Ускорение работы сайта» и «HTML и CSS на примерах». Тираж для тематики стандартный — по 5 тысяч экземпляров.
Расскажи, как ты создавал htmlbook.ru? Какие были трудности?
Как и многие, пытался придумать, какую информацию можно поместить на свой будущий сайт. Домашнюю страницу намеренно не хотелось делать из-за узости темы. Вот пришла идея размещать небольшие советы по верстке веб-страниц. Оказалось, что данную область почему-то обходят, хотя убеждать в ее актуальность никого не нужно. Так началось с десятка небольших статей, постепенно объем информации вырос до пары сотен статей, при этом и тематика расширилась. Уже не только советы по верстке, а HTML, CSS и многое другое.
Какая сейчас посещаемость сайта? А форума?
Сайт в среднем посещают 9к уников в день, а форум около тысячи. Но вот что интересно, темы форума просматривают раза в четыре чаще, чем материалы сайта. Понятно, что используют как тематическую базу знаний.
Я наслышан о проблемах с доступностью форума, когда планируешь их решить?
Эх, это больная тема, связанная с популярностью ресурса и соответственно, возросшим количеством посетителей. Совместно с хостером ищем способы снизить нагрузку за счёт технических средств или перехода на выделенный сервер.
Не раскроешь секрет, готовятся ли новые проекты? Какие? Расскажи подробней.
В этом году планирую запустить «долгострой» WebReference.Ru, в начале 2008 на htmlbook.ru проводился конкурс на дизайн этого сайта. Сейчас пока отрабатываю технологии и принципы работы этого ресурса на примере сайта «Графика для Web» (webimg.ru), который в каком-то смысле выступает экспериментальной площадкой.
Также есть одна интересная идея, связанная с Красноярском, городу в этом году исполняется 380 лет. По этому поводу хочу сделать сайт с панорамными фотографиями города с применением технологии QuickTime VR. То есть это не просто плоские изображения, их можно крутить по горизонтали на 360°. Эффект присутствия обеспечен.
Какие блоги и сайты читаешь? Поделись подборкой от «шеф-повара».
Утро, как и у многих пользователей Интернета, начинается с башорга. Также обязательно хожу на сайты о кино, люблю это дело. Тематические ресурсы о веб-технологиях посещаю по мере необходимости, ежедневно обращаться не приходится.
А пишешь статьи куда-нибудь кроме своих проектов?

Нет, и так заимствуют мои статьи разные сайты. Такую практику даже поощряю, но с обязательной ссылкой на первоисточник. Так рейтинг проектов и растёт потихоньку.
Если я напишу очень интересную статью, опубликуешь её, к примеру, на htmlbook.ru?
Конечно, тем более обращения уже были и статьи сторонних авторов публиковались.
А кем ты сейчас работаешь? Где?
Недавно работал начальником IT-отдела в одной красноярской компании, но вскоре осознал, что работа уже не радует и на неё уходит слишком много времени. Так что теперь работаю на себя, занимаюсь консалтинговыми услугами по веб-технологиям.
Покажешь своё фото? Жуть любопытно.

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

Кросс-пост из моего блога.

350+ примеров HTML/CSS с исходным кодом и руководством

от Ashfaq Ahmed

Ищете простую в использовании и привлекательную форму входа? Не смотрите дальше этой простой формы входа в html. Благодаря чистому дизайну и удобству использования

Ашфак Ахмед

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

Ашфак Ахмед

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

Ашфак Ахмед

Каскадные таблицы стилей, или CSS, — это язык, используемый для оформления и форматирования макета веб-страниц. Одной из распространенных задач при работе с CSS является центрирование

Ашфак Ахмед

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

Ашфак Ахмед

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

.

Ашфак Ахмед

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

.

Ашфак Ахмед

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

Ашфак Ахмед

Создание анимации заката с помощью CSS и HTML — отличный способ добавить динамичный и визуально интересный элемент на ваш веб-сайт или в веб-приложение. Анимация может

Ашфак Ахмед

Чтобы сделать кнопку круглой в CSS, вы можете использовать свойство border-radius. Это свойство позволяет определить скругленность углов элемента, например

.

Ашфак Ахмед

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

Ашфак Ахмед

Чтобы выделить текст цветом с помощью HTML и CSS, вы можете использовать тег «span» в HTML, чтобы указать конкретный текст, который вы хотите выделить, а затем

Мухаммад Асиф

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

Ашфак Ахмед

Ищете способ показать сразу несколько фотографий в карусели? С помощью примера слайдера с несколькими изображениями jQuery вы можете легко выделить группу из

Ашфак Ахмед

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

.

Ашфак Ахмед

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

Мухаммад Асиф

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

Мухаммад Асиф

Glassmorphism — это современная концепция веб-дизайна, в которой элементы выполнены в стиле morphism со стеклянными эффектами. Существует несколько библиотек для морфизма элементов, но

Мухаммад Асиф

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

Мухаммад Асиф

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

35+ лучших меню навигации CSS с исходным кодом и демонстрацией

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

Мухаммад Асиф

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

Мухаммад Асиф

Анимация скользящего подчеркивания — это привлекательный способ обозначения активной вкладки. Анимация основана на простой идее плавного перемещения подчеркивания с одной вкладки

Ашфак Ахмед

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

Мухаммад Асиф

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

Мухаммад Асиф

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

.

Мухаммад Асиф

Древовидное меню — полезный элемент для представления иерархических данных в визуальном интерфейсе веб-сайта. Чаще всего используется в системах управления файлами для разрешения

Мухаммад Асиф

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

Мухаммад Асиф

В этом руководстве мы поделимся адаптивным мегаменю, созданным только с помощью HTML и CSS. Эта навигация поставляется с анимированным текстом и шрифтом Awesome

.

Мухаммад Асиф

Радиальное меню — это система контекстной навигации для выбора элемента в зависимости от направления. Эта навигация также известна как круговое или круговое меню.

Мухаммад Асиф

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

Мухаммад Асиф

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

.

Мухаммад Асиф

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

.

Мухаммад Асиф

Раскрывающаяся навигация является наиболее распространенным элементом веб-сайта для навигации по содержимому сайта. В такой навигации основные ссылки появляются на панели, и если ссылка

Мухаммад Асиф

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

.

Мухаммад Асиф

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

Мухаммад Асиф

Вы работаете над навигационным меню и вам нужен код? Если да! тогда вы находитесь в правильном месте. Здесь вы узнаете простой способ

Мухаммад Асиф

Вы хотите создать вкладки с индикатором? Если да! тогда вы находитесь в правильном месте. Здесь вы научитесь создавать вкладки с анимированным индикатором

.

Мухаммад Асиф

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

Мухаммад Асиф

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

No related posts.