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

El Papel del Encabezado del Documento

La cabecera del documento puede incluir etiquetas meta, muchas de las cuales no son visibles para el usuario en la ventana del navegador. Por lo tanto, en los próximos ejemplos, no verás ningún contenido visible. Estas etiquetas almacenan información de metadatos sobre la página.

Título de la página

El texto dentro de la etiqueta <title> se muestra en la pestaña del navegador. El título debe ser una descripción concisa de la página y no debe superar los 60 caracteres de longitud.

index.html

Con la ayuda de este código, puedes lograr dicha apariencia en el sitio web. En la pestaña del navegador, observarás el texto exacto contenido dentro de la etiqueta <title> (marco blanco en la imagen).

Metadatos

La etiqueta <meta> contiene información para navegadores y motores de búsqueda: codificación del documento, comunicación de datos y mucho más. Las etiquetas meta pueden tener muchos atributos, ya que todas transmiten información diferente. El más importante es la codificación de la página. Ayuda al navegador a mostrar el texto correctamente. En caso de no especificar la codificación, el navegador puede mostrar mojibake en lugar de los caracteres.

index.html

Significado de los atributos de la etiqueta meta

name: el nombre de una propiedad puede ser cualquier palabra o frase, pero los navegadores web generalmente esperan un valor que puedan reconocer y utilizar para realizar una acción. Un ejemplo sería <meta name="author" content="name"> para indicar el autor de la página;
content: especifica el valor de la propiedad. Un ejemplo sería <meta name="language" content="english"> para indicar el idioma del texto de la página;
http-equiv: significa HTTP equivalente, y se utiliza para simular cabeceras de respuesta HTTP. Es poco común verlo. Un ejemplo sería <meta http-equiv="refresh" content="30"> para indicar al navegador que actualice la página cada 30 minutos.

Etiquetas meta básicas para la mejora del SEO

<meta name="description"/>: especifica una breve descripción de la página web;
<meta name="author" />: especifica el autor de la página web;
<meta name="language"/>: especifica el idioma de la página web;
<meta name="robots"/>: indica a los motores de búsqueda cómo rastrear o indexar la página web;
<meta name="googlebot" content="notranslate"/>: informa a Google que no ofrezca traducciones automáticas de la página web;
<meta name="copyright" content="Copyright 2024"/>: especifica los derechos de autor de la página web.