How To WebDev

الذهاب إلى القناة على Telegram

Заявки принимаются моментально! Обучаем фронтентду и бекенду просто и понятно! Сотрудничество: @me_Smith Ссылка на канал: @HowTo_WebDev

إظهار المزيد

الشبكة:ИНВЕСТИРУЕМ ВМЕСТЕ💰روسيا127 186 التكنولوجيات والتطبيقات20 469

3 353

المشتركون

لا توجد بيانات24 ساعات

-157 أيام

-6130 أيام

لا توجد بيانات

عرض المشاهدات

لا توجد بيانات24 ساعات

لا توجد بيانات48 ساعات

لا توجد بيانات

معدل المشاركة

لا توجد بيانات

المشاركات في اليوم

Ads index

beta

أرشيف المشاركات

\n\n\n📂 #JavaScript #Код\n▬▬▬▬▬▬▬▬\n\\ How To WebDev","datePublished":"2022-08-25T15:00:10Z","dateModified":"2022-08-25T15:00:10Z","author":{"@type":"Organization","name":"How To WebDev","url":"https://telemetr.io/ar/channels/1670587619-howto_webdev","image":"https://img.tlmtr.io/c/1P3C9B/5958602391567841210?ty=x"},"publisher":{"@type":"Organization","name":"How To WebDev","url":"https://telemetr.io/ar/channels/1670587619-howto_webdev","image":"https://img.tlmtr.io/c/1P3C9B/5958602391567841210?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":411}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1670587619-howto_webdev/posts/83","url":"https://telemetr.io/ar/channels/1670587619-howto_webdev/posts/83","mainEntityOfPage":"https://telemetr.io/ar/channels/1670587619-howto_webdev/posts/83","headline":"🧾Внешний JavaScript Скрипты также можно размещать во внешних файлах: Внешний файл: myScript.js myFunction()…","articleBody":"🧾Внешний JavaScript\n\nСкрипты также можно размещать во внешних файлах:\n\nВнешний файл: myScript.js\n\n myFunction() {\n document.getElementById(\"demo\").innerHTML = \"Параграф изменён.\";\n}\n\nВнешние скрипты практичны, когда один и тот же код используется на многих разных веб страницах.\n\nФайлы JavaScript имеют расширение .js.\n\nЧтобы использовать внешний скрипт, поместите имя файла скрипта в src атрибут (источник) \n\nВы можете разместить ссылку на внешний скрипт в или по своему усмотрению.\n\nСкрипт будет вести себя так, как если бы он был расположен именно там, где находится тег…","articleBody":"🧾JavaScript - Где установить?\n\nТег теги.\n\nПример:\n\ndocument.getElementById(\"demo\").innerHTML = \"Мой Первый JavaScript\";\n\n\nВ старых примерах JavaScript может использоваться атрибут типа:

3 353

🧾Какая разница между элементами <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

3 353

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

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

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

3 353

🧾Внешний JavaScript Скрипты также можно размещать во внешних файлах: Внешний файл: myScript.js

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

Внешние скрипты практичны, когда один и тот же код используется на многих разных веб страницах. Файлы JavaScript имеют расширение .js. Чтобы использовать внешний скрипт, поместите имя файла скрипта в src атрибут (источник) <script> тега: Пример:

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

Вы можете разместить ссылку на внешний скрипт в <head> или <body> по своему усмотрению. Скрипт будет вести себя так, как если бы он был расположен именно там, где находится <script> тег. Внешние скрипты не могут содержать <script> теги. 📂 #JavaScript #Код ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾JavaScript в <head> или <body> Вы можете разместить любое количество скриптов в HTML документе. Сценарии могут быть размещены в <body> или в <head> разделе HTML страницы, или в обоих. JavaScript в <head> В этом примере JavaScript function помещается в <head> раздел HTML страницы. Функция вызывает (вызывается) при нажатии кнопки. Пример: Ссылка на код 📂 #JavaScript #Код ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾Функции и события — JavaScript JavaScript function — это блок кода JavaScript, который может быть выполнен по запросу. Например, функция может быть вызвана при возникновении события, например, когда пользователь нажимает кнопку. 📂 #JavaScript #Совет ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾JavaScript - Где установить? Тег <script> В HTML, JavaScript код вставляется между <script> и </script> теги. Пример:

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

В старых примерах JavaScript может использоваться атрибут типа:

<script type="text/javascript">.

Атрибут типа не требуется. JavaScript - это язык сценариев по умолчанию в HTML. 📂 #JavaScript #Совет ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾Введение — JavaScript JavaScript может изменять содержимое HTML Одним из многих методов JavaScript HTML является getElementById(). Пример ниже "находит" элемент HTML (с id = "demo") и меняет его содержимое (innerHTML) на "Привет JavaScript": Пример:

 = "Привет JavaScript";

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

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

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

3 353

🧾 Определение таблицы — HTML Тег <table> определяет таблицу HTML. Каждая строка таблицы определяется с помощью тега <tr>. Каждый заголовок таблицы определяется с помощью тега <th>. Каждая таблица данных/ячейка определяется с помощью тега <td>. По умолчанию текст элементы <th> выделены жирным шрифтом и центрированы. По умолчанию текст элементы <td> являются регулярными и выровненными по левому краю. Простая HTML таблица: Ссылка на код Примечание: Элемент <td> - контейнеры данных таблицы. Они могут содержать все виды HTML элементов: текст, изображения, списки, другие таблицы и т.д. 📂 #HTML #Совет ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾 Что выбрать: width и height, или style? — HTML Все атрибуты width, height и style являются действительными в HTML5. Однако, мы рекомендуем использовать атрибут style. Это предотвращает изменения исходного размера изображения во внутренней и внешней таблицы стилей. Пример: Ссылка на код 📂 #HTML #Совет ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

🧾 Размер изображения - ширина и высота — 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

3 353

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

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

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

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

Примечание: Атрибут alt является обязательным. Веб-страница не будет проверяться правильно без него. 📂 #HTML #Совет ▬▬▬▬▬▬▬▬ \ How To WebDev

3 353

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

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

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

3 353

🧾 Синтаксис изображения — HTML HTML тег <img> — используется для встраивания изображения в веб страницу. Изображения технически не вставляются на веб-страницу; изображения связаны с веб страницами. Тег <img> создает удерживающее пространство для ссылочного изображения. Тег <img> пуст, он содержит только атрибуты и не имеет закрывающего тега. Тег <img> имеет два обязательных атрибута: src — Указывает путь к изображению alt — Задает альтернативный текст для изображения Синтаксис:

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

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

3 353

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

3 353

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

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

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

3 353

🧾 Отступ и ширина — 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

3 353

🧾 Отступы в 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

3 353

🧾 Отступы в CSS — все стороны CSS имеет свойства для указания заполнения для каждой стороны элемента: padding-top — отступ сверху padding-right — отступ справа padding-bottom — отступ снизу padding-left — отступ слева Все свойства padding могут иметь следующие значения: размер - задает отступ в px, pt, cm, и т.д. % - устанавливает отступы в процентах от ширины содержащего элемента inherit - задает, что отступ должен быть унаследован от родительского элемента Внимание: Отрицательные значения не допускаются. В следующем примере задаются различные отступы для всех четырех сторон элемента <div>: Ссылка на код 📂 #CSS #Код ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

3 353

🧾 Отступы внутри — CSS CSS overflow CSS свойство padding — используются для создания пространства вокруг содержимое элемента внутри определенных границ. С помощью CSS у вас есть полный контроль над отступами. Есть свойства для установки отступа для каждой стороны элемента по часовой стрелке: top сверху, right справа, bottom сверху и left слева. padding — Сокращенное свойство для установки всех свойств отступа в одном объявлении padding-bottom — Устанавливает нижний отступ элемента padding-left — Устанавливает левый отступ элемента padding-right — Устанавливает правый отступ элемента padding-top — Устанавливает верхний отступ элемента 📂 #CSS #Код ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS

3 353

🧾 Поля — разрушить — CSS margin Верхнее и нижнее поле элемента, иногда бывают разрушены в единое поле, равной по величине из двух полей. Что не произойдет с левым и правым полями! Только с верхним и нижним полями! Посмотрите следующий пример: Ссылка на код В примере выше, элемент <h2> имеет поле снизу 50px. Элемент <h3> имеет поле сверху 20px. Здравый смысл предполагает, что вертикальное поле между элементами <h2> и <h3> может быть в общей сложности 70px (50px + 20px). Но в связи с разрушением поля по факту, поле будет в размере 50px 📂 #CSS #Код ▬▬▬▬▬▬▬▬ \ HowToWebDev // Задачи HTML CSS