Skip to content

Mini Tutorial HTML

Jump to bottom
Elizabeth Izquierdo edited this page Jul 20, 2026 · 83 revisions

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 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>.

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 (para datos sensibles o grandes) y get (para búsquedas).

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. <textarea> (Área de Texto)

  • Definición: Es una etiqueta independiente que se usa para crear un campo donde el usuario puede escribir varias líneas de texto. Es ideal para comentarios, mensajes largos o descripciones.

5. <select> (Lista Desplegable)

  • Definición: Se crean usando una combinación de etiquetas:

El define la lista desplegable en sí.

Cada dentro del representa una opción de la lista.

6. Ejemplo Completo de Formulario

Código del formulario

Formulario desplegado

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 la utu
  • Crea enlaces de navegación a diferentes secciones
  • Organiza todo con títulos y párrafos
  • Incluye una lista con información de la utu

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

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

📋 Palabras clave

HTML · etiquetas · formulario · input · method · action · GET · POST · atributo name · estructura HTML · head · body · tabla · lista

← Introducción a la Web · 🏠 Inicio · Introducción a Maven →

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