Tema 3 - Elementos para dar Formato a la Página

Espaciados y Saltos de Línea

    En HTML no está permitido más de un elemento blanco (espacios, tabuladores, saltos de línea) separando cualquier elemento o texto, el resto de los espacios seran ignorados por el visor.

Esta     es    una      frase
   con   dos   líneas.

  Espacios en blanco

     Con esta secuencia de caracteres conseguiremos espacios en blanco que se mostrarán de forma efectiva, pudiendo mostrar más de un espacio en blanco de separación. Se incluirán tantas expresiones   como espacios en blanco se desee conseguir.

<BR> Salto de línea (Break)

• Inserta un salto de Línea, sin dejar espaciado entre líneas.

• No admite etiqueta de cierre.

• Admite el atributo CLEAR, con valores: none,   left,   right   y   all

• CLEAR especifica donde continua la siguiente línea cuando hay una imagen flotante.

  • none:  No hace nada. (valor por defecto)

  • left:     Continua debajo de imágenes alineadas a la izquierda.

  • right:  Continua debajo de imágenes alineadas a la derecha.

  • all:      Continua debajo de imágenes sin importar su alineación.

<P> Párrafo

• Define un párrafo dentro del documento.

• Introduce una separación de línea o línea y media antes y a continuación del párrafo.

• La etiqueta de fin de párrafo </P> es opcional si va antes de un nuevo párrafo <P>.

• Admite el atributo ALIGN, con valores:  left,  center, right   y   justify .

<DIV> Bloques de Texto (División)

• Define un bloque dentro del documento.

• Introduce un salto de línea delante y detrás del bloque.

• No incluye ningún espaciado vertical adicional a diferencia de <P>.

• La etiqueta de fin de bloque </DIV> es necesaria.

• Admite el atributo ALIGN, con valores:  left,  center, right   y   justify .

<CENTER> Centrado de texto e imágenes

• Todo lo que se encuentre en el interior del bloque aparece centrado.

• Es exactamente igual a <DIV ALIGN="center">.

• No tiene ningún atributo.

<SPAN> Separación de Texto

• Es equivalente a <DIV>, pero no introduce un salto de línea delante y detrás del bloque.

• Se utiliza en combinación con las hojas de estilo.

• Sólo admite el atributo STYLE, que se verá con las hojas de estilo.

<HR> Línea Horizontal (Horizontal Rule)

• Introduce una línea gráfica Horizontal.

• No admite etiqueta de cierre.

• Por defecto dibuja una línea que ocupa el ancho de la ventana del navegador e introduce una separación con el texto anterior y siguiente, equivalente a cambio de párrafo.

• Admite los atributos  ALIGN,  NOSHADE,  SIZE  y  WIDTH.

<HR  ALIGN="left | center | right"  NOSHADE  SIZE="n"  WIDTH="n" >

• NOSHADE

     No muestra la sombra de la barra, evitando el efecto en tres dimensiones.

• SIZE="n"

     Indica la altura o grosor de la línea en puntos de la pantalla.

• WIDTH="n" ó "n%"

Especifica el ancho de la línea, se puede especificar en tanto por ciento del ancho de la ventana <HR WIDTH="50%"> o en valor absoluto <HR WIDTH="75"> en pixels.

<PRE> Texto Preformateado

• Hace que el navegador respete los saltos de línea, tabulaciones y espacios en blanco.

• Utiliza una fuente de ancho fijo, normalmente la Courier.

• Necesita etiqueta de cierre.

• Dentro de la etiqueta <PRE> no tendrán validez la mayoría de las instrucciones HTML, sólo se podrán utilizar <B>, <I> y los enlaces.

• Admite el atributo WIDTH, que indica la anchura en columnas del texto. Puede tomar los valores de 40, 80 y 132. Por defecto es 80.

Este texto    se verá
tal y como se
escribió.

<H1> - <H6> Cabeceras de títulos

• Es posible definir seis tipos distintos de cabeceras.

• La etiquetas que definen las cabeceras son <H1>, <H2>, <H3>, <H4>, <H5>, <H6>

• Admite el atributo ALIGN.

    Los textos marcados como "cabeceras" provocan automaticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo

<Hn ALIGN="alineación">  Atributo de Alineación

    Los diferentes valores que puede tomar son:

     left,  center, right   y   justify

Ejemplo	Se vería como
<H1>Texto de Prueba</H1>	Texto de Prueba
<H3 ALIGN="center">Texto de Prueba</H3>	Texto de Prueba
<H4 ALIGN="right">Texto de Prueba</H4>	Texto de Prueba
<H5>Texto de Prueba</H5>	Texto de Prueba

 

---

<BASEFONT>  Fuente por defecto

• Define las características de la fuente (letra) que se empleará por defecto (tamaño, color y tipo).

• Actua desde donde se coloca en adelante.

• No admite etiqueta de cierre.

• Admite los atributos  COLOR,  FACE  y  SIZE.

<BASEFONT  COLOR="#rrvvaa" FACE="fuente1, fuente2, ..."   SIZE="n" >

• FACE="fuente1, fuente2, ..."

     Indica la lista de fuentes a utilizar, se utiliza la primera que esté disponible.

• SIZE="n"

     Indica el tamaño de la fuente que se tomará como base (tamaño normal) para definir los tamaños de fuente relativos. Su valor puede estar entre 1 y 7. Por defecto es 3.

Inst. HTML	Muestra	Explicación
<FONT SIZE="-2">Muestra1</FONT> <BASEFONT SIZE="5"> <FONT SIZE="-2">Muestra2</FONT>	Muestra1 Muestra2	El nuevo valor para el cálculo del tamaño relativo será 5, notándose el efecto en el tamaño de las fuentes

 

---

 

 

<FONT>  Fuente

• Define las características de la fuente en un determinado bloque (tamaño, color y tipo).

• Requiere etiqueta de cierre.

• El cambio de color no afectará al texto incluido en un hiperenlace.

• Puede englobar todo un documento pero no las celdas de una tabla.

• Admite los atributos  COLOR,  FACE  y  SIZE.

<FONT  COLOR="#rrvvaa"  FACE="fuente1, fuente2, ..."   SIZE="n" >

• SIZE="n" ó "±n"

     Indica el tamaño de la fuente en valor absoluto o relativo al normal. Su valor puede estar entre 1 y 7.

         

     Ejemplos de tamaños de fuentes

Inst. HTML	Muestra	Explicación
<FONT SIZE="2">Muestra</FONT>	Muestra	Texto de tamaño de fuente 2
<FONT SIZE="6">Muestra</FONT>	Muestra	Este texto es de tamaño de fuente 6
<FONT SIZE="-1">Muestra</FONT>	Muestra	Obtendriamos también en este caso texto de tamaño de fuente 2, pero lo definiríamos de forma relativa: 3-1=2

<FONT SIZE="+2">Muestra</FONT>	Muestra	Así definiríamos fuente de tamaño 5 de forma relativa: 3+2=5
<FONT SIZE="6"> Muestra1  <FONT SIZE="1"> Muestra2 </FONT> Muestra3 </FONT>	Muestra1 Muestra2 Muestra3	Se pueden combinar en una misma frase varios tamaños de fuentes

 

Ejemplos de definición de colores de fuentes

Inst. HTML	Muestra	Explicación
<FONT COLOR="#FF00FF">Muestra </FONT>	Muestra	El texto se mostrará de un color lila, al mezclar los colores rojo y azul.
<FONT COLOR="aqua">Muestra</FONT>	Muestra	También se puede utilizar uno de los colores predefinidos.
<FONT SIZE="5" COLOR="red"> Muestra </FONT>	Muestra	Se puede combinar con el tamaño de fuente
<FONT COLOR="navy">Mue     <FONT SIZE="5" COLOR="red">str     </FONT>a </FONT>	Muestra	Se pueden combinar varios colores en una misma frase o palabra.
<H3><FONT COLOR="#81426E">       Mu<I>es</I>tra</FONT> </H3>	Muestra	Pueden ser utilizados junto con otros elementos de resalte como cabeceras, estilos físicos y lógicos, etc ...

 

---

<ADDRESS>  Dirección

• Se utiliza para indicar la dirección, fecha o autoría del documento.

• Requiere etiqueta de cierre.

• Introduce un salto de párrafo delante y detrás del bloque.

• Suele visualizarse en itálica y con sangrado.

---

 

<BLOCKQUOTE>  Cita

• Se utiliza para citar textualmente alguna cita de otro autor.

• Requiere etiqueta de cierre.

• Introduce un salto de párrafo delante y detrás del bloque.

• Suele visualizarse en itálica y con sangrado a derecha e izquierda.

---

Estilos lógicos y físicos

Estilos lógicos

• Cambia la apariencia del texto según el tipo de información que aporte.

• El aspecto final depende del Navegador empleado.

• Requiere etiqueta de cierre.

Etiqueta HTML	Ejemplo	Descripción
<ADDRESS>	Ejemplo	Para especificar direcciones de correo electrónico.
<BLOCKQUOTE>	Ejemplo	Introduce citas textuales o texto destacado.
<CITE>	Ejemplo	Indica el título de una película o un libro.
<CODE>	Ejemplo	Código fuente de un lenguaje de programación. Con espaciado fijo (Courier)
<DFN>	Ejemplo	Especifica una definición.
<EM>	Ejemplo	Indicará enfasis.
<KBD>	Ejemplo	Texto introducido desde el teclado.
<SAMP>	Ejemplo	Mensajes de estado del ordenador.
<STRIKE>	Ejemplo	Texto desechado, tachado.
<STRONG>	Ejemplo	Especifica texto resaltado.
<VAR>	Ejemplo	Indica una variable.

Estilos Físicos

• Cambia la apariencia del texto según el tipo de información que aporte.

• El aspecto final depende del Navegador empleado.

• Requiere etiqueta de cierre.

Etiqueta HTML	Ejemplo	Descripción
<B>	Ejemplo	Negrita (Bold).
<I>	Ejemplo	Cursiva (Itálic).
<TT>	Ejemplo	Maquina de escribir (Teletype), muestra una fuente de caracteres de espaciado fijo (Normalmente Courier).
<BLINK>	Ejemplo	Parpadeo.
<SUB>	Ejemplo	Subíndice.
<SUP>	Ejemplo	Superíndice.
<BIG>	Ejemplo	Texto grande, de tamaño mayor que el normal.
<SMALL>	Ejemplo	Texto pequeño, de tamaño menor que el normal.

      Los estilos se pueden combinar entre sí obteniendo cualquier efecto deseado.

Ejemplo
Inst. HTML	Este texto es <B>negrita, <I>cursiva y <BLINK>parpadeante </BLINK></I></B>
Resul tado	Este texto es negrita, cursiva y parpadeante
Explica ción	El texto es por tramos negrita, cursiva y parpadeante.

 

---