INTRODUCCION AL HTML

Transcripción

1 INTRODUCCION AL HTML El HTML (Hyper Text Markup Language - Lenguaje de Marcas de Hipertexto). Es un sistema para estructurar documentos. Estos documentos pueden ser mostrados por los visores de páginas Web en Internet, como Netscape, Mosaic o Microsoft Explorer. Por el momento no existe un estándar de HTML ya que tanto Netscape como Microsoft se empeñan en incluir directivas que solo funcionan con sus respectivos navegadores. De cualquier manera existen diferentes revisiones o niveles de estandarización, lo que produce que algunos visores no "comprendan" en su totalidad el contenido de un documento. HTML tiene dos ventajas que lo hacen prácticamente imprescindibles a la hora de diseñar una presentación web: Su compatibilidad y su facilidad de aprendizaje debido al reducido número de tags que usa. Básicamente, los documentos escritos en HTML constan del texto mismo del documento y las tags que pueden llevar atributos. Esto llevado a la práctica, vendría a ser: <tag> texto afectado </tag> La tag del principio activa la orden y la última (que será la del principio precedida del signo /) la desactiva. No todas las tags tienen principio y final pero esto lo veremos más adelante Nota. Se ha utilizado la revisión 3.0 de HTML. Esto quiere decir que algunas de las órdenes de HTML que aquí se indican puede que no sean reconocidas por algunos visores de páginas Web. Netscape 2.x y Microsoft Explorer 3.x reconocen prácticamente todas las órdenes HTML vistas aquí. Directivas de HTML Básicamente, el HTML consta de una serie de órdenes o directivas, que indican al visor que estemos utilizando, la forma de representar los elementos (texto, gráficos, etc.) que contenga el documento. Nos referiremos a estas órdenes con la palabra "directiva". Las directivas de HTML pueden ser de dos tipos, cerradas o abiertas. Las directivas cerradas son aquellas que tienen una palabra clave que indica el principio de la directiva y otra que indica el final. Entre la directiva inicial y la final se pueden encontrar otras directivas. Las directivas abiertas constan de una sola palabra clave. Para diferenciar las directivas del resto del texto del documento se encierran entre los símbolos < y >. Las directivas cerradas incluyen el carácter / antes de la palabra clave para indicar el final de la misma. Una directiva puede contener "parámetros". Estos parámetros se indican a continuación de la palabra clave de la directiva. s: jlopezm@libertadores.edu.co 1

2 Directiva cerrada <CENTER> Mi página Web </CENTER> Directiva abierta <HR> Directiva con parámetros <BODY bgcolor="#ffffff"> </BODY> Los archivos que contienen documentos HTML suelen tener la extensión.html o.htm. Se han fijado los siguientes criterios a la hora de escribir la sintaxis de las directivas de HTML: 1º) Las directivas se indican en letra mayúscula y en negrilla. 2º) Los parámetros de las directivas se indican en letra minúscula y negrilla. 3º) El resto de elementos se indican en letra normal. 4º) Las palabras a resaltar en el texto se indican en cursiva y negrilla. Estructura básica de un documento HTML Un documento escrito en HTML se estructura básicamente de las siguientes directivas: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML> Indica el inicio del documento. Inicio de la cabecera. Inicio del título del documento. Final del título del documento. Final de la cabecera del documento. Inicio del cuerpo del documento. Final del cuerpo del documento. Final del documento. Divisiones de un documento HTML 4. a. Cabecera del documento La directiva <HEAD></HEAD> delimita la cabecera del documento. Dentro de la cabecera es importante definir el título de la página por medio de la directiva <TITLE></TITLE>. Este título será el que aparezca en la barra de nuestro visor de páginas Web. : <TITLE>La página Web de AcMark</TITLE> Dentro de la cabecera de nuestro documento podemos incluir otras directivas adicionales. Directiva <META> jlopezm@libertadores.edu.co 2

3 La directiva <META> indica al visor de Internet las palabras clave y contenido de nuestra página Web. Muchos de los buscadores de páginas Web de Internet (Yahoo, Lycos, etc...) utilizan el contenido de esta directiva para incluir la página en sus bases de datos. La directiva <META> lleva generalmente dos parámetros, name y content. s : <META name = "Pagina de Jose"content = "Mi pagina personal, Musica y Peliculas"> Indica al visor el nombre de la página y sus contenidos principales. <META name = "keywords"content = "Jose musica peliculas links colombia"> Indica al visor las palabras clave para los buscadores de Internet. Otro uso de la directiva <META> es la de indicar documentos con "refresco automático". Si se indica una URL se sustituirá el documento por el indicado una vez transcurridos el número de segundos especificados. Si no se incluye ninguna URL se volverá a cargar en el visor el documento en uso transcurridos los segundos indicados. Esto es útil para páginas que cambian de contenido con mucha frecuencia o para re direccionar a la persona que visita nuestra página Web a una nueva dirección donde se encuentra una versión actualizada de nuestra pagina Web. : <META http-equiv= "refresh"content = "15;URL= Transcurridos 15 segundos se accederá a la página Web de Microsoft. Directiva <BASE> La directiva <BASE> indica la localización de los archivos, gráficos, sonidos, etc. a los que se hace referencia en nuestra página Web. Si no se incluye esta directiva el visor entiende que dichos elementos se encuentran en el mismo lugar donde se encuentra nuestra página Web. : <BASE href = " Directiva <TITLE> Es otra directiva de la cabecera del documento y en este caso es una directiva cerrada a diferencia de las anteriores que eran abierta (<TITLE>...</TITLE>). Esta directiva nos da la opción de darle un título al documento, y mejor aún, permite visualizarlo en el visualizador de la barra del navegador: <HTML> <HEAD> <TITLE> Pagina de Javier Lopez </TITLE> </HEAD>... jlopezm@libertadores.edu.co 3

4 Aunque en principio no se imponen límites a la longitud de un título, conviene ser razonable y no usar ni nombres largos nombres muy pequeños. En este tipo de directiva, no se puede emplear ninguna directiva que modifique el tipo de texto, es decir, no podemos ponerlo en negrilla, ni subrayado, ni en cursiva, ni cambiarle el color, simplemente no debemos limitar a poner el texto que deseemos. Ninguna modificación surtirá efecto, y por el contrario serán también parte del título las distintas directivas que queramos emplear para modificar la apariencia del título. Aunque está directiva a diferencia de las anteriores, no es obligatoria, es conveniente poner título a nuestra página ya que podremos identificarla en todo momento sin tener que verla por completo, para conocer el contenido de la misma. Cuerpo del documento Directiva <BODY> La directiva <BODY></BODY> indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc. Esta directiva tiene una serie de parámetros opcionales que nos permiten indicar la "apariencia" global del documento: background= "nombre de archivo gráfico" Indica el nombre de un fichero gráfico que servirá como "fondo" de nuestra página. Si la imagen no rellena todo el fondo del documento, esta será reproducida tantas veces como sea necesario. bgcolor = "código de color" Indica un color para el fondo de nuestro documento. Se ignora si se ha usado el parámetro background. text = "código de color" Indica un color para el texto que incluyamos en nuestro documento. Por defecto es negro. link = "código de color" Indica el color de los textos que dan acceso a un Hiperenlace. Por defecto es azul. vlink = "código de color" Indica el color de los textos que dan acceso a un Hiperenlace que ya hemos visitado con nuestro visor. Por defecto es purpura. El código de color es un número compuesto por tres pares de cifras hexadecimales que indican la proporción de los colores "primarios", rojo, verde y azul. El código de color se antecede del símbolo #. s: # Color Negro jlopezm@libertadores.edu.co 4

5 #FF0000 #00FF00 #0000FF #FFFFFF Color Rojo Color Verde Color Azul Color Blanco El primer par de cifras indican la proporción de color Rojo, el segundo par de cifras la proporción de color Verde y las dos ultimas la proporción de color Azul. Cada par de cifras hexadecimales nos permiten un rango de 0 a 255. Combinando las proporciones de cada color primario obtendremos diferentes colores. De cualquier forma la mayoría de los editores de HTML nos permiten obtener el código de color correspondiente escogiendo directamente el color de una paleta. TRUCO: Aunque nuestro visitante tenga predefinido el no cargar las imágenes y por lo tanto no ver nuestro fondo (en caso de que tuviéramos una imagen), si definimos un color al mismo tiempo que definimos una imagen de fondo, si el usuario no ve las imágenes, SI verá el color que predefinamos, permitiéndonos definir un color similar al que predomine en el mosaico que genera la imagen que colocamos de fondo, y dando un efecto similar al que tendría si hubiera cargado la imagen de fondo. Elementos de un documento HTML Juego de caracteres del Documento. Todos los visores de páginas Web actuales soportan todos los caracteres gráficos del la especificación ISO , que permiten escribir textos en la mayoría de los países occidentales. De cualquier forma y como muchos sistemas tienen distintos juegos de caracteres ASCII, se han definido dos formas de representar caracteres especiales usando solamente el código ASCII de 7 bits. Para hacer referencia a estos caracteres se les asigna un código numérico o un nombre de "entidad". Asimismo hay caracteres que se utilizan para las directivas de HTML, por ejemplo < y >. Estos caracteres pueden ser representados por un código numérico o una entidad cuando deseemos que aparezcan en el documento "tal cual". Las entidades comienzan por el símbolo & (ampersand) y terminan con el símbolo ; (punto y coma). A continuación veamos una tabla con las principales entidades: Carácter Código Entidad Carácter Código Entidad!! -- " " -- # # -- $ $ -- jlopezm@libertadores.edu.co 5

6 % % -- & & -- ' ' -- ( ( -- ) ) -- * * ,, / / -- : : -- ; ; -- < < -- = = -- > > -- [ [ -- \ \ -- ] ] -- ^ ^ ` ` -- { { } } -- ~ ~ -- nbsp iexcl cent pound curren yen brvbar sect uml copy ª ª ordf ««laquo not shy reg macr deg ± ± plusmn ² ² sup2 ³ ³ sup3 acute µ µ micro para middot cedil ¹ ¹ sup1 º º ordm»» raquo ¼ ¼ frac14 ½ ½ frac12 ¾ ¾ frac34 iquest À À Agrave Á Á Aacute Â Â Acirc Ã Ã Atilde Ä Ä Auml Å Å Aring Æ Æ AElig Ç Ç Ccedil È È Egrave É É Eacute jlopezm@libertadores.edu.co 6

7 Ê Ê Ecirc Ë Ë Euml Ì Ì Igrave Í Í Iacute Î Î Icirc Ï Ï Iuml Ð Ð ETH Ñ Ñ Ntilde Ò Ò Ograve Ó Ó Oacute Ô Ô Ocirc Õ Õ Otilde Ö Ö Ouml times Ø Ø Oslash Ù Ù Ugrave Ú Ú Uacute Û Û Ucirc Ü Ü Uuml Ý Ý Yacute Þ Þ THORN ß ß szlig à à agrave á á aacute â â acirc ã ã atilde ä ä auml å å aring æ æ aelig ç ç ccedil è è egrave é é eacute ê ê ecirc ë ë euml ì ì igrave í í iacute î î icirc ï ï iuml ð ð eth ñ ñ ntilde ò ò ograve ó ó oacute ô ô ocirc õ õ otilde ö ö ouml divide ø ø oslash ù ù ugrave ú ú uacute û û ucirc ü ü uuml ý ý yacute þ þ thorn ÿ ÿ yuml Por lo tanto la palabra página la podríamos escribir como: Página página página Es por ello que si deseamos que cualquier visor de páginas Web pueda visualizar las letras acentuadas de nuestro documento debemos utilizar sus correspondientes entidades o códigos para representarlas. jlopezm@libertadores.edu.co 7

8 Espaciados y saltos de línea En HTML solo se reconoce un espacio entre palabra y palabra, el resto de los espacios serán ignorados por el visor. Se vera como Esto es una frase Esto es una frase Asimismo tampoco se respetan las tabulaciones, retornos de carro etc. Para ello existen una serie de directivas que indican estos códigos. Directiva <PRE> La directiva <PRE></PRE> obliga al visor a visualizar el texto tal y como ha sido escrito, respetando tabulaciones, espacios, retornos de carro, etc. Se vera como <PRE> Este texto ha sido Este texto ha sido </PRE> preformateado. preformateado. Directiva <BR> Para indicar un salto de línea se utiliza la directiva <BR> y para un cambio de párrafo (deja una línea en blanco en medio) se utiliza la directiva <P>. Este texto tiene<br>saltos de linea y <P> de párrafo. Se vera como Este texto tiene saltos de linea y de párrafo. Directiva <P> (párrafos) jlopezm@libertadores.edu.co 8

9 La directiva <P> puede usarse también como directiva "cerrada" <P></P> indicando de esta manera los atributos de un párrafo en concreto. Cuando se usa de esta manera tiene el parámetro align que indica al visor la forma de "justificar" el párrafo. Los valores posibles de este parámetro son LEFT, RIGHT y CENTER, estando aun en estudio el valor JUSTIFY. <P Align=right>Este es un ejemplo de un parrafo de texto justificado a la derecha.</p> <P Align=center>Este es un ejemplo de parrafo de texto centrado.</p> Se vera como Este es un ejemplo de parrafo de texto justificado a la derecha Este es un ejemplo de parrafo de texto centrado La directiva <HR> muestra una línea horizontal de tamaño determinable. Tiene los siguientes parámetros opcionales: align = posición Alinea la línea a la izquierda (left), a la derecha (right) o la centra (center). noshade No muestra sombra, evitando el efecto en tres dimensiones. size = numero Indica el grosor de la línea en píxeles. width = num / % Indica el ancho de la línea en tanto por ciento en función del ancho de la ventana del visor. También se puede especificar un número que indicaría el ancho de la línea en píxeles. : <HR align= center size= 20 width= 50%> TALLER EN CLASE 1. Describa brevemente las partes de un documento Web a.html b.head c.body 2. La directiva indica el inicio y final de nuestra pagina Web. Será entre el inicio y el final de esta directiva donde pongamos los contenidos de nuestra página, textos, gráficos, enlaces, etc. 3. La directiva delimita la cabecera del documento jlopezm@libertadores.edu.co 9

10 4. indica la localización de los archivos, gráficos, sonidos, etc. a los que se hace referencia en nuestra página Web Encabezados En un documento de HTML se pueden indicar seis tipos de cabeceras (tamaños de letra) por medio de las directivas <H1><H2><H3><H4><H5> y <H6>. El texto que escribamos entre el inicio y el fin de la directiva será el afectado por las cabeceras. La cabecera <H1> será la que muestre el texto en mayor tamaño. Se veria como <H1>Texto de Prueba</H1> Texto de prueba <H2>Texto de Prueba</H2> Texto de Prueba <H3>Texto de Prueba</H3> Texto de Prueba <H4>Texto de Prueba</H4> Texto de Prueba <H5>Texto de Prueba</H5> Texto de Prueba <H6>Texto de Prueba</H6> Texto de Prueba Los textos marcados como "cabeceras" provocan automáticamente un retorno de carro sin necesidad de incluir la directiva <BR>. Por ejemplo <H3>Pagina de Jose</H3>Esta es mi pagina personal. Se veria como Pagina de Jose Esta es mi pagina personal Atributos del Texto Para indicar atributos del texto (negrilla, subrayado, etc...) tenemos varias directivas. Algunas de ellas no son reconocidas por determinados visores de Internet, es por ello que según el visor que este Ud. utilizando, verá el resultado correctamente o no. jlopezm@libertadores.edu.co 10

11 Atributo Directiva Resultado Negrita <B></B> <B>Texto de prueba</b> Cursiva <I></I> <I>Texto de prueba</i> Teletype <TT></TT> <TT>Texto de prueba</tt> Subrayado <U></U> <U>Texto de prueba</u> Tachado <S></S> <S>Texto de prueba</s> Parpadeo <BLINK></BLINK> Superindice <SUP></SUP> Subindice Centrado <SUB></SUB> <CENTER></CENTER> <BLINK>Texto de prueba</blink> <SUP>Texto de prueba</sup> <SUB>Texto de prueba</sub> <CENTER>Texto de prueba</center> Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Texto de prueba Directiva <FONT> Por otro lado la directiva <FONT></FONT> nos permite variar el tamaño, el color, y el tipo de letra de un texto determinado. Utiliza para ello los parámetros size, bgcolor y face. size = valor Da al texto un tamaño en puntos determinado. size = +/- valor Da al texto un tamaño tantas veces superior (+) o inferior (-) como indique el valor. color = "codigo de color" Escribe el texto en el color cuyo código se especifica. face = "nombre de font" Escribe el texto en el tipo de letra especificado. Si este tipo de letra no existe en el ordenador que "lee" la página se usara el font predeterminado del navegador. <FONT size = +2 color = "#FF0000 face = "Arial"> Texto de prueba </FONT> Se vería como Texto de prueba jlopezm@libertadores.edu.co 11

12 Existen otras directivas que realizan las mismas operaciones que las antes vistas en los atributos del texto. Directiva Hace lo mismo que <STRONG></STRONG> <B></B> <CITE></CITE> <STRIKE></STRIKE> <I></I> <S></S> COMENTARIOS Para incluir comentarios en la página Web se utiliza la directiva . :  Los comentarios no serán mostrados por el visor y son útiles para realizar anotaciones en el documento HTML que nos indiquen lo que estamos haciendo en una determinada parte del documento. Hacer lo siguiente: Estilos de apariencia física Seleccione un texto con tres párrafos y aplique diferentes tipos de estilo para cada uno de ellos Modificadores de texto Aplique diferentes colores y tamaños Listas de elementos Existen tres tipos de listas, numeradas, sin numerar y de definición. Las listas numeradas representarán los elementos de la lista numerando cada uno de ellos según el lugar que ocupan en la lista. Directiva <OL> Y <LI> Para este tipo de lista se utiliza la directiva <OL></OL>. Cada uno de los elementos de la lista irá precedido de la directiva <LI>. La directiva <OL> puede llevar los siguientes parámetros: start = num jlopezm@libertadores.edu.co 12

13 Indica que número será el primero de la lista. Si no se indica se entiende que empezará por el número 1. type = tipo Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente. Los tipos posibles son: 1 = Numéricamente. (1,2,3,4,... etc.) a = Letras minúsculas. (a,b,c,d,... etc.) A = Letras mayúsculas. (A,B,C,D,... etc.) i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.) I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.) <OL> <LI>España <LI>Francia <LI>Italia <LI>Portugal </OL> <OL type = A > <LI>España <LI>Francia <LI>Italia <LI>Portugal </OL> Resultado 1. España 2. Francia 3. Italia 4. Portugal A. España B. Francia C. Italia D. Portugal Las listas sin numerar representan los elementos de la lista con un "topo" o marca que antecede a cada uno de ellos. Directiva <UL> Se utiliza la directiva <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. La directiva <UL> puede contener el parámetro type que indica la forma del "topo" o marca que antecede a cada elemento de la lista. Los valores de type pueden ser disk, circle o square, con lo que el topo o marca puede ser un disco, un círculo o un cuadrado. <UL type = disk > <LI>España <LI>Francia <LI>Italia <LI>Portugal </UL> Resultado España Francia Italia Portugal jlopezm@libertadores.edu.co 13

14 <UL type = square> <LI>España <LI>Francia <LI>Italia <LI>Portugal </UL> España Francia Italia Portugal Las listas de definición muestran los elementos tipo Diccionario, o sea, término y definición. Directiva <DL> y <DT> Se utiliza para ellas la directiva <DL></DL>. El elemento marcado como término se antecede de la directiva <DT>, el marcado como definición se antecede de la directiva <DD>. <DL> <DT>WWW <DD>Abreviatura de World Wide Web <DT>FTP <DD>Abreviatura de File Transfer Protocol <DT>IRC <DD>Abreviatura de Internet Relay Chat </DL> Resultado WWW Abreviatura de World Wide Web FTP Abreviatura de File Transfer Protocol IRC Abreviatura de Internet Relay Chat Existen otros dos tipos de listas menos comunes. Directiva <MENU> Las listas de Menú o Directorio se comportan igual que las listas sin numerar. La lista de Menú utiliza la directiva <MENU></MENU> y los elementos se anteceden de <LI> El resultado es una lista sin numerar mas "compacta" es decir, con menos espacio interlineal entre los elementos. La lista de Directorio utiliza la directiva <DIR></DIR> y los elementos se anteceden de <LI>. Los elementos tienen un límite de 20 caracteres. Todas las listas se pueden "anidar", es decir incluir una lista dentro de otra, con lo que se consigue una estructura tipo "índice de materias". <UL type= disk> <LI>Buscadores <UL> <LI>Yahoo <LI>Ole Resultado Buscadores o Yahoo o Ole o Lycos Links jlopezm@libertadores.edu.co 14

15 <LI>Lycos </UL> <LI>Links <UL> <LI>Microsoft <LI>IBM </UL> </UL> o o Microsoft IBM Realice el siguiente ejercicio Tome una clasificación cualquiera de elementos, sugerencia, los países de América (Norte, centro y sur). Imágenes Directiva <IMG> Hasta el momento hemos visto como se puede escribir texto en una página Web, asi como sus posibles formatos. Para incluir una imagen en nuestra página Web utilizaremos la directiva <IMG>. Hay dos formatos de imágenes que todos los navegadores modernos reconocen. Son las imágenes GIF y JPG. Cualquier otro tipo de fichero gráfico o de imagen (BMP, PCX, CDR, etc...) no será mostrado por el visor, a no ser que disponga de un programa externo que permita su visualización. La directiva <IMG> tiene varios parámetros: src = "imagen" Indica el nombre del fichero gráfico a mostrar. alt = "Texto" Mostrara el texto indicado en el caso de que el navegador utilizado para ver la página no sea capaz de visualizar la imagen. align = TOP / MIDDLE / BOTTOM Indica como 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, y BOTTOM con la parte inferior. border = tamaño Indica el tamaño del "borde" de la imagen. A toda imagen se le asigna un borde que será visible cuando la imagen forme parte de un Hiperenlace. height = tamaño Indica el alto de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original. width = tamaño jlopezm@libertadores.edu.co 15

16 Indica el ancho de la imagen en puntos o en porcentaje. Se usa para variar el tamaño de la imagen original. hspace = margen Indica el número de espacios horizontales, en puntos, que separarán la imagen del texto que la siga y la anteceda. vspace = margen Indica el número de puntos verticales que separaran la imagen del texto que le siga y la anteceda. Se vería como <IMG src="caution.gif" alt= "Cuidado!!" > Si el visor no pudiese visualizar el gráfico... La imagen a mostrar puede encontrase en el mismo lugar (URL) que la pagina Web. Si este no fuera el caso, el nombre de la imagen ha de contener la URL donde se encuentre la imagen. <IMG src= " Veamos varios ejemplos "jugando" con los tamaños de la imagen, así como comprobando la alineación de los textos. (Recuerde que en función del visor que Ud. utilice pueden verse o no los efectos de cada parámetro). Se vería como <IMG src="caution.gif" width=100 > <IMG src="caution.gif" height=20 > <IMG src="caution.gif" align=top>atencion!!! <IMG src="caution.gif" align=middle>atencion!!! Atencion!!! Atencion!!! jlopezm@libertadores.edu.co 16

17 <IMG src="caution.gif" align=bottom>atencion!!! Tenga en cuenta<img src="caution.gif" hspace=20>esta indicacion. Tenga en cuenta<img src="caution.gif" vspace=40>esta indicacion. Atencion!!! Tenga en cuenta Tenga en cuenta esta indicacion esta indicacion. TRUCO: Hay una forma muy sencilla de crear espacio vacío en nuestras páginas, lo que puede resultar muy conveniente de cara a construir márgenes o crear determinados efectos en la pantalla. Podemos hacerlos de 2 formas: con WIDTH y HEIGHT definimos el espacio que debe de ocupar la imagen. Si ésta es transparente o de un sólo color, el efecto será el de un cuadro vacío o sólido, según nuestras necesidades; con HSPACE y VSPACE no cambia el tamaño de la imagen, con lo que podemos definir un gran espacio para ella y visualizarla o no, si optamos por hacer un fondo transparente. Hiperenlaces. Directiva <A> La característica principal de una página Web es que podemos incluir Hiperenlaces. Un Hiperenlace es un elemento de la página que hace que el navegador acceda a otro recurso, otra página Web, un archivo, etc. Para incluir un Hiperenlace se utiliza la directiva <A></A>. El texto o imagen que se encuentre dentro de los límites de esta directiva será sensible, esto quiere decir que si pulsamos con el ratón sobre el, se realzará la función de hiperenlace indicada por la directiva <A></A>. Si el Hiperenlace esta indicado por un texto, este aparecerá subrayado y en distinto color, si se trata de una imagen, esta aparecerá con un borde rodeándola. Esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el Hiperenlace si lo pulsamos. <A href = " Pulse para ir a la página de Microsoft</A> Se vería como Pulse para ir a la página de Microsoft jlopezm@libertadores.edu.co 17

18 Si situamos el ratón encima de la frase y pulsamos, el navegador accederá a la página Web indicada por el parámetro href, es decir, accederá a la página situada en Lo mismo podríamos hacer con un gráfico. Para buscar en Internet : <A href = " > <IMG src = "yahoo.gif"></a> Se veria como Para buscar en Internet : Pulsando sobre la imagen se accedería a la página situada en HIPERENLACES DENTRO DEL MISMO DOCUMENTO Un hiperenlace nos puede conducir a una parte determinada del mismo documento. Para ello, dentro del mismo documento debemos marcar cada zona de referencia, con una etiqueta (o nombre de etiqueta), de forma que el navegador cuando se le haga referencia a ella, la localice por su nombre. Para ello empleamos otro atributo de la directiva <A>...</A> que es NAME=.... <A NAME= nombre de la referencia >...</A> Un Hiperenlace también puede llevarnos a una zona de nuestra página. Para ello debemos marcar en nuestra página las diferentes secciones en las que se divide. Lo haremos con el parámetro name. : <A name = "seccion1"></a> Esta instrucción marca el inicio de una sección dentro de nuestra página. La sección se llamará seccion1. Para hacer un enlace a esta sección dentro de nuestra página lo haríamos de la siguiente forma: O también: <A href = "#seccion1">primera Parte</A> <A href = " Parte</A> Un Hiperenlace puede hacerse a cualquier tipo de archivo. Con las directivas anteriores hemos visto como hacer enlaces a páginas Web o secciones dentro de una página web, pero podríamos hacer un Hiperenlace a un grupo de noticias, o a otro servicio de Internet. jlopezm@libertadores.edu.co 18

19 : <A href = "news://news.actualidad.es/">noticias de actualidad</a> Asimismo podemos hacer que el Hiperenlace de como resultado el envío de un correo electrónico a una dirección de correo determinada. : <A href = "mailto: luisfd@jet.es">envíame tus sugerencias</a> También podemos realizar un Hiperenlace a un fichero cualquiera. En este caso el navegador intentará "ejecutar" el fichero, y si no puede hacerlo nos preguntará si deseamos grabarlo en nuestro ordenador. Esta es una forma sencilla de permitir a los visitantes de nuestra página copiar ficheros a su ordenador. : <A href = "iconos.zip">pulsa aquí para llevarte una copia de los iconos.</a> Pulsa aqui para llevarte una copia de los iconos. ENLACES A OTROS RECURSOS DE INTERNET La referencia del hiperenlace, no sólo tiene que hacer referencia a una página HTML o a una sección interna de la misma (tal y como hemos visto anteriormente), sino que puede hacer referencia a otros tipos de referencias (valga la redundancia): file:// hace referencia a un archivo del ordenador local en el que estamos trabajando; sólo se emplea para ver páginas en local, es decir, sin estar conectado a la red, y para propósitos de diseño WEB, antes de colocar la página en un servidor definitivamente. hace referencia a una dirección URL, por lo que nos lanzará a otro documento.html. ftp:// hace referencia a una dirección URL de FTP (FILE TRANSFER PROTOCOL), que nos permite bajar un fichero de la dirección URL que indica el enlace al FTP. telnet:// hace referencia a una sesión TELNET remota a un ordenador con una dirección URL concreta. news:// hace referencia a un grupo de USENET de Internet en que discutir de un tema en particular de News. mailto: hace referencia a una dirección de correo electrónico, a la que enviar un correo; en el momento que lo activemos, y si nuestro jlopezm@libertadores.edu.co 19

20 navegador lo soporta, se nos abrirá la ventana de correo electrónico que tengamos configurada, para enviar el correo al enlace de correo que esta indicando el enlace. gopher:// hace referencia a un servidor GOPHER en Internet, o servicio de información por menús. También se podría realizar un hiperenlace a un fichero cualquiera, sin tener por qué ser un documento.html (podría ser un documento de Word.doc, de Adobe Acrobat. pdf, de dibujo de AutoCad.dxf, etc.). En este caso el navegador intentará ejecutar el fichero, y si no puede hacerlo, nos preguntará que queremos que haga con él. Una de las opciones suele ser grabarlo (el archivo), en nuestro ordenador de modo loca. Es una forma de permitir a nuestros visitantes copiar ficheros a su ordenador: <A HREF= manual.zip >manual comprimido</a> Debe tenerse en cuenta que, en la parte entrecomillada del atributo HREF=..., debe incluir un enlace, o bien una URL diferente, o bien a otro directorio de nuestro servidor de páginas WEB. Vamos a tomar un ejemplo. Supongamos que hay una página de un amigo, al que le vamos a hacer un enlace desde nuestra página, para que la gente la visite: La URL de nuestro servidor será: Nuestro directorio será: jgorriz/ El archivo de nuestro amigo estará en manual/manual.zip El atributo HREF, puede hacer referencia de 2 formas a este archivo manual.zip: 1. Enlace absoluto <A HREF= >MANUAL</A> Lo que aparecería como MANUAL y nos enlazaría con el archivo manual.zip, en la dirección URL que indica HREF. 2. Enlace relativo Ya que el archivo se halla en el mismo servidor (en este caso es el servidor al que estamos haciendo referencia), lo único que tendríamos que hacer, sería una referencia relativa del mismo: jlopezm@libertadores.edu.co 20

21 <A HREF= jgorriz/manual/manual.zip >MANUAL</A> Lo que aparecería igualmente que en el caso anterior, enlazándonos con el mismo archivo, pero con un enlace relativo, al mismo directorio y al mismo documento (manual.zip), que el enlace anterior. Esto sólo es posible en el caso de que ambas páginas estuvieran en el mismo servidor; en caso contrario, deberemos enlazar con la URL del documento al que hagamos referencia, con un enlace absoluto (indicando por tanto también la URL del servidor, junto con los directorios y el nombre del archivo al que hacemos referencia). En el caso de que quisiéramos hacer referencia a un directorio que se halla en la raíz del servidor, lo único que tendríamos que hacer es indicárselo al atributo HREF, de forma: <A HREF=../directorio/archivo.html >...</A> Esta referencia buscaría el archivo.html en el que directorio que se halla en la raíz del servidor, denominado directorio/. NOTA: El directorio raíz (representado por el primer /), no es necesariamente la raíz del disco duro o del sistema. Una de las opciones de configuración de un servidor, permite definir un directorio cualquiera como raíz del servidor HTML, de forma que sólo se pueda acceder a los contenidos en este directorio y a ningún otro que esté en un nivel inferior a él, lo que se hace como medida de seguridad y buscando aislar la información exportada del resto de los materiales contenidos en el sistema. EJEMPLOS DE REFERENCIAS CON HIPERENLACES Muchas veces, algunos de los protocolos que estamos empleando para hacer un hiperenlace a otro tipo de servicio de Internet, necesitan de un login o nombre de usuario y una password o clave, así como de un determinado puerto de conexión para iniciar la sesión en el servidor remoto. En HTML, también se puede acceder a este tipo de información, colocando directamente el login y el password en el enlace HTML. NOTA: El poner este tipo de información en HTML, conlleva el peligro de que cualquier persona que sea un oco avispada, pueda conseguir el login y password de nuestro protocolo, pudiendo una vez hechas con ellas, emplearlas con fines destructivos o dañinos para el sistema en el que se accede con ese nombre y clave personal de usuario. El poner directamente la clave de un usuario en código HTML, nunca es recomendable. Algunos tipos de ejemplo son: FTP ftp://usuario:password@servidor:puerto/ruta jlopezm@libertadores.edu.co 21

22 GOPHER gopher://servidor:puerto/ruta HTTP NNTP nntp://servidor_de_news/grupo_de_news TELNET telnet:// WAIS Un ejemplo de los campos podrían ser: usuario=jgorriz password=4885s84fds servidor=lucas.cdf.udc.es puerto=(según el tipo de protocolo) ruta=/pub/software grupo_de_news=alt.fan.u2 base_de_datos=internet wais://servidor:puerto/base_de_datos Vemos que en este caso, no sólo puede ser necesario un nombre y clave para el protocolo FTP o el protocolo TELNET, sino que algunos servidores, hacen también necesario el terner una clave de acceso y un nombre para el protocolo HTTP. Protocolo://usuario:password@... será el formato estándar para poder acceder a cualquier tipo de protocolo en Internet que necesite de un login y password. En HTML una referencia aetes tipos de protocolo podría ser: <A HREF= ftp://jgorriz:4885s84fds@lucas.cdf.udc.es/pub/software >FTP DE SOFTWARE</A> lo que nos daría acceso al FTP privado del usuario jgorriz con clave 4885s84fds en el directorio /pub/software del protocolo ftp. Lo mismo sería para el resto de protocolos pero modificando el protocolo y la ruta o base de datos de acceso. NOTA: el no indicar el tipo de puerto en un protocolo, significa que se asume el puerto por defecto que toma siempre ese tipo de protocolo en los servidores. Un ejemplo, el FTP toma normalmente el puerto 21 y cuando no se especifica el puerto se asume que este es el valor que toma; para el protocolo HTTP el puerto es el 80; para el TELNET el puerto es el y así con el resto de puertos. El parámetro puerto, sólo debe especificarse, por regla general, cuando no se corresponda con un puerto estándar asignado al tipo de protocolo. TRUCO: Una particularidad y recomendación, es que cuando necesitemos especificar un nombre y clave de acceso a un determinado protocolo, dejemos el campo de password en blanco, poniendo en su lugar solo el login, de forma que cuando el navegador contacte con el servidor y le mande el login que estemos empleando, al no encontrar una clave, nos aparecerá una ventana de diálogo del propio navegador, en el que se nos preguntará por la clave necesaria para acceder al sistema, lo que nos permitirá una mayor privacidad, ya que al teclear la clave, en la ventana del navegador, nos aparecerán jlopezm@libertadores.edu.co 22

23 asteriscos *************** evitando así que un posible interesado obtenga el password de acceso. ADVERTENCIA Puede que al especificar un determinado protocolo en un hiperenlace (telnet, ftp, gopher,...) que no sea el protocolo HTTP, nuestro navegador, al activar el enlace, nos muestre un mensaje de error y no lance el protocolo que hemos solicitado. Dicho problema puede venir determinado, porque nuestro navegador no tiene accesible la aplicación que debe de lanzar para ese determinado protocolo; un ejemplo con Netscape es el protocolo telnet://. Para lanzar este protocolo, Netscape debe de tener configurado en las opciones la ruta de nuestro disco duro, en el que se encuentre localizado la aplicación que nos permitirá lanzar este protocolo de conexión remota a otro ordenador de la red. De no ser así, no podremos enlazar con el hiperenlace que apunte a un telnet:// y lo único que deberemos de hacer es configurar el navegador con el programa apropiado para que dicho enlace funcione correctamente. Lo mismo ocurre con el resto de protocolos (exceptuando el HTTP por razones obvias). NOTA: todos los nombres de archivos y sus extensiones a las que se hacen referencia en los hiperenlaces, deben de ponerse en su totalidad en minúsculas, para evitar posibles errores al buscar un DOCUMENTO.HTML, cuando lo que en realidad estamos buscando es un documento.html. No hay que olvidar que los enlaces a los que hacemos referencia, pueden estar en máquinas que sean servidores UNIX, por lo que al ser este un sistema operativo distinto a otros más empleados en uso doméstico, sea sensible a mayúsculas y minúsculas, no siendo lo mismo DOCUMENTO.HTML que documento.html. Como normal general se debe escribir todos los nombres de enlaces, directorios y archivos, en minúsculas, debidas principalmente a esta característica de la mayoría de los servidores HTML de Internet. Marquee La directiva <MARQUEE></MARQUEE> crea una marquesina con un texto en su interior que se desplaza. Funciona únicamente con Ms-Explorer. Sus parámetros son los siguientes: align = top / middle / bottom Indica si el texto del interior de la marquesina se alinea en la zona alta (top), en la baja (bottom) o en el centro (middle) de la misma. bgcolor = "codigo de color" Indica el color del fondo de la marquesina. direction = left / right Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o hacia la derecha (right) height = num o % jlopezm@libertadores.edu.co 23

24 Indica la altura de la marquesina en puntos o porcentaje en función de la ventana del visor. width = num o % Indica la anchura de la marquesina en puntos o porcentaje en función de la ventana del visor. loop = num / infinite Indica el número de veces que se desplazará el texto por la marquesina. Si se indica infinite, se desplazará indefinidamente. scrolldelay = num. Indica el número de milisegundos que tarda en reescribirse el texto por la marquesina, a mayor número mas lentamente se desplazará el texto. Veamos un ejemplo de esta directiva: <MARQUEE bgcolor = "#FFFFFF" width = 50% scrolldelay = 0 > Bienvenido a mi pagina personal en Internet. </MARQUEE> Sonido y video Nuestra página Web puede tener un sonido que se active al entrar en la página. Esta característica de Ms Explorer utiliza la directiva <BGSOUND> y tiene los siguientes parámetros: src = "fichero" Indica el nombre del fichero que contiene el sonido (.waw,.mid). loop = num / infinite Indica el número de veces que se reproducirá el sonido. Si se indica infinite, el sonido se reproducirá de forma continua hasta que abandonemos la página. Un ejemplo de esta directiva sería: <BGSOUND src= "yesterday.mid" loop= infinite> Para utilizar esta función en Netscape se utiliza la directiva <EMBED>. Esta directiva se utiliza realmente para "incrustar" un objeto en nuestra pagina Web. Dicho objeto puede ser un fichero de sonido, un video, un grafico BMP, etc. Tiene los siguientes parámetros: src = "fichero" Indica el nombre del fichero que contiene el sonido (.waw,.mid) o el video (.avi). autostart = true Incluirlo si deseamos que la reproducción se inicie inmediatamente. loop = true jlopezm@libertadores.edu.co 24

25 Incluirlo si deseamos que la reproducción no se detenga. (Al terminar, vuelve a comenzar automáticamente). volume = numero Volumen al que se reproducen los ficheros de sonido. width = numero height = numero Anchura y Altura de la representación del objeto. (Si es un sonido no es necesario este parámetro). controls = smallconsole Visualiza una serie de controles que nos permiten iniciar la reproducción del fichero, así como realizar una pausa o detenerlo. Un ejemplo de esta directiva sería: <EMBED src= "yesterday.mid" loop= true autostart= true volume=50 width=50 height=15 controls=smallconsole> jlopezm@libertadores.edu.co 25