Самоучитель по HTML, CSS, XML

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

HTML

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

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

Пример HTML:


<!DOCTYPE html>
<html>
<title>Учебник HTML</title>
<body>

<h1>Это заголовок</h1>
<p>Это параграф или абзац.</p>

</body>
</html>

Пример CSS:


body {
  background-color: lightblue;
}

h1 {
  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>

XML схемы

Язык для описания XML документа

Изучить XML схемы

JavaScript

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

Изучить JavaScript

XML DOM

Объектная модель XML документа

Изучить XML DOM

jQuery

Библиотека для управления элементами веб-страницы

Изучить jQuery
Еще
Статьи

Современная отзывчивая типографика при помощи CSS clamp

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

Глубокое погружение в радиальный и конический CSS градиенты

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

Создание слайдера который выглядит одинаково во всех браузерах

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

Не боритесь с CSS каскадом. Контролируйте его!

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

Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH

Руководство по современным цветам CSS - RGB, HSL, HWB, LAB и LCH Знаете ли вы, что выбранная вами цветовая палитра может влиять на количество потребляемой вашим сайтом энергии? И выбор определенных цветов может увеличить время автономной работы мобильных устройств. В этой статье даются советы по не очень очевидным вещам, о которых следует помнить, работая с цветами в CSS

Подробное руководство по темному режиму на сайте

Подробное руководство по темному режиму на сайте Темный режим в последнее время приобрел большую популярность. Так, например, компания Apple добавила темный режим в свои операционные системы iOS и macOS. Windows и Google сделали то же самое. Давайте же взглянем на темный режим в контексте веб-сайтов

Как использовать object-fit и background-size в CSS

Как использовать object-fit и background-size в CSS Мы не всегда можем предоставить для HTML элемента изображение нужного размера. Если же мы используем контейнер с шириной и высотой, которые не пропорциональны соотношению сторон изображения, то изображение будет либо сжато, либо растянуто. Это выглядит нехорошо, однако решить эту проблему

Галерея изображений с увеличением по клику

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

Теперь можно обойтись и без псевдоэлементов

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

Раздел "Как сделать"

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

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

Ананас

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

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