20 EJERCICIOS BÁSICOS DE HTML #2

Ejercicios de HTML, aprende los conceptos básicos de HTML con esta segunda serie de ejercicios resueltos.




  • Ejercicio 21 .- Crea un contador que va aumentando de uno en uno al presionar un botón.
Opción 1.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="contador" value="0" disabled>
  <button onclick="incrementar()">Incrementar</button>

  <script>
    function incrementar() 
	{
      const contador = document.getElementById("contador");
      contador.value++;
    }
  </script>
</body>
</html>

Opción 2.
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
</head>
<body>
  <input type="button" value="Incrementar" onclick="incrementar()">

  <script>
    var contador = 0;

    function incrementar() 
	{
      contador++;
      document.querySelector("input").value = contador;
    }
  </script>
</body>
</html>

Opción 3.
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
</head>
<body>
  <div id="contador"></div>
  <button onclick="incrementar()">Incrementar</button>

  <script>
    var contador = 0;

    function incrementar() 
	{
      contador++;
      document.getElementById("contador").innerHTML = contador;
    }
  </script>
</body>
</html>
  • Ejercicio 22 .- Crea un formulario que permita al usuario ingresar su nombre y edad. Si el usuario tiene más de 18 años, muestra un mensaje de "Mayor de edad". Si el usuario tiene menos de 18 años, muestra un mensaje de "Menor de edad".
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="text" placeholder="Nombre" id="nombre">
  <input type="number" placeholder="Edad" id="edad">
  <button onclick="holamundoxd()">Enviar</button>

  <script>
    function holamundoxd() 
	{
      const  nombre = document.getElementById("nombre").value;
      const  edad = document.getElementById("edad").value;

      if (edad >= 18) 
	  {
        alert(nombre + " es mayor de edad");
      } 
	  else 
	  {
        alert(nombre + " es menor de edad");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 23 .- Crea una función que muestre una alerta si el número ingresado es mayor que 10 o menor que 10.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="cajanumero" value="0">
  <button onclick="mostrarAlerta()">Verificar</button>

  <script>
    function mostrarAlerta() 
	{
      const input = document.getElementById("cajanumero");
      if (input.value > 10) 
	  {
        alert("El valor es mayor que 10");
      }
	  else if (input.value < 10) 
	  {
	    alert("El valor es menor que 10");
	  }
    }
  </script>
</body>
</html>
  • Ejercicio 24 .- Crea una función que muestre una alerta si el número ingresado por el usuario es par o impar.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="numero" placeholder="Número" >
  <button onclick="comprobarNumero()">Comprobar número</button>

  <script>
    function comprobarNumero() {
      const numero = document.getElementById("numero").value;

      if (numero % 2 === 0) 
	  {
        alert("Es un número par");
      } 
	  else 
	  {
        alert("Es un número impar");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 25 .- Crea una función que muestre una ventana de alerta con el mensaje "Es un día laboral" si el día de la semana ingresado por el usuario es lunes, martes, miércoles, jueves o viernes, o el mensaje "Es un día festivo" si el día de la semana ingresado por el usuario es sábado o domingo.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="text" id="dia" placeholder="Día de la semana">
  <button onclick="comprobarDia()">Comprobar día</button>

  <script>
    function comprobarDia() 
	{
      const dia = document.getElementById("dia").value;

      switch (dia) 
	  {
        case "lunes":
        case "martes":
        case "miércoles":
        case "jueves":
		case "viernes":
          alert("Es un día laboral");
          break;
        case "sábado":
        case "domingo":
          alert("Es un día festivo");
          break;
        default:
          alert("El día ingresado no es válido");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 26 .- Crea una función que muestre una ventana de alerta si el número ingresado por el usuario es primo o no.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="numero" placeholder="Número">
  <button onclick="comprobarPrimo()">Comprobar primo</button>

  <script>
    function comprobarPrimo() 
	{
      const numero = document.getElementById("numero").value;

      if (numero <= 1) 
	  {
        alert("No es un número primo");
        return;
      }

      for (let i = 2; i <= Math.sqrt(numero); i++) 
	  {
        if (numero % i === 0) 
		{
          alert("No es un número primo");
          return;
        }
      }

      alert("Es un número primo");
    }
  </script>
</body>
</html>
  • Ejercicio 27 .- Crea una página web con un botón que, al hacer clic, cambie el color de fondo de la página.
<!DOCTYPE html>
<html>
<head>
  <script>
    function cambiarColor() 
	{
      document.body.style.backgroundColor = "red";
    }
  </script>
</head>
<body>
  <button onclick="cambiarColor()">Cambiar Color</button>
</body>
</html>
  • Ejercicio 28 .- Crea una página web con un formulario que incluya campos de texto para ingresar el nombre y apellido de una persona. Luego, muestra los resultados ingresados en la página.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <script>
    function mostrarResultado() 
	{
      var nombre = document.getElementById("nombre").value;
      var apellido = document.getElementById("apellido").value;
      document.getElementById("resultado").innerHTML = "Nombre: " + nombre + "<br>Apellido: " + apellido;
    }
  </script>
</head>
<body>
  <form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <label for="apellido">Apellido:</label>
    <input type="text" id="apellido" name="apellido">
    <input type="button" value="Mostrar Resultado" onclick="mostrarResultado()">
  </form>
  <div id="resultado"></div>
</body>
</html>
  • Ejercicio 29 .- Crea una página web con un botón que, al hacer clic, muestre un mensaje de alerta con el texto "Hola Mundo".
<!DOCTYPE html>
<html>
<head>
  <script>
    function mostrarAlerta() 
	{
      alert("Hola Mundo");
    }
  </script>
</head>
<body>
  <button onclick="mostrarAlerta()">Mostrar alerta</button>
</body>
</html>
  • Ejercicio 30 .- Crea una página web con un formulario que incluya campos de texto para ingresar la altura y peso de una persona. Luego, muestra el índice de masa corporal (IMC) en la página.
<!DOCTYPE html>
<html>
<head>
  <script>
    function calcularIMC() 
	{
      var altura = document.getElementById("altura").value;
      var peso = document.getElementById("peso").value;
      var imc = peso / (altura * altura);
      document.getElementById("resultado").innerHTML = "Tu IMC es: " + imc.toFixed(2);
    }
  </script>
</head>
<body>
  <form>
    <label for="altura">Altura (m):</label>
    <input type="number" id="altura" name="altura">
    <label for="peso">Peso (kg):</label>
    <input type="number" id="peso" name="peso">
    <input type="button" value="Calcular IMC" onclick="calcularIMC()">
  </form>
  <div id="resultado"></div>
</body>
</html>
  • Ejercicio 31 .- Crea una página web con un botón que, al hacer clic, muestre un mensaje de confirmación con el texto "¿Estás seguro de que deseas continuar?". Si el usuario hace clic en "Aceptar", muestra un mensaje de alerta con el texto "Continuando...". Si el usuario hace clic en "Cancelar", muestra un mensaje de alerta con el texto "Cancelando...".
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
  <script>
    function mostrarConfirmacion() 
	{
      var respuesta = confirm("¿Estás seguro de que deseas continuar?");
      if (respuesta == true) 
	  {
        alert("Continuando...");
      } 
	  else 
	  {
        alert("Cancelando...");
      }
    }
  </script>
</head>
<body>
  <button onclick="mostrarConfirmacion()">Mostrar Confirmación</button>
</body>
</html>
  • Ejercicio 32 .- Crea una página web con un formulario que incluya un campo de texto para ingresar un número. Al presionar "Enter" en el campo de texto, muestra el doble del número ingresado.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
  <script>
    function mostrarDoble(event) 
	{
      if (event.keyCode === 13) 
	  {
        var numero = document.getElementById("numero").value;
        document.getElementById("resultado").innerHTML = "El doble es: " + (numero * 2);
      }
    }
  </script>
</head>
<body>
  <input type="number" id="numero" onkeypress="mostrarDoble(event)">
  <p id="resultado"></p>
</body>
</html>
  • Ejercicio 33 .- Crea una página web con una lista de elementos. Al hacer clic en un elemento de la lista, cambia su estilo de fuente a negrita.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script>
    function cambiarEstilo(elemento) 
	{
      elemento.style.fontWeight = "bold";
    }
  </script>
</head>
<body>
  <ul>
    <li onclick="cambiarEstilo(this)">Elemento 1</li>
    <li onclick="cambiarEstilo(this)">Elemento 2</li>
    <li onclick="cambiarEstilo(this)">Elemento 3</li>
  </ul>
</body>
</html>
  • Ejercicio 34 .- Crea una página web con un botón que, al hacer clic, genere un número aleatorio entre 1 y 100 y lo muestre en la página.
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
  <script>
    function generarNumeroAleatorio() 
	{
      var numero = Math.floor(Math.random() * 100) + 1;
      document.getElementById("numeroAleatorio").innerHTML = "Número Aleatorio: " + numero;
    }
  </script>
</head>
<body>
  <button onclick="generarNumeroAleatorio()">Generar número aleatorio</button>
  <p id="numeroAleatorio"></p>
</body>
</html>
  • Ejercicio 35 .- Crea una página web con un formulario que incluya un campo de texto para ingresar una palabra. Al hacer clic en un botón, muestra la longitud de la palabra ingresada.
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
  <script>
    function mostrarLongitud() 
	{
      var palabra = document.getElementById("palabra").value;
      document.getElementById("longitud").innerHTML = "Longitud de la palabra: " + palabra.length;
    }
  </script>
</head>
<body>
  <input type="text" id="palabra">
  <button onclick="mostrarLongitud()">Mostrar Longitud</button>
  <p id="longitud"></p>
</body>
</html>
  • Ejercicio 36 .- Crea una página que muestre una alerta con un mensaje si el año ingresado por el usuario es bisiesto o no.
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="year">
  <button onclick="comprobaryear()">Comprobar año</button>

  <script>
    function comprobaryear() 
	{
      const year = document.getElementById("year").value;

      if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) 
	  {
        alert("Es un año bisiesto");
      } 
	  else 
	  {
        alert("No es un año bisiesto");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 37 .- Crea una página que muestre una ventana de alerta con el mensaje "El número es positivo" si el número ingresado por el usuario es mayor o igual a cero, caso contrario mostrará el mensaje "El número es negativo"
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="numero" placeholder="Número">
  <button onclick="comprobarnumero()">Comprobar número</button>

  <script>
    function comprobarnumero() 
	{
      const numero = document.getElementById("numero").value;

      if (numero >= 0) 
	  {
        alert("El "+ numero +" es positivo");
      } 
	  else 
	  {
        alert("El "+ numero +" es negativo");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 38 .- Crea una función que muestre en una alerta si el número ingresado por el usuario es divisible por 3. 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="numero" placeholder="Número">
  <button onclick="comprobarNumero()">Comprobar número</button>

  <script>
    function comprobarNumero() 
	{
      const numero = document.getElementById("numero").value;

      if (numero % 3 === 0) 
	  {
        alert("El número "+ numero +" es divisible por 3");
      } 
	  else 
	  {
        alert("El número "+ numero +" no es divisible por 3");
      }
    }
  </script>
</body>
</html>
  • Ejercicio 39 .- Crea una página que calcule el salario neto de un trabajador según su pago mensual y la cantidad de hijos que tiene. El salario neto se calcula de la siguiente manera:
  1. Si el trabajador tiene 0 hijos, el salario neto es igual al salario mensual.
  2. Si el trabajador tiene 1 o 2 hijos, el salario neto es igual al salario mensual con un 10% de descuento.
  3. Si el trabajador tiene 3 o más hijos, el salario neto es igual al salario mensual con un 20% de descuento.
        <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="number" id="pago" placeholder="Pago mensual">
  <input type="number" id="hijos" placeholder="Cantidad de hijos">
  <button onclick="calcularSalarioNeto()">Calcular salario neto</button>

  <script>
    function calcularSalarioNeto() 
	{
      const pago = document.getElementById("pago").value;
      const hijos = document.getElementById("hijos").value;

      let salarioNeto;

      if (hijos === 0) 
	  {
        salarioNeto = pago;
      } 
	  else if (hijos <= 2) 
	  {
        salarioNeto = pago - (pago * 0.1);
      } 
	  else 
	  {
        salarioNeto = pago - (pago * 0.2);
      }

      alert("El salario neto es " + salarioNeto);
    }
  </script>
</body>
</html>
        • Ejercicio 40 .- Crea una página que calcule el precio de un producto según su tipo y cantidad. El precio del producto se calcula de la siguiente manera:
        1. Si el producto es un libro, el precio es de 30 soles por unidad.
        2. Si el producto es un CD, el precio es de 5 soles por unidad.
        3. Si el producto es un DVD, el precio es de 10 soles por unidad.
        <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
  <input type="text" id="tipo" placeholder="Tipo de producto">
  <input type="number" id="cantidad" placeholder="Cantidad">
  <button onclick="calcularPrecio()">Calcular precio</button>

  <script>
    function calcularPrecio() 
	{
      const tipo = document.getElementById("tipo").value;
      const cantidad = document.getElementById("cantidad").value;

      let precio;

      switch (tipo) 
	  {
        case "libro":
          precio = 30 * cantidad;
          break;
        case "cd":
          precio = 5 * cantidad;
          break;
        case "dvd":
          precio = 10 * cantidad;
          break;
        default:
          alert("El tipo de producto ingresado no es válido");
          return;
      }

      alert("El precio es de " + precio + " soles");
    }
  </script>
</body>
</html>

        Excelente.



        El archivo es una carpeta con los 20 ejercicios.
        • Nombre: 20EjerciciosHTML2.rar
        • Tamaño: 8 KB

         Descargar 

        Fecha:
        Etiquetas: , , ,