Scribd
Cargar
59 vistas3 páginas

Ejercicios para Desarrollar HTML

El documento presenta una serie de ejercicios prácticos para aprender HTML, incluyendo la creación de un contador, un formulario para verificar la edad del usuario y una función que muestra alertas basadas en un número ingresado. Cada ejercicio incluye varias opciones de implementación con código HTML y JavaScript. Estos ejercicios están diseñados para ayudar a los principiantes a entender los conceptos básicos de HTML y la interacción con JavaScript.

Cargado por

Marco Surco Prado
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
59 vistas3 páginas

Ejercicios para Desarrollar HTML

El documento presenta una serie de ejercicios prácticos para aprender HTML, incluyendo la creación de un contador, un formulario para verificar la edad del usuario y una función que muestra alertas basadas en un número ingresado. Cada ejercicio incluye varias opciones de implementación con código HTML y JavaScript. Estos ejercicios están diseñados para ayudar a los principiantes a entender los conceptos básicos de HTML y la interacción con JavaScript.

Cargado por

Marco Surco Prado
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd

EJERCICIOS PARA DESARROLLAR HTML

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

Ejercicio 1 .- 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 2 .- 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 3 .- 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>

También podría gustarte