Clase 4

Clase 4
La etiqueta <blockquote>... </blockquote>

Otra etiqueta relacionada con el formato de prrafos en HTML es
<blockquote>, que consta de una instruccin de inicio y una de fin y que indica
que el prrafo que encierra es un texto parafraseado. Al usar esta etiqueta el
navegador mostrar el texto en un nuevo prrafo con mrgenes 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 sangra en este
texto.

<html>
<head>
<title>La etiqueta <blockquote> </title>
</head>
<body>
Mi poema favorito es aquel de Federico Garca Lorca que reza:
<blockquote>
Mi corazn, 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 corazn, como una sierpe
se ha desprendido de su piel,
y aqu la miro entre mis dedos
llena de heridas y de miel
</blockquote>

</body>
</html>

La etiqueta <center>... </center>
En ocasiones puede ser muy til indicar que algn texto, imagen o algn otro
elemento de la pgina deba ser centrado. Sin embargo no todas las etiquetas
tienen el atributo align. La solucin es emplear una nueva etiqueta: center.
sta est compuesta por una instruccin 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:

<html>
<head>
<title>La etiqueta <blockquote> </title>
</head>
<body>
Mi poema favorito es aquel de Federico Garca Lorca que reza:
<center>
</center>
<center>
<blockquote>
</blockquote>
</center>
<center>
<blockquote>
Mi corazn, como una sierpe
se ha desprendido de su piel,
y aqu la miro entre mis dedos
llena de heridas y de miel
</blockquote>
</center>
</body>
</html>

Cmo insertar imgenes en una pgina.
La etiqueta usada para insertar imgenes es: <img>. Esta etiqueta est
compuesta por una nica instruccin y por tanto </img> no existe y su uso est
prohibido.
<html>
<head>
<title> IMAGEN </title>
</head>
<body>
<center>
Este es un <img src="sobre.gif">sobre
</center>
</body>
</html>

Se puede observar como hemos insertado un sobre en medio de la frase y
despus de la imagen hemos seguido escribiendo. Aunque podemos crear este
efecto con imgenes de todos los tamaos no es recomendable hacerlo con
aquellas que tengan una altura mucho mayor que la del texto.

Para insertar una imagen en una pgina 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 caractersticas. El formato elegido en el World Wide Web es el
formato GIF que distingue a sus archivos porque tienen la terminacin .gif.
Podramos decir que todos los navegadores son capaces de mostrar las
imgenes incluidas en este formato. Los navegadores en modo texto suelen
proporcionar mtodos para ver las imgenes usando algn programa visor
externo. Un segundo formato que se ha introducido en el WWW y que es
soportado por la gran mayora 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 imgenes con formato GIF. Los archivos que
contienen imgenes con formato JPEG suelen tener la terminacin .jpg.

La etiqueta <img> nos propone otra serie de atributos de mayor o menor
utilidad, que listamos a continuacin:
Atributo alt
Dentro de las comillas de este atributo colocaremos una brevsima descripcin
de la imagen. Esta etiqueta no es indispensable pero presenta varias utilidades.
Primeramente, durante el proceso de carga de la pgina, cuando la imagen no
ha sido todava cargada, el navegador mostrara esta descripcin, 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 opcin del navegador que desactiva el muestreo de imgenes,
con lo que tales personas podrn siempre saber de qu se trata el grfico y
eventualmente cambiar a modo con imgenes para visualizarla.
Adems, determinadas aplicaciones para discapacitados o telfonos vocales
que no muestran imgenes ofrecen la posibilidad de leerlas por lo que nunca
est de ms pensar en estos colectivos.
En general podemos considerar como aconsejable el uso de este atributo salvo
para imgenes de poca importancia y absolutamente indispensable si la
imagen en cuestin sirve de enlace.
Atributos height y width
Definen la altura y anchura respectivamente de la imagen en pxeles.
Todos los archivos grficos poseen unas dimensiones de ancho y alto. Estas
dimensiones pueden obtenerse a partir del propio diseador grafico o bien
haciendo clic con el botn derecho sobre la imagen vista por el navegador para
luego elegir propiedades sobre el men que se despliega.
El hecho de explicitar en nuestro cdigo las dimensiones de nuestras imgenes
ayuda al navegador a confeccionar la pgina de la forma que nosotros
deseamos antes incluso de que las imgenes hayan sido descargadas.
As, si las dimensiones de las imgenes han sido proporcionadas, durante el
proceso de carga, el navegador reservara el espacio correspondiente a cada
imagen creando una maquetacin 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.
Adems 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 tamao, la
prdida de calidad de la imagen ser muy sensible. Inversamente, si deseamos
disminuir su tamao, estaremos usando un archivo ms 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 grficos pequeos redimensionando la imagen
por medio de estos atributos a partir de archivos de tamao descomunal. Hay
que pensar que el tamao 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 tamao en pxeles 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".
<html>
<head>
</head>
<body>
<img src="sobre.gif" width="28" height="21" alt="Tamao original" border="3"/>
 
 
<img src="sobre.gif" width="68" height="21" alt="Achatada" border="0"/>
 
 
<img src="sobre.gif" width="28" height="51" alt="Alargada" border="0"/>
 
 
<img src="sobre.gif" width="56" height="42" alt="Doble grande" border="0"/>
</body>
</html>

La etiqueta <a>... </a>
Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las pginas
enlaces hipertexto. Su atributo href permite indicar cul es la pgina a la que
debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace
ser aquel que se introduzca entre la instruccin de inicio y la instruccin 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="direccin_URL"> Texto que ser sensible (hipertexto) </a>

Los navegadores grficos como Netscape Navigator y Microsoft Internet
Explorer resaltan este texto mostrndolo de un color diferente y
subrayndolo, adems 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 pgina de nuestro sitio Web no har falta
especificar la ruta, sino tan slo el archivo, pero si es renombrado, habr que
modificar el vnculo.

Ejemplo: <a href= ejemplo_1.html >pgina de hola mundo </a>
Enlaces internos-internos
Si queremos vincular a una parte de la pgina como por ejemplo, el principio,
definiremos un marcador: <a name=principio></a> y a continuacin el
hipervnculo <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 (ejemplo_1.html)
<HTML>
<HEAD>
<TITLE>Ejemplo_1</TITLE>
</HEAD>
<BODY>
Hola mundo
</BODY>
</HTML>

Nombre de la pgina (ejemplo1_A.html)

<HTML>
<HEAD>
<TITLE> <a>..</a></TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Pgina de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A>
<a href= ejemplo_1.html >pgina de hola mundo </a>
<a href=http://www.uis.edu.co>UNIVERSIDAD INDUSTRIAL DE
SANTNADER</a>
<a href="mailto:redes.web.datos@gmail.com"> correo del curso de web</a>.
.......


.....
<A NAME="abajo"></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>

Truco: Utilizar imagenes como enlaces
Ni que decir tiene que una imagen, lo mismo que un texto, puede servir de
enlace.
<html>
<head>
</head>
<body>
<a href="ejemplo_1.html"><img src="sobre.gif"/></a>
</body>
</html>

Clase 4

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Clase 4

Hochgeladen von

Copyright:

Verfügbare Formate

Clase 4

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

Das könnte Ihnen auch gefallen