Mini Tutorial HTML

📚 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: Crear archivo HTML Escribir el código Guardar como .html 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: Ir a Google Ir a otra página Ir al inicio de esta página

---

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:

---

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

Los formularios en HTML se usan para recopilar información del usuario. Son esenciales para páginas que necesitan interacción, como formularios de contacto, registros de usuario o campos de búsqueda. Se definen con la etiqueta <form>.

Código:

<form action="/procesar-formulario" method="post">
  Cuerpo del formulario
</form>

Elementos más comunes:

1. <form>

• Definición: El contenedor principal del formulario. Todo lo que esté dentro de esta etiqueta será considerado parte del formulario.
• Atributos importantes:
  • action: La URL a la que se enviará la información del formulario.
  • method: El método HTTP para enviar los datos, siendo los más comunes post y get.

2. <input>

• Definición: El elemento más versátil, usado para crear diferentes tipos de campos de entrada. El tipo de campo se especifica con el atributo type.
• Tipos comunes de type:
  • text: Para texto de una sola línea.
  • number: Solo números
  • date: Selector de fecha
  • email: Para correos electrónicos.
  • password: Oculta los caracteres al escribir.
  • radio: Para opciones excluyentes.
  • checkbox: Para opciones múltiples.
  • submit: Crea un botón para enviar el formulario.

3. <label>

• Definición: Asocia un texto descriptivo con un campo de entrada.
• Atributo importante:
  • for: Debe tener el mismo valor que el atributo id del campo <input> al que se asocia. Esto mejora la accesibilidad.

4. <button>

• Definición: Crea un botón interactivo. Se usa a menudo para el envío del formulario. A diferencia de <input type="submit">, un <button> puede contener otros elementos como imágenes o texto con formato.

Otros elementos de los formularios:

📝 Á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! 🚀