Guia HTML JavaScript
Cargado por
infinityflowerofloveGuia HTML JavaScript
Cargado por
infinityfloweroflove1.
Introducción a HTML
HTML (HyperText Markup Language) es el lenguaje utilizado para estructurar páginas web.
Conceptos básicos de HTML
Estructura básica de una página web:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<h1>¡Hola, mundo!</h1>
<p>Este es un párrafo en HTML.</p>
</body>
</html>
Etiquetas importantes:
o <h1> a <h6> → Títulos
o <p> → Párrafos
o <a href="URL"> → Enlaces
o <img src="imagen.jpg"> → Imágenes
o <ul> y <ol> → Listas
o <table> → Tablas
2. Introducción a CSS (Opcional, pero útil)
CSS (Cascading Style Sheets) se usa para dar estilo a HTML. Ejemplo:
html
CopiarEditar
<style>
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: red;
}
</style>
3. Introducción a JavaScript
JavaScript hace que las páginas web sean más dinámicas e interactiva
Los usos comunes de JavaScript son la manipulación de imágenes, la validación de formularios y los cambios
dinámicos de contenido.
Para seleccionar un elemento HTML, JavaScript suele utilizar el document.getElementById()método.
Este ejemplo de JavaScript escribe "¡Hola JavaScript!" en un elemento HTML con id="demo":
JavaScript puede cambiar estilos
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
document.getElementById("image").src = "picture.gif";
Etiqueta HTML <noscript>
La etiqueta HTML <noscript>define un contenido alternativo que se mostrará a los usuarios que tienen scripts
deshabilitados en su navegador o tienen un navegador que no admite scripts:
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript> Lo sentimos, tu navegador no soporta JavaScript!</noscript>
<html> <body> <h1> IF ELSE JavaScript</h1>
<p>Aquí, un JavaScript cambia el valor del atributo src (fuente) de una imagen.</p>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "pic_bulboff.gif"
} else {
pic = "pic_bulbon.gif"
}
document.getElementById('myImage').src = pic;
</script>
<img id="myImage" src="pic_bulboff.gif" width="100" height="180">
<p>
<button type="button" onclick="light(1)">Encender Bombillo - Light On</button>
<button type="button" onclick="light(0)">Apagar Bombillo - Light Off</button>
</p> </body> </html>
Conceptos básicos de JavaScript
Cómo agregar JavaScript a HTML:
html
CopiarEditar
<script>
alert("¡Hola, bienvenido a mi página!");
</script>
Variables:
js
CopiarEditar
let nombre = "Juan";
console.log(nombre);
Funciones:
js
CopiarEditar
function saludar() {
alert("¡Hola, estudiante de noveno grado!");
}
saludar();
Eventos:
html
CopiarEditar
<button onclick="saludar()">Haz clic</button>
4. Proyecto simple
Un formulario en HTML con JavaScript para mostrar un mensaje:
html
CopiarEditar
<!DOCTYPE html>
<html>
<head>
<title>Formulario con JS</title>
</head>
<body>
<h2>Ingresa tu nombre</h2>
<input type="text" id="nombre">
<button onclick="mostrarNombre()">Enviar</button>
<p id="mensaje"></p>
<script>
function mostrarNombre() {
let nombre = document.getElementById("nombre").value;
document.getElementById("mensaje").innerText = "Hola, " + nombre + "!";
}
</script>
</body>
</html>
