CSS. Как убрать подчеркивание у гиперссылки?
Anonymous Quiz
26%
a { underline:none; }
3%
a { decoration:not-underline; }
19%
a { text-decoration:not-underline; }
53%
a { text-decoration:none; }
Теги <audio> и <video>
Добавляют, воспроизводят, управляют настройками аудиозаписей и видеороликов на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>.
Синтаксис audio:
Синтаксис video:
Атрибуты audio:
autoplay - Звук начинает играть сразу после загрузки страницы.
controls - Добавляет панель управления.
loop - Повторяет воспроизведение звука с начала после его завершения.
preload - Используется для загрузки файла вместе с загрузкой веб-страницы.
Атрибуты video:
autoplay - Видео воспроизводиться сразу после загрузки страницы
controls - Добавляет панель управления
height и width - Задают ширину и высоту области для воспроизведения
loop - Повторяет воспроизведение видео с начала после его завершения
poster - Указывает картинку, которая будет отображаться, пока видео не воспроизводится
preload - Используется для загрузки видео вместе с загрузкой веб-страницы
#теги #html
Добавляют, воспроизводят, управляют настройками аудиозаписей и видеороликов на веб-странице. Путь к файлу задается через атрибут 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
Что выведет этот код?
for(let i=0; i<10; i++) { setTimeout(function() { alert(i); }, 100); }
for(let i=0; i<10; i++) { setTimeout(function() { alert(i); }, 100); }
Anonymous Quiz
17%
10 раз число 0
33%
Числа от 0 до 10
11%
10 раз число 10
39%
Числа от 0 до 9
Переключение видимости паролей.
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем JavaScript:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - password</title>
</head>
<body>
Пароль: <input type="password" value="Введите пароль" id="Webpassword">
<input type="checkbox" onclick="ShowPass()">Показать пароль
</body>
</html>ШАГ 2
Добавляем JavaScript:
function ShowPass() {
var x = document.getElementById("Webpassword");
if (x.type === "password") {
x.type = "text";
} else {
x.type = "password";
}
} Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Орёл или решка?
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем JavaScript:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - coin</title>
</head>
<body>
<button id="click" type="button">Подбросить монетку</button>
<p>
Выпало: <span id="result"></span>
</p>
</body>
</html>ШАГ 2
Добавляем JavaScript:
document.getElementById('click').onclick = click;
var orel = 0;
var reshka = 0;
function click() {
x = (Math.floor(Math.random() * 2) == 0);
if(x){
flip("Орёл");
}else{
flip("Решка");
}
};
function flip(coin) {
document.getElementById("result").innerHTML = coin;
};Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Как создать новый массив в JavaScript?
Anonymous Quiz
22%
var animals = 'cat', 'dog', 'cow'
59%
var animals = ['cat', 'dog', 'cow']
9%
var animals = 1 = ('cat'), 2 = ('dog'), 3 = ('cow')
9%
var animals = (1:'cat', 2:'dog', 3:'cow')
Chart.js — библиотека JavaScript, которая позволяет быстро и удобно создавать различные графики и диаграммы на сайте, используя Canvas.
#полезныйресурс
#полезныйресурс
Вопрос от подписчика.
Решаем:
Задаем 2 переменные: point и answer. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введенный ответ попадает в переменную answer. Программа сравнивает данный ответ с правильным. Если ответ правильный, то программа пойдет по одной ветке, в противном случае программа пойдет по другой ветке.
Наш код:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
Решаем:
Задаем 2 переменные: point и answer. Функция prompt вызывает окно с вопросом и поле для ввода ответа. Введенный ответ попадает в переменную answer. Программа сравнивает данный ответ с правильным. Если ответ правильный, то программа пойдет по одной ветке, в противном случае программа пойдет по другой ветке.
Наш код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - ВопросОтПодписчика</title>
</head>
<body>
<script>
let point = 0;
let answer = "";
answer = prompt("В каком году был создан язык JavaScript?");
if (answer == "1995"){
alert("Верно");
point++
}else{
alert("Неверно!");
}
answer = prompt("Создатель языка JavaScript?");
if (answer == "Брендан Айк"){
alert("Верно");
point++ }
else{
alert("Неверно!");
}
alert("Вы набрали: " + point + " баллов");
</script>
</body>
</html>Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
Тег <table>
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Синтаксис
Атрибуты
align - Определяет выравнивание таблицы
background - Задает фоновый рисунок в таблице
bgcolor - Цвет фона таблицы
border - Толщина рамки в пикселах
bordercolor - Цвет рамки
cellpadding - Отступ от рамки до содержимого ячейки
cellspacing - Расстояние между ячейками
cols - Число колонок в таблице
frame - Сообщает браузеру, как отображать границы вокруг таблицы
height - Высота таблицы
rules - Сообщает браузеру, где отображать границы между ячейками
summary - Краткое описание таблицы
width - Ширина таблицы
#теги #html
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table> допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>, <tfoot>, <th>, <thead> и <tr>.
Синтаксис
<table>
<tr>
<td>Текст</td>
</tr>
</table>Атрибуты
align - Определяет выравнивание таблицы
background - Задает фоновый рисунок в таблице
bgcolor - Цвет фона таблицы
border - Толщина рамки в пикселах
bordercolor - Цвет рамки
cellpadding - Отступ от рамки до содержимого ячейки
cellspacing - Расстояние между ячейками
cols - Число колонок в таблице
frame - Сообщает браузеру, как отображать границы вокруг таблицы
height - Высота таблицы
rules - Сообщает браузеру, где отображать границы между ячейками
summary - Краткое описание таблицы
width - Ширина таблицы
#теги #html
Добавлять под постами хэштеги? Кликая на них, можно переходить к интересующему посту. Это улучшит навигацию по каналу.
Final Results
93%
Да
7%
Нет
Навигация по каналу.
Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.
#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья
#начинающему
Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.
#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья
#начинающему
CSS Gradient - генератор градиентов
Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+
#css #полезныйресурс
Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+
#css #полезныйресурс
Создаём конвертер длины, в нашем случае из миль в километры.
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем JavaScript:
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - ЛЕГКО
Языки - HTML, JS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebLab - конвертер</title>
</head>
<body>
<h2>Конвертер длины Миль в Километры</h2>
<p>
<label>Миль</label>
<input id="Ml" type="number" placeholder="Миль" oninput="Converter(this.value)" onchange="Converter(this.value)">
</p>
<p>
Километры: <span id="Km"></span>
</p>
</body>
</html>ШАГ 2
Добавляем JavaScript:
<script>
function Converter(Num) {
document.getElementById("Km").innerHTML=Num/0.62137;
}
</script>Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Несколько бесплатных онлайн игр для освоения CSS, преимущественно для новичков.
🧩 Flexbox Froggy
🧩 Flexbox Defense
🧩 Grid Garden
🧩 CSS Diner
Если есть вопросы, писать сюда @WebLabFeedBackBot
#css #игры
🧩 Flexbox Froggy
🧩 Flexbox Defense
🧩 Grid Garden
🧩 CSS Diner
Если есть вопросы, писать сюда @WebLabFeedBackBot
#css #игры
Создаём изображение с прозрачным фоновым текстом.
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
ШАГ 2
Добавляем CSS:
#css #html
Сложность - ЛЕГКО
Языки - HTML, CSS
ШАГ 1
Добавляем HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<img src="WebLab.jpg" alt="Photo" style="width:100%;">
<div class="avatar">
<h1>WebLab</h1>
<p>Подпишись на канал WebLab | Веб-разработка</p>
</div>
</div>
</body>
</html>ШАГ 2
Добавляем CSS:
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Courier New;
font-size: 15px;
}
.container {
position: relative;
max-width: 777px; /* Максимальная ширина */
margin: 0 auto; /* Ставим в центр */
}
.container img {vertical-align: middle;}
.container .avatar {
position: absolute; /* Располагаем фоновый текст */
bottom: 0;
background: rgba(0, 0, 0, 0.5); /* Черный фон с непрозрачностью 0,5 */
color: aqua;
width: 100%;
padding: 20px;
}
</style>#css #html
Web Skills - это набор полезных навыков, которым можно научиться в качестве веб-разработчика. Этот сайт полезен для людей, которые только начали изучать веб-разработку, а также для людей, которые работают в этой области уже много лет и хотят узнать что-то новое.
#полезныйресурс
#полезныйресурс
Embla Carousel - лёгкая библиотека для создания слайдеров-каруселей на JavaScript. Она позволяет создавать отзывчивые и адаптивные, кастомизируемые карусели. Есть большое количество готовых шаблонов.
#css #javascript #html
#css #javascript #html
Реализуем секундомер с использованием JavaScript.
Сложность - СРЕДНЕ
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Сложность - СРЕДНЕ
Языки - HTML, JS
🖥 Читать статью 🖥
Если есть вопросы по коду, писать сюда @WebLabFeedBackBot
#javascript #html
Baba is You – одна из лучших головоломок 2019 года и хороший инструмент для обучения использованию логики и переменных в программировании. Каждое слово соответствует объекту или действию, определяющему свойства уровней. Слова, обозначающие объекты и свойства, можно перемещать для изменения выполняемых объектами действий. Это игра показывает, как замена переменных может повлиять на код.
#игры
#игры
JavaScript. Как сгенерировать случайное число от 1 до 10?
Anonymous Quiz
32%
Math.floor(Math.random(10)+1);
35%
Math.floor(Math.random() * 10) + 1;
14%
Math.random() * 10+1;
19%
Math.random(10)+1;