Curso COMPLETO de HTML GRATIS desde cero: SEO, semántica y más

Name: Curso COMPLETO de HTML GRATIS desde cero: SEO, semántica y más
Uploaded: 2023-10-13T14:00:05.000Z
Duration: 3 h 48 min 11 s

Introducción a HTML

Resumen de la sección: En esta sección, se introduce el lenguaje de marcado HTML y su importancia en la creación de páginas web. También se menciona la relación entre HTML y CSS.

Lenguaje de marcado HTML

El internet está basado en el lenguaje de marcado HTML.

HTML es un lenguaje específico para describir la estructura y contenido de las páginas web.

Se utiliza junto con CSS para definir cómo se ve visualmente el contenido.

Lanzamiento oficial de HTML

HTML es el lenguaje de marcado oficial para la web.

Permite marcar el contenido y definir su importancia sin preocuparse por su apariencia visual.

Importancia de HTML en la estructura de una página web

HTML define la estructura y organización del contenido en una página web.

No se encarga del aspecto visual, eso lo hace CSS.

La forma en que estructuramos nuestras páginas web con HTML marca una gran diferencia.

Herramientas necesarias para trabajar con HTML

Se necesita un editor de código para escribir HTML.

Se recomienda utilizar Visual Studio Code como editor, ya que tiene extensiones útiles para trabajar con este lenguaje.

Extensión Live Preview

La extensión Live Preview permite ver los cambios realizados en tiempo real mientras se trabaja con HTML.

Es una herramienta útil para visualizar cómo se verá el contenido sin tener que actualizar constantemente el navegador.

Recursos adicionales

Además de Visual Studio Code, hay otras extensiones disponibles para trabajar con HTML.

Se recomienda utilizar la extensión Live Preview de Microsoft para obtener una vista previa en tiempo real.

Importancia de aprender HTML

Aprender HTML es fundamental para aquellos que deseen desarrollar páginas web desde cero.

Es importante conocer las etiquetas y elementos básicos de HTML para poder estructurar y entender el contenido.

Definición de HTML

HTML significa "HyperText Markup Language" (Lenguaje de Marcado de Hipertexto).

Es un lenguaje utilizado para describir la estructura y organización del contenido en la web.

Separación entre estructura y presentación

HTML se encarga de definir la estructura lógica del documento, no su presentación visual.

La presentación visual se logra mediante CSS, que será abordado en otro curso.

Funciones principales de HTML

HTML se encarga del contenido y la escritura del mismo.

Permite escribir el contenido utilizando etiquetas que definen su significado y función.

Valoración y relevancia de HTML

A pesar de ser uno de los lenguajes fundamentales en el mundo web, a veces no se le da la importancia que merece.

Es necesario comprender y dominar HTML para poder desarrollar páginas web correctamente.

Archivos con extensión .html

Los archivos que contienen código HTML deben tener la extensión .html al final del nombre.

Esto permite identificar fácilmente qué tipo de archivo es y cómo debe ser interpretado por los navegadores.

Etiquetas y elementos en HTML

Las etiquetas y elementos son fundamentales en HTML.

Cada etiqueta tiene una función específica y se utiliza para marcar el contenido de manera adecuada.

Diferencia entre etiquetas y elementos

Es importante diferenciar entre las etiquetas de apertura y cierre, que definen un elemento completo en HTML.

La estructura correcta de las etiquetas es crucial para el funcionamiento adecuado del código.

Sintaxis de HTML

La sintaxis de HTML puede ser similar a XML, pero no es tan estricta.

Se utiliza la etiqueta <html> como elemento principal para iniciar un documento HTML.

Creación de un archivo HTML básico

Se pueden crear archivos HTML utilizando cualquier editor de texto.

Al guardar el archivo con la extensión .html, se podrá abrir en un navegador web para visualizar su contenido.

Visualización en tiempo real con Live Preview

La extensión Live Preview permite ver los cambios realizados en tiempo real mientras se trabaja con HTML.

Esto facilita la visualización inmediata del resultado sin tener que refrescar constantemente el navegador.

Etiquetas HTML y estilos por defecto

Resumen de la sección: En esta sección, se discute el uso de etiquetas HTML y los estilos por defecto que los navegadores aplican a ellas. Se mencionan ejemplos de etiquetas obsoletas y se explica la importancia de utilizar etiquetas semánticas en lugar de etiquetas basadas en apariencia visual.

Etiquetas obsoletas y su significado semántico

La etiqueta <b> (negrita) ya no se recomienda para aplicar estilo al texto, ya que su propósito es más visual que descriptivo.

Es preferible utilizar CSS para aplicar estilos al texto. En su lugar, se pueden usar las etiquetas <strong> o <em> para enfatizar partes importantes del texto.

La etiqueta <center> (centrar) también está obsoleta, ya que centrar el texto no tiene relación con la descripción del contenido sino con su representación visual.

Estilos por defecto y reseteo

Los navegadores tienen estilos por defecto conocidos como "Style sheet user agent", los cuales definen cómo se verán ciertos elementos HTML.

En el pasado, estos estilos por defecto variaban entre diferentes navegadores, lo que llevó a la creación de técnicas como el "CSS reset" para establecer una apariencia consistente en todos los navegadores.

Actualmente, existen herramientas como "normalize.css" que ayudan a normalizar los estilos por defecto en diferentes navegadores.

Es importante tener en cuenta que el navegador aplica algunos estilos por defecto al renderizar un documento HTML, pero estos estilos pueden ser modificados o sobrescritos mediante CSS.

Estructura básica de un documento HTML

Un documento HTML consta de una estructura básica que incluye comentarios, declaración del tipo de documento y las etiquetas <html>, <head> y <body>.

Los comentarios en HTML se escriben entre  y son ignorados por el navegador.

La declaración del tipo de documento (<!DOCTYPE html>) especifica la versión del lenguaje HTML utilizada en el documento.

La etiqueta <html> es el elemento raíz que contiene todo el contenido del documento.

El contenido del documento se divide en dos partes: <head> (metadatos) y <body> (contenido visible).

Comentarios y declaración del tipo de documento

Los comentarios en HTML se escriben entre  y no afectan al renderizado del contenido.

La declaración del tipo de documento (<!DOCTYPE html>) especifica la versión del lenguaje HTML utilizada en el documento.

Aunque algunos navegadores pueden interpretar correctamente el código sin esta declaración, es recomendable incluirla para asegurar la compatibilidad con todos los navegadores.

Problemas con emojis

Resumen de la sección: En esta parte del video, se mencionan los problemas que pueden surgir al utilizar emojis en el contenido web.

Problemas con emojis

Los emojis pueden causar problemas de visualización y compatibilidad en diferentes dispositivos y navegadores.

Es importante tener en cuenta la semántica adecuada al utilizar emojis para asegurar una comprensión clara del contenido.

Algunas etiquetas HTML, como <p> para párrafos o <img> para imágenes, proporcionan un significado semántico claro.

Utilizar etiquetas apropiadas ayuda a estructurar el contenido y mejorar la experiencia del usuario.

Importancia del HTML semántico

Resumen de la sección: En esta parte del video, se explica la importancia del HTML semántico y cómo afecta a la comprensión y estructura del contenido web.

Forma correcta de utilizar HTML semántico

El uso adecuado de etiquetas HTML semánticas, como <h1>, <p>, <section>, etc., ayuda a transmitir el significado y estructura del contenido.

Utilizar las etiquetas correctas facilita la comprensión visual e incluso permite inferir cómo está organizado el contenido.

Muchas personas cometen errores al crear páginas web sin entender el concepto de HTML semántico, lo cual puede afectar negativamente su portfolio o experiencia de usuario.

Impacto de un mal uso del HTML

Resumen de la sección: En esta parte del video, se destaca el impacto negativo que puede tener un mal uso del HTML en la experiencia de usuario y en los portfolios de desarrollo web.

Consecuencias de un mal uso del HTML

Un mal uso del HTML puede dificultar la comprensión y flujo del contenido para los usuarios.

Muchas personas aprenden diferentes lenguajes de programación sin dominar el HTML, lo cual lleva a errores al crear páginas web.

Es importante evitar el uso excesivo de elementos <div> y <span> sin una estructura semántica clara.

Los portfolios y proyectos pueden verse afectados negativamente si no se utiliza un HTML semántico adecuado.

Herramientas para mejorar la accesibilidad

Resumen de la sección: En esta parte del video, se mencionan herramientas útiles para mejorar la accesibilidad y comprensión del contenido web.

Uso de herramientas de desarrollo

Las herramientas de desarrollo, como las disponibles en los navegadores, permiten inspeccionar el código y analizar la accesibilidad.

La opción "Show Accessibility" o "Mostrar Accesibilidad" dentro de las herramientas permite identificar problemas relacionados con la accesibilidad.

También existe una función experimental llamada "Enable Full Page Accessibility 3", que proporciona información sobre cómo se comprende el contenido por parte de las personas con discapacidad visual.

Mejorando el HTML semántico

Resumen de la sección: En esta parte del video, se muestra cómo mejorar el HTML semántico utilizando etiquetas adecuadas para transmitir correctamente el significado y estructura del contenido.

Mejorando el HTML semántico

Utilizar las etiquetas HTML adecuadas, como <h2>, <section>, <article>, etc., ayuda a darle sentido y estructura al contenido.

Es importante seguir una jerarquía de títulos y utilizar etiquetas que reflejen la relación entre los elementos.

Algunos elementos pueden ser reemplazados por etiquetas más apropiadas, como cambiar un <div> por un <header> o un <span> por un <article>.

El uso correcto del HTML semántico mejora la comprensión del contenido y facilita su organización.

Significado de los elementos en HTML semántico

Resumen de la sección: En esta parte del video, se explica el significado de los elementos en el contexto del HTML semántico.

Significado de los elementos en HTML semántico

Los elementos en HTML semántico tienen información propia contenida y pueden ser considerados como bloques independientes.

Un elemento puede ser extraído a otro lugar sin perder su sentido ni dependencia del resto del contenido.

Por ejemplo, un artículo puede contener información relevante que sigue teniendo sentido si se coloca en otro contexto.

Es importante entender que el objetivo es transmitir el significado y estructura del contenido utilizando las etiquetas adecuadas.

Uso de encabezados en HTML

Resumen de la sección: En esta sección, se explica cómo utilizar los encabezados en HTML para estructurar correctamente el contenido de una página web. Se recomienda utilizar los elementos de encabezado (h1-h6) en lugar de estilizar otros elementos para crear títulos.

Uso correcto de los encabezados

Es importante utilizar los elementos de encabezado (h1-h6) para indicar la jerarquía y estructura del contenido.

No se deben utilizar otros elementos, como div o p, para simular un encabezado.

Los motores de búsqueda y las tecnologías asistivas utilizan los encabezados para comprender la estructura del contenido.

Jerarquía y orden adecuado

Los encabezados deben seguir una jerarquía lógica, donde h1 es el título principal y h2-h6 son subtitulos o secciones secundarias.

No se debe saltar niveles en la jerarquía (por ejemplo, usar h3 después de h1 sin usar h2).

El orden adecuado ayuda a mejorar la accesibilidad y facilita la navegación por parte de los usuarios.

Estilos CSS para personalizar los encabezados

Aunque es posible aplicar estilos CSS a los elementos de encabezado, es recomendable mantener su apariencia predeterminada.

Si se desea personalizar el estilo, es importante asegurarse de que siga siendo coherente con la jerarquía y no confunda a los usuarios.

Roles y atributos "role" en HTML

Resumen de la sección: En esta sección, se explican los roles y atributos "role" en HTML, que permiten especificar el propósito o función de un elemento en una página web. Se recomienda utilizar los elementos HTML adecuados en lugar de asignar roles innecesarios.

Uso de roles en HTML

Los roles permiten especificar el propósito o función de un elemento en una página web.

Es importante utilizar los elementos HTML adecuados en lugar de asignar roles innecesarios.

Se puede consultar la lista completa de roles disponibles en MDN (Mozilla Developer Network).

Ejemplos de roles comunes

Algunos ejemplos de roles comunes son "button" para botones, "article" para artículos y "link" para enlaces.

Es recomendable utilizar los elementos HTML correspondientes antes de asignar un rol específico.

Atributos especiales para enlaces

Existen algunos atributos especiales que se pueden utilizar con los enlaces para realizar acciones específicas.

Por ejemplo, el atributo "href" con valor "mailto:correo@ejemplo.com" permite enviar un correo electrónico directamente desde el navegador.

Otros ejemplos incluyen el uso del atributo "tel:" para realizar llamadas telefónicas o el atributo "whatsapp:" para abrir WhatsApp directamente.

Descarga forzada de recursos con el atributo "download"

Resumen de la sección: En esta sección, se explica cómo forzar la descarga de recursos como imágenes, videos o audios utilizando el atributo "download" en HTML. Sin embargo, este atributo solo funciona con recursos alojados dentro del mismo dominio por motivos de seguridad.

Descarga forzada de recursos

Es posible forzar la descarga de recursos utilizando el atributo "download" en un enlace.

Al hacer clic en el enlace, se abrirá automáticamente la ventana de descarga del navegador.

Esto es útil para permitir a los usuarios descargar archivos sin tener que hacer clic con el botón derecho y seleccionar "Guardar imagen como" u otra opción similar.

Restricciones del atributo "download"

El atributo "download" solo funciona con recursos alojados dentro del mismo dominio por motivos de seguridad.

Si se intenta utilizar este atributo con un recurso externo, como una imagen de otro sitio web, será ignorado y se abrirá la imagen en una nueva pestaña o ventana del navegador.

Uso avanzado de listas ordenadas y desordenadas

Resumen de la sección: En esta sección, se explican algunas características avanzadas de las listas ordenadas y desordenadas en HTML. Se muestra cómo personalizar el tipo de viñeta o numeración, así como invertir el orden o establecer valores específicos para los elementos.

Personalización del tipo de viñeta o numeración

Es posible personalizar el tipo de viñeta o numeración utilizada en las listas ordenadas y desordenadas.

Se pueden utilizar diferentes estilos, como letras minúsculas, letras mayúsculas, números romanos, etc.

También es posible establecer imágenes personalizadas como viñetas utilizando CSS.

Inversión del orden

Además de personalizar el estilo, también es posible invertir el orden de los elementos en una lista.

Por ejemplo, se puede hacer que una lista ordenada comience desde un número alto y vaya disminuyendo.

Esto puede ser útil en casos específicos donde se requiere un orden no convencional.

Atributos especiales para elementos de lista

Los elementos de lista también tienen otros atributos interesantes, como el atributo "value" para establecer un valor específico en lugar del orden predeterminado.

Es posible utilizar estos atributos para personalizar aún más la apariencia y el comportamiento de las listas.

Solicitando el nombre

Resumen de la sección: En esta parte del video, se habla sobre cómo solicitar el nombre en una página web.

Solicitando el nombre

Se menciona la importancia de solicitar el nombre del usuario en una página web.

Se destaca que las etiquetas pueden personalizarse para adaptarse a las necesidades específicas.

Se menciona que existen límites en cuanto a la personalización de las etiquetas.

Etiquetas personalizables y límites

Resumen de la sección: En esta parte del video, se habla sobre las etiquetas personalizables y los límites asociados.

Etiquetas personalizables y límites

Se menciona que las etiquetas pueden ser personalizadas según las preferencias del desarrollador.

Se destaca que existe un límite en cuanto a la personalización de las etiquetas.

Se enfatiza la importancia de tener en cuenta diferentes navegadores al realizar la personalización.

Mostrando imágenes en un sitio web corporativo

Resumen de la sección: En esta parte del video, se explica cómo mostrar imágenes en un sitio web corporativo.

Mostrando imágenes en un sitio web corporativo

Se muestra un ejemplo práctico utilizando una imagen relacionada con Tesla en un sitio web corporativo.

Se menciona que es común encontrar errores al mostrar imágenes en portfolios y cómo solucionarlos.

Se destaca la importancia de utilizar capturas de pantalla o fotografías relevantes para mostrar contenido visualmente atractivo.

Carga de imágenes y optimización

Resumen de la sección: En esta parte del video, se habla sobre la carga de imágenes y cómo optimizar su rendimiento.

Carga de imágenes y optimización

Se menciona que al cargar una página web, las imágenes pueden ser un factor importante en el rendimiento.

Se muestra cómo utilizar las herramientas de desarrollo para analizar qué imágenes se cargan en una página.

Se explica el concepto de "loading lazy" como una forma de cargar las imágenes solo cuando son necesarias.

Se destaca que la carga lazy depende de la conexión del usuario y puede variar según la calidad y velocidad de la misma.

Funcionamiento del loading lazy

Resumen de la sección: En esta parte del video, se explica cómo funciona el "loading lazy" en la carga de imágenes.

Funcionamiento del loading lazy

Se explica que el "loading lazy" carga las imágenes solo cuando son necesarias, basándose en cálculos relacionados con la distancia y los recursos disponibles.

Se menciona que el loading lazy puede funcionar correctamente dependiendo de factores como la conexión a internet y los recursos disponibles.

Se advierte sobre no utilizar el loading lazy en imágenes ubicadas en partes superiores importantes de una página web para evitar problemas visuales o parpadeos.

Optimización del tamaño de imagen

Resumen de la sección: En esta parte del video, se habla sobre cómo optimizar el tamaño de las imágenes para mejorar el rendimiento.

Optimización del tamaño de imagen

Se muestra cómo ajustar el tamaño (ancho y alto) de una imagen utilizando CSS para optimizar su rendimiento.

Se destaca la importancia de mantener la relación de aspecto al ajustar el tamaño de una imagen.

Se menciona que es posible obtener la relación de aspecto de una imagen a través de las herramientas de desarrollo.

Uso de iframes

Resumen de la sección: En esta parte del video, se habla sobre el uso de iframes en la carga de contenido externo, como videos.

Uso de iframes

Se menciona que los iframes son utilizados para cargar contenido externo, como videos o elementos interactivos.

Se muestra un ejemplo práctico utilizando un video incrustado desde YouTube.

No se proporcionan más detalles en esta parte del video.

¿Qué hace todo esto y le le?

Resumen de la sección: En esta sección, se discute el propósito y contenido del video.

Título para el subtema

Se proporciona una descripción detallada de los puntos clave e ideas principales. Cada punto está vinculado a la parte correspondiente del video y comenzará con: . XXXXs es un número entero de segundos. Haga todo lo posible para asociar el t=XXs con el timestamp correcto proporcionado en cada transcripción. Evite avanzar con los timestamps.

Repita la estructura anterior según sea necesario y use subtítulos para organizar sus notas. No use demasiadas secciones. Siga la transcripción cronológicamente y no mezcle las secciones.

Consejos de formato:

Asegúrese de que cada sección no tenga más de 4 puntos clave. Cada punto clave no debe tener más de 25 palabras.

Use [] para denotar los timestamps y () para vincular a la parte correspondiente del video.

Use subtítulos y puntos clave para organizar sus notas y hacerlas más fáciles de leer y entender. Cuando sea relevante, incluya timestamps para vincular a la parte correspondiente del video.

Use puntos clave para describir pasos importantes e ideas principales, siendo lo más completo posible.

Incluya timestamps vinculando al timestamp relevante en un bloque utilizando el formato , especialmente para los puntos clave.

Consejos de resumen:

No mencione nada si solo hay música reproduciéndose o si no sucede nada importante.

Utilice únicamente el contenido de la transcripción. No agregue información adicional.

Los títulos deben ser informativos o incluso una pregunta que el video responda.

Los títulos no deben ser conclusiones, ya que es posible que solo esté obteniendo una pequeña parte del video.

Cite e incluya timestamps vinculando al timestamp relevante en un bloque utilizando el formato , especialmente para los puntos clave.

Sea conciso y evite crear demasiadas secciones.

Asegúrese de que el idioma del resumen y las notas de estudio y los encabezados estén en el idioma de la transcripción.