\n\nСпособ 2. Подключение внешнего файла скрипта с кодом. \nОбычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию . Как правило, скрипты подключаются в области документа.\n\n#html #javascript","datePublished":"2021-05-09T11:20:00Z","dateModified":"2021-05-09T11:20:00Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":456},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/13","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/13","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/13","headline":"Иконка загрузки Сложность - ЛЕГКО Языки - HTML, CSS ШАГ 1 Добавляем HTML:
ШАГ 2 Д…","articleBody":"Иконка загрузки\n\nСложность - ЛЕГКО\nЯзыки - HTML, CSS\n\nШАГ 1\nДобавляем HTML:\n
\n\nШАГ 2\nДобавляем CSS:\n\n\nborder: определяет размер и цвет границы\nborder-radius: преобразует иконку в окружность\nborder-top: вращательный элемент\nwidth height: размер\nanimation spin 3s linear infinite: анимация бесконечная со скоростью 3\n\nЕсли есть вопросы по коду, писать сюда @WebLabFeedBackBot\n\n#css #html","datePublished":"2021-05-08T12:10:14Z","dateModified":"2021-05-08T12:10:14Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":377},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/12","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/12","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/12","headline":"Полезный ресурс. HTML CSS Палитра цветов помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цве…","articleBody":"Полезный ресурс.\n\nHTML CSS Палитра цветов\nпомогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.\n\nСсылка на данный сайт\n\n#полезныйресурс","datePublished":"2021-05-07T20:40:08Z","dateModified":"2021-05-07T20:40:08Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":344},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/11","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/11","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/11","headline":"Классическая змейка Сложность - СРЕДНЕ Языки - HTML, JS, CSS 🖥 Читать статью 🖥 В этой статье Вы прочитаете ка…","articleBody":"Классическая змейка\n\nСложность - СРЕДНЕ\nЯзыки - HTML, JS, CSS\n\n🖥 Читать статью 🖥\n\nВ этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.\n\nСправка\nТег
- создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега можно создавать рисунки, анимацию, игры. \n\nЕсли есть вопросы по коду, писать сюда @WebLabFeedBackBot\n\n#css #javascript #html #игры","datePublished":"2021-05-06T10:30:06Z","dateModified":"2021-05-06T10:30:06Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":372},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/10","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/10","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/10","headline":"Часто задаваемый вопрос: \"Как подключить CSS к HTML коду?\" Способ 1. Отдельный CSS файл. Самый распространенн…","articleBody":"Часто задаваемый вопрос: \"Как подключить CSS к HTML коду?\" \n \nСпособ 1. Отдельный CSS файл.\nСамый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: . Сам CSS файл должен быть с расширением .css. Обычно его называют style.css.\n\nСпособ 2. CSS внутри тега style.\nВторой способ заключается в том, что CSS код можно написать в теге \n\n#css #html","datePublished":"2021-05-05T16:15:00Z","dateModified":"2021-05-05T16:15:00Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":315}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/9","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/9","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/9","headline":"Интересные теги HTML: 1) Тег предназначен для отображения одной или нескольких строк текста, который п…","articleBody":"Интересные теги HTML:\n\n1) Тег предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. \n\n2) Тег предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.\n\n3) Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. \n\n4) Тег отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег не закрыт, все теги внутри него отображаются как обычный текст.\n \n5) Тег указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру. \n \n6) Тег предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.\n\n#теги #html","datePublished":"2021-05-04T20:45:16Z","dateModified":"2021-05-04T20:45:16Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":271}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/8","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/8","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/8","headline":"Эффект ввода текста Сложность - ЛЕГКО Языки - HTML, JS 🖥 Читать статью 🖥 Если есть вопросы по коду, писать сю…","articleBody":"Эффект ввода текста\n\nСложность - ЛЕГКО\nЯзыки - HTML, JS\n\n🖥 Читать статью 🖥\n\nЕсли есть вопросы по коду, писать сюда @WebLabFeedBackBot\n\n#javascript #html","datePublished":"2021-05-03T19:00:41Z","dateModified":"2021-05-03T19:00:41Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":268},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/7","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/7","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/7","headline":"Базовый анимированный значок меню Сложность - ЛЕГКО Языки - HTML, CSS, JS 🖥 Читать статью 🖥 Если есть вопросы…","articleBody":"Базовый анимированный значок меню \n\nСложность - ЛЕГКО\nЯзыки - HTML, CSS, JS\n\n🖥 Читать статью 🖥\n\nЕсли есть вопросы по коду, писать сюда @WebLabFeedBackBot\n\n#html #css #javascript","datePublished":"2021-05-02T20:15:18Z","dateModified":"2021-05-02T20:15:18Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":248},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/5","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/5","mainEntityOfPage":"https://telemetr.io/ar/channels/1273854318-webdev_plus/posts/5","headline":"Топ 3 бесплатных IDE для веб-разработки 🖥 Читать статью 🖥 👆Ссылки для скачивания в самой статье 👆","articleBody":"Топ 3 бесплатных IDE для веб-разработки \n\n🖥 Читать статью 🖥\n\n👆Ссылки для скачивания в самой статье 👆","datePublished":"2021-04-26T14:01:00Z","dateModified":"2021-04-26T14:01:00Z","author":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"publisher":{"@type":"Organization","name":"WebDev+ | Веб-разработка","url":"https://telemetr.io/ar/channels/1273854318-webdev_plus","image":"https://img.telemetr.io/c/1ocXHo/5238053668396328807?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":212}]}}]}
Теги <audio> и <video>
Добавляют, воспроизводят, управляют настройками аудиозаписей и видеороликов на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис audio:
<audio src="URL"> </audio>
<audio> <source src="URL"> </audio>
Синтаксис video:
<video> <source src="URL"> </video>
Атрибуты audio:
autoplay - Звук начинает играть сразу после загрузки страницы.
controls - Добавляет панель управления.
loop - Повторяет воспроизведение звука с начала после его завершения.
preload - Используется для загрузки файла вместе с загрузкой веб-страницы.
Атрибуты video:
autoplay - Видео воспроизводиться сразу после загрузки страницы
controls - Добавляет панель управления
height и width - Задают ширину и высоту области для воспроизведения
loop - Повторяет воспроизведение видео с начала после его завершения
poster - Указывает картинку, которая будет отображаться, пока видео не воспроизводится
preload - Используется для загрузки видео вместе с загрузкой веб-страницы
#теги #html
CSS. Как убрать подчеркивание у гиперссылки?
Anonymous voting Google Fonts - удобный сервис для работы с веб-шрифтами.
Сайт содержит одну из крупнейших коллекций шрифтов, адаптированных к использованию в веб-разработке. На сайте представлено более 1000 различных семейств шрифтов. Можно скачать как отдельный шрифт, так и архив с несколькими семействами.
#полезныйресурс
JavaScript. Как вывести модальное окно с сообщением?
Anonymous voting Масштабирование изображения.
Сложность -
СРЕДНЕ
Языки -
HTML, JS, CSS
🖥
Читать статью 🖥
В этой статье Вы узнаете, как сделать масштабирование изображений с помощью лупы, просто и понятно.
Если есть вопросы по коду, писать сюда
@WebLabFeedBackBot
#css #javascript #html
Если Вы хотите больше практиковаться и усовершенствовать свою технику написания кода, то сайт
Codewars для Вас.
На этом сайте представлены практические задания для многих языков программирования. Задачки имеют несколько уровней сложности: от 8 kyu до 1 kyu. Причем чем ниже kyu, тем сложнее. Оттачивайте свои навыки и сравниваете свое решение с другими.
#полезныйресурс
Удиви свою любимую! Сделай бьющееся сердце с помощью CSS.
Сложность -
СРЕДНЕ
Языки -
HTML, CSS
🖥
Читать статью 🖥
Если есть вопросы по коду, писать сюда
@WebLabFeedBackBot
#css #html
Как подключить JavaScript к HTML коду?
Способ 1. JavaScript внутри тега script.
Самый простой способ внедрения JavaScript в HTML. Для этого необходимо добавить парный тег <script>, его часто помещают как внутри <head>, так и внутри <body>. Пример: <script> alert("JavaScript подключен"); </script>
Способ 2. Подключение внешнего файла скрипта с кодом.
Обычно такой файл называется script и имеет расширение js. Чтобы подключить JavaScript из внешнего файла, нужно использовать конструкцию <script src="путь к файлу скрипта/script.js"></script>. Как правило, скрипты подключаются в области <head> документа.
#html #javascript
Иконка загрузки
Сложность -
ЛЕГКО
Языки -
HTML, CSS
ШАГ 1
Добавляем HTML:
<div class="loading"></div>
ШАГ 2
Добавляем CSS:
<style>
.loading {
border: 8px solid #AFAFAF;
border-radius: 50%;
border-top: 8px solid black;
width: 60px;
height: 60px;
animation: spin 3s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
border: определяет размер и цвет границы
border-radius: преобразует иконку в окружность
border-top: вращательный элемент
width height: размер
animation spin 3s linear infinite : анимация бесконечная со скоростью 3
Если есть вопросы по коду, писать сюда
@WebLabFeedBackBot
#css #html
Полезный ресурс.
HTML CSS Палитра цветов
помогает подобрать цвет в виде HEX, RGB, RGBA, HSV и CMYK записи цветовой модели. Нажимайте на поля выбора цвета, а для более точного выбора, перемещайте курсор с зажатой левой кнопкой мыши. Изменяйте параметры цвета через поля ввода. А ещё можно скачать выбранный цвет, в формате SVG, PNG, JPEG или GIF.
Ссылка на данный сайт
#полезныйресурс
Классическая змейка
Сложность -
СРЕДНЕ
Языки -
HTML, JS, CSS
🖥
Читать статью 🖥
В этой статье Вы прочитаете как сделать классическую змейку, просто и понятно, с использованием canvas.
Справка
Тег <canvas> - создает область, в которой при помощи JavaScript можно рисовать разные объекты, выводить изображения, трансформировать их и менять свойства. При помощи тега <canvas> можно создавать рисунки, анимацию, игры.
Если есть вопросы по коду, писать сюда
@WebLabFeedBackBot
#css #javascript #html #игры
Часто задаваемый вопрос: "Как подключить CSS к HTML коду?"
Способ 1. Отдельный CSS файл.
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле. Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество. Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">. Сам CSS файл должен быть с расширением .css . Обычно его называют style.css .
Способ 2. CSS внутри тега style.
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head>, так и внутри <body>. Недостаток этого способа в том, что CSS код применяется только к одной странице сайта. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных. Пример: <style> p {color: red;} </style>
#css #html
Интересные теги HTML:
1) Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код.
2) Тег <BLOCKQUOTE> предназначен для выделения длинных цитат внутри документа. Текст, отображается как выровненный блок с отступами слева и справа.
3) Тег <DEL> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны.
4) Тег <XMP> отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины. Пока тег <XMP> не закрыт, все теги внутри него отображаются как обычный текст.
5) Тег <ABBR> указывает, что символы являются аббревиатурой. С помощью параметра title дается расшифровка сокращения, что позволяет понимать аббревиатуру.
6) Тег <ADDRESS> предназначен для хранения информации об авторе. Планируется, что поисковые системы будут анализировать содержимое этого тега для сбора информации.
#теги #html
Базовый анимированный значок меню
Сложность -
ЛЕГКО
Языки -
HTML, CSS, JS
🖥
Читать статью 🖥
Если есть вопросы по коду, писать сюда
@WebLabFeedBackBot
#html #css #javascript
Топ 3 бесплатных IDE для веб-разработки
🖥
Читать статью 🖥
👆Ссылки для скачивания в самой статье 👆
إظهار المزيد