Clase 4

La etiqueta <blockquote>... </blockquote>

Otra etiqueta relacionada con el formato de párrafos en HTML es
<blockquote>, que consta de una instrucción de inicio y una de fin y que indica
que el párrafo que encierra es un texto parafraseado. Al usar esta etiqueta el
navegador mostrará el texto en un nuevo párrafo con márgenes a la izquierda y
a la derecha.

La etiqueta <blockquote> es usada para insertar bloques de texto que

citan a otro autor. Los navegadores suelen introducir una sangría en este
texto.

Mi poema favorito es aquel de Federico García Lorca que reza:

<blockquote>
Mi corazón, como una sierpe
se ha desprendido de su piel,
y aquí la miro entre mis dedos
llena de heridas y de miel
</blockquote>

<blockquote>
Mi corazón, como una sierpe</br>
se ha desprendido de su piel,</br>
y aquí la miro entre mis dedos</br>
llena de heridas y de miel</br>
</blockquote>

La etiqueta <center>... </center>

En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro
elemento de la página debía ser centrado. Sin embargó no todas las etiquetas
tienen el atributo “align”. La solución es emplear una nueva etiqueta: center.
Ésta está compuesta por una instrucción de inicio y una de fin de manera que
todo dentro de ella estuviese centrado. Por ejemplo, en el ejemplo del verso de
Lorca podemos centrarlo escribiendo:
Mi poema favorito es aquel de Federico García Lorca que reza:
<center>
Mi corazón, como una sierpe
se ha desprendido de su piel,
y aquí la miro entre mis dedos
llena de heridas y de miel
</center>
<center>
<blockquote>
Mi corazón, como una sierpe
se ha desprendido de su piel,
y aquí la miro entre mis dedos
llena de heridas y de miel
</blockquote>
</center>
<center>
<p>
Mi corazón, como una sierpe</br>
se ha desprendido de su piel,</br>
y aquí la miro entre mis dedos</br>
llena de heridas y de miel</br>
</p>
</center>

Cómo insertar imágenes en una página.

La etiqueta usada para insertar imágenes es: <img>. Esta etiqueta está
compuesta por una única instrucción y por tanto </img> <center>
Este es un <img src="sobre.gif">sobre
</center>

Se puede observar cómo hemos insertado un sobre en medio de la frase y

después de la imagen hemos seguido escribiendo. Aunque podemos crear este
efecto con imágenes de todos los tamaños no es recomendable hacerlo con
aquellas que tengan una altura mucho mayor que la del texto.

Para insertar una imagen en una página WEB necesitamos tenerla en un

archivo aparte. Existen multitud de formatos para almacenar una imagen en un
archivo: BMP, GIF, JPEG, XPM, XBM, PNG, TIFF, etc. cada uno de los cuales
tienen unas características. El formato elegido en el World Wide Web es el
formato GIF que distingue a sus archivos porque tienen la terminación “.gif”.
Podríamos decir que todos los navegadores son capaces de mostrar las
imágenes incluidas en este formato. Los navegadores en modo texto suelen
proporcionar métodos para ver las imágenes usando algún programa visor
externo. Un segundo formato que se ha introducido en el WWW y que es
soportado por la gran mayoría de los navegadores (incluyendo al Explorer™ y
al Navigator ™) es el JPEG. Este formato es especialmente útil para las fotos
ya que es capaz de comprimir este tipo de imagen de manera que ocupen
hasta 4 veces menos que las imágenes con formato GIF. Los archivos que
contienen imágenes con formato JPEG suelen tener la terminación “.jpg”.
La etiqueta <img> nos propone otra serie de atributos de mayor o menor
utilidad, que listamos a continuación:

Atributo alt

Dentro de las comillas de este atributo colocaremos una brevísima descripción

de la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades.

Primeramente, durante el proceso de carga de la página, cuando la imagen no

ha sido todavía cargada, el navegador mostrara esta descripción, con lo que el
navegante se puede hacer una idea de lo que va en ese lugar.

Esto no es tan trivial si tenemos en cuenta que algunos usuarios navegan por
la red con una opción del navegador que desactiva el muestreo de imágenes,
con lo que tales personas podrán siempre saber de qué se trata el gráfico y
eventualmente cambiar a modo con imágenes para visualizarla.

Además, determinadas aplicaciones para discapacitados o teléfonos vocales

que no muestran imágenes ofrecen la posibilidad de leerlas por lo que nunca
está de más pensar en estos colectivos.

En general podemos considerar como aconsejable el uso de este atributo salvo

para imágenes de poca importancia y absolutamente indispensable si la
imagen en cuestión sirve de enlace.

Atributos height y width

Definen la altura y anchura respectivamente de la imagen en píxeles.

Todos los archivos gráficos poseen unas dimensiones de ancho y alto. Estas
dimensiones pueden obtenerse a partir del propio diseñador grafico o bien
haciendo clic con el botón derecho sobre la imagen vista por el navegador para
luego elegir propiedades sobre el menú que se despliega.

El hecho de explicitar en nuestro código las dimensiones de nuestras imágenes

ayuda al navegador a confeccionar la página de la forma que nosotros
deseamos antes incluso de que las imágenes hayan sido descargadas.

Así, si las dimensiones de las imágenes han sido proporcionadas, durante el

proceso de carga, el navegador reservara el espacio correspondiente a cada
imagen creando una maquetación correcta. El usuario podrá comenzar a leer
tranquilamente el texto sin que este se mueva de un lado a otro cada vez que
una imagen se cargue.

Además de esta utilidad, el alterar los valores de estos dos atributos, es una
forma inmediata de redimensionar nuestra imagen. Este tipo de utilidad no es
aconsejable dado que, si lo que pretendemos es aumentar el tamaño, la
pérdida de calidad de la imagen será muy sensible. Inversamente, si deseamos
disminuir su tamaño, estaremos usando un archivo más grande de lo necesario
para la imagen que estamos mostrando con lo que aumentamos el tiempo de
descarga de nuestro documento innecesariamente.

Es importante hacer hincapié en este punto ya que muchos debutantes tienen

esa mala costumbre de crear gráficos pequeños redimensionando la imagen
por medio de estos atributos a partir de archivos de tamaño descomunal. Hay
que pensar que el tamaño de una imagen con unas dimensiones de la mitad no
se reduce a la mitad, sino que resulta ser aproximadamente 4 veces inferior.

Atributo border

Definen el tamaño en píxeles del cuadro que rodea la imagen.

De esta forma podemos recuadrar nuestra imagen si lo deseamos. Es

particularmente útil cuando deseamos eliminar el borde que aparece cuando la
imagen sirve de enlace. En dicho caso tendremos que especificar border="0".

<center>
Este es un <img src="sobre.gif">sobre
</center>
<img src="sobre.gif" width="28" height="21" alt="Tamaño original" border="3"/>
<br>
<br>
<img src="sobre.gif" width="68" height="21" alt="Achatada" border="0"/>
<br>
<br>
<img src="sobre.gif" width="28" height="51" alt="Alargada" border="0"/>
<br>
<br>
<img src="sobre.gif" width="56" height="42" alt="Doble grande" border="0"/>

La etiqueta <a>... </a>

Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas
enlaces hipertexto. Su atributo ’href’ permite indicar cuál es la página a la que
debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace
será aquel que se introduzca entre la instrucción de inicio y la instrucción de
final de la etiqueta y debe ser resaltado por el navegador para que el usuario
sepa que puede pulsar en él. La estructura de un link es:

<a href="dirección_URL"> Texto que será sensible (hipertexto) </a>

Los navegadores gráficos como Netscape Navigator ™y Microsoft Internet

Explorer ™ resaltan este texto mostrándolo de un color diferente y
subrayándolo, además el cursor cambiará al situarlo sobre el texto. Los
navegadores que funcionan en modo texto como Lynx™ resaltan los enlaces
hipertexto cambiando el color del texto y de su fondo.

Crear enlaces externos-externos

Ejemplo: <a href=http://www.uis.edu.co>UNIVERSIDAD INDUSTRIAL DE

SANTNADER</a>

Crear enlaces externos-internos

Si queremos vincular a una página de nuestro sitio Web no hará falta

especificar la ruta, sino tan sólo el archivo, pero si es renombrado, habrá que
modificar el vínculo.

Ejemplo: <a href= dos.html >las listas de la clase uno </a>

Enlaces internos-internos

Si queremos vincular a una parte de la página como por ejemplo, el principio,

definiremos un marcador: <a name=principio></a> y a continuación el
hipervínculo <a href=#Principio></a>

Podemos hacer enlaces a mandar un correo:

Mailto significa correo a.

<a href="mailto:redes.web.datos@gmail.com"> correo del curso de web</a>.

Ejemplo completo <a> </a>

Nombre pagina (laotra.html)

<HTML>
<HEAD>
<TITLE>Ejemplo_1</TITLE>
</HEAD>
<BODY>
Hola clase de web
</BODY>
</HTML>
Nombre de la página (ejemplo1.html)

<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A></br>
<a href=laotra.html >página de hola mundo </a></br></br>
<a href=http://www.uis.edu.co>UNIVERSIDAD INDUSTRIAL DE
SANTNADER</a></br></br>
<a href="mailto:redes.web.datos@gmail.com"> correo del curso de web</a>.
</br>.</br>.</br>.</br>.</br>.</br>.</br>.</br></br>
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br></br></br></br></br></br></br></br></br></br>
</br></br></br>.</br>.</br>.</br>.</br>.</br>
<A NAME="abajo"></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>

Truco: Utilizar imagenes como enlaces

Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de
enlace.

Se llama laotra.html

<title> IMAGEN </title>

</head>
<body>
<a href="ejemplo1.html"><img src="sobre.gif"/></a>
</body>