Skip to content

Mini Tutorial HTML

Jump to bottom
Elizabeth Izquierdo edited this page Sep 15, 2025 · 83 revisions

📚 Mini Tutorial de HTML - Lo Esencial

Para estudiantes de bachillerato - Preparación para Java Web (JSP/Servlets)

1. ¿Qué es HTML?

HTML (HyperText Markup Language) es el lenguaje que define la estructura y contenido de las páginas web.

🎯 ¿Por qué es importante para Java Web?

  • Los servlets generan HTML como respuesta
  • JSP combina HTML con código Java
  • Es la base de todas las interfaces web

Estructura básica de HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Primera Página</title>
</head>
<body>
    <h1>¡Hola Mundo!</h1>
    <p>Este es mi primer documento HTML.</p>
</body>
</html>

2. Etiquetas Comunes (Las que más usarás)

Etiqueta Uso Ejemplo
<h1> a <h6> Títulos <h1>Título Principal</h1>
<p> Párrafos <p>Este es un párrafo</p>
<div> Contenedor <div>Agrupa contenido</div>
<span> Texto inline <span>Texto especial</span>
<br> Salto de línea Línea 1<br>Línea 2
<strong> Texto en negrita <strong>Importante</strong>
<em> Texto en cursiva <em>Énfasis</em>

3. Listas y Enlaces

✍️ Listas No Ordenadas

Código:


        <ul>
            <li>HTML básico</li>
            <li>CSS estilos</li>
            <li>JavaScript</li>
            <li>Java Web</li>
        </ul>

Resultado:

  • HTML básico
  • CSS estilos
  • JavaScript
  • Java Web

🔢 Listas Ordenadas

Código:


        <ol>
            <li>Crear archivo HTML</li>
            <li>Escribir el código</li>
            <li>Guardar como .html</li>
            <li>Abrir en navegador</li>
        </ol>

Resultado:

  1. Crear archivo HTML
  2. Escribir el código
  3. Guardar como .html
  4. Abrir en navegador

🔗 Enlaces

Código:


        <a href="https://www.google.com">Ir a Google</a><br>
        <a href="pagina2.html">Ir a otra página</a><br>
        <a href="#inicio">Ir al inicio de esta página</a>

Resultado:

4.🖼️ Imágenes

Código:


        <img src="mi-imagen.jpg" alt="Descripción de la imagen" width="300">
        

        <b>Atributos importantes:</b>
        
- <b>src:</b> Ruta de la imagen
        
- <b>alt:</b> Texto alternativo (importante para accesibilidad)
        
- <b>width</b> y <b>height:</b> Dimensiones

Resultado:

HTML5
---

5. Formularios Básicos (¡Muy Importante para Java Web!)

🚀 Los formularios son CLAVE para:

  • Enviar datos a servlets
  • Procesar información en JSP
  • Crear aplicaciones interactivas

✏️ Campos de Texto

Código:


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8" />
    <title>Ejemplos de Formulario</title>
</head>
<body>
    <h1>Formulario de ejemplo</h1>
    <form action="#" method="get">
        <!-- Texto simple -->
        <label for="usuario">Usuario:</label>
        <input type="text" id="usuario" name="usuario" placeholder="Ingrese su usuario" />
        <br><br>
        <!-- Número con min, max y step -->
        <label for="edad">Edad:</label>
        <input type="number" id="edad" name="edad" min="0" max="120" step="1" />
        <br><br>
        <!-- Password -->
        <label for="clave">Contraseña:</label>
        <input type="password" id="clave" name="clave" required />
        <br><br>
        <!-- Email -->
        <label for="correo">Correo:</label>
        <input type="email" id="correo" name="correo" placeholder="ejemplo@correo.com" />
        <br><br>
        <!-- Fecha -->
        <label for="fecha">Fecha de nacimiento:</label>
        <input type="date" id="fecha" name="fecha" />
        <br><br>
        <!-- Radio -->
        <p>Género:</p>
        <input type="radio" id="masc" name="genero" value="M" />
        <label for="masc">Masculino</label>
        <input type="radio" id="fem" name="genero" value="F" />
        <label for="fem">Femenino</label>
        <br><br>
        <!-- Checkbox -->
        <p>Intereses:</p>
        <input type="checkbox" id="musica" name="interes" value="musica" />
        <label for="musica">Música</label>
        <input type="checkbox" id="deporte" name="interes" value="deporte" />
        <label for="deporte">Deporte</label>
        <br><br>
        <!-- Lista desplegable -->
        <label for="pais">País:</label>
        <select id="pais" name="pais">
            <option value="">Seleccione...</option>
            <option value="UY">Uruguay</option>
            <option value="AR">Argentina</option>
            <option value="BR">Brasil</option>
        </select>
        <br><br>
        <!-- Área de texto -->
        <label for="comentarios">Comentarios:</label><br />
        <textarea id="comentarios" name="comentarios" rows="4" cols="40"></textarea>
        <br><br>
        <!-- Subir archivo -->
        <label for="archivo">Subir archivo:</label>
        <input type="file" id="archivo" name="archivo" />
        <br><br>
        <!-- Botones -->
        <input type="submit" value="Enviar formulario" />
        <input type="reset" value="Borrar todo" />
        <button type="button" onclick="alert('Botón normal presionado')">Botón JS</button>
    </form>
</body>
</html>

Resultado:

Una imagen de ejemplo
------------

Tipos de input más usados:

  • type="text" - Texto normal
  • type="email" - Correo electrónico (con validación)
  • type="password" - Contraseña (oculta el texto)
  • type="number" - Solo números
  • type="date" - Selector de fecha

📝 Área de Texto

Código:

<label for="comentarios">Comentarios:</label>
<textarea id="comentarios" name="comentarios" 
          rows="4" cols="50" 
          placeholder="Escribe tus comentarios aquí...">
</textarea>

📋 Lista Desplegable (Select)

Código:

<label for="pais">País de origen:</label>
<select id="pais" name="pais" required>
    <option value="">Selecciona tu país...</option>
    <option value="mx">México</option>
    <option value="co">Colombia</option>
    <option value="ar">Argentina</option>
    <option value="pe">Perú</option>
    <option value="cl">Chile</option>
</select>

🔘 Radio Buttons (Solo una opción)

Código:

<p>¿Cuál es tu nivel?</p>
<input type="radio" id="principiante" name="nivel" value="principiante">
<label for="principiante">Principiante</label>
<br>

<input type="radio" id="intermedio" name="nivel" value="intermedio">
<label for="intermedio">Intermedio</label>
<br>

<input type="radio" id="avanzado" name="nivel" value="avanzado">
<label for="avanzado">Avanzado</label>

💡 Importante: Todos los radio buttons del mismo grupo deben tener el mismo name.

☑️ Checkboxes (Múltiples opciones)

Código:

<p>¿Qué tecnologías te interesan? (puedes elegir varias)</p>

<input type="checkbox" id="html" name="tecnologias" value="html">
<label for="html">HTML</label>
<br>

<input type="checkbox" id="css" name="tecnologias" value="css">
<label for="css">CSS</label>
<br>

<input type="checkbox" id="javascript" name="tecnologias" value="javascript">
<label for="javascript">JavaScript</label>
<br>

<input type="checkbox" id="java" name="tecnologias" value="java">
<label for="java">Java</label>
<br><br>

<input type="checkbox" id="acepto" name="acepto" required>
<label for="acepto">Acepto los términos y condiciones</label>

🚀 Botones

Código:

<input type="submit" value="Enviar Formulario">
<input type="reset" value="Limpiar Todo">
<button type="button" onclick="alert('¡Hola!')">Botón Personalizado</button>

Tipos de botones:

  • type="submit" - Envía el formulario
  • type="reset" - Limpia todos los campos
  • type="button" - Botón personalizado (necesita JavaScript)

6. Ejemplo Completo de Formulario

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Formulario de Registro</title>
</head>
<body>
    <h1>Registro de Estudiantes</h1>
    
    <form action="ProcesarRegistro" method="post">
        <!-- Datos personales -->
        <h2>Datos Personales</h2>
        
        <label for="nombre">Nombre completo:</label>
        <input type="text" id="nombre" name="nombre" required>
        <br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        
        <label for="edad">Edad:</label>
        <input type="number" id="edad" name="edad" min="15" max="25">
        <br><br>
        
        <!-- Información académica -->
        <h2>Información Académica</h2>
        
        <label for="grado">Grado:</label>
        <select id="grado" name="grado" required>
            <option value="">Selecciona...</option>
            <option value="10">Décimo</option>
            <option value="11">Undécimo</option>
        </select>
        <br><br>
        
        <p>¿Qué modalidad prefieres?</p>
        <input type="radio" id="presencial" name="modalidad" value="presencial">
        <label for="presencial">Presencial</label>
        <br>
        
        <input type="radio" id="virtual" name="modalidad" value="virtual">
        <label for="virtual">Virtual</label>
        <br><br>
        
        <p>¿Qué materias te interesan más?</p>
        <input type="checkbox" id="matematicas" name="materias" value="matematicas">
        <label for="matematicas">Matemáticas</label>
        <br>
        
        <input type="checkbox" id="ciencias" name="materias" value="ciencias">
        <label for="ciencias">Ciencias</label>
        <br>
        
        <input type="checkbox" id="programacion" name="materias" value="programacion">
        <label for="programacion">Programación</label>
        <br><br>
        
        <label for="comentarios">Comentarios adicionales:</label>
        <br>
        <textarea id="comentarios" name="comentarios" 
                  rows="4" cols="50" 
                  placeholder="Cuéntanos algo más sobre ti...">
        </textarea>
        <br><br>
        
        <!-- Términos y botones -->
        <input type="checkbox" id="acepto" name="acepto" required>
        <label for="acepto">Acepto los términos y condiciones</label>
        <br><br>
        
        <input type="submit" value="Registrarme">
        <input type="reset" value="Limpiar Formulario">
    </form>
</body>
</html>

7. Prácticas y Ejercicios

🎯 Ejercicio 1: Mi Primera Página

Crea un archivo mi-pagina.html que contenga:

  • Tu nombre como título principal (<h1>)
  • Un párrafo describiendo tus hobbies
  • Una lista no ordenada con tus materias favoritas
  • Un enlace a tu red social favorita

🎯 Ejercicio 2: Formulario de Contacto

Crea un formulario que incluya:

  • Nombre y apellido (campos obligatorios)
  • Email y teléfono
  • Un select con opciones: "Estudiante", "Profesor", "Padre de familia"
  • Área de texto para el mensaje
  • Checkbox para aceptar términos
  • Botones de enviar y limpiar

🎯 Ejercicio 3: Página con Imágenes

  • Agrega una imagen de tu colegio
  • Crea enlaces de navegación a diferentes secciones
  • Organiza todo con títulos y párrafos
  • Incluye una lista con información del colegio

8. Conexión con Java Web

🔗 Lo que viene después:

  • Servlets: Programas Java que generan este HTML dinámicamente
  • JSP: Páginas HTML que pueden incluir código Java directamente
  • Formularios: Los datos se envían a servlets para procesarse en Java
  • Respuestas: Los servlets devuelven HTML personalizado al navegador

Ejemplo de conexión:

HTML (lo que acabas de aprender):

<form action="/mi-app/ProcesarLogin" method="post">
    <input type="text" name="usuario" placeholder="Usuario">
    <input type="password" name="password" placeholder="Contraseña">
    <input type="submit" value="Iniciar Sesión">
</form>

Java Servlet (lo que verás próximamente):

// El servlet recibe los datos del formulario HTML
String usuario = request.getParameter("usuario");
String password = request.getParameter("password");

// Procesa los datos...
if (validarUsuario(usuario, password)) {
    // Genera HTML de respuesta
    response.getWriter().println("<h1>¡Bienvenido " + usuario + "!</h1>");
}

9. Tips Importantes

✅ Buenas Prácticas:

  • Siempre cierra tus etiquetas: <p>texto</p>
  • Usa comillas en atributos: name="valor"
  • Indenta tu código: facilita la lectura
  • Usa nombres descriptivos: name="nombreCompleto" mejor que name="n"
  • Agrega comentarios: <!-- esto es un comentario -->

🔑 Puntos Clave para Java Web:

Concepto HTML En Java Web
<form action="mi-servlet"> El servlet "mi-servlet" recibe los datos
<input name="usuario"> request.getParameter("usuario") en Java
method="post" Datos seguros para contraseñas
method="get" Datos visibles en la URL

🚨 Errores Comunes:

  • Olvidar cerrar etiquetas
  • No usar name en inputs (Java no los recibirá)
  • Etiquetas mal anidadas: <p><div></p></div> ❌
  • Falta el atributo for en labels

10. ¿Qué Sigue?

Con este HTML básico ya estás listo para entender:

  1. Cómo los Servlets generan HTML dinámicamente
  2. Cómo JSP combina HTML con Java
  3. Cómo procesar formularios en aplicaciones web
  4. Cómo crear interfaces completas para tus proyectos

💡 Recuerda: Este HTML es solo el inicio. En Java Web, todo este contenido puede ser generado dinámicamente por tus servlets y JSPs, lo que hace las aplicaciones realmente poderosas.

¡Ahora estás listo para dar el salto a Java Web! 🚀

Licencia Creative Commons

Prof. Elizabeth Izquierdo con asistencia de Gemini y Claude

🏠 Inicio

PARTE 1 · Introducción

PARTE 2 · Java Web

Tema 1: Manejo básico de Java Web

Tema 2: Modelo Vista Controlador (MVC)

Tema 3: Conexión a Base de Datos

Tema 4: Base de Datos con herencia

Anexos

Clone this wiki locally