HTML fácil y para todos IV: Elementos de los párrafos.

En este post continuare con los elementos que acompañan a los párrafos. Visualmente habrá cosas que os mostrare con una imagen, pero al final de estos post tendréis un PDF (gratis) descargable que os dejare para que lo veáis todo muy bien.

Como dije al principio de estos post o curso, estoy resumiendo a partir de todos los apuntes que tengo de HTML porque quiero que sepáis lo más básico, ya que cuando finalice empezare con HTML5. Así que continuo con los elementos que acompañan a los párrafos.

El elemento <P> admite cuatro atributos de alineación:

• ALIGN=LEFT (por defecto, osea derecha)
• ALIGN=RIGHT (izquierda)
• ALIGN=CENTER (centrado)
• ALIGN=JUSTIFY (justificado)

Se escribirán así:

<P ALIGN=LEFT>
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 </P>

<P ALIGN=RIGHT>
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

<P ALIGN=CENTER>
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 </P>

<P ALIGN=JUSTIFY>
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4
Texto 4 Texto 4 Texto 4 Texto 4 Texto 4  Texto 4 Texto 4 Texto 4 </P>

Y este sería el resultado:

Haced clic sobre la imagen para verla más grande.

Otro elemento que se comporta de forma parecida a <BR> es <DIV>. Recordemos que <BR> se utilizaba para que no se creara una linea de sepación entre texto y texto.

Cuidado recordad que <BR> sólo elimina espacios estando así:
<P>Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 <BR> Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 </P>

<DIV> admite los mismos atributos que <P>:

• ALIGN=LEFT 
• ALIGN=RIGHT 
• ALIGN=CENTER

Se escribe así:

<DIV ALIGN=LEFT>
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1 texto1
</DIV>

<DIV ALIGN=RIGHT>
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2 texto2
< /DIV>

<DIV ALIGN=CENTER>
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3 texto3
</DIV>

Fíjate en que aquí sí se utiliza el cierre </DIV>. Este sería el resultado:

Haced clic sobre la imagen para verla más grande.

<DIV> se utiliza para definir bloques especiales definidos con instrucciones de estilo como son bordes, tamaño, situación, alineación, color, etc...

Como veis en esta imagen en la parte del HTML del post, aparece este elemento, donde indica como esta situada y alineada una imagen. También he marcado <br/> que funciona como separador o para dar espacios y que no debemos confundir con <BR> como elemento que rompe un espacio. Tened mucho ojo con esto.

Otro elemento muy parecido a <DIV>, aunque se diferencian en muchas cosas es <SPAN>, que se utiliza para las hojas de estilo y del cual hablare en otro post.

<BLOCKQUOTE> que sirve para presentar párrafos adentrados (como si estuviesen tabulados).

Se escribirá así:

<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
<BLOCKQUOTE>
texto texto texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto texto texto
</BLOCKQUOTE>
</BLOCKQUOTE>


<HR> (por Horizontal Rule), que es un separador de textos, y seria como una recta horizontal.

Admite: WIDTH y SIZE. El primero define la longitud de la línea y el segundo su anchura. No es obligado usar los dos a la vez.

Por ejemplo se utilizaría así: <HR WIDTH=400 SIZE=5> (La longitud no esta definida en cm sino en  pixeles)

Además se puede indicar su posición respecto a los márgenes de la ventana mediante: 

• ALIGN=CENTER (por defecto) 
• ALIGN=LEFT
• ALIGN=RIGHT.

Por ejemplo: <HR WIDTH=80% SIZE=5 ALIGN=LEFT>

10detecnologia

La taverna del Mastï

Horizonte Femenino.