Tags magicas html.

 

Tags html magicas

tag meter

tag progress

tag datalist

tag sub

beba sumo233

tag abbr

Os livrosForam fundados em 2010.

tag details e sumary.
Tags para programar html total.
Esta tag esconde o html e programa html.

olá tudo ok
----------------------------------------------------------------- 
JUNTAR JS AO HTML CRIANDO ANIME

--------------------------------------



  Barra de Progresso


  
Tag progress

  
  

  


<html>
<meta charset="utf-8">
<style>
pre{
color:blue;
}
</style>
<pre>
<strong>Tags html magicas</strong>
</pre>
<div>
<h1>tag meter</h1>
<label for="meter">meter</label>
<meter id="meter"min="0"max="100"value="70"></meter>
</div>
<div>
<h1>tag progress</h1>
<label for="progress">progress</label>
<progress id="progress"min="0"max="100"value="90"></progress>
</div>
<div>
<h1>tag datalist</h1>
<label for="browser">escreva suas palavras favoritas</label>
<input list="browsers"name="browser"id="browser">
<datalist id="browsers">
<option value="magia">
<option value="Deus">
<option value="Jesus">
<option value="Maria">
<option value="universo">
<option value="Anjos">
</datalist>
</div>
<div>
<h1>tag sub</h1>
<p>beba sumo<sub>23</sub>3</p>
</div>
<div>
<h1>tag abbr</h1>
<p>Os <abbr title="Livros mcegonha">livros</abbr>Foram fundados em 2010.</p>
</div>
<div>
<h1>tag details e sumary.<br>Tags para programar html total.<br>Esta tag esconde o html e programa html.</h1>
<details>
<summary>olá tudo ok</summary>
<img src="https://media.tenor.com/AsBXL3IygdYAAAAC/heavenly-light.gif"width="50%"height="30%">

</details>
</div>
<div>
<h1>Código html mágico</h1>
<a href="https://trinket.io/html/bb9b14ead9">HTML MAGICO</a><br>
<a href="https://manysoft.com.br/wp-content/uploads/2019/04/Tags_para_HTML5.pdf">LISTA DE TAGS HTML COMPLETA</a><br>
<a href="https://docente.ifsc.edu.br/vilson.junior/pi/04_Introducao_JavaScript.pdf">ADICIONANDO JS AO HTML</a>
</div>

 
 
</body>
</html>
-----------------------------------------------------------------
<pre>
<strong>JUNTAR JS AO HTML CRIANDO ANIME</strong>
<pre>
--------------------------------------
<!DOCTYPE html>
<html>
<head>
  <title>Barra de Progresso</title>
</head>
<body>
  <h1>Tag progress</h1>
  <label for="progress">Progresso</label>
  <progress id="progress" min="0" max="100" value="0"></progress>

  <script>
    // Função para fazer a barra de progresso progredir
    function incrementarProgresso() {
      let progressBar = document.getElementById('progress');
      let valorAtual = progressBar.value;

      // Aumentar o valor atual da barra de progresso em 10
      if (valorAtual < progressBar.max) {
        progressBar.value = parseInt(valorAtual) + 10;
      }
    }

    // Chamando a função após um intervalo de tempo usando setTimeout
    setTimeout(incrementarProgresso, 1000); // Chamando a função após 1 segundo (1000 milissegundos)
  </script>

</body>
</html>
-------------------------------------------



 Piscar Datalist
 


 
Tag datalist

 
 
 
 





<!DOCTYPE html>
<html>
<head>
 <title>Piscar Datalist</title>
 <style>
 #browserBlink {
 animation: piscar 1s infinite;
 }
 @keyframes piscar {
 0% { opacity: 1.0; }
 50% { opacity: 0.5; }
 100% { opacity: 1.0; }
 }
 </style>
</head>
<body>
 <h1>Tag datalist</h1>
 <label for="browser">Escreva suas palavras favoritas:</label>
 <input list="browsers" name="browser" id="browserBlink">
 <datalist id="browsers">
 <option value="magia">
 <option value="Deus">
 <option value="Jesus">
 <option value="Maria">
 <option value="universo">
 <option value="Anjos">
 </datalist>

<script>
 function piscarInput() {
 let inputField = document.getElementById('browserBlink');
 inputField.style.animation = 'piscar 1s infinite'; // Aplicando a animação de piscar
 }
 // Chama a função para iniciar o piscar da caixa de seleção
 piscarInput();
 </script>

</body>
</html>

----------------------------------
enviar mail link direto a qualquer mail
<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Divulgar o meu site no mundo.</title>
</head>
<body>
 <h1>Divulgar o meu site no mundo.</h1>
 <div>
 <h2>Link do meu site.</h2>
 <a href="https://livrosaartedoespirito.blogspot.com/">Divulgar o meu site</a>
 </div>

<script>
 function enviarPorEmail() {
 let assunto = "Confira este site incrível!";
 let corpo = "Olá! Acabei de descobrir este site incrível e queria compartilhar com você: https://livrosaartedoespirito.blogspot.com/";
 window.location.href = "mailto:contato@presidencia.gob.sv?subject=" + assunto + "&body=" + corpo;
 }
</script>

<button onclick="enviarPorEmail()">Enviar por E-mail</button>

</body>
</html>

Comentários

Enviar um comentário

Mensagens populares deste blogue

Maria return javaScript!

Imagem
 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> h1{  color:#D2691E; } h2{ color:#DC143C; background-color:#FFB6C1; } pre{ color:#0000CD; background-color:black; font-size:16px; } </style> </head> <body> <h1>Como usar return javascript. Imaginação! REALIDADE.</h1> <p id="demo"></p> <p id="demo1"></p> <script> function criarVariados(){   return ['Você é linda.', 'Quantos anos você tem?', 23*2, 'Você tem 46 anos'   ]; } var valores = criarVariados(); document.getElementById('demo').innerHTML = valores.join('<br>'); function personagem(){  return'<h2>Criar personagem</h2><pre>Eu sou a Maria do javascript.<br><br>Vou criar um verso para VC.<br>Que seja em chegar,<br>amor em verdade de amar. Em condição,<br>ser espírito.<br>Amando com o coração.<br>Amo...
Ler mais