​🧾 Значение наследовать — CSS margin

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

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Поля — разрушить — CSS margin

Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей.

Что не произойдет с левым и правым полями! Только с верхним и нижним полями!

Посмотрите следующий пример:

Ссылка на код

В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px.

Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы внутри — CSS

CSS overflow

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

С помощью CSS у вас есть полный контроль над отступами. Есть свойства для установки отступа для каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева.

padding — Сокращенное свойство для установки всех свойств отступа в одном объявлении
padding-bottom — Устанавливает нижний отступ элемента
padding-left — Устанавливает левый отступ элемента
padding-right — Устанавливает правый отступ элемента
padding-top — Устанавливает верхний отступ элемента

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS — все стороны

CSS имеет свойства для указания заполнения для каждой стороны элемента:

padding-top — отступ сверху
padding-right — отступ справа
padding-bottom — отступ снизу
padding-left — отступ слева

Все свойства padding могут иметь следующие значения:

размер - задает отступ в px, pt, cm, и т.д.
% - устанавливает отступы в процентах от ширины содержащего элемента
inherit - задает, что отступ должен быть унаследован от родительского элемента

Внимание: Отрицательные значения не допускаются.

В следующем примере задаются различные отступы для всех четырех сторон элемента <div>:

Ссылка на код

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступы в CSS - сокращенное свойство

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

Свойство padding является сокращенным свойством для следующих свойств отступа:

padding-top
padding-right
padding-bottom
padding-left

Итак, вот как это работает.

Если свойство padding имеет четыре значения:

padding: 25px 50px 75px 100px;
Отступ сверху 25px
Отступ справа 50px
Отступ снизу 75px
Отступ слева 100px

Пример:

div {
padding: 25px 50px 75px 100px;
}

📂 #CSS #Код
▬▬▬▬▬▬▬▬
\ HowToWebDev // Задачи HTML CSS

​🧾 Отступ и ширина — CSS margin

CSS свойство width — определяет ширину области содержимого элемента. Область содержимого, это часть находится внутри элементов padding, border и margin (Бокс Модель).

Таким образом, если элемент имеет заданную ширину, отступ будет добавляться к общей ширине элемента. Это нежелательный результат.

В следующем примере элементу <div> присваивается ширина 300px. Однако фактическая отображаемая ширина элемента <div> будет равна 350px (300px + 25px левого отступа + 25px правой отступа):

div {
width: 300px;
padding: 25px;
}

Для того чтобы ширина была 300 пикселей, независимо от количества отступов, вы можете использовать свойство box-sizing. Этот элемент заставляет сохранять свою ширину; если вы увеличиваете отступ, доступное пространство содержимого будет уменьшаться. Вот пример:

div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}

height — Устанавливает высоту элемента
max-height — Устанавливает максимальную высоту элемента
max-width — Устанавливает максимальную ширину элемента
min-height — Устанавливает минимальную высоту элемента
min-width — Устанавливает минимальную ширину элемента
width — Устанавливает ширину элемента

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 CSS - height и width

Установка высоты и ширины

Свойства height и width используются, чтобы установить высоту и ширину элемента.

Свойства height и width могут быть установлены автоматически auto по умолчанию. Означает, что браузер вычисляет высоту и ширину, значение размера указано в px, cm и т.п., или в процентах (%) содержащего блока.

Пример:

 {
   height: 200px;
   width: 50%;
   background-color: powderblue;
}

Примечание: Свойства height и width не содержат отступы, границы и поля; они устанавливают высоту и ширину площадки внутри отступов, границ и полей для элемента!

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Установка максимальной ширины — CSS

Свойство max-width используется, чтобы установить максимальную ширину элемента.

Свойство max-width может быть указано значение размера в px, cm, т.п., или в процентах (%) из содержащего их блока, или значение none по умолчанию - значит, что нет максимальной ширины.

Проблема с элементом <div> выше происходит, когда окно браузера меньше ширины элемента 500 пикселей. После чего, браузер добавляет горизонтальную полосу прокрутки на странице.

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

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

Примечание: Значение max-width переопределяет свойство width.

В следующем примере показан элемент <div> высота 100 пикселей и максимальная ширина 500 пикселей:

div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\ HowToWebDev

​🧾 Синтаксис изображения — HTML

HTML тег <img> — используется для встраивания изображения в веб страницу.

Изображения технически не вставляются на веб-страницу; изображения связаны с веб страницами. Тег <img> создает удерживающее пространство для ссылочного изображения.

Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега.

Тег <img> имеет два обязательных атрибута:

src — Указывает путь к изображению
alt — Задает альтернативный текст для изображения

Синтаксис:

<img src="url" alt="альтернативный текст">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Атрибут src — HTML

Атрибут src — обязательный, указывает путь (URL) к изображению.

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

Пример:

<img src="img_chania.jpg" alt="Цветы в Ханье">

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Атрибут alt — HTML

Атрибут alt — содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src, тогда изображение используется для чтения с экрана).

Пример:

Значение атрибута alt, должно описывать изображение

 src="img_chania.jpg" alt="Цветы в Ханье">

Если браузер не может найти изображение, он будет отображать значение атрибута alt:

 src="wrongname.gif" alt="Цветы в Ханье">

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Размер изображения - ширина и высота — HTML

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

Пример:

 src="img_girl.jpg" alt="Девушка в куртке" style="width:500px;height:600px;">

Кроме того, вы можете использовать атрибуты width и height.

Пример:

 src="img_girl.jpg" alt="Девушка в куртке" width="500" height="600">

Атрибуты width и height — всегда определяют ширину и высоту изображение в пикселях.

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

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Что выбрать: width и height, или style? — HTML

Все атрибуты width, height и style являются действительными в HTML5.

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

Пример:

Ссылка на код

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾 Определение таблицы — HTML

Тег <table> определяет таблицу HTML.

Каждая строка таблицы определяется с помощью тега <tr>. Каждый заголовок таблицы определяется с помощью тега <th>. Каждая таблица данных/ячейка определяется с помощью тега <td>.

По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы.

По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю.

Простая HTML таблица:

Ссылка на код

Примечание: Элемент <td> - контейнеры данных таблицы.

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

📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Введение — JavaScript

JavaScript может изменять содержимое HTML

Одним из многих методов JavaScript HTML является getElementById().

Пример ниже "находит" элемент HTML (с id = "demo") и меняет его содержимое (innerHTML) на "Привет JavaScript":

Пример:

 = "Привет JavaScript";

JavaScript принимает как двойные, так и одинарные кавычки

Пример:

document.getElementById('demo').innerHTML = 'Привет JavaScript';

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾JavaScript - Где установить?

Тег <script>

В HTML, JavaScript код вставляется между <script> и </script> теги.

Пример:

document.getElementById("demo").innerHTML = "Мой Первый JavaScript";
</script>

В старых примерах JavaScript может использоваться атрибут типа: <script type="text/javascript">.
Атрибут типа не требуется. JavaScript - это язык сценариев по умолчанию в HTML.

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Функции и события — JavaScript

JavaScript function — это блок кода JavaScript, который может быть выполнен по запросу.

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

📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾JavaScript в <head> или <body>

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

Сценарии могут быть размещены в <body> или в <head> разделе HTML страницы, или в обоих.

JavaScript в <head>

В этом примере JavaScript function помещается в <head> раздел HTML страницы.

Функция вызывает (вызывается) при нажатии кнопки.

Пример:

Ссылка на код

📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Внешний JavaScript

Скрипты также можно размещать во внешних файлах:

Внешний файл: myScript.js

 myFunction() {
  document.getElementById("demo").innerHTML = "Параграф изменён.";
}

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

Файлы JavaScript имеют расширение .js.

Чтобы использовать внешний скрипт, поместите имя файла скрипта в src атрибут (источник) <script> тега:

Пример:

 src="myScript.js"></script>

Вы можете разместить ссылку на внешний скрипт в <head> или <body> по своему усмотрению.

Скрипт будет вести себя так, как если бы он был расположен именно там, где находится <script> тег.

Внешние скрипты не могут содержать <script> теги.

📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Преимущества внешнего JavaScript

Размещение скриптов во внешних файлах имеет ряд преимуществ:

Он разделяет HTML и код. Это упрощает чтение и поддержку HTML и JavaScript. Кэшированные файлы JavaScript могут ускорить загрузку страницы

Чтобы добавить несколько файлов сценария на одну страницу - используйте несколько тегов сценария

Пример:

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev

​🧾Какая разница между элементами <span> и <div>?

<span> — это строчный (inline) элемент.<div> — это блочный (block) элемент.
Элементы <div> нужно использовать для оформления разделов документа. А элементы <span> — в роли контейнеров для небольших объёмов текста, для изображений и других подобных элементов страниц.

Надо отметить, что нельзя помещать блочные элементы в строчные. Вот пример, в котором показано, кроме прочего, неправильное размещение блочного элемента внутри строчного (это — фрагмент <div>I'm illegal</div>, размещённый внутри элемента <span>):

<div>Hi<span>I'm the start of the

📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev