Contenido del Curso

HTML Definitivo

1. Comprensión del Desarrollo Web

Bienvenido a HTML y al Desarrollo Web ¿Qué es Internet?¿Cómo Funciona Internet?Comprensión de Cómo Funcionan los Sitios Web Explicación del Desarrollo Frontend y Backend

2. Etiquetas y Atributos HTML

Comprensión de las Etiquetas HTML Trabajando con Atributos HTML Comprensión de las Etiquetas Dobles y Simples en HTML Marcado y Formato de Texto en HTML Desafío: Crea el Primer Párrafo de Tu Página Web Desafío: Crea una Página Web de Presentación Personal Desafío: Diseñar una Página Web de Exhibición de Películas Uso de Enlaces y Botones en HTML Desafío: Crear Enlaces a Sitios Web Populares Validación de Tu Código HTML Según las Mejores Prácticas

3. Estructura del Documento HTML

Los Secretos Detrás de Páginas Web Bien Estructuradas Comprensión de la Estructura del Documento HTML El Papel del Encabezado del Documento Gestión del Flujo y la Disposición del Documento Desafío: Estructura Correctamente un Documento HTML Uso de Herramientas de Desarrollador para Inspección y Depuración de HTML

4. Trabajando con Medios y Tablas

Agregar Imágenes en HTML Desafío: Trabajar con Imágenes Trabajar con Imágenes Clicables, Leyendas y Optimización Comprensión de Gráficos Vectoriales y Rasterizados Incrustación de Audio y Video para Contenido Multimedia Enriquecido Desafío: Incrustar Audio y Video en HTML Creación y Estructuración de Tablas en HTML Desafío: Diseñar una Tabla HTML Funcional

5. Formularios HTML y Entrada de Usuario

Introducción a los Formularios HTML Fundamentos de la Creación de Formularios en HTML Uso de Etiquetas para Mejorar la Accesibilidad de Formularios Mejora de Formularios con Atributos de Entrada Exploración de los Diferentes Tipos de Entrada en HTML Desafío: Crear Formulario con Campos de Entrada y Etiquetas Trabajando con el Elemento Textarea para Entrada de Varias Líneas Uso del elemento select para menús desplegables Uso del elemento datalist para sugerencias de entrada predefinidas Agrupación de Elementos de Formulario para una Mejor Estructura

Desafío: Crear Formulario con Campos de Entrada y Etiquetas

Objetivo

Mejorar la experiencia del usuario en el sitio web creando un formulario interactivo que requiera entradas para nombre, correo electrónico y contraseña, cada una con sus etiquetas asociadas.

Tarea

Incorporar un formulario fácil de usar en el sitio web, mejorando la interacción y el compromiso del usuario. La tarea consiste en:

Para la entrada de nombre: crear un campo de texto que recoja los nombres de los usuarios. Utilizar los atributos correctos para garantizar una experiencia fluida.
1. Definir el type apropiado para la entrada de texto;
2. Establecer el placeholder en John;
3. Asegurar que el campo tenga el foco por defecto.
Para la entrada de correo electrónico: crear un campo de correo electrónico que recoja las direcciones de correo de los usuarios. Garantizar la precisión de los datos utilizando los atributos adecuados.
1. Definir el type correcto para la entrada de correo electrónico;
2. Establecer el placeholder en example@gmail.com;
3. Marcar el campo como obligatorio.
Para la entrada de contraseña: crear un campo de contraseña seguro que proteja los datos del usuario. Utilizar los atributos apropiados para mejorar la protección de los datos.
1. Definir el type correcto para la entrada de contraseña;
2. Hacer que el campo sea obligatorio.

index.html

index.css

autofocus: enfoca automáticamente el campo de entrada cuando la página se carga.
required: marca el campo de entrada como obligatorio, impidiendo el envío del formulario si se deja vacío.
placeholder: proporciona una pista o texto de ejemplo para el campo de entrada.
for e id: asocia una etiqueta con un campo de entrada para mejorar la accesibilidad.
type: especifica el tipo de dato esperado en el campo de entrada (por ejemplo, texto, correo electrónico, contraseña).

index.html

index.css

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6