Block Vs Inline
Block Vs Inline
Existen 2 tipos de elementos en HTML: Complementos de XHTML
Complementos de XHTML
• block‐level
• inline‐level inline level
Los elementos de nivel bloque empiezan en un nueva línea. No es posible
desplegar 2 elementos de tipo bloque en la misma línea (a menos que se utilicen
CSS). Los bloques pueden contener otros bloques ó elementos de tipo en‐línea
Los elementos de tipo en‐línea se despliegan en el lugar que ocurren en el documento. Solo pueden contener texto y otros elementos de tipo en‐línea.
documento
Solo pueden contener texto y otros elementos de tipo en‐línea
Vertical division <div>
Vertical division
<div> permite dividir en bloques una página HTML.
Generalmente se utiliza en combinación con las
hojas de estilo para definir la presentación de un segmento del documento. del documento
Horizontal division <span>
Horizontal division
Este elemento también permite dividir
arbitrariamente un documento
un documento pero opera en línea.
opera en línea
Her limericks weren’t worth a <span style="color:blue">P</span>enny
p
y
/p
y
<div>Este es un bloque</div> <div>Este es otro bloque</div> Her limericks weren’t worth a Penny
Este es un bloque
Este
es un bloque
Este es otro bloque
Atributo Style
Atributo Style
Una manera de cambiar el estilo de una página es simplemente
d l
declarandolo
d l dentro
d t de una
d
etiqueta
ti
t HTML mediante
HTML
di t el atributo
l t ib t
“style”
style= propiedad:valor style="propiedad:valor"
Aplicando varias propiedades
Aplicando varias propiedades
Para aplicar mas de una propiedad, se separa cada una de ellas con “;” por ejemplo:
<div style="color:red
<div
style "color red ; font‐style:italic
font style italic ">Mi color es
">Mi color es rojo, estilo
rojo estilo
itálico!</div>
Ejemplo:
<div style="color:red">Mi color es rojo!</div> La propiedad es "color". El valor de la propiedad es"red". Note que
se usan 2 puntos entre la propiedad y el valor.
Ejemplo
<html ><head><title>Introductions</title></head><body>
POEME
div style
style="color:
color: red;background: beige
red;background: beige">A
A worse poet however was worse poet however was
<div
J<span style="color:green">enny</span>.
<br/>
Her limericks weren’t worth a P<span style="color:green">enny</span>
<br/>
Though the invention was
s<span style="color: blue; background: yellow">ound</span>
<br/>
/
She always f<span style="color: blue; background:yellow">ound</span> <br/>
That whenever she tried to write <span style "color green">any</span>
That, whenever she tried to write <span style="color:green">any</span>
<br/>
She always had one line to m<span style="color:green">any.</span>
<br/>
</div>
</body></html>
Resultado
0
