Curso de HTML y CSS. 2.1. Estructura de una página web. Párrafos de texto

Summary

Este video del curso de HTML se enfoca en las etiquetas que definen la estructura básica de una página web. Aprende a crear párrafos, textos, saltos de línea y espacios en blanco. Se explica la importancia de la declaración de tipo de documento, la inclusión de atributos de idioma y la diferencia entre las etiquetas de contenido y las auxiliares. Descubre cómo los márgenes y el tipo de display afectan la posición de los elementos y cómo se maneja el espacio en blanco en HTML, con ejemplos prácticos y una llamada a la acción para seguir aprendiendo en Aula Click.

Takeaways

• 🌐 La estructura básica de una página web comienza con una declaración de tipo de documento, dirigida al navegador para su interpretación correcta.
• 📝 La etiqueta `html` con el atributo lang indica el idioma del contenido de la página, como 'es' para español.
• 🔝 El `head` de la página contiene etiquetas auxiliares, como `meta` para la codificación y `title` para el título de la pestaña del navegador.
• 📚 En el `head` también se incluyen enlaces a archivos CSS y JavaScript, que son importantes para el diseño y la funcionalidad de la página.
• 📝 El `body` es donde se incluye todo el contenido visible de la página, como texto, imágenes y vídeos.
• 📑 La etiqueta `p` define un párrafo y tiene márgenes por defecto que separan el contenido de otros elementos.
• 🔗 Los hiperenlaces (`a`) tienen un tipo de display de 'inline', lo que significa que se muestran en la misma línea que el texto circundante.
• ➡️ Los espacios en blanco en el código HTML no se reflejan directamente en la página web; se requiere el uso de ` ` para representar espacios explícitos.
• ⏎ La etiqueta `<br>` se utiliza para insertar un salto de línea en el contenido de la página.
• 📐 La posición y el espaciado de los elementos en una página web es un tema complejo que se aprende poco a poco.
• 🎓 Aula Click ofrece un curso completo y gratuito para aprender HTML, y se puede suscribirse al canal de YouTube para seguir el contenido.

Q & A

¿Qué es la declaración DOCTYPE y para qué sirve en una página HTML?

La declaración DOCTYPE es una instrucción que define el tipo de documento y es dirigida al navegador web para que pueda interpretar mejor el resto del documento. Varía según la versión de HTML utilizada; para HTML5, el parámetro es 'html'.

¿Qué atributo es conveniente especificar dentro de la etiqueta html y por qué?

Es conveniente especificar el atributo 'lang' dentro de la etiqueta html para indicar el lenguaje o idioma en el que está escrita la página web, lo que ayuda a los navegadores y herramientas de accesibilidad a interpretar el contenido adecuadamente.

¿Cuál es la función de la etiqueta 'head' en una página HTML?

La etiqueta 'head' indica la cabecera de la página web y contiene elementos auxiliares que no forman parte del contenido principal, como enlaces a archivos de JavaScript y CSS, el título de la página y la codificación del documento.

¿Qué es el atributo 'charset' y por qué es recomendable usar 'UTF-8'?

El atributo 'charset' indica el sistema de codificación con el que está escrita la página. 'UTF-8' es recomendable porque es una codificación universal que puede representar cualquier carácter de cualquier lenguaje, facilitando la compatibilidad y el uso de múltiples idiomas en una misma página.

¿En qué se diferencia la etiqueta 'p' de la etiqueta 'a' en cuanto a su tipo de display por defecto?

La etiqueta 'p' (párrafo) tiene un tipo de display de 'block', lo que significa que ocupa toda la línea y crea un espacio antes y después del párrafo. Por otro lado, la etiqueta 'a' (híperenlace) tiene un tipo de display de 'inline', lo que significa que solo ocupa el espacio necesario en la línea y no crea espacio adicional.

¿Qué sucede si se incluyen espacios en blanco o saltos de línea en el código HTML y por qué?

Los espacios en blanco y los saltos de línea en el código HTML no se reflejan directamente en la página web. Los navegadores agrupan varios espacios en blanco en uno solo y omiten los saltos de línea en blanco entre elementos.

¿Cómo se puede incluir un espacio en blanco explícito en una página web?

Para incluir un espacio en blanco explícito en una página web, se utiliza la sintaxis '&amp;nbsp;' que indica un espacio no separable (non-breaking space).

¿Qué etiqueta se utiliza para crear un salto de línea en HTML y cómo se escribe?

Para crear un salto de línea en HTML se utiliza la etiqueta 'br', que se escribe con una barra al final, como en '<br/>' o '<br>'. Esto indica que el texto que sigue debe aparecer en una nueva línea.

¿Cómo se puede modificar el comportamiento predeterminado de los márgenes y el tipo de display de un párrafo en HTML?

Se pueden modificar los márgenes y el tipo de display de un párrafo utilizando hojas de estilo CSS. Esto permite controlar el espaciado y la disposición visual de los elementos en la página.

¿Por qué es importante ir asimilando poco a poco el concepto de espacio en blanco y el uso de etiquetas en HTML?

Es importante ir asimilando poco a poco estos conceptos porque la forma en que se posicionan los elementos en una página web es compleja y requiere una comprensión gradual para aplicarlos de manera efectiva y crear diseños web bien estructurados y accesibles.

¿Dónde puedo encontrar un curso completo y gratuito para aprender HTML según el video?

Puedes encontrar un curso completo y gratuito para aprender HTML en Aula Click, que se menciona en el video. Para no perderte los nuevos videos, te animan a suscribirte al canal de Aula Click en YouTube.

Outlines

00:00

🌐 Introducción a la estructura básica de una página HTML

El primer párrafo introduce las etiquetas fundamentales para definir la estructura de una página web en HTML. Se menciona la importancia de la declaración de tipo de documento y la versión HTML utilizada, específicamente la versión 5 que requiere el parámetro 'html'. Se describe que todo el contenido debe estar dentro de la etiqueta 'html', incluyendo el atributo para el lenguaje de la página, como 'es' para español. Seguidamente, se explican los bloques 'head' y 'body', donde 'head' incluye elementos auxiliares como el sistema de codificación y el título de la página, mientras que 'body' contiene el contenido principal como imágenes, texto y videos. El vídeo enfatiza la necesidad de ir aprendiendo las etiquetas de HTML poco a poco y se menciona que se profundizará en las propiedades de los elementos en futuras lecciones.

05:01

📝 Uso de etiquetas de párrafo y espacios en blanco en HTML

El segundo párrafo se enfoca en el uso de la etiqueta 'p' para crear párrafos y cómo se comporta en la página web, incluyendo márgenes y el tipo de 'display' por defecto. Se ilustra cómo un hiperenlace 'a' dentro de un párrafo se muestra en la misma línea debido a su 'display' de 'inline'. Además, se discute el concepto de espacio en blanco, señalando que los espacios y saltos de línea en el código HTML no siempre se reflejan en la visualización del navegador. Se presenta la solución de usar '&amp;nbsp;' para incluir espacios en blanco explícitos y '&lt;br&gt;' para crear saltos de línea. El párrafo concluye con una promoción del curso de HTML en Aula Click, animando a los espectadores a suscribirse y seguir el contenido para aprender más sobre el formato de texto en la web.

Keywords

💡Etiquetas HTML

Las etiquetas HTML son elementos que definen el contenido y la estructura de una página web. En el guion del video, se mencionan varias etiquetas como 'html', 'head', 'body', 'p', 'a', 'br', y 'meta', que son fundamentales para la creación de cualquier sitio web. Estas etiquetas permiten a los navegadores interpretar y mostrar el contenido de manera adecuada, y son la base de la comunicación entre el código y el usuario final.

💡Versión HTML 5

La versión HTML 5 es la quinta revisión importante del lenguaje de marcado HTML. Se destaca en el video como la versión actual a utilizar, y se menciona que el parámetro para la declaración del tipo de documento es 'html'. HTML5 introduce nuevas etiquetas semánticas, mejoras en la multimedia y soporte para aplicaciones web, lo que ha revolucionado la creación y el diseño de páginas web modernas.

💡Codificación UTF-8

La codificación UTF-8 es un sistema de codificación de caracteres que permite representar cualquier carácter de cualquier idioma del mundo. En el video, se recomienda utilizar UTF-8 en la etiqueta 'meta' para definir el juego de caracteres de la página web. Esto es crucial para asegurar que el contenido se muestre correctamente, independientemente del idioma o de los símbolos utilizados.

💡Estructura de una página web

La estructura de una página web se compone de los bloques 'head' y 'body'. El 'head' contiene metadatos y referencias a recursos externos, como hojas de estilo y scripts, mientras que el 'body' contiene el contenido visible del sitio, como texto, imágenes y videos. El video enfatiza la importancia de esta estructura, ya que define cómo se organiza y se presenta el contenido en el navegador.

💡Etiqueta párrafo (p)

La etiqueta 'p' representa un párrafo en HTML y es una de las más utilizadas para organizar el texto en la página. El video explica que un párrafo por defecto tiene márgenes y un tipo de display de 'block', lo que significa que ocupa toda la línea horizontal. Esto ayuda a separar visualmente el contenido y a dar una estructura lógica al texto.

💡Etiqueta hiperenlace (a)

La etiqueta 'a' se utiliza para crear hiperenlaces en una página web, permitiendo la navegación a otras páginas o áreas del sitio. En el video, se muestra cómo incluir un hiperenlace dentro de un párrafo, y cómo este se comporta de manera 'inline', ocupando solo el espacio necesario en la línea y no creando un salto de línea automáticamente.

💡Espacios en blanco

En HTML, los espacios en blanco, incluidos los saltos de línea y los múltiples espacios, a menudo se tratan como un solo espacio por el navegador. El video explica que para representar espacios en blanco explícitos, se utiliza el código '&nbsp;'. Esto es importante para el diseño y la presentación del texto en la página web, ya que permite controlar con precisión el espaciado entre palabras y líneas.

💡Etiqueta salto de línea (br)

La etiqueta 'br' se utiliza para insertar un salto de línea en el contenido de la página. A diferencia de los espacios en blanco, 'br' crea un cambio de línea visible en el navegador. El video demuestra cómo incluir 'br' para separar el texto 'visita aula clic' de la siguiente línea, lo que mejora la legibilidad y la presentación del contenido.

💡Tipo de display

El tipo de display en CSS define cómo se muestra un elemento en la página. En el video, se menciona que los párrafos tienen un display de 'block', mientras que los hiperenlaces tienen un display de 'inline'. Esto afecta cómo se posicionan los elementos en la página, con 'block' elementos que ocupan todo el ancho disponible y 'inline' elementos que solo ocupan el espacio necesario.

💡Hojas de estilo (CSS)

Las hojas de estilo en cascada, o CSS, se utilizan para dar estilo y formato a los elementos HTML. Aunque no se discuten en profundidad en el video, se menciona que se pueden incluir en la cabecera de la página web. CSS permite controlar aspectos visuales como colores, fuentes, márgenes y posiciones, lo que es esencial para la creación de diseños web atractivos y funcionales.

Highlights

Introducción al curso de HTML y su estructura básica.

La importancia de la declaración de tipo de documento en HTML5.

Cómo incluir el atributo de idioma en la etiqueta HTML.

La estructura de una página web con etiquetas de apertura y cierre.

El uso de la etiqueta 'head' para incluir elementos auxiliares.

La etiqueta 'meta' para definir el sistema de codificación de la página.

Inclusión de enlaces a archivos CSS y JavaScript en la cabecera.

La función del título en la etiqueta 'title' y su visualización en la solapa del navegador.

La etiqueta 'body' y su rol en el contenido principal de la página.

La etiqueta 'p' para crear párrafos y su comportamiento por defecto.

Diferencia entre 'display: block' y 'display: inline' en elementos HTML.

Cómo incluir un hiperenlace dentro de un párrafo y su visualización en línea.

El efecto de los espacios en blanco en el código HTML y su representación en la página web.

Uso de '&amp;nbsp;' para incluir espacios en blanco explícitos en la página.

La etiqueta 'br' para incluir saltos de línea en el contenido.

El concepto de espacio en blanco y cómo se maneja en HTML.

Curso completo y gratuito de HTML disponible en Aula Click.

Invitación a suscribirse al canal de Aula Click en YouTube para no perderse nuevos contenidos.

Transcripts

bienvenidos a un nuevo vídeo del curso

de html

vamos a ver las etiquetas que definen la

estructura básica de una página

y vamos a aprender a crear párrafos de

texto saltos de línea y espacios en

blanco comenzamos

[Música]

ah

vamos a ver las etiquetas que definen la

estructura de una página web lo primero

que debe aparecer no es estrictamente

una etiqueta de html sino una

declaración o instrucción que define el

tipo de documento de qué se trata y va

dirigida al navegador web para que pueda

interpretar mejor el resto del documento

html este parámetro varía según la

versión de html que estemos utilizando

para la versión actual la versión 5 el

parámetro es html

más adelante en otro vídeo ya veremos

qué parámetros hay que poner para otras

versiones

todo el contenido de la página web debe

estar incluido dentro de la etiqueta

html entre la etiqueta de apertura y la

etiqueta de cierre

es conveniente especificar un atributo

que indique el lenguaje o idioma con el

que está escrita la página web

por ejemplo para español hay que indicar

a s

a continuación tenemos dos bloques la

cabecera y el cuerpo

la cabecera se indica con la etiqueta

head y su correspondiente cierre

en la cabecera pueden ir muchas

etiquetas que son necesarias pero no

forman parte hablando estrictamente del

contenido son etiquetas auxiliares

por ejemplo esta etiqueta con este

atributo indica el sistema de

codificación con el que está escrita la

página para nuestro entorno se

recomienda utc 8 en la cabecera también

se incluyen como iremos viendo más

adelante los enlaces a los archivos con

código javascript y hojas de estilo css

en la cabecera también va el título que

no se muestra directamente en el cuerpo

de la página sino en la solapa del

navegador

y a continuación tenemos la etiqueta

body donde ahora sí se incluye todo el

contenido de la página imágenes texto

vídeo etcétera

y de momento nos vamos a quedar aquí en

cuanto a la estructura de la página hay

muchas más etiquetas pero seguramente no

nos serviría de nada explicarlas ahora

porque no se entenderían en toda su

amplitud

las iremos viendo poco a poco según vaya

surgiendo la necesidad de utilizarlas

vamos a pasar ya a las etiquetas de

contenido y vamos a empezar por una de

las que más se utilizan la etiqueta p

que hace referencia al párrafo

un párrafo es una forma básica de

dividir y organizar el texto aunque

también podemos incluir otro tipo de

elementos como vídeo imágenes etcétera

el párrafo tiene definidas por defecto

dos propiedades los márgenes y el tipo

de display que hace que se separe de los

elementos que tiene por arriba y por

abajo

para el párrafo el tipo de display es

blog lo que quiere decir que va a ocupar

toda la línea

sin embargo para esta otra etiqueta un

híper enlace el tipo de display es

inline lo que quiere decir que sólo va a

ocupar el trozo de la línea que necesite

vamos a verlo mejor incluyendo el hiper

enlace dentro del párrafo

para ello cortamos la etiqueta fin de

párrafo y la pegamos detrás del enlace

observa como ahora el hiperenlace está

en la misma línea que el párrafo puesto

que está incluido dentro de él

observa que los espacios que hay en el

código detrás de visita habla clic no se

reflejan en la página web

ahora en seguida volveremos sobre este

tema

pero antes vamos a deshacer esto último

que hemos hecho pulsamos control z para

deshacer

se ha restablecido el salto de línea que

teníamos antes

después de visitar aula clic

y vamos además a añadir un nuevo párrafo

detrás del hiper enlace

dentro de este párrafo escribimos nueva

línea y vemos lo que ocurre

y ha aparecido un nuevo salto de línea

antes del nuevo párrafo que hemos

escrito

por lo tanto parece deducirse que antes

de un párrafo también se inserta un

salto de línea sin embargo no es

exactamente así

como decíamos antes la etiqueta párrafo

tiene definidos por defecto unos

márgenes en este caso el margen superior

hace que se vea este espacio

no te preocupes si no has entendido

perfectamente las propiedades display y

los márgenes

en los siguientes vídeos veremos más

ejemplos para clarificar lo también

veremos como desde las hojas de estilo

se pueden modificar los márgenes y la

propiedad display la verdad es que la

forma en que se posicionan los elementos

dentro de una página web es un tema

complejo y conviene ir asimilando lo

poco a poco

y ahora vamos a ver cómo debemos cambiar

nuestro concepto de espacio en blanco si

dejamos todo el contenido que tenemos

dentro de un párrafo observa lo que

ocurre

ahora este texto visita aula clic el

híper enlace haz clic aquí ahora y el

otro texto nueva línea aparecen en una

misma línea y además todos estos

espacios en blanco que aparecen en el

código y estos dos saltos de línea no se

muestran en la página podemos incluir un

nuevo salto de línea aquí y ver que no

tiene ningún efecto también podemos

escribir dos puntos aquí y a

continuación escribir tres blancos vemos

como tampoco se refleja en la página

incluso si añadimos blancos entre dos

palabras sucede lo mismo

pero no hay que preocuparse porque la

solución es muy fácil

si queremos que se represente un espacio

en blanco

basta con escribirlo de esta forma

ampersand nbsp punto y coma

podemos repetirlo las veces que queramos

por ejemplo vamos a incluir cuatro

blancos

de esta forma en total tendremos cinco

blancos estos cuatro que hemos puesto

explícitamente más todos estos que son

reducidos a uno por el navegador

si ahora borramos todo esto y dejamos

sólo un espacio explícito aparecería de

esta forma

en resumen si escribimos varios espacios

en blanco en el código se agrupan como

un solo espacio si queremos escribir un

espacio en blanco explícitamente podemos

hacerlo de esta forma

y respecto a las líneas en blanco vemos

que las líneas en blanco en el código no

generan ninguna línea en blanco en la

página

para incluir un salto de línea tenemos

la etiqueta de r

qué correctamente se escribe con una

barra al final

aquí vemos como el texto nueva línea

aparece en la siguiente línea

de la misma forma vamos a incluir un

salto de línea detrás del texto visita

aula clic

y si queremos que aparezca una línea en

blanco incluiremos otro salto de línea

así pues ya hemos aprendido un poco más

sobre cómo escribir texto en html

en los siguientes vídeos veremos más

etiquetas de html y cómo darle formato

al texto

en la web de aula clic tenemos un curso

completo y gratuito para aprender html

si no te quieres perder los nuevos

vídeos suscríbete al canal de aula click

en youtube

si te ha gustado este vídeo no olvides

compartirlo y darle al me gusta