Почему Flexbox?

Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование .

С их помощью сложно или невозможно достичь следующих простых требований к макету :

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

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

Display: flex

Для начала нам нужно добавить к блоку с содержимом display:flex;

.container { 
  display: flex; 
}

Теперь можем поговорить про расположение объектов.

flex-direction

Свойство flex-direction помогает нам определить положение объектов в контейнере.

.container { 
  flex-direction: row | row-reverse | column | column-reverse; 
}

1. flex-direction: row - данное свойство задается по стандарту и располагает элементы справа налево, по горизонтали.

2. flex-direction: row-reverse - главное отличие от row, это то, что элементы располагаются в обратном порядке, т.е. слева на право.

3. flex-direction: column - это свойство расположит элементы вертикально, т.е. сверху вниз.

4. flex-direction: column-reverse - это свойство расположит элементы вертикально и в обратном порядке.

flex-wrap

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

.container { 
  flex-wrap: nowrap | wrap | wrap-reverse; 
}

1. flex-wrap: nowrap - все элементы будут пытаться поместиться в одну строку

2. flex-wrap: wrap - элементы будут переноситься по мере необходимости

3. flex-wrap: wrap-reverse - reverse работает так же как и в предыдущих случаях

flex-flow

Это сокращенное обозначение свойств flex-direction и flex-wrap, т.е. это мы используем для экономии места в css коде.

.container { 
  flex-flow: column wrap; 
}

justify-content

Cвойство justify-content определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.

.container { 
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

1. justify-content: flex-start - элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.

2. justify-content: flex-end - элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction).

3. justify-content: center - элементы располагаются друг за другом в центре контейнера по главной оси.

4. justify-content: space-between - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Первый элемент прижат к началу контейнера по главной оси, а последний - к концу.

5. justify-content: space-around - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны. Пустые пространства перед первым элементом и после последнего элемента равны половине расстояния между парами соседних элементов.

6. justify-content: space-evenly - Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.

7. justify-content: start - Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.

8. justify-content: end - Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси.

9. justify-content: left - Элементы располагаются друг за другом и прижимаются к левому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start.

10. justify-content: right - Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как start.

align-items

свойство align-items выравнивает flex-элементы текущей flex-линии таким же образом, как и justify-content, но в перпендикулярном направлении.

.container { 
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe; 
}

1. align-items: stretch - элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.

2. align-items: flex-start - край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.

3. align-items: flex-end/end/self-end - элементы располагаются в конце поперечной оси.

4. align-items: flex-start/ start/ self-start - элементы располагаются в начале оси.

5. align-items: center - Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси.

6. align-items: baseline - Все элементы flex выровнены таким образом, что их базовые линии совпадают.

align-content

Свойство align-content устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси элемента типа flexbox или grid.

1. start - элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.

2. end - элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.

3. flex-start элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как start.

4. flex-end - элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как end.

5. center - элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.

6. normal - элементы расположены в их дефолтной позиции как если бы align-content не было определено.

7. baselinefirst baseline
last baseline

Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
Резервное выравнивание для first baseline равно start, для last baseline - end.

8. space-between - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.

9. space-around - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.

10. space-evenly - элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.

11. stretch- если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые max-height/max-width (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.

12. safe - используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был start.

13. unsafe - используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.

Дополнительные материалы для улучшения знаний по Flexbox:
1. http://www.flexboxdefense.com/

2. https://flexboxfroggy.com/#ru

3.https://mastery.games/flexboxzombies/

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

Исключение из правил - !important

Когда при объявлении стиля используется модификатор !important, это объявление получает наивысший приоритет среди всех прочих объявлений. Хотя технически модификатор !important не имеет со специфичностью ничего общего, он непосредственно на неё влияет. Поскольку !important усложняет отладку, нарушая естественное каскадирование ваших стилей, он не приветствуется и следует избегать его использования. Если к элементу применимы два взаимоисключающих стиля с модификатором !important, то применен будет стиль с большей специфичностью.

Несколько практических советов:

• Всегда пытайтесь использовать специфичность, а !important используйте только в крайних случаях
• Используйте !important только в страничных стилях, которые переопределяют стили сайта или внешние стили (стили библиотек, таких как Bootstrap или normalize.css)
• Никогда не используйте !important, если вы пишете плагин или мэшап.
• Никогда не используйте !important в общем CSS сайта.

Вместо !important можно:

1. Лучше использовать каскадные свойства CSS
2. Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:

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

Вам придется использовать !important если:

А) Первый сценарий:

1. У вас есть общий файл стилей, устанавливающий правила для внешнего вида сайта.
2. Вы пользуетесь (или кто-то другой пользуется) весьма сомнительным средством - объявлением стилей непосредственно в элементах

В таком случае вам придется объявить некоторые стили в вашем общем файле CSS как !important, переопределяя, таким образом, стили, установленные в самих элементах.

Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.

Б) Еще сценарий:

Как сделать цвет текста в абзацах awesome красным всегда, даже если они расположены внутри #someElement? Без !important у первого правила специфичность больше и оно имеет преимущество перед вторым.

Как преодолеть !important

A) Просто добавьте еще одно правило с модификатором !important, у которого селектор имеет большую специфичность (благодаря добавлению типа элемента (тэга), идентификатора (атрибута id) или класса к селектору).

Пример большей специфичности:

Б) Или добавьте правило с модификатором !important и таким же селектором, но расположенное в файле после существующего (при прочих равных выигрывает последнее объявленное правило):

Не исключение - :not()

Отрицающий псевдокласс :not не учитывается как псевдокласс при расчете специфичности. Однако селекторы, расположенные внутри :not, при подсчете количества по типам селекторов рассматриваются как обычные селекторы и учитываются.

Следующий фрагмент CSS ...

... примененный к такому HTML ...

... отобразится на экране так:

Специфичность основана на форме

Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[id="foo"] считается селектором атрибута, даже при том, что ищет идентификатор.

Эти объявления стилей ...

... примененные к нижеследующей разметке ...

... в результате выглядят так:

Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.

Независимость от расположения

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

... в сочетании со следующим HTML ...

... отобразится как:

Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.

Непосредственно соответствующие элементы и унаследованные стили

Стили непосредственно соответствующих элементов всегда предпочитаются унаследованным стилям, независимо от специфичности унаследованного правила. Этот CSS ...

... с таким HTML ...

... тоже отобразится как:

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

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

Что такое селекторы?

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

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

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

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

А могу написать короче — просто отделив селекторы запятыми:

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

Типы селекторов

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

Селекторы атрибутов

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

Все CSS-селекторы

Селектор определяет, к какому элементу применять то или иное CSS-правило.

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

Базовые селекторы

Универсальный селектор

Звездочка (*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звездочки с простых селекторов имеет тот же эффект. Например, * .warning и .warning считаются равными.

В CSS 3, звездочка (*) может использоваться в комбинации с пространством имён

• ns|* - вхождения всех элементов в пространстве имён ns
• *|* - находит все элементы
• |* - ищет все элементы без объявленного пространства имён

Пример

Селекторы по типу элемента

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

Синтаксис

Пример

Селекторы по классу

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

Синтаксис

Пример

Селекторы по идентификатору

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

Синтаксис

Пример

Селекторы по атрибуту

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

1. [attr] - Обозначает элемент с атрибутом по имени attr.

2. [attr=value] - Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.

3. [attr~=value] - Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value

4. [attr|=value] - Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.

5. [attr^=value] - Обозначает элемент с именем атрибута attr значение которого начинается с "value"

6. [attr$=value] - Обозначает элемент с именем атрибута attr чье значение заканчивается на "value"

7. [attr*=value] - Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки "value" как подстроки.

Пример

Комбинаторы

Комбинатор потомков

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

Синтаксис

Пример

Дочерние селекторы

Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.

Синтаксис

Пример

Комбинатор всех соседних элементов

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

Синтаксис

Пример

Комбинатор следующего соседнего элемента

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.

Синтаксис

Пример

Псевдо

Псевдоклассы

Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё.

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

Синтаксис

Псевдоэлементы

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.

Синтаксис

В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.

CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы.

Что такое CSS ?

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

Чтобы подключить наш CSS, Откройте ваш файл index.html и вставьте следующую строку куда-нибудь в шапку, между <head> и </head> тегами:

Анатомия CSS

Вся структура называется набором правил (но зачастую для краткости "правило" ). Отметим также имена отдельных частей:

Селектор (Selector) - имя HTML элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы p ). Для стилизации другого элемента, просто измените селектор.

Объявление (Declaration) - единственное правило, например color: red; указывает, какие из свойств элемента вы хотите стилизовать.

Свойства (Properties) - Способы, которыми вы можете стилизовать определенный HTML элемент (в данном случае, color является свойством для элементов <p> ). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.

Значение свойства (Property value) - справа от свойства, после двоеточия, у нас есть значение свойства, который выбирает одно из множества возможных значений для данного свойства (существует множество значений color, помимо red ).

Обратите внимание на важные части синтаксиса:

• Каждый набор правил (кроме селектора) должен быть обернут в фигурные скобки ({}).
• В каждом объявлении необходимо использовать двоеточие (:), чтобы отделить свойство от его значений.
• В каждом наборе правил вы должны использовать точку с запятой (;), чтобы отделить каждое объявление от следующего.

Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:

Выбор нескольких элементов

Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделенных запятыми. Например:

Разные типы селекторов

Шрифты и текст

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

1. Прежде всего, вернитесь и найдите вывод из Google Fonts, который вы уже где-то сохранили. Добавьте элемент <link> где-нибудь внутри шапки вашего index.html (снова, в любом месте между тегами <head> и </head>). Это будет выглядеть примерно так:

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

2. Затем, удалите существующее правило в вашем style.css файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.

3. Добавьте следующие строки в нужное место, заменив строку placeholder актуальной font-family строкой, которую вы получили из Google Fonts. (font-family просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <html> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же font-size и font-family):

Блоки

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

Не удивительно, макет CSS основан, главным образом, на блочной модели (box model). Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:

• padding, пространство только вокруг контента (например, вокруг абзаца текста)
• border, сплошная линия, которая расположена рядом с padding
• margin, пространство вокруг внешней стороны элемента

В этом разделе мы также используем:

• width (ширину элемента)
• background-color, цвет позади контента и padding элементов
• color, цвет контента элемента (обычно текста)
• text-shadow: устанавливает тень на тексте внутри элемента
• display: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)

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

Изменение цвета страницы

Это правило устанавливает цвет фона для всей страницы.

Разбираемся с блоками

Теперь для <body> элемента. Здесь есть немало деклараций, так что давайте пройдем через них всех по одному:

• width: 600px; — заставляет тело быть всегда 600 пикселей в ширину.
• margin: 0 auto; — когда вы устанавливаете два значения для таких свойств как margin или padding, первое значение элемента влияет на верхнюю и нижнюю сторону (делает их 0 в данном случае), и второе значение на левую и правую сторону (здесь, auto является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано здесь.
• background-color: #FF9500; — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для <html> элемента, но не стесняйтесь и эксперементируйте.
• padding: 0 20px 20px 20px; — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
• border: 5px solid black; — просто устанавливает сплошную черную рамку шириной 5 пикселей со всех сторон тела.

Позиционирование и стилизация нашего заголовка главной страницы

Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый стиль по умолчанию для элемента <h1> (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив margin: 0;.

Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.

Здесь, мы использовали одно довольно интересное свойство - это text-shadow, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:

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

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

Центрирование изображения

В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать margin: 0 auto уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что еще. Элемент <body> является блочным, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются строчными элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью display: block;.

Забираете ли вы чеки из магазинов или уходите, оставив их на кассе либо выбросив в ближайшую урну? А знали ли вы, что ваш чек может стать хорошим вариантом наживы для мошенников?

Никогда не оставляйте чеки на кассе

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

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

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

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

Чем опасен чек, оплаченный наличными

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

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

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

Чем опасен чек, оплаченный картой

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

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

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

P.S.

Тема сборная. От себя небольшие ремарки:

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

По чеку с картой можно достать более полную информацию( но вложения не соответствуют профиту, в большинстве случаев.)

Наберитесь терпения, это будет большая статья, я верю в вас!❤️

Содержание статьи:

1. Основы HTML формы:

• Ваша первая форма
• Как структурировать HTML форму

2. Виджеты форм:

• Стандартные виджеты формы

3. Валидация и подтверждение данных форм:

• Отправка данных формы
• Валидация данных форм

1️⃣ Основы HTML форм

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

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

Ваша первая форма

Основные тэги используемые в формах: <form>, <label>, <input>, <textarea>, and <button>.

Элемент <form>

Все HTML-формы начинаются с элемента <form>, например:

Этот элемент формально определяет форму. Это контейнерный элемент, такой как элемент <div> или <p>, но он также поддерживает некоторые специфические атрибуты для настройки поведения формы. Все его атрибуты являются необязательными, но обычно это стандартная практика - всегда устанавливать хотя бы атрибут action и атрибут method:

1. Атрибут action определяет местоположение (URL), куда должны отправляться собранные данные формы при ее отправке.
2. Атрибут method определяет, с каким HTTP-методом отправлять данные (это может быть «get» или «post»).

Элементы <label>, <input> и <textarea>

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

С точки зрения HTML-кода нам нужно что-то вроде следующего для реализации этих виджетов формы:

Элементы <div> предназначены для удобного структурирования нашего кода и облегчения стилизации (см. Далее в этой статье). Обратите внимание на использование атрибута for для всех элементов <label>; это формальный способ связать метку с виджетом формы. Этот атрибут ссылается на идентификатор соответствующего виджета.

В элементе <input> наиболее важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, поскольку он определяет способ появления и поведения элемента <input>.

• В нашем простом примере мы используем text значения для первого ввода — значение по умолчанию для этого атрибута. Он представляет собой базовое однострочное текстовое поле, которое принимает любой вид ввода текста.
• Для второго ввода мы используем значение email, которое определяет текстовое поле, принимающее только сформированный адрес электронной почты. Это превращает базовое текстовое поле в своего рода" интеллектуальное " поле, которое будет выполнять некоторые проверки данных, введенных пользователем. Он также предусматривает включение символа @ на клавиатуре по умолчанию на устройствах с динамическими клавиатурами. Подробнее о проверке формы вы узнаете в статье ниже.

И последнее, но не менее важное: обратите внимание на синтаксис <input> и < textarea>< / textarea>. Это одна из странностей HTML. Тег <input> является пустым элементом, что означает, что он не нуждается в закрывающем теге. <textarea> - это не пустой элемент, то есть он должен быть закрыт соответствующим конечным тегом. Это влияет на специфическую особенность HTML-форм: то, как вы определяете значение по умолчанию. Чтобы определить значение по умолчанию элемента <input>, вы должны использовать атрибут value следующим образом:

Если вы хотите определить значение по умолчанию для <textarea>, вам просто нужно поместить это значение по умолчанию между открывающим и закрывающим тегом элемента <textarea>, например:

Элемент <button>

Разметка для нашей формы почти завершена; нам все еще нужно добавить кнопку, позволяющую пользователю отправлять свои данные, как только он заполнит форму. Это делается с помощью элемента <button>; добавьте следующее непосредственно над закрывающим тегом </form> :

Вы увидите, что элемент <button> также принимает атрибут type — он принимает одно из трех значений: submit, reset или button.

• Щелчок по кнопке submit (значение по умолчанию) отправляет данные формы на веб-страницу, определенную атрибутом action элемента <form>.
• Щелчок по кнопке reset немедленно сбрасывает все виджеты формы к их значению по умолчанию. С точки зрения UX, это считается плохой практикой.
• Щелчок по кнопке button делает... ничего! Это звучит глупо, но это удивительно полезно для создания пользовательских кнопок с помощью JavaScript.

Сейчас у вас должна получиться вот такая форма:

О том как стилизовать форму, мы будем говорить дальше, пока можете добавить внутрь <head></head> тэг <style></style> и написать внутри вот такой код:

Как структурировать HTML-формы

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

Элемент <form>

Элемент <form> формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента <form>, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы <form> и реализовывать специальные хуки, чтобы их было проще использовать.

Мы уже встречались с этим в предыдущей статье.

Элементы <fieldset> и <legend>

Элемент <fieldset> - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок <fieldset>, добавив элемент <legend> сразу после открывающего тега <fieldset>. Текст элемента <legend> формально описывает назначение содержимого <fieldset>.

Различные вспомогательные технологии будут использовать <legend> как часть метки label всех элементов внутри <fieldset>. Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы <legend> перед произношением названия меток элементов.

Небольшой пример:

Общие HTML-структуры, используемые с формами

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

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

В дополнение к элементу <fieldset> для структурирования сложной формы также широко используются HTML-заголовки (например, <h1>, <h2>) и секционирование (например, <section>).

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

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

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

1. Для начала сделайте локальную копию нашего пустого файла шаблона и CSS для нашей платежной формы в новом каталоге на вашем компьютере.

2. Прежде всего, примените CSS к HTML, добавив следующую строку внутри HTML <head>:

3. Затем начните свою форму с добавления внешнего элемента <form> :

4. Внутри тегов <form> начните с добавления заголовка и абзаца, чтобы сообщить пользователям, как отмечаются обязательные поля:

5. Далее мы добавим большую часть кода в форму, расположенную ниже нашей предыдущей записи. Здесь вы увидите, что мы оборачиваем поля контактной информации внутри отдельного элемента <section>. Кроме того, у нас есть набор из двух переключателей, каждый из которых мы помещаем в свой собственный элемент списка (<li>). Наконец, у нас есть два стандартных текста <input> и связанные с ними <label> элементы, каждый из которых содержится внутри <p>, а также ввод пароля для ввода пароля. Добавьте этот код в свою форму прямо сейчас:

6. Теперь перейдем ко второму <section> нашей формы-платежной информации. Здесь мы имеем три различных виджета вместе с их метками, каждый из которых содержится внутри <p>. Первый-это выпадающее меню (<select>) для выбора типа кредитной карты. второй-это элемент <input> типа number, предназначенный для ввода номера кредитной карты. Последний-это элемент <input> типа date, предназначенный для ввода даты истечения срока действия карты (этот элемент будет иметь виджет выбора даты в поддерживающих браузерах и вернется к обычному вводу текста в не поддерживающих браузерах). Опять же, введите следующее ниже предыдущего раздела:

7. Последний раздел, который мы добавим, намного проще, он содержит только <button> типа submit для отправки данных формы. Теперь добавьте это в нижнюю часть вашей формы:

2️⃣ Виджеты форм

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

<input>

Все текстовые поля имеют общие атрибуты:

• Они могут быть помечены как readonly (пользователь не может изменять начальное значение) или даже disabled начальное значение никогда не посылается вместе с остальными данными формами).
• Они могут иметь атрибут placeholder; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.
• Существуют общие характеристики size (физический размер поля) и длину (максимальное количество символов, которые может ввести пользователь).
• Они могут быть определены с помощью spell checking, если браузер поддерживает данную функцию.

<textarea>

Многострочное текстовое поле задается с помощью элемента <textarea>, а не с помощью элемента <input>.

Атрибуты <textarea>

Drop-down

Drop-down -это простой способ позволить пользователям выбрать один из многих вариантов, не занимая много места в пользовательском интерфейсе.

Поле выбора создается с элементом <select> с одним или несколькими элементами <option> в качестве его дочерних элементов, каждый из которых указывает одно из своих возможных значений.

По умолчанию поле выбора позволяет пользователю выбрать только одно значение. Добавляя атрибут multiple в элемент <select>, вы можете разрешить пользователям выбирать несколько значений, используя механизм по умолчанию, предоставляемый операционной системой (например, удерживая нажатой клавишу Cmd/Ctrl и щелкая несколько значений).

Поле автозаполнения

Вы можете предоставить предлагаемые автоматически заполненные значения для виджетов форм с помощью элемента <datalist> с некоторыми дочерними элементами <option>, чтобы указать значения для отображения.

Check box

check box создается с помощью элемента <input> с его атрибутом установленным в поле type="checkbox".

Radio button

Radio button создается с помощью элемента <input> с атрибутом установленным в type="radio".

Button

В HTML-формах существует три вида кнопок:

1. Submit - отправляет данные формы на сервер
2. Reset - Сбрасывает все виджеты форм к их значениям по умолчанию
3. Anonymous - Кнопки, которые не имеют автоматического эффекта, но могут быть настроены с помощью кода JavaScript. Если вы опустите атрибут type, это будет значение по умолчанию.

Submit

Reset

Anonymous

Продвинутые виджеты

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

Numbers

Виджеты для чисел создаются с помощью элемента <input>, а его атрибут type имеет значение number.

1. Ограничить значение можно при помощи атрибутов min и max
2. Так же можно задать "шаг" при помощи атрибута step

Sliders

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

Ползунок создается с помощью <input> с его атрибутом type="range". Очень важно правильно настроить слайдер; для этого настоятельно рекомендуется установить атрибуты min, max и step.

В этом примере создается ползунок, значение которого может находиться в диапазоне от 0 до 500, а кнопки инкремента/декремента изменяют значение на +10 и -10.

Одна из проблем с ползунками заключается в том, что они не дают никакой визуальной обратной связи. Вам нужно добавить это самостоятельно с помощью JavaScript, но это относительно легко сделать. В этом примере мы добавим пустой элемент <span>, в который запишем текущее значение слайдера, обновляя его по мере изменения.

Чтобы данные отображались, придется добавить перед закрывающимся тэгом </body> тэг <script></script> и записать внутри него:

Дата и время

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

datetime-local

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

month

Это создает виджет для отображения и выбора месяца с годом.

time

Это создает виджет для отображения и выбора значения времен

week

Это создает виджет для отображения и выбора номера недели и ее года.

Все элементы управления датой и временем могут быть ограничены с помощью атрибутов min и max.

Подборка цвета

С цветами всегда немного трудно справиться. Существует множество способов их выражения: значения RGB (десятичные или шестнадцатеричные), значения HSL, ключевые слова и т. д. Виджет "color" позволяет пользователям выбирать цвет как текстовым, так и визуальным способом.

Другие виджеты

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

Выбор файла

Для создания виджета выбора файлов используется элемент <input> с атрибутом type="file". Типы файлов, которые принимаются, могут быть ограничены с помощью атрибута accept. Кроме того, если вы хотите позволить пользователю выбрать более одного файла, вы можете сделать это, добавив атрибут multiple.

Скрытие содержимого

Иногда по техническим причинам удобно иметь фрагменты данных, которые отправляются вместе с формой, но не отображаются пользователю. Для этого вы можете добавить невидимый элемент в свою форму. Используйте <input> с его атрибутом type="hidden".

При создании такого элемента необходимо задать его name и атрибуты value:

Кнопка изображение

Элемент image button-это элемент, который отображается точно так же, как <img>, за исключением того, что когда пользователь нажимает на него, он ведет себя как кнопка submit

3️⃣ Валидация и подтверждение данных форм

Отправка данных формы

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

Куда отправляются данные

Элемент <form> определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются action и method.

Атрибут action

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

Атрибут method

Этот атрибут определяет способ отправки данных.Протокол HTTP предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространенными из которых являются метод GET и метод POST.

Метод GET

Метод GET - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.

Рассмотрим следующую форму:

Поскольку используется метод GET, вы увидите URL www.foo.com/?say=Hi&to=Mom, который появится в адресной строке браузера при отправке формы.

Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (?), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (&). В этом случае мы передаем две части данных на сервер:

• say, со значением Hi
• to, со значением Mom

HTTP-запрос имеет следующий вид:

Метод POST

Метод POST немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.

Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе GET выше, но с атрибутом method, установленным в post.

Когда форма отправляется с использованием метода POST, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:

Заголовок Content-Length указывает размер тела, а заголовок Content-Type указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.

Просмотр HTTP-запросов

HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, Вам нужно использовать такие инструменты, как Firefox Network Monitor или Chrome Developer Tools). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):

1. Нажмите F12
2. Выберите Network
3. Выберите "All"
4. Выберите "foo.com" во вкладке "Name"
5. Выберите "Headers"

Затем вы можете получить данные формы, как показано на рисунке ниже.

Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом GET позволит пользователю увидеть информацию из запроса в URL, а запрос с методом POST не позволит. Две причины, почему это может быть важно:

1. Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод GET, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.
2. Если необходимо отправить большой объем информации, POST-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.

На стороне сервера: получение данных

PHP предлагает несколько глобальных объектов для доступа к данным. Например, вы используете POST-метод, в приведенном ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо еще.

Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: php-example.html — который содержит те же данные, которые вы видели раньше: method: post и action из php-example.php. Когда данные переданы на отправку (submit), они переданы в форму php-example.php, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение:Hi Mom.

Валидация данных форм

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

Что такое валидация формы ?

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

• "Это поле обязательно для заполнения" (вы не можете оставить это поле пустым)
• "Пожалуйста введите ваш телефонный номер в формате xxx-xxxx" (вводит три цифры разделенные тире, за ними слеуют четыре цифры)
• "Пожалуйста введите настоящий адрес электронной почты" (если ваша запись не в формате"somebody@example.com")
• "Ваш пароль должен быть от 8 до 30 символов длиной, и содержать одну заглавную букву, один символ, и число"

Это называется валидация формы — когда вы вводите данные, веб-прилолжение проверяет, что данные корректны. Если данные верны, приложение позволяет данным быть отправленными на сервер и (как правило) быть сохраненными в базе данных; если нет - оно выдает вам сообщение об ошибке, обьясняющее какие исправления необходимо внести. Проверка формы может быть реализована несколькими различными способами.

Мы хотим сделать заполнение веб-форм максимально простым. Итак, почему мы настаиваем на подтверждении наших форм? Существуют три основные причины:

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

Какие типы валидации форм существуют ?

Существует два разных типа проверки формы, с которыми вы столкнетесь в Интернете:

• Проверка на стороне клиента - это проверка, которая происходит в браузере, прежде чем данные будут отправлены на сервер. Это удобнее, чем проверка на стороне сервера, так как дает мгновенный ответ. Ее можно далее подразделить на:
• JavaScript проверка выполняется с использованием JavaScript. Полностью настраиваемая.
• Встроенная проверка формы, используя функции проверки формы HTML5. Для этого обычно не требуется JavaScript. Встроенная проверка формы имеет лучшую производительность, но она не такая настраиваемая, как с использованием JavaScript.
• Проверка на стороне сервера - это проверка, которая возникает на сервере после отправки данных. Серверный код используется для проверки данных перед их сохранением в базе данных. Если данные не проходят проверку валидности, ответ отправляется обратно клиенту, чтобы сообщить пользователю, какие исправления должны быть сделаны. Проверка на стороне сервера не такая удобная, как проверка на стороне клиента, поскольку она не выдает ошибок до тех пор, пока не будет отправлена вся форма. Тем не менее, проверка на стороне сервера - это последняя линия защиты вашего приложения от неправильных или даже вредоносных данных. Все популярные серверные фреймворки имеют функции для проверки и очистки данных (что делает их безопасными).

В реальном мире разработчики склонны использовать комбинацию проверки на стороне клиента и сервера.

Использование встроенной проверки форм

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

Когда элемент валидный:

• Элемент соответствует CSS псевдо-классу :valid ; это позволяет вам применить конкретный стиль к валидным элементам.
• Если пользователь пытается отправить данные, браузер отправит форму, если нет ничего, остановит отправку (например, JavaScript).

Если элемент невалидный:

• Элемент соответствует CSS псевдо-классу :invalid; это позволяет вам применить конкретный стиль к невалидным элементам.
• Если пользователь пытается отправить данные, браузер заблокирует форму и выдаст сообщение об ошибке.

Ограничения проверки элементов input

В этом разделе мы рассмотрим некоторые функции HTML5, которые можно использовать для проверки <input> элементов.

Начнем с простого примера - input, который позволяет вам выбирать ваш любимый плод между бананом и вишней. Он включает простой текст <input> соответствующий ярлык (label) и отправку (submit) <button>. Вы можете найти исходный код на GitHub fruit-start.html,и живой пример ниже:

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

Добавьте атрибут required в ваш input, как показано выше

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

• Отображать явные сообщения об ошибках.
• Будьте правдоподобны в отношении формата ввода.
• Укажите, где именно происходит ошибка (особенно на больших формах).

Полезные ссылки:

1. Совете от Google по формам
2. Повторить теорию о формах и пройти тест

Основные составляющие документа

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

Заголовок

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

Навигационное меню

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

Основное содержимое

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

Боковая панель

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

Подвал (футер)

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

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

• Заголовок: <header>.
• Навигационное меню: <nav>.
• Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
• Боковая панель: <aside>, обычно располагается внутри <main>.
• Нижний колонтитул: <footer>.

Подробнее об элементах HTML макета

Пока что это основные определения, которые вы должны попытаться понять:

• <main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
• <article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
• <section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
• <aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
• <header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
• <nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
• <footer> представляет собой группу конечного контента для страницы.

Несемантические обертки

случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

<span> — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

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

Перенос строки и горизонтальный разделитель

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

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

<hr> создает горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:

Заключение

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

Что такое <head>?

Давайте снова посмотрим на HTML-документ из прошлой статьи:

Содержимое <head>, в отличие от содержимого элемента <body>, не отображается на странице. Задача <head> — хранить метаданныедокумента. В приведенном выше примере <head> совсем небольшой:

Название страницы (title)

Мы уже видели, как работает элемент <title>: его используют для добавления заголовка (названия страницы) в документ. Элемент <h1> тоже иногда назвают заголовком страницы. Но это разные вещи!

• Элемент <h1> виден на странице, открытой в браузере, — его используют один раз на странице, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
• Элемент <title> — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого, текст из <title> предлагается в качестве названия закладки.

Метаданные: Элемент <meta>

Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент <meta>. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <meta>. Не станем пытаться охватить их все сразу — так недолго и запутаться —, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.

Указываем кодировку текста документа

В заголовке примера выше есть следующая строка:

В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать. utf-8 — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:

Если использовать, скажем, кодировку ISO-8859-1 (набор символов для латиницы), текст страницы испортится:

Указываем автора и описание

У элементов <meta> часто есть атрибуты name и content:

• name — тип элемента, то есть какие именно метаданные он содержит.
• content — сами метаданные.

Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:

По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS ) автоматически обрабатывают эту информацию и делают её доступной для таких целей.

Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют поисковой оптимизацией, или SEO.

Добавление иконок

Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.

Favicon, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.

Чтобы добавить на страницу favicon:

1. Сохраните изображение в формате .ico (многие браузеры поддерживают и в более привычных форматах, таких как .gif или .png) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат .ico
2. Добавьте ссылку на иконку в <head> документа:

Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:

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

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

Подключение CSS и JavaScript

Современные сайты используют CSS, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через JavaScript: видеоплееры, карты, игры. Обычно связянные стили добавляют на страницу через элемент <link>, а скрипты — через элемент <script> .

• Элемент <link> помещают в заголовок документа. У него есть два атрибута: rel="stylesheet" показывает, что мы указываем стиль документа, а в href указан путь к файлу:

• Элемент <script> не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом </body>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.

Примечание: Элемент <script> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.

Язык страницы

Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив атрибут lang в открывающий HTML-тег (как в примере meta-example.html: и как показано ниже):

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

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

Заключение

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

Что такое HTML ?

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

Анатомия HTML

Давайте рассмотрим из чего состоит тэг <p></p>

1. Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключенного в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
2. Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
3. Контент (Content): Это контент элемента, который в данном случае является просто текстом.
4. Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

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

Вложенные элементы

Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово "очень" в элемент <strong>, который указывает, что слово должно быть сильно акцентированно:

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведенное ниже неверно:

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами.

Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.

Так же мы видим внутри тэга <img> два атрибута src="images/firefox-icon.png" - данный атрибут показывает путь, т.е. откуда брать картинку, и alt="Моё тестовое изображение" - в этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение.

Анатомия HTML документа

Здесь мы имеем:

• <!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
• <html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
• <head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
• <body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
• <meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
• <title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.

Текст в HTML

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

Заголовки

Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h1> - <h6>, хотя обычно вы будете использовать не более 3-4:

Абзацы

Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:

Списки

Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:

1. Ненумерованные списки - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
2. Нумерованные списки - это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.

Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).

Ссылки

Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:

1. Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".

2. Оберните текст в элемент <a>, например так:

3. Задайте элементу <a> атрибут href, например так:

4. Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:

Даже если вы никогда не интересовались программированием, скорее всего, вы слышали название Java — и не просто так. Это один из самых популярных в мире языков программирования: он был создан в 1995 году, быстро набрал популярность и уже много лет её не теряет. В рейтинге TIOBE за ноябрь 2019 года Java заняла первое место, а по статистике GitHub — третье: второе место занял Python, а первое — JavaScript.

Java используют везде: вы найдёте её почти во всех больших компаниях, в том числе в Netflix, AliExpress, Google, Intel, eBay, TripAdvisor и многих других.

Кстати, назвали этот язык в честь одного из сортов кофе.

Java: что за зверь?

Java — мультифункциональный объектно-ориентированный язык со строгой типизацией.

Что это значит?

С мультифункциональностью всё достаточно просто: Java действительно почти «волшебная таблетка» — на ней можно разрабатывать десктопные приложения, приложения под Android, заниматься веб-разработкой… Подробнее об этом ниже.

Строгая (сильная) типизация не позволяет смешивать в выражениях разные типы и не выполняет автоматически неявные преобразования. Это добавляет мороки: какие-то части приходится прописывать самому, а свободы у вас меньше, — зато в обмен на это вы получаете надёжность.

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

Что можно писать на Java

Как мы отметили выше, Java используется во многих сферах. На ней пишут:

• приложения для Android — Java практически единственный язык для них;
• десктопные приложения;
• промышленные программы;
• банковские программы;
• научные программы;
• программы для работы с Big Data;
• веб-приложения, веб-сервера, сервера приложений;
• встроенные системы — от маленьких чипов до специальных компьютеров;
• корпоративный софт.

Чаще всего вы встретите Java в веб-разработке и в приложениях для Android, но и в остальных сферах она тоже очень популярна.

Плюсы и минусы Java

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

Плюсы

• Независимость — ваш код будет работать на любой платформе, которая поддерживает Java.
• Надёжность — в немалой мере достигается благодаря строгой статической типизации.
• Мультифункциональность.
• Сравнительно простой синтаксис.
• Java — основной язык для Android-разработки.
• Объектно-ориентированное программирование (ООП) тоже приносит много выгод:

1. параллельная разработка;
2. гибкость;
3. одни и те же классы можно использовать много раз;
4. код хорошо организован, и его легче поддерживать.

Минусы

• Низкая скорость (по сравнению с С и С++).
• Требует много памяти.
• Нет поддержки низкоуровневого программирования (Java — высокоуровневый язык). Например, у неё нет указателей.
• С 2019 года обновления для бизнеса и коммерческого использования стали платными.
• Для ООП нужен опыт, а планирование новой программы занимает много времени.

Спорный момент

• Автоматическая сборка мусора (Garbage collection): с одной стороны это выгода, но с другой стороны, разработчик не может контролировать процесс, хотя иногда это важно.

Есть ли у Java альтернатива?

Может показаться, что Java — абсолютный лидер и у неё нет соперников, но на самом деле всё совсем наоборот. Её часто сравнивают с С# и Python, и это только главные «противники». Давайте посмотрим на них внимательнее.

Java против Python

Java и Python соревнуются не первый год: в рейтингах они раз за разом занимают места рядом друг с другом (вот рейтинг 2019 года). Сравнивают их не просто так, у них действительно есть общие черты: оба языка очень популярные, объектно-ориентированные и работают вне зависимости от платформы.

Давайте посмотрим, что у них различается.

Типизация

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

У Python динамическая типизация: это значит, что типы данных не надо прописывать, они определяются автоматически. Ещё одно отличие типизации: в Python разные типы переменных можно смешивать. Но и тут есть свои границы: например, вы можете сделать массив со строками и числами, но прибавить строку к числу уже нельзя.

Python даст вам больше гибкости и лёгкости в написании, зато Java предупредит ошибки.

Читаемость

Этот пункт связан с предыдущим, потому что то же указание типов влияет на конечный вид кода. Хотя у Java достаточно простой синтаксис по сравнению с другими языками, здесь Python выигрывает. Гораздо лучше слов эту разницу покажет пример.

Вот так может выглядеть код в Python:

То же самое, написанное в Java:

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

В Java код более комплексный, со множеством слов и знаков: на английском такой синтаксис называют словом «verbose», то есть «говорливый» код, многословный. Он хуже читается и может быть сложноват для новичков, хотя многие разработчики чувствуют себя комфортнее со строгим синтаксисом.

Скорость

Здесь уже Java явный победитель. По сравнению с С и С++ она, может, и не самая быстрая, но Python явно отстаёт от Java по скорости и производительности. В обоих языках приложения переводятся в байт-код (это позволяет им быть кроссплатформенными), но разница кроется в том, когда это происходит: Java компилирует заранее, с помощью JIT-компиляции (динамической компиляции), а Python — во время выполнения программы. В итоге Java значительно быстрее.

Java против С#

Как и в случае с Python, C# сравнивают с Java не просто так: это тоже объектно-ориентированный язык со статической типизацией, и даже синтаксис у Java и C# похож.

Теперь посмотрим на их различия.

Безопасность

Один из параметров языков программирования — типобезопасность (безопасность системы типов). Если язык безопасный, то после проверки согласования типов в них уже не появится ошибка во время выполнения.

Несмотря на то что до твёрдого звания типобезопасного языка ни С#, ни Java не дотягивают, Java достаточно надёжная и разрабатывалась так, чтобы не допускать ошибок в этой области. В C# есть указатели, и такой доступ к памяти делает его менее безопасным.

Указатели и управление памятью

Вообще, если вам важно работать с указателями (например, вы хотите работать с памятью на более низком уровне), то лучше выбирать из совсем других языков (С, С++). Но если сравнивать эти два, C# побеждает: в отличие от Java, здесь указатели всё-таки есть, хоть и сильно ограниченные.

Поддержка платформ

C# разработан компанией Microsoft для их собственной экосистемы, поэтому на нём разрабатывается ПО специально для Windows. Java в этом смысле более универсальная — на ней можно писать приложения для почти любых платформ.

Применение

Если вы хотите писать веб-приложения, мессенджеры или приложения на Android или ещё не определились и поэтому хотите что-то универсальное — ваш выбор ясен: Java замечательно подойдёт.

Если же вы хотите разрабатывать приложения для Windows, то что может быть лучше, чем язык, специально для этого созданный? Кстати, C# очень хорош для разработки игр и проектов с виртуальной реальностью.

А что с работой?

Прежде чем учить какой-то язык программирования, вы наверняка хотите знать: «А что же потом?»

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

На Яндекс.Работе в Москве от 900 до 1000 вакансий для Java-разработчиков, а на HeadHunter — около 2000 (все данные приведены за декабрь 2019 года).

Вакансии, в которых указана зарплата, начинаются от 70 тысяч рублей. Большинство предложений попадает в диапазон от 100 до 200 тысяч, а продвинутым разработчикам предлагают до 300 тысяч рублей.

Как вы видите, Java-разработчики востребованы, и даже по московским меркам у них хорошая зарплата (по данным Банка заработных плат HeadHunter, средняя зарплата по Москве в третьем квартале 2019 года составила 85 707 рублей).

Ещё одна возможность — работа из дома. Её выгода в том, что вам не обязательно искать предложения в одном городе. Например, HeadHunter показывает 318 предложений удалённой работы в России, с зарплатами от 90 до 150 тысяч рублей. При желании и знании языка вы можете искать варианты даже в других страна

Легко ли новичку учить Java?

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

Если вы совсем новичок, то учить Java может быть сложновато, и стоит подумать о языках с более простым синтаксисом. Но если у вас уже есть минимальный опыт программирования, то Java — хороший выбор. Вы научитесь программированию, не распыляясь на работу с памятью, а ещё освоите объектно-ориентированное программирование. ООП не стоит бояться: оно скорее упрощает работу, чем наоборот.

Значит ли это, что не стоит пробовать, если у вас нет опыта? Вовсе нет. Если вы действительно хотите работать именно с Java, то всё-таки сможете разобраться в ней с нуля: это зависит от вашей мотивации и того, сколько времени готовы на это потратить.

Резюмируем

Итак, Java — популярный мультифункциональный язык.

Она достаточно надёжная, быстрая, пригодится почти везде, и у неё несложный синтаксис по сравнению со многими другими языками. Да, есть языки ещё проще, но если у вас нет цели выбрать самый лёгкий, то Java — удачный средний вариант.

Java — замечательный выбор для веб-разработки, разработки приложений на Android, а также если вы хотите попробовать себя в объектно-ориентированном программировании.

____________________________________________________________________________

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