Web Lab | Программирование

CSS. Как убрать подчеркивание у гиперссылки?

Anonymous Quiz

25%

a { underline:none; }

a { decoration:not-underline; }

19%

a { text-decoration:not-underline; }

54%

a { text-decoration:none; }

155 voters1.5K views19:00

Web Lab | Программирование

Теги <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

1.1K viewsedited 16:30

Web Lab | Программирование

Что выведет этот код?

for(let i=0; i<10; i++) { setTimeout(function() { alert(i); }, 100); }

Anonymous Quiz

171 voters876 views16:02

Web Lab | Программирование

Переключение видимости паролей.

Сложность - ЛЕГКО
Языки - 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

978 viewsedited 17:20

Web Lab | Программирование

Орёл или решка?

Сложность - ЛЕГКО
Языки - 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

1.1K viewsedited 12:55

Web Lab | Программирование

Как создать новый массив в JavaScript?

Anonymous Quiz

22%

var animals = 'cat', 'dog', 'cow'

59%

var animals = ['cat', 'dog', 'cow']

var animals = 1 = ('cat'), 2 = ('dog'), 3 = ('cow')

var animals = (1:'cat', 2:'dog', 3:'cow')

158 voters1.0K views11:51

Web Lab | Программирование

Chart.js — библиотека JavaScript, которая позволяет быстро и удобно создавать различные графики и диаграммы на сайте, используя Canvas.

#полезныйресурс

1.1K viewsedited 20:15

Web Lab | Программирование

Вопрос от подписчика.

Решаем:

Задаем 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

1.7K views16:00

Web Lab | Программирование

Тег <table>

Элемент <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

2.5K viewsedited 15:40

Web Lab | Программирование

Добавлять под постами хэштеги? Кликая на них, можно переходить к интересующему посту. Это улучшит навигацию по каналу.

Final Results

93%

Да

Нет

44 voters3.3K views11:30

Web Lab | Программирование

Навигация по каналу.

Кликай по хэштегу, чтобы перейти к посту, который опубликован на канале с данным хэштегом.

#javascript
#css
#html
#игры
#теги
#полезныйресурс
#учись
#python
#измираIT
#сниппет
#курсы
#книга
#шпаргалки
#ии
#статья
#начинающему

3.8K viewsedited 20:25

Web Lab | Программирование

CSS Gradient - генератор градиентов

Бесплатный инструмент, который позволяет создавать градиентный фон. Помимо этого, он включает в себя необходимые настройки: тип, количество переходов, их позиции, HEX/RGBA кодировки цветов, угол наклона и прозрачность. Результат отображается ниже в виде CSS стилей градиента. Так же имеется совместимость с IE6+

#css #полезныйресурс

3.3K views16:20

Web Lab | Программирование

Создаём конвертер длины, в нашем случае из миль в километры.

Сложность - ЛЕГКО
Языки - 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

1.7K views21:30

Web Lab | Программирование

Несколько бесплатных онлайн игр для освоения CSS, преимущественно для новичков.

🧩 Flexbox Froggy

🧩 Flexbox Defense

🧩 Grid Garden

🧩 CSS Diner

Если есть вопросы, писать сюда @WebLabFeedBackBot

#css #игры

1.5K views14:30

Web Lab | Программирование

Создаём изображение с прозрачным фоновым текстом.

Сложность - ЛЕГКО
Языки - 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

1.4K views15:20

Web Lab | Программирование

Web Skills - это набор полезных навыков, которым можно научиться в качестве веб-разработчика. Этот сайт полезен для людей, которые только начали изучать веб-разработку, а также для людей, которые работают в этой области уже много лет и хотят узнать что-то новое.

#полезныйресурс

1.5K views17:10

Web Lab | Программирование

Embla Carousel - лёгкая библиотека для создания слайдеров-каруселей на JavaScript. Она позволяет создавать отзывчивые и адаптивные, кастомизируемые карусели. Есть большое количество готовых шаблонов.

#css #javascript #html

1.4K views17:10

Web Lab | Программирование

Реализуем секундомер с использованием JavaScript.

Сложность - СРЕДНЕ
Языки - HTML, JS

🖥 Читать статью 🖥

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#javascript #html

1.3K views12:15

Web Lab | Программирование

Baba is You – одна из лучших головоломок 2019 года и хороший инструмент для обучения использованию логики и переменных в программировании. Каждое слово соответствует объекту или действию, определяющему свойства уровней. Слова, обозначающие объекты и свойства, можно перемещать для изменения выполняемых объектами действий. Это игра показывает, как замена переменных может повлиять на код.

#игры

2.0K views12:30

Web Lab | Программирование

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;

228 voters1.9K views10:59

Web Lab | Программирование

Создаём русскую матрицу.

Сложность - ЛЕГКО
Языки - HTML, JS, CSS

🖥 Читать статью 🖥

Если есть вопросы по коду, писать сюда @WebLabFeedBackBot

#html #javascript #css

1.4K views11:00

About

Blog

Apps

Platform