HTML5 Course for a JavaScript

HTML Tutorial - JavaScript Developer - Part 1

1. Configuración

Para empezar a desarrollar, se recomienda lo siguiente:

Editor: Visual Studio Code
Navegador: Google Chrome o Firefox
Archivos: Crear una carpeta de proyecto y, dentro, archivos con la extensión .html

2. Anatomía de HTML: Etiquetas y Contenedores

El lenguaje funciona mediante etiquetas (tags) que suelen envolver contenido

Atajos: En VS Code, puedes escribir el nombre de una etiqueta y presionar Tab para que se cree automáticamente la apertura y el cierre

Tipos de Etiquetas

Contenedores: Tienen una etiqueta de apertura (<tag>) y una de cierre (</tag>). Pueden albergar texto u otras etiquetas en su interior.
Etiquetas de Vacío (Void Tags): No tienen cierre y no contienen nada. Ejemplos: <br> (salto de línea) e <img> (imagen).

Pasted image 20260422122421.png

Estructura Básica Obligatoria

<html>: El envoltorio principal de todo el sitio
<head>: Contiene metadatos, estilos y scripts y no es visible para el usuario
<body>: Contiene todo lo que se ve en la página

Pasted image 20260422115630.png

3. Atributos: Configurando los Elementos

Los atributos se añaden en la etiqueta de apertura y siguen el formato nombre="valor".

ID: Identificador único para un elemento
Class: Permite agrupar elementos bajo un mismo nombre para darles estilo o seleccionarlos
SRC: Indica la ruta de una imagen
HREF: Indica el destino de un enlace (<a>)
Lang: Define el idioma del contenido

4. Headings

Encabezados: Van desde <h1> (más grande/importante) hasta <h6>.
Párrafos: Etiqueta <p>
Formato de texto:
- <b> o <strong> para negritas
- <i> o <em> para cursiva
  
  Resulatdo:

5. Divisiones

<div>: Un contenedor genérico invisible usado para organizar el código.
<section>: Un contenedor de HTML5 similar al div pero con mayor carga semántica.

Bloque (Block-level): Elementos como <div> o <section> que empujan el contenido siguiente a una nueva línea.

6. Relación Jerárquica

Padres e Hijos: Un elemento dentro de otro es su "hijo". Un hijo directo es aquel que no está envuelto por etiquetas intermedias dentro del padre.

7. Imágenes e Hipervínculos

Imágenes (<img>): Requieren el atributo src. Las rutas pueden ser relativas (archivos en la misma carpeta o subcarpetas usando /) o absolutas (URL completa)

URL completa
Enlaces (<a>): Usan el atributo href. Para que se abran en una pestaña nueva, se usa el atributo target="_blank"

8. Absolute paths

Los elementos <input> son versátiles gracias al atributo type:

Tipos comunes: text, email, tel, number, password, date y color
Etiquetas (<label>): Se usan para poner nombres descriptivos junto a los inputs

9. El DOM y JavaScript

El DOM (Document Object Model) es la representación jerárquica del HTML que JavaScript puede manipular mediante el objeto document.

Inspeccionando el Html

Es una función integrada en la mayoría de los navegadores (como Chrome, Firefox, Safari y Edge) que permite ver y editar el código HTML y CSS de una página web en tiempo real. Y se da con el click derecho del raton i darle a inspeccionar elemento.

Pasted image 20260422122333.png

Multiple elements

La herramienta "Inspeccionar" permite seleccionar y trabajar con varios elementos HTML al
mismo tiempo, lo que es especialmente útil para realizar cambios masivos en una página web.

Métodos de Selección en JS

Método	Uso
`getElementById('id')`	Busca un único elemento por su ID
`getElementsByClassName('clase')`	Devuelve una colección de elementos con esa clase
`querySelector('.clase' o '#id')`	Devuelve el primer elemento que coincida con la sintaxis CSS
`querySelectorAll('tag')`	Devuelve una lista de todos los elementos que coincidan

Cambio Programático

Desde la consola o un script, puedes cambiar atributos en tiempo real:

Cambiar tipo: input.type = "color".
Cambiar imagen: img.src = "nuevo.jpg".
Cambiar enlaces: link.href = "https://google.com".
Para cambiar la clase de un elemento, se debe usar .className en JavaScript en lugar de .class.