Cabeceras y atributos de texto
Listas
Hiperenlaces
Imágenes

CABECERAS Y ATRIBUTOS DE TEXTO

Cabeceras: <H1>...<H6>                {H: Heading}

En un documento HTML podemos incluir seis tipos distintos de cabeceras, que van a constituir normalmente el título y los distintos subapartados que forman el documento, aunque podremos utilizarlas en el punto que queramos del documento para resaltar cualquier texto. Estas cabeceras son definidas por las etiquetas <H1><H2><H3><H4><H5> y <H6>. El texto que componga cada cabecera deberá estar incluido entre las etiquetas de inicio (<Hn>) y fin  (/Hn) correspondiente. La cabecera <H1>será la que muestre el texto de mayor tamaño, este tamaño irá disminuyendo hasta llegar a la cabecera </H6>.

Podemos especificar la alineación de las cabeceras mediante el atributo align. El formato sería:

<Hn align=center>

Atributos del texto:

Al texto de nuestro documento HTML  le podemos aplicar distintos atributos (negrita, cursiva, subrayado, etc..), al igual que hacemos cuando trabajamos con el procesador de textos en la edición de nuestros documentos. Para aplicar estos atributos   disponemos de distintas etiquetas, que aplicarán su efecto al texto incluido entre sus indicadores de inicio y fin:

{B: Bold} {I: Italic} {TT: Teletype} {U: Underlined} {S: Strike} {SUP: Superscript} {SUB: Subscript}

Alguna de estas etiquetas no es reconocida por determinados navegadores. Así por ejemplo, la etiqueta <BLINK> (Parpadeo) no es implementada por el Explorer. Por lo que según el explorador que estemos utilizando, podremos ver el resultado correctamente o no.

Existen otras etiquetas que nos van a servir para especificar, de manera diferenciada, unidades lógicas de nuestro documento HTML tales como citas, direcciones de correo, etc. En algunos casos el formato obtenido con estas etiquetas de estilo lógico va a ser el mismo que con las anteriores, a las que se les denomina también etiquetas de estilo físico. Algunas etiquetas de estilo lógico son:

Si queremos aplicar efectos más espectaculares a nuestro documento HTML, debemos variar el tamaño, el color y el  tipo de letra del texto. La etiqueta que nos permite todo esto es <FONT>...</FONT>, por medio de sus atributos size, color y face:

• size="n" ó "+/- n"

  
  El atributo size nos permite especificar un tamaño determinado para la fuente del texto incluido entre las etiquetas de inicio y fin, el cual puede estar entre 1 y 7. El texto de tamaño normal equivale a la fuente de tamaño 3 (fuente base). Por tanto, si especificamos size=+2, el tamaño de la fuente será 5. Y si especificamos size= -1, el tamaño será 2.

   

  Ejemplo	Resultado
  <FONT size=2>Tamaño 2</FONT>	Tamaño 2
  <FONT size=+2>Tamaño 5 (3+2)</FONT>	Tamaño 5 (3+2)
  <FONT size=-1>Tamaño 2 (3-1)</FONT>	Tamaño 2 (3-1)

   

• color="#rrggbb ó name"
  Nos va a permitir definir el color que tendrá el texto incluido entre las etiquetas.
  
  

  Ejemplo	Resultado
  <FONT color=red>Texto de color rojo</FONT>	Texto de color rojo
  <FONT color=blue>Texto de color azul</FONT>	Texto de color azul
  <FONT size=5 color=#008000>Texto verde y de tamaño 5</FONT>	Texto verde y de tamaño 5

   

• face="nombre de font"
  

  Nos va a permitir escribir texto con el tipo de letra que le especifiquemos. En el caso de que el tipo de letra que le hayamos especificado no esté cargada en el ordenador que lee la página, se usará el font por defecto del navegador.

   

  Ejemplo	Resultado
  <FONT face=Tahoma>Tipo de letra Tahoma</FONT>	Tipo de letra Tahoma
  <FONT size=4 color=blue face=Tahoma>Texto azul, de tamaño 4 y Tahoma</FONT>	Texto azul, de tamaño 4 y Tahoma

 Volver al índice

LISTAS

Podemos representar elementos en forma de lista dentro de nuestros documentos de una forma muy sencilla y con una gran versatilidad. Estas listas podrán incluir cualquiera de los  elementos HTML e incluso podemos definir listas anidadas, es decir, listas dentro de listas.

HTML nos permite crear tres tipos distintos de listas:

• Listas no numeradas
• Listas numeradas
• Listas de definiciones

Listas no numeradas: <UL>                 {UL: Unordered List}

Con este tipo de listas podemos especificar una serie de elementos sin un orden predeterminado, precedidos de una marca o viñeta que nosotros mismos podemos definir. Para la definición de los límites de la  lista utilizaremos la etiqueta <UL>.... </UL>, y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>. El formato es el siguiente:

{LH: List Head} {LI: List Item}

Con el atributo type vamos a especificar el tipo de marca o viñeta que antecederá a cada uno de los elementos de la lista. Estas marcas podrán ser: un disco (disk), un círculo (circle) o un cuadrado (square). La etiqueta <LH> nos va a servir para especificar un posible título de la lista, siendo esta opcional. Vamos a ver algunos ejemplos:

Listas  numeradas: <OL>                {OL: Ordered List}

Con este tipo de listas podemos especificar una serie de elementos numerados según el lugar que ocupan en la lista. Para la definición de los límites de la  lista utilizaremos la etiqueta <OL>.... </OL>, y para determinar cada uno de los elementos que la componen usaremos la etiqueta <LI>. El formato es el siguiente:

Con el atributo start vamos a especificar el número por el que va a empezar la lista. Si no indicamos este argumento la lista empezará a numerarse a partir del 1.

Con el atributo type vamos a especificar el tipo de lista numerada. Sus posibles valores son:

A: Letras mayúsculas (A, B, C, ...)
a: Letras minúsculas (a, b, c, ...)
I: Números romanos en mayúsculas (I, II, III, IV, ...)
i: Números romanos en minúsculas (i, ii, iii, iv, ...)
1: Numéricamente (1, 2, 3, 4, ....) (es la numeración por defecto y por tanto no habría que indicarla).

Vamos a ver algunos ejemplos:

Listas  de definiciones: <DL>                {DL: Definition List}

Estas listas nos van a servir para especificar una serie de términos y sus definiciones correspondientes. Para la definición  de la  lista usaremos la etiqueta <DL>.... </DL>, para especificar los términos usaremos la etiqueta <DT> y para especificar la definición correspondiente a cada término usaremos la etiqueta <DD>. El formato es el siguiente:

{DT: Definition Term} {DD: Definition Description}

Vamos a ver un ejemplo:

Los hiperenlaces son enlaces de hipertexto que nos van a permitir acceder  de manera directa a otros documentos HTML independientemente de su ubicación, o a otras zonas dentro de nuestro propio documento.

Enlaces a otras páginas: <A href=...>

Con este tipo de hiperenlaces vamos a poder acceder tanto a otras páginas que estén ubicadas dentro de nuestro propio sistema como a  páginas ubicadas en puntos muy distantes del globo. El formato de este tipo de hiperenlaces es:

Con el atributo href vamos a especificar la URL del documento al que se pretende acceder.
El texto contenido entre las etiquetas de comienzo y fin nos va a servir para definir el hiperenlace, por lo que debería ser clarificador del contenido del documento con el que vamos a enlazar. Esta definición aparecerá resaltada normalmente en azul y subrayada. En la mayoría de los navegadores esta definición del hiperenlace es sensible, por lo que cuando el cursor pasa por encima del mismo este cambia de aspecto indicándolo.

Veamos un ejemplo:

Si situamos el ratón encima del hiperenlace y pulsamos, el navegador accederá a la página Web indicada por href, es decir, accederá a la página situada en http://www.enlaces.uda.cl.

Igualmente podríamos indicar el hiperenlace por medio de una imagen. Si esta imagen tiene definido un borde, este aparecerá resaltado en color azul. El formato correspondiente sería:

{IMG: Image} {src: Source}

Ejemplo:

Ejemplo	Resultado
<A href="http://www.enlaces.uda.cl"><IMG src="Icono.gif"></A>Red Enlaces III Región	Red Enlaces III Región

Si pulsamos sobre la imagen, el navegador accederá a la página Web inicial de Villa Eidos.

Enlaces dentro de la misma página: <A name=...>

Este tipo de hiperenlaces nos va a permitir marcar distintas zonas del documento activo con el objeto de tener un acceso directo a las mismas. Una buena utilidad de este tipo de enlaces radica en la creación de índices para documentos largos, de forma que si pinchamos en el hiperenlace correspondiente al título de un  capítulo determinado, el navegador saltará automáticamente hasta el comienzo de dicho capítulo.

Para la creación de estos hiperenlaces, debemos seguir dos pasos:

1º)    Marcar las distintas zonas o secciones del documento.
        Esto lo haremos con el parámetro name:

A cada sección le asignaremos un identificador distinto, para poder referenciarlas posteriormente de manera inequívoca.

2º)    Especificar un enlace a cada una de las secciones que hayamos definido.

        Si pinchamos en este enlace, el navegador saltará automáticamente a la sección correspondiente.

Veamos un ejemplo sencillito, pero demostrativo, de todo lo que acabamos de explicar:

Si nos creamos una página HTML con distintos capítulos, podríamos crear una sección para cada uno de ellos, de forma que si pinchamos en el hiperenlace correspondiente al Capítulo 1, el navegador saltaría directamente a la sección correspondiente al Capítulo 1.

Además de los dos tipos de hiperenlaces vistos, podemos crear hiperenlaces que nos permitan acceder a cualquiera de los servicios de Internet. Es decir, podríamos indicar enlaces a servidores FTP, GOPHER, NEWS, MAILTO, etc. Para ello tendríamos que indicar la URL correspondiente al servicio al cual queremos acceder, como ya vimos en el primer capítulo de este manual.

Podremos dar un aspecto mucho más vistoso a nuestros documentos HTML con la inclusión de imágenes. Los formatos de imagen que todos los navegadores reconocen son: gif y jpg. Si queremos insertar una imagen en   otro formato, el visor debería disponer del programa externo que permita su visualización. De todas formas, una buena solución es utilizar algún programa de tratamiento de imágenes que nos convierta la imagen a uno de los formatos mencionados anteriormente.

El formato gif es más recomendado para la inclusión de iconos, gráficas,.. y el formato jpg para el caso de insertar fotografías en nuestras páginas.

La etiqueta que nos va a permitir la inserción de imágenes es <IMG>. La imagen se insertará justo en el punto del documento donde coloquemos dicha etiqueta, pudiendo insertar imágenes dentro de listas, tablas o formularios.

El  formato de la etiqueta, con sus posibles argumentos, es el siguiente:

• src="URL de la imagen"

  El atributo src  nos va servir para indicar la URL  de la imagen que queremos insertar, es decir, el servidor y camino hasta llegar al archivo de la imagen. No será necesario que la imagen que queremos insertar en nuestro documento esté en el ordenador local, aunque sí es recomendable ya que el acceso a las mismas puede ser más lento. Por tanto, es una buena práctica copiar todas las imágenes, que vallamos a incluir en nuestro documento HTML, al ordenador local.

  Ejemplo	Resultado
  <IMG src="ovni.gif">

  
  

• alt="Texto alternativo"

  Nos va a permitir mostrar un texto alternativo para el caso en que el navegador no sea capaz de mostrar la imagen. Su uso es muy recomendable ya que cuando publiquemos nuestras páginas en la WWW, no sabremos desde qué tipo de navegadores accederán los internautas a nuestras páginas.
  Vamos a ver un ejemplo. Si usas un navegador que no tiene ningún problema para la visualización de imágenes, desactiva temporalmente la opción de mostrar imágenes, prueba el siguiente ejemplo y compáralo con el anterior:

  Ejemplo	Resultado
  <IMG src="ovni.gif" alt="OVNI a la vista">

  
  

• align=top/middle/botton   left/rigth
  Nos permite indicar cómo se alineará el texto que siga a la imagen.

         top: alinea el texto con la parte superior de la imagen.
         middle: con la parte central.
         bottom: con la parte inferior.

         left: imagen alineada a la izquierda de la página.
         rigth: imagen alineada a la derecha de la página.

  Ejemplo	Resultado
  <IMG src="ovni.gif" align=top><b>OVNI</b> modelo 747	OVNI modelo 747
  <IMG src="ovni.gif" align=middle><b>OVNI</b> modelo 747	OVNI modelo 747
  <IMG src="ovni.gif" align=bottom><b>OVNI</b> modelo 747	OVNI modelo 747

  En el caso de que el texto que acompaña a la imagen tenga más de una línea, tan sólo la primera será la que se alineará según alguna de las anteriores alineaciones, el resto de líneas se incluirán debajo de la imagen quedando un efecto bastante feo. Para solventar esto, están las alineaciones LEFT (imagen alineada a la izquierda de la página) y RIGHT (imagen alineada a la derecha de la página). Las cuales permiten que la imagen se inserte dentro del párrafo que la rodea, produciendo un resultado mucho más profesional en la integración de texto e imágenes. Estas dos alineaciones no se podrán usar en combinación con las anteriores. Veamos algunos ejemplos clarificadores:

  Ejemplo	Resultado
  <IMG src="ovni.gif" align=top><b>OVNI</b><br> (Objeto Volante No Identificado).	OVNI (Objeto Volante No Identificado).
  <IMG src="ovni.gif" align=left><b>OVNI</b><br> (Objeto Volante No Identificado).	OVNI (Objeto Volante No Identificado).
  <IMG src="ovni.gif" align=right><b>OVNI</b><br> (Objeto Volante No Identificado).	OVNI (Objeto Volante No Identificado).

  Vemos como en el primer ejemplo la segunda línea de texto aparece debajo de la imagen produciendo un efecto menos vistoso que en los dos ejemplos siguientes.

   

• border="Tamaño"

  Permite añadirle un borde a la imagen del tamaño que le especifiquemos. Si la imagen forma parte de un hiperenlace esta aparecerá con un borde del color del hiperenlace. Si no deseáramos que aparezca este borde tendríamos que especificar border=0.

  Ejemplo	Resultado
  <IMG src="ovni.gif" align=bottom border=2><i>Ovni.gif</i>	Ovni.gif

• height="Tamaño"
  Permite especificar el alto de la imagen, en puntos de pantalla (pixels) o en % del tamaño del documento

• width="Tamaño"
  Con este argumento especificaremos el ancho al que mostraremos la imagen: en puntos de pantalla (pixels) o en % del tamaño del documento

   

  Ejemplo	Resultado
  <IMG src="ovni.gif"  border=2 width = 100 height=50>
  <IMG src="ovni.gif"  border=2 width = 50%>

  En el segundo de estos ejemplos el ancho de la imagen se ha extendido al 50% del total del ancho de la celda donde está contenida la imagen. Si pruebas este ejemplo en tu documento HTML, la imagen se extenderá horizontalmente hasta ocupar el 50% del ancho de la página.

• hspace="Margen"                {hspace: Horizontal Space}
  Permite especificar el número de espacios horizontales (en puntos) que separarán a la imagen de cualquier elemento que le siga o le anteceda.

• vspace="Margen"                 {vspace: Vertical Space}
  Con este argumento especificaremos el margen vertical (en puntos) que habrá entre la imagen y cualquier otro elemento de nuestro documento.

   

  Ejemplo	Resultado
  <IMG src="ovni.gif"><IMG src="ovni.gif" hspace=25><IMG src="ovni.gif" hspace=30 ><IMG src="ovni.gif">