Temas tratados en esta entrada
- Valores de visualización en HTML (bloque)
- Elementos a nivel de bloque
- Características de los elementos de bloque
- Ejemplos de elementos de bloque (<p> y <div>)
- Lista de elementos de nivel de bloque en HTML
- Elementos en línea
- Ejemplos de elementos en línea (<span>)
- Uso del elemento <div> como contenedor en HTML
- Estilización de un <div> con CSS
- El elemento <span> (elemento de la APP)
Valores de visualización en HTML (bloque)
En HTML, cada elemento tiene un valor de visualización predeterminado que determina cómo se muestra en la página. Los valores más comunes son "bloque" y "en línea". Un elemento con valor de visualización "bloque" ocupa todo el ancho disponible, forzando un salto de línea antes y después. Este tipo de elementos se usa para agrupar contenido que debe mostrarse como una unidad independiente, como párrafos, encabezados y divs.
Ejemplo
Este es un ejemplo de un elemento con valor de visualización "bloque".
...
Elementos a nivel de bloque
Un elemento a nivel de bloque siempre comienza en una nueva línea, y los navegadores añaden automáticamente un poco de espacio (un margen) antes y después del elemento. Un elemento a nivel de bloque siempre ocupa el ancho completo disponible, extendiéndose hacia la izquierda y la derecha tan lejos como puede.
Dos elementos de bloque comúnmente usados son: <p> y <div>.
El <p> elemento define un párrafo en un documento HTML, mientras que el
<div> elemento define una división o una sección en un documento HTML.
Ejemplo
Este es otro elemento de bloque: un párrafo.
Características de los elementos de bloque
Los elementos de bloque tienen varias características clave que los distinguen de los elementos en línea.
- Inician en una nueva línea: Cada elemento de bloque comienza en una nueva línea, lo que significa que el contenido posterior se muestra debajo de él.
- Ocupación del ancho completo: Estos elementos siempre ocupan el ancho completo de su contenedor, extendiéndose a lo largo de toda la línea disponible.
- Espaciado automático: Los navegadores suelen añadir márgenes por defecto antes y después de los elementos de bloque, lo que proporciona un espaciado visual entre diferentes secciones del contenido.
- Se pueden contener otros elementos: Los elementos de bloque pueden contener otros elementos de bloque o en línea, lo que permite estructurar el contenido de forma jerárquica.
Ejemplo
Este es un párrafo dentro de un div.
Ejemplos de elementos de bloque (<p> y <div>)
Los elementos de bloque son fundamentales para estructurar contenido en HTML. Dos de los elementos
de bloque más comunes son el <p> y el <div>.
El <p> (párrafo) se utiliza para agrupar texto en párrafos, mientras que el
<div> se utiliza para dividir secciones de contenido. Ambos elementos comienzan
en una nueva línea y ocupan el ancho completo de su contenedor.
Ejemplo
Este es un ejemplo de un párrafo (<p>). Los párrafos se utilizan para agrupar texto en bloques.
Lista de elementos de nivel de bloque en HTML
Los elementos de nivel de bloque en HTML son aquellos que, por defecto, ocupan todo el ancho disponible de su contenedor y siempre comienzan en una nueva línea. Estos elementos son esenciales para estructurar el contenido de una página web de manera lógica y ordenada.
A continuación se presenta una lista de los elementos de nivel de bloque más comunes en HTML:
- <div>
- <p>
- <h1> a <h6>
- <ul>
- <ol>
- <li>
- <header>
- <footer>
- <section>
- <article>
- <aside>
- <blockquote>
- <form>
- <table>
- <figure>
- <figcaption>
- <canvas>
Ejemplo
Título de nivel 1
Este es un párrafo de ejemplo en un elemento de bloque.
- Elemento de lista 1
- Elemento de lista 2
Elementos en línea
Los elementos en línea son aquellos que no comienzan en una nueva línea. A diferencia de los elementos de bloque, ocupan solo el ancho necesario para su contenido y se sitúan uno al lado del otro en la misma línea. Esto permite que se puedan combinar de manera fluida con otros elementos de línea y de bloque.
Los elementos en línea son ideales para añadir elementos dentro de párrafos sin romper la estructura de bloque. Por ejemplo, se pueden usar para aplicar estilo a palabras individuales o agrupar partes del texto.
Algunos de los elementos en línea más comunes en HTML son:
- <span>
- <a>
- <strong>
- <em>
- <img>
- <br>
- <code>
- <small>
- <sub>
- <sup>
- <time>
- <q>
Ejemplo
Este es un ejemplo de un elemento en línea. Se puede notar que el texto en rojo no inicia en una nueva línea.
También, puedes usar un enlace para redirigir a otra página sin romper la línea.
Ejemplos de elementos en línea (<span>)
El elemento <span> es un contenedor en línea utilizado para agrupar partes de
texto o elementos HTML dentro de otro elemento. A diferencia de los elementos de bloque, el
<span> no interrumpe el flujo del contenido y permite aplicar estilos CSS a
secciones específicas del texto sin afectar la estructura general.
Es común utilizar <span> para resaltar texto, aplicar colores o estilos, o
simplemente para marcar texto para futuras manipulaciones mediante JavaScript.
Ejemplo
Este es un texto con un span verde y en negrita que se muestra dentro de un párrafo.
El subrayado también se puede aplicar usando
<span>.
Uso del elemento <div> como contenedor en HTML
El elemento <div> es un contenedor de nivel de bloque utilizado para agrupar
otros elementos HTML. No tiene un significado semántico en sí mismo, pero es muy útil para
estructurar y organizar el contenido de una página. Se puede utilizar para aplicar estilos, crear
secciones en un diseño, o para manipular grupos de elementos mediante JavaScript.
La versatilidad del <div> permite a los desarrolladores crear layouts complejos y
responsivos utilizando CSS. Por ejemplo, puedes crear columnas, filas o secciones en una página web
utilizando <div> para contener otros elementos.
Ejemplo
Título de una sección
Este es un párrafo que está contenido dentro de un elemento <div>.
Subtítulo dentro de un contenedor
Este es otro párrafo dentro de un contenedor <div> diferente.
Estilización de un <div> con CSS
La estilización de un elemento <div> con CSS permite a los desarrolladores
personalizar la apariencia visual del contenido en la web. Puedes cambiar propiedades como el color
de fondo, el tamaño del texto, los bordes, los márgenes, el padding y muchos otros estilos para
mejorar la presentación del contenido.
Utilizando selectores CSS, puedes aplicar estilos a todos los elementos <div> de
una página o a un elemento específico utilizando identificadores o clases. Esto facilita la creación
de diseños atractivos y consistentes en toda la web.
Ejemplo
Estilo del contenedor
Este <div> tiene un fondo azul claro, un borde azul oscuro y un padding de
15px.
Estilo alternativo del contenedor
Este <div> tiene un fondo de color rosa claro y un borde rojo punteado,
con un padding de 20px.
El elemento <span> (elemento de la APP)
El elemento <span> es un contenedor en línea que no tiene significado semántico
por sí mismo, pero es extremadamente útil para aplicar estilos o manipular partes específicas de un
texto dentro de otros elementos. Se utiliza comúnmente para cambiar el formato de una parte del
texto, como su color o estilo, sin interrumpir el flujo del contenido.
A menudo, el <span> se utiliza en aplicaciones web para permitir que los
desarrolladores modifiquen dinámicamente el contenido visual utilizando JavaScript y CSS. Su
flexibilidad lo convierte en una herramienta valiosa para la creación de interfaces de usuario
interactivas y atractivas.
Ejemplo
En un texto, puedes tener una palabra destacada, como importante, que se resalta usando el elemento
<span> para aplicar estilos específicos.
Otro ejemplo sería subrayar una parte del texto sin afectar el resto de la línea.
Resumen de la entrada
Valores de visualización en HTML (bloque): En HTML, los elementos tienen valores de visualización predeterminados que determinan cómo se comportan en la página. Los valores más comunes son "bloque" y "en línea". Los elementos de bloque ocupan el ancho completo disponible y comienzan en una nueva línea, mientras que los elementos en línea ocupan solo el espacio necesario.
Elementos a nivel de bloque: Los elementos a nivel de bloque, como
<p> y <div>, inician en una nueva línea y se extienden a lo
largo de todo el ancho disponible. Esto los hace ideales para estructurar el contenido en secciones
y párrafos.
Características de los elementos de bloque: Los elementos de bloque son fácilmente reconocibles por su comportamiento en el flujo del documento. Siempre tienen un margen automáticamente añadido antes y después de ellos, y ocupan el 100% del ancho de su contenedor.
Ejemplos de elementos de bloque (<p> y <div>): Los elementos más comunes
de bloque son <p>, que define un párrafo, y <div>, que define
una sección o división en el documento. Ambos son fundamentales para estructurar el contenido de una
página web.
Lista de elementos de nivel de bloque en HTML: HTML proporciona una variedad de
elementos a nivel de bloque, incluyendo <article>, <header>,
<footer>, <section>, y más. Cada uno de estos elementos sirve
para organizar el contenido de maneras específicas y semánticas.
Elementos en línea: A diferencia de los elementos de bloque, los elementos en línea
no comienzan en una nueva línea y solo ocupan el espacio necesario. Ejemplos de elementos en línea
incluyen <span>, <a>, y <img>.
Ejemplos de elementos en línea (<span>): El elemento <span>
es un contenedor en línea que permite aplicar estilos a una porción del texto sin interrumpir el
flujo. Es útil para modificaciones específicas dentro de un párrafo o texto.
Uso del elemento <div> como contenedor en HTML: El elemento
<div> actúa como un contenedor de nivel de bloque, ideal para agrupar otros
elementos HTML. Aunque no tiene un significado semántico por sí mismo, se utiliza para organizar y
estructurar el contenido.
Estilización de un <div> con CSS: La estilización de un
<div> con CSS permite personalizar la apariencia del contenido. Puedes cambiar
propiedades como el color de fondo, los bordes, y el padding para mejorar la presentación visual.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias