Tutorial básico de HTML desde cero - Video 4: Estructura global parte 2.

UpEmpresa Tutoriales

23 Jan 201506:20

Summary

TLDREn este video, se enseña cómo estructurar correctamente un documento HTML. Se cubren elementos clave como las etiquetas `<title>`, que definen el título en la pestaña del navegador, y `<body>`, que contiene el contenido visible. Además, se explican las etiquetas `<div>`, que agrupan contenido, y `<span>`, que se usa para resaltar partes de texto sin alterar el flujo. Al finalizar, los espectadores aprenden a construir su primera página web correctamente estructurada, preparándose para futuras lecciones sobre diseño con CSS y más elementos HTML.

Takeaways

😀 Empezamos la creación de un documento HTML con una estructura básica y correcta, asegurándonos de que contiene las etiquetas necesarias.
😀 Se añade la etiqueta `<title>` dentro del `<head>` para definir el título de la página que aparecerá en el navegador.
😀 Es posible ver el título de la página en la pestaña del navegador después de actualizar la página, lo que refleja el contenido de la etiqueta `<title>`.
😀 La etiqueta `<body>` se coloca después de la etiqueta `<head>` y dentro de ella se coloca el contenido visible de la página.
😀 Los elementos del contenido como imágenes, textos y videos deben ser ubicados dentro de la etiqueta `<body>` para que se muestren en el navegador.
😀 Se introduce la etiqueta `<div>`, que se utiliza para dividir o seccionar el contenido, y puede ser estilizada con CSS.
😀 Los `<div>` son elementos de bloque, lo que significa que ocupan todo el ancho disponible y empujan el contenido que sigue a continuación.
😀 Al agregar contenido dentro de un `<div>`, podemos aplicar estilos a esa sección específica, aunque por sí sola no cambia su apariencia visual.
😀 La etiqueta `<span>` es un elemento en línea que se usa para aplicar estilos o agrupar pequeñas porciones de texto sin afectar el flujo general de la página.
😀 La diferencia clave entre `<div>` (bloque) y `<span>` (en línea) es cómo afectan la disposición de los elementos en la página; los divs empujan el contenido hacia abajo, mientras que los spans no alteran el flujo.

Q & A

¿Cuál es la función de la etiqueta `<title>` en un documento HTML?
-La etiqueta `<title>` define el título de la página web, que aparece en la pestaña del navegador. Es esencial para la accesibilidad y el SEO, ya que informa al usuario y a los motores de búsqueda sobre el contenido de la página.
¿Dónde debe colocarse la etiqueta `<title>` dentro del documento HTML?
-La etiqueta `<title>` debe ir dentro de la sección `<head>` de un documento HTML. Esta sección contiene metadatos sobre el documento, como el título, enlaces a hojas de estilo y scripts.
¿Qué se coloca dentro de la etiqueta `<body>` en un documento HTML?
-Dentro de la etiqueta `<body>` se coloca todo el contenido visible de la página web, como texto, imágenes, videos y otros elementos interactivos que el usuario verá en el navegador.
¿Qué es la etiqueta `<div>` y para qué se utiliza?
-La etiqueta `<div>` es un contenedor o división que agrupa elementos dentro de la página. Se utiliza principalmente para organizar y estructurar el contenido, y es muy útil cuando se aplica CSS para estilizar secciones específicas del documento.
¿Cuáles son las características de los elementos de tipo bloque como `<div>`?
-Los elementos de tipo bloque, como `<div>`, ocupan toda la anchura disponible y empujan a los siguientes elementos hacia abajo, creando una separación entre ellos. Esto hace que sean útiles para organizar el contenido en secciones claramente definidas.
¿Qué es un 'inline element' y cómo se comporta la etiqueta `<span>` en este contexto?
-Un 'inline element' (elemento en línea), como la etiqueta `<span>`, no interrumpe el flujo del contenido. En lugar de mover los elementos debajo de él, sigue la misma línea en la que se encuentra, permitiendo que el contenido circundante continúe sin alteraciones.
¿Cómo difieren las etiquetas `<div>` y `<span>` en su comportamiento visual?
-La etiqueta `<div>` es un elemento de bloque que fuerza a los elementos que siguen a que se muevan hacia abajo, ocupando toda la anchura de la página. En cambio, la etiqueta `<span>` es un elemento en línea que no afecta la posición de otros elementos y permite que el contenido fluya de manera continua.
¿Por qué la etiqueta `<span>` no modifica el diseño cuando se usa en un párrafo?
-La etiqueta `<span>` no modifica el diseño porque es un 'inline element', lo que significa que solo afecta al texto o contenido que envuelve sin interrumpir el flujo de otros elementos. Por eso, el texto dentro de un `<span>` aparece como parte del párrafo sin moverlo.
¿Se pueden usar múltiples etiquetas `<div>` en una misma página HTML?
-Sí, se pueden usar múltiples etiquetas `<div>` en una página HTML. Cada `<div>` puede contener diferentes secciones de contenido, lo que permite una organización y estructuración clara del documento, y también facilita la aplicación de estilos CSS.
¿Qué sucede si cambiamos una etiqueta `<span>` por una `<div>` en el código?
-Si cambiamos una etiqueta `<span>` por un `<div>`, el texto o contenido dentro de ese elemento se moverá a una nueva línea, ya que `<div>` es un 'block element' que ocupa todo el ancho disponible, mientras que `<span>` es un 'inline element' que no interrumpe el flujo del contenido.