​🧾 Установка максимальной ширины — 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

​Что такое мета-теги?

Мета-теги — это теги, находящиеся в теге страницы <head> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.

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

<head> <meta charset="UTF-8"> <meta name="description" content="Description search engines use"> <meta name="keywords" content="Keywords, of, your, page"> <meta name="author" content="Me"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>

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

​🧾Как пользоваться медиазапросами в CSS?

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

/* Изменить фоновый цвет любого элемента <div> на "red" в том случае, если ширина окна браузера составляет 600px или меньше */

@media only screen and (max-width: 600px) {
div {
background-color: red;
}
}

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

​🧾Какая разница между селекторами идентификаторов и классов в CSS?

Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.

Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.

Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.

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

​🧾Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?

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

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

​🧾Что такое рекурсия?

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

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

В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это как раз и называется рекурсией.

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

​🧾Что такое контекст выполнения?

Контекст выполнения — специальная внутренняя структура данных, которая содержит информацию о вызове функции.

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

Один вызов функции имеет ровно один контекст выполнения, связанный с ним.

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

​🧾Что такое контекст выполнения? №2

Когда функция производит вложенный вызов, происходит следующее:

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

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