🧾 Атрибут alt — HTML
Атрибут alt — содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src, тогда изображение используется для чтения с экрана).
Пример:
Значение атрибута alt, должно описывать изображение
📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
Атрибут alt — содержит альтернативный текст для изображения, если изображение по какой-то причине не отображается (из-за медленного соединения или ошибки в атрибуте src, тогда изображение используется для чтения с экрана).
Пример:
Значение атрибута alt, должно описывать изображение
src="img_chania.jpg" alt="Цветы в Ханье">Если браузер не может найти изображение, он будет отображать значение атрибута alt:
src="wrongname.gif" alt="Цветы в Ханье">Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него.
📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
🧾 Размер изображения - ширина и высота — HTML
Вы можете использовать атрибут style, чтобы задать ширину и высоту изображения.
Пример:
Пример:
Примечание: Всегда указывайте ширину и высоту изображения. Если ширина и высота не указаны, то страница будет мигать, пока загружается изображение.
📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
Вы можете использовать атрибут 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
Все атрибуты width, height и style являются действительными в HTML5.
Однако, мы рекомендуем использовать атрибут style. Это предотвращает изменения исходного размера изображения во внутренней и внешней таблицы стилей.
Пример:
Ссылка на код
📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
🧾 Определение таблицы — HTML
Тег <table> определяет таблицу HTML.
Каждая строка таблицы определяется с помощью тега <tr>. Каждый заголовок таблицы определяется с помощью тега <th>. Каждая таблица данных/ячейка определяется с помощью тега <td>.
По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы.
По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю.
Простая HTML таблица:
Ссылка на код
Примечание: Элемент <td> - контейнеры данных таблицы.
Они могут содержать все виды HTML элементов: текст, изображения, списки, другие таблицы и т.д.
📂 #HTML #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
Тег <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":
Пример:
Пример:
▬▬▬▬▬▬▬▬
\ How To WebDev
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> теги.
Пример:
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
Тег <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 function — это блок кода JavaScript, который может быть выполнен по запросу.
Например, функция может быть вызвана при возникновении события, например, когда пользователь нажимает кнопку.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\ How To WebDev
🧾JavaScript в <head> или <body>
Вы можете разместить любое количество скриптов в HTML документе.
Сценарии могут быть размещены в <body> или в <head> разделе HTML страницы, или в обоих.
JavaScript в <head>
В этом примере JavaScript function помещается в <head> раздел HTML страницы.
Функция вызывает (вызывается) при нажатии кнопки.
Пример:
Ссылка на код
📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev
Вы можете разместить любое количество скриптов в HTML документе.
Сценарии могут быть размещены в <body> или в <head> разделе HTML страницы, или в обоих.
JavaScript в <head>
В этом примере JavaScript function помещается в <head> раздел HTML страницы.
Функция вызывает (вызывается) при нажатии кнопки.
Пример:
Ссылка на код
📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev
🧾Внешний JavaScript
Скрипты также можно размещать во внешних файлах:
Внешний файл: myScript.js
Файлы JavaScript имеют расширение .js.
Чтобы использовать внешний скрипт, поместите имя файла скрипта в src атрибут (источник) <script> тега:
Пример:
Скрипт будет вести себя так, как если бы он был расположен именно там, где находится <script> тег.
Внешние скрипты не могут содержать <script> теги.
📂 #JavaScript #Код
▬▬▬▬▬▬▬▬
\ How To WebDev
Скрипты также можно размещать во внешних файлах:
Внешний файл: 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 могут ускорить загрузку страницы
Чтобы добавить несколько файлов сценария на одну страницу - используйте несколько тегов сценария
Пример:
▬▬▬▬▬▬▬▬
\ How To WebDev
Размещение скриптов во внешних файлах имеет ряд преимуществ:
Он разделяет 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>):
▬▬▬▬▬▬▬▬
\ How To WebDev
<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> и описывающие содержимое страницы. Мета-теги не выводятся на странице. Они имеются лишь в её коде.
Их основная задача заключается в том, чтобы кратко описывать содержимое страниц поисковым системам. Вот пример:
▬▬▬▬▬▬▬▬
\ 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-стили к различным типам содержимого. Медиазапросы могут использоваться и для настройки элементов страниц с учётом характеристик среды, в которой просматривают страницы.
▬▬▬▬▬▬▬▬
\\ How To WebDev
В медиазапросах используется правило @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
Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.
Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.
Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.
📂 #CSS #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
🧾Какая разница между следующими видами позиционирования элементов: относительное, фиксированное, абсолютное, статическое?
Относительное позиционирование — это когда элемент смещается относительно его положения, задаваемого по умолчанию. Фиксированное позиционирование — это когда настраивают положение элемента, ориентируясь на края окна браузера. Абсолютное позиционирование — это размещение элемента относительно ближайшего позиционированного родительского элемента, причём, именно там, где указано разработчиком. Статическое позиционирование — это режим позиционирования, применяемый по умолчанию, при использовании которого элементы выводятся в том порядке, в котором они описаны в документе.
📂 #CSS #Код
▬▬▬▬▬▬▬▬
\\ How To WebDev
Относительное позиционирование — это когда элемент смещается относительно его положения, задаваемого по умолчанию. Фиксированное позиционирование — это когда настраивают положение элемента, ориентируясь на края окна браузера. Абсолютное позиционирование — это размещение элемента относительно ближайшего позиционированного родительского элемента, причём, именно там, где указано разработчиком. Статическое позиционирование — это режим позиционирования, применяемый по умолчанию, при использовании которого элементы выводятся в том порядке, в котором они описаны в документе.
📂 #CSS #Код
▬▬▬▬▬▬▬▬
\\ How To WebDev
🧾Что такое рекурсия?
Рекурсия – это приём программирования, полезный в ситуациях, когда задача может быть естественно разделена на несколько аналогичных, но более простых задач.
Или когда задача может быть упрощена до несложных действий плюс простой вариант той же задачи. Или для работы с определёнными структурами данных.
В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это как раз и называется рекурсией.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
Рекурсия – это приём программирования, полезный в ситуациях, когда задача может быть естественно разделена на несколько аналогичных, но более простых задач.
Или когда задача может быть упрощена до несложных действий плюс простой вариант той же задачи. Или для работы с определёнными структурами данных.
В процессе выполнения задачи в теле функции могут быть вызваны другие функции для выполнения подзадач. Частный случай подвызова – когда функция вызывает сама себя. Это как раз и называется рекурсией.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
🧾Что такое контекст выполнения?
Контекст выполнения — специальная внутренняя структура данных, которая содержит информацию о вызове функции.
Она включает в себя конкретное место в коде, на котором находится интерпретатор, локальные переменные функции, значение
Один вызов функции имеет ровно один контекст выполнения, связанный с ним.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
Контекст выполнения — специальная внутренняя структура данных, которая содержит информацию о вызове функции.
Она включает в себя конкретное место в коде, на котором находится интерпретатор, локальные переменные функции, значение
this и прочую служебную информацию.Один вызов функции имеет ровно один контекст выполнения, связанный с ним.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
🧾Что такое контекст выполнения? №2
Когда функция производит вложенный вызов, происходит следующее:
Выполнение текущей функции приостанавливается.
Контекст выполнения, связанный с ней, запоминается в специальной структуре данных – стеке контекстов выполнения.
Выполняются вложенные вызовы, для каждого из которых создаётся свой контекст выполнения.
После их завершения старый контекст достаётся из стека, и выполнение внешней функции возобновляется с того места, где она была остановлена.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
Когда функция производит вложенный вызов, происходит следующее:
Выполнение текущей функции приостанавливается.
Контекст выполнения, связанный с ней, запоминается в специальной структуре данных – стеке контекстов выполнения.
Выполняются вложенные вызовы, для каждого из которых создаётся свой контекст выполнения.
После их завершения старый контекст достаётся из стека, и выполнение внешней функции возобновляется с того места, где она была остановлена.
📂 #JavaScript #Совет
▬▬▬▬▬▬▬▬
\\ How To WebDev
🧾Методы примитивов
JavaScript позволяет нам работать с примитивными типами данных – строками, числами и т.д., как будто они являются объектами.
Поэтому давайте взглянем на ключевые различия между примитивами и объектами.
Примитив – это значение «примитивного» типа.
Есть 7 примитивных типов: string, number, boolean, symbol, null, undefined и bigint.
А объект может хранить множество значений как свойства.
Объявляется при помощи фигурных скобок "{}», например: «{name: "Рома", age: 30}». В JavaScript есть и другие виды объектов: например, функции тоже являются объектами.
📋 #Совет
▬▬▬▬▬▬▬▬
// How To WebDev
JavaScript позволяет нам работать с примитивными типами данных – строками, числами и т.д., как будто они являются объектами.
Поэтому давайте взглянем на ключевые различия между примитивами и объектами.
Примитив – это значение «примитивного» типа.
Есть 7 примитивных типов: string, number, boolean, symbol, null, undefined и bigint.
А объект может хранить множество значений как свойства.
Объявляется при помощи фигурных скобок "{}», например: «{name: "Рома", age: 30}». В JavaScript есть и другие виды объектов: например, функции тоже являются объектами.
📋 #Совет
▬▬▬▬▬▬▬▬
// How To WebDev
🧾Числа
В современном JavaScript существует два типа чисел:
Обычные числа в JavaScript хранятся в 64-битном формате IEEE-754, который также называют «числа с плавающей точкой двойной точности» (double precision floating point numbers). Это числа, которые используются чаще всего.
BigInt числа дают возможность работать с целыми числами произвольной длины. Они нужны достаточно редко и используются в случаях, когда необходимо работать со значениями более чем (253-1) или менее чем -(253-1).
📋 #Совет
▬▬▬▬▬▬▬▬
// How To WebDev
В современном JavaScript существует два типа чисел:
Обычные числа в JavaScript хранятся в 64-битном формате IEEE-754, который также называют «числа с плавающей точкой двойной точности» (double precision floating point numbers). Это числа, которые используются чаще всего.
BigInt числа дают возможность работать с целыми числами произвольной длины. Они нужны достаточно редко и используются в случаях, когда необходимо работать со значениями более чем (253-1) или менее чем -(253-1).
📋 #Совет
▬▬▬▬▬▬▬▬
// How To WebDev
