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

Trabajar con Imágenes Clicables, Leyendas y Optimización

Imágenes clicables

Imágenes clicables son imágenes en una página web que pueden ser pulsadas, generalmente para navegar a otra página web o realizar otras acciones. Por lo general, este enfoque es necesario al trabajar con tiendas en línea. Los usuarios están acostumbrados a pulsar sobre una imagen y obtener una tarjeta con la descripción completa del producto y el precio.

Para hacer que una imagen sea clicable, puedes envolver la etiqueta <img> dentro de una etiqueta <a>. Por ejemplo:

En este ejemplo, la etiqueta <a> especifica la URL a la que se enlaza en el atributo href, y la etiqueta <img/> especifica la imagen que se muestra. Cuando el usuario pulsa sobre la imagen, el navegador navegará a la URL especificada en el atributo href.

Pie de imagen

Puedes utilizar los elementos HTML figure y figcaption para asociar un pie de imagen a una imagen en una página web. Aquí tienes un ejemplo:

index.html

figure: el elemento contiene tanto los elementos figcaption como img;
figcaption: especifica el texto del pie de foto, visible para los usuarios;
img: especifica la imagen que se mostrará.

Optimización de imágenes

Esto es importante para las páginas web, donde los archivos de imagen grandes pueden ralentizar los tiempos de carga y hacer que el sitio web se sienta lento. Siguiendo los siguientes consejos, se puede mejorar el rendimiento general y la accesibilidad del sitio web.

Redimensionar las imágenes al tamaño adecuado. Redimensionar las imágenes al tamaño en que se mostrarán en la página web en lugar de subir imágenes grandes y redimensionarlas usando HTML o CSS;
Utilizar formatos de archivo apropiados. Generalmente, JPEG se usa para fotografías, PNG para gráficos e imágenes con transparencia. Evitar archivos BMP o TIFF de mayor tamaño;
Comprimir las imágenes. Existen muchas herramientas en línea que pueden comprimir imágenes sin comprometer la calidad. Hacerlo antes de subir las imágenes al sitio web.

Nota

Puede utilizar las siguientes fuentes para comprimir imágenes: Optimización de gráficos rasterizados, Optimización de gráficos vectoriales. ¿Cuál es la diferencia entre ellos? - Considere esto en el próximo capítulo.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla