manual de lenguaje HTML Las pginas que nos encontramos en Internet, las pginas web, estn construidas en un lenguaje de etiquetas denominado lenguaje html.Esto quiere ser un sencillo curso para que seas capaz, en relativamente poco tiempo, de realizar tus primeras pginas web escribiendo el cdigo correspondiente, antes de pasar a ver algn editor de cdigo concreto (Dreamweaver por ejemplo) que simplifican enormemente la tarea.Por qu entonces no empezar directamente con el editor?Porque es muy importante tener ciertos conocimientos del lenguaje ante posibles problemas que, sin lugar a dudas, se nos van a presentar al editar nuestras pginas.La red est llena de cursos sobre el lenguaje HTML. Qu aporta ste que no tengan los dems? Probablemente no mucho. He pretendido la sencillez y la claridad. Al principio quera ser de nivel inicial y, conforme lo he ido ampliando, ya est en un nivel de intermedio. No obstante, los primeros pasos estn pensados para personas con escasos conocimientos de informtica en general, y de pginas web en particular.He recopilado aqu alguno de los otros cursos que sobre este tema hay en la red.El curso puede ser seguido de forma lineal o, a travs de los enlaces a cada uno de los apartados:

Nota: El curso est creciendo. He introducido unos apartados que los he colocado bajo la etiqueta de "avanzado". No es necesariamente que lo introducido all sea especialmente difcil; a veces s. Otras veces es, simplemente, una ampliacin a lo trabajado en el resto del curso. Se accede, desde contenidos, o desde el icono desde cada una de las pginas.

1.- Antes de empezar.Sitate con el puntero del ratn sobre cualquier punto vaco de esta pgina que ests leyendo en estos momentos. Pulsa el botn derecho de tu ratn. Se abrir el siguiente men contextual:

Si, en vez del Explorer, ests leyendo esta pgina con el Firefox, el men contextual ser algo distinto:

A continuacin elige la opcin sealada en cada uno de los casos. Vers algo as:

En el caso de que ests con el Explorer. O algo as:

En el caso del Firefox.Pues bien, en ambos casos, ests visualizando el cdigo fuente que da origen a la pgina que ests leyendo en estos momentos. Es decir, es lo que hay que escribir para que la pgina se muestre tal cual la ests viendo.Probablemente tanto smbolo extrao y palabras algo raras te sorprendern y te llevarn a la idea de que "esto es muy difcil" y "no es para m". Tranquilo. Sin ser fcil, el lenguaje html est al alcance de cualquier persona, y las cosas, paso a paso, se pueden hacer algo ms sencillas.2.- Empezando.El cdigo fuente, se escribe en un procesador de texto. Nosotros lo vamos a hacer con el Bloc de notas. Para abrir el Bloc de Notas, le damos a Inicio > Todos los programas > Accesorios > Bloc de notas. Se abrir una ventana como sta:

Dependiendo de cmo est configurado tu ordenador, quiz no encuentres el Bloc de notas en esta ruta. A continuacin debes saber que las dos etiquetas fundamentales dentro de las cuales tiene que ir nuestro cdigo fuente son como etiqueta de apertura y como etiqueta de cierre. Despus, todo lo que ser visible al visitar la pgina con el navegador, debe de estar entre las etiquetas cuerpo, en ingls, como etiqueta de apertura y como etiqueta de cierre.Nota: Las etiquetas tambin se pueden escribir con letras maysculas: ...Nosotros vamos a optar por las minsculas por ser lo que se est imponiendo de acuerdo con las ltimas normas.

Vamos a escribir algo en nuestra pgina. Por ejemplo Bienvenid@. Lo escribiremos entre y . Nuestro cdigo quedar as:

Ahora tenemos que guardar nuestro documento en alguna parte del ordenador y muy importante! con un nombre y una extensin especial. El nombre va a ser index (ya veremos porqu este nombre ms adelante) y su extensin .html Tambin se podra guardar con la extensin .htm (el resultado es exactamente el mismo).El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en el Escritorio: Le damos a Archivo > Guardar

Nos aparecer la ventana de seleccin de directorio:

Elegimos Escritorio y le llamamos index.htmlObserva que en Tipo no hemos cambiado nada. No es necesario al haber includo la extensin .html en el nombre del archivo. Podemos visualizarlo para ver si la pgina funciona....3.- Mi primera pgina.Ya podemos ir al Escritorio para abrir nuestra pgina.Si el navegador predeterminado es el Explorer, el icono de nuestra pgina se visualizar as . Si, en cambio, es el Firefox el navegador predeterminado, el icono de nuestra pgina ser ste: . En ambos casos es conveniente que visualicemos la pgina con los dos navegadores para controlar posibles fallos en la escritura del cdigo ya que, puede ocurrir, que un navegador sea sensible al fallo y otro no.Nota: Estoy dando por hecho que tienes dos navegadores como mnimo instalados en el ordenador. El Internet Explorer y el Firefox. Es muy importante que tengas otro navegador, aparte del Explorer. Yo te recomiendo el Firefox. Si no lo tienes instalado, lo puedes descargar e instalar desde este vnculo.

Como todava la mayora de los usuarios utilizan el Internet Explorer ms que ningn otro navegador, vamos a tenerlo como navegador predeterminado (de momento). Si no lo tienes as, lo puedes hacer abriendo el Explorer y en el men superior eliges Herramientas > Opciones de Internet...

Elegimos la pestaa Programas:

Y pinchamos en el botn Restablecer configuracin Web...

Desactiva la opcin Restablecer tambin la pgina principal y le das al S Aparecer el mensaje de confirmacin que debers Aceptar:

Observa que el icono de nuestra pgina en el escritorio tiene el del Explorer: Si haces doble clic sobre l, se te abrir la pgina con este navegador. Para abrirlo con el Firefox, una posibilidad es hacerlo pinchando con el botn derecho del ratn y, en el men contextual, elegir la opcin del Firefox

Vamos a ver nuestra pgina: Hacemos doble clic sobre el icono y ...

La verdad no es una pgina muy espectacular pero... los comienzos deben ser humildes.

4.- El otro navegador.Hemos quedado que nuestra pgina deba visualizarse, tambin, con el Firefox.Y ya hemos dicho tambin, que una forma era hacerlo desde el men contextual pinchando con el botn derecho del ratn sobre el icono del archivo.Otra forma es hacerlo abriendo el programa y yendo a buscar el archivo a abrir.Le damos a Inicio > Todos los programas > Mozilla Firefox > Mozilla Firefox Y, cuando se abra el programa, darle a Archivo > Abrir archivo...

Para elegir el archivo a abrir:

Vemos nuestro trabajo abierto con el Firefox:

A partir de este momento, es conveniente tener los dos navegadores minimizados en la barra de tareas para actualizar y visualizar rpidamente con cada uno de los navegadores los cambios efectuados.

5.- Mejorando la pgina.5.1.- Centrar el texto.Si queremos que nuestro saludo: Bienvenid@ aparezca en el centro de la pgina, escribimos delante del saludo la etiqueta y al final del mismo la etiqueta de cierre El cdigo quedara as:

Guardamos los cambios:

Minimizamos y comprobamos los resultados con el Explorer (lo recuperamos desde la barra de tareas):Si observamos que nuestro mensaje no aparece centrado le damos al botn . Puede ocurrir que no haya puesto al da los cambios:

Minimizamos y abrimos el Firefox. Lo mismo. Si observamos que no ha puesto los cambios al da le damos al botn .

Minimizamos.Nota: Es conveniente tener los tres programas abiertos: Los dos navegadores y el Bloc de notas. Si cerramos los programas, podemos recuperar el Bloc de notas a partir del Explorer. Botn derecho del ratn > Ver cdigo fuente. Se abrir el Bloc de notas. Puedo hacer los cambios que se sealan en este manual, guardar y minimizar. Abrir cada navegador y Actualizar o Recargar.Otra forma de recuperar el Bloc de notas es abrirlo desde Inicio > Todos los programas > Accesorios > Bloc de notas. Una vez abierto el programa, buscamos nuestro index.html en el escritorio. Archivo > Abrir y buscamos el escritorio. Tienes que observar que en Tipo est seleccionado Todos los archivos. En caso contrario no vers el index.html

5.2.- Aumentar el tamao del texto.Nuestro mensaje es algo pequeo. Podemos aumentar su tamao empleando las etiquetas de encabezados. Las etiquetas van desde el (h de head, en ingls, cabeza) para la ms grande, al para la ms pequea.Vamos a poner el tamao mayor:

Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores

No olvidarse de dar al botn Actualizar en el caso de no ver los cambios a la primera.

5.3.- Poner un color de fondo.Si deseamos poner un color de fondo a toda la pgina, lo tenemos que hacer dentro de la etiqueta pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo. Los colores deben escribirse mediante el denominado cdigo hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.Nosotros vamos a poner el color rojo al fondo de la pgina. Lo conseguimos escribiendo la etiqueta con su atributo como sigue: ( bg de background ).

Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados:

Si deseas profundizar en este tema de los colores, pulsa el botn...

5.4.- Cambiar el color del texto.Para cambiar el color del texto empleamos la etiqueta con su atributo color. Vamos a cambiar el color negro del texto, al color blanco. Podramos emplear el nombre en ingls del color, igual que hemos hecho con el fondo. La etiqueta quedara . Vamos ahora, a colocar el cdigo hexadecimal de este color que es el ffffff. La etiqueta quedara as: . La etiqueta se debe cerrar sin su atributo.

Guardamos los cambios, minimizamos y abrimos los navegadores actualizando si es necesario:

5.5.- Saltos de lnea.A partir de este momento ya no vamos a incluir en este manual la imagen de cada uno de los navegadores abriendo la pgina. En su lugar vamos a hacer un enlace para que se abra una ventana nueva de tu navegador al leer estas pginas. Pero el proceso que se debe seguir para construir las pginas no ha cambiado:1. Modificar/ampliar el cdigo en el bloc de notas.2. Guardar los cambios.3. Abrir el Explorer y Actualizar si es necesario.4. Abrir el Firefox y Recargar si es necesario.Vamos, ahora, a incluir una nueva lnea en nuestra pgina: Por ejemplo vamos a poner: A mi primera pgina web:

Guardamos los cambios y abrimos cada uno de los navegadores para comprobar los resultados: index.html Qu ha pasado? Esto no era lo previsto.Lo que ocurre es que el salto de lnea que hemos hecho en el cdigo no lo reconocen los navegadores. Para que el salto de lnea se incorpore hay que hacerlo con la etiqueta
del ingls break, romper. Esta etiqueta no tiene cierre.El cdigo quedara as:

Veamos ahora el resultado: index.html Ahora s que es lo que queramos.Nota: Puedes comprobar el cdigo que genera la pgina que visualizas en la ventana emergente pinchando con el botn derecho del ratn y eligiendo Ver cdigo fuente (si lo ves con el I. Explorer) o Ver cdigo fuente de la pgina (si lo ves con el Firefox).

5.6.- Prrafos.Cuando queremos introducir una lnea en blanco, utilizamos la etiqueta de prrafo. Esta etiqueta admite su correspondiente cierre , aunque no es necesario.

Veamos ahora el resultado: index.html Si queremos separar ms no es suficiente repetir la etiqueta . Hay que unir las dos etiquetas y repetir ambas:

Veamos ahora el resultado: index.html Existe otra posibilidad: Consiste en combinar la etiqueta de apertura de prrafo con la de cierre escribiendo dentro un caracter invisible: (non breaking space):

Veamos ahora el resultado: index.html La cadena tambin se puede utilizar para aadir un espacio en blanco extra a la separacin entre dos palabras, repitindolo cuantas veces haga falta. Aunque, su definicin inicial, era para aadir un espacio de separacin entre dos palabras "que no se pueda romper" caiga, por las configuraciones de pantalla diferenciadas, donde caiga.6.- La cabecera.Cmo van las cosas? Espero que, hasta aqu al menos, todo est yendo bien.Por simplificar un poco no habamos comentado nada de una parte importante que tienen las pginas web: Es la cabecera. Como has podido comprobar, no es imprescindible pero s muy importante. La cabecera se coloca entre las etiquetas y . Va justo despus de la primera etiqueta y antes del . Constituye la parte no visible del documento:

Slo se ve este texto

resultadoDe momento, lo que ms nos interesa poner dentro de la cabecera del documento es el ttulo de la pgina. Observa que en la barra de ttulo, la barra superior aparece:

Para arreglar esto, para poner el ttulo al documento, hay que introducir dos nuevas etiquetas dentro de la cabecera. Son las etiquetas de apertura y de cierre. Y, entre ellas ponemos la frase que defina nuestro documento:

Ejercicio 1

Slo se ve este texto

resultadoComprueba que, en la barra superior del navegador, barra de ttulo, aparece el ttulo que acabamos de poner al documento:

Si tienes experiencia en internet, probablemente te hayas encontrado con pginas en las que aparece Documento sin ttulo o Untitled document. Bien, ya sabes el porqu: No pusieron nada entre y Por ejemplo, esto es uno de los enlaces que aparece en la bsqueda con del trmino Tutorial html:

En la cabecera pueden ir muchas ms cosas pero, de momento, es lo nico que necesitamos.

7.- Listas. A menudo hay que hacer listas de objetos, de conceptos, de definiciones...Las listas pueden ser no numeradas (el orden no importa) y numeradas:7.1.- Listas no numeradas.Comienza el listado con la etiqueta

(unordered list) y su final con la etiqueta de cierre

. Cada objeto que forma la lista va precedido de la etiqueta (list item) sin etiqueta de cierre.

Listas no numeradas

Mis aficiones:

El cine.

La montaa.

La msica.

resultado7.2.- Listas numeradas.Comienza el listado con la etiqueta

1. (ordered list) y su final con la etiqueta

. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta sin cierre.

Listas numeradas

Mis preferencias:

1. Viajar.
2. Salir con mis amigos.
3. Dormir.

resultado7.3.- Listas anidadas.Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocacin de las etiquetas de apertura y cierre.

Listas anidadas Animales:

VERTEBRADOS.

• Anfibios
• Peces
• Reptiles
• Aves
• Mamferos

INVERTEBRADOS.

• Insectos
• Arcnidos
• Crustceos
• Miripodos

resultado Hemos incorporado la etiqueta de encabezado de tercer orden para resaltar el concepto que se va a clasificar. (Recuerda que los encabezados van del el mayor al el menor).7.4.- Listas de definiciones.Son apropiadas, como su nombre indica, para establecer listados de trminos con sus definiciones. Las etiquetas de apertura y cierre son y (definition list). Los conceptos a definir van con la etiqueta (definition term) y las definiciones con la etiqueta (definition definition). Listas de definiciones

Concepto 1Definicin del Concepto 1Concepto 2Definicin del concepto 2

resultado 8.- Sangrados.Se realizan con la etiqueta de apertura y su correspondiente de cierre. Aumentan, tambin, el interlineado, por eso se emplean para hacer una cita textual.

Sangrados

Este texto est justificado a la izquierda.

ste est sangrado respecto del anterior

ste vuelve a estar justificado a la izquierda.

resultado Se puede utilizar ms de una etiqueta si deseamos un sangrado mayor:

Sangrados mltiples

Este texto est justificado a la izquierda.

ste est ms sangrado

ste vuelve a estar justificado a la izquierda.

resultado9.- Negrita, cursiva y subrayado. Para remarcar una cadena de caracteres empleamos las etiquetas y (bold). Para hacer que un texto se muestre en cursiva: e (italic).Para subrayar empleamos y (underlined). Negrita, cursiva y subrayado

Los textos siguientes:ste est en negrita
ste est en cursiva
ste est subrayado

resultado10.- Ms formato: Subndices y superndices.El subndice se consigue con la etiqueta y su correspondiente de cierre. El superndice con la etiqueta y su correspondiente de cierre.

Subndices y superndices

f(x)= X2 + 5X

resultado Si deseas saber sobre caracteres especiales ...

11.- Lnea de separacin.Se consigue con la etiqueta (horizontal rule) sin etiqueta de cierre.

Barra de separacin

Pongamos una separacin:

resultado Si deseas profundizar en este tema, pulsa el botn...

12.- Comentarios.Si queremos introducir texto que sirva de recordatorio de lo que hicimos o dejamos de hacer o para dar explicaciones a otras personas que pueden acceder al cdigo pero que no queremos que se visualicen en pantalla empleamos la etiqueta (medio etiqueta) para el final del comentario.

Comentarios Los textos siguientes:

ste est en negrita
ste est en cursiva
ste est subrayado

resultado13.- Tablas. Empezamos con un tema algo complejo.Una tabla se define entre las etiquetas y A partir de este momento hay que definir las filas de la tabla que se definen con y (table row). Un par de etiquetas para cada una de las filas.Dentro de cada fila se definen las celdas que forman esa fila con las etiquetas y (table data).Vamos a empezar definiendo una tabla de 3 filas y 3 columnas (para nuestro lenguaje sern tres filas, cada una de ellas con tres celdas):

Tablas 1

resultado Qu ha pasado? No se ve nada. Esto ocurre porque:1. Dentro de las celdas no hemos puesto nada.2. La tabla no tiene bordes.13.1.- Tablas con borde y con casillas vacas.Vamos a arreglar estos dos temas: Por un lado vamos a indicar que queremos una tabla con borde. Esto se hace dentro de la etiqueta con el atributo border. As: . Por otro lado, vamos a poner algo dentro de cada celda. Pero, en lugar de poner algo concreto y visible, vamos a utilizar una cadena de caracteres que ya hemos visto que se utilizaba para aadir un espacio a la separacin entre palabras:

Tablas 2

resultado13.2.- Otros atributos de la tabla.Podemos hacer que nuestra tabla est centrada en la pgina con el atributo align="center". O "left" o "right"Que ocupe una determinada proporcin del espacio en horizontal con el atributo width="50%". O "30%" o "70%" o...Que el borde sea mayor que el establecido por defecto (que es 1): border="3". O ...Que tenga un color de fondo con el atributo bgcolor="#6699FF" . O cualquier otro (ver colores html).

Tablas 3

resultado 13.3.- Atributos de las filas y las celdas.De manera similar a los atributos de la tabla, podemos definir todos esos parmetros a las filas o a las celdas. Por ejemplo podemos empezar asignando a las celdas de la primera fila un ancho diferente. Si a este respecto no hago nada ms en las otras celdas, lo que haga afectar a todas las columnas. Puedo definir colores diferenciados. En este caso, el color de la fila o de la celda prevalecer sobre el definido en el conjunto de la tabla

Tablas 4

resultado13.4.- Tablas con celdas de distinto tamao.Es bastante habitual tener que disear este tipo de tablas: Una celda puede ocupar dos columnas, tres,... o dos filas, tres,...Supongamos que tenemos que disear una tabla como sta:

Para no liarse, lo primero que hay que tener claro es el nmero mximo de columnas y filas que tiene la tabla: En este caso es 4 columnas y 3 filas. Pues bien, tendremos que establecer 4 celdas en cada una de las 3 filas. Luego, agruparemos celdas con las etiquetas correspondientes.Empezamos con la primera fila. Se extiende ocupando las 4 columnas. La etiqueta que debemos emplear es un atributo para la primera celda de la primera fila (debe "extenderse" sobre las cuatro columnas) . Lgicamente la primera fila ya se ha acabado.Pasamos a la segunda fila. La primera celda se extiende sobre 2 filas. Escribiremos . Despus de esta celda siguen las otras tres que son normales.Por ltimo definimos la tercera fila. Como la primera celda ya ha sido definida en la fila anterior, slo nos queda la segunda celda, que es normal, y la tercera que se extiende sobre dos columnas Pondremos un para meter algo aunque no se vea y, para asegurarnos de la simetra de la tabla, estableceremos el ancho con el atributo width en la tabla (30% por ejemplo) y una proporcin del espacio total de la tabla en cada columna (25%) y lo haremos en las celdas que nos parezca (en las "normales" de ancho).El cdigo podra quedar as:

Tablas 5

resultado 13.5.- Ttulo de la tabla.Disponemos de una etiqueta para poner el ttulo de la tabal. Es con su correspondiente de cierre. Se coloca despus de la etiqueta de definicin de la tabla y aade un texto por encima de la tabla y centrado con sta.

Tablas 6

ste es el ttulo de la tabla

resultado 13.6.- Celdas de cabecera.Disponemos de una etiqueta especial para aquellas celdas que son cabecera respecto de las celdas situadas debajo de ellas. Son las etiquetas (table header). El texto situado en ellas queda centrado y en negrita. Lo nico que hay que hacer es sustituir la etiqueta normal de celda por esta otra.

Tablas 7

Ejemplo de celdas de cabecera Nombre Apellido 1 Apellido 2 Jos Prez Prez Luis Romn Snchez

resultado 13.7.- Alineaciones dentro de las celdas.Veamos como se pueden alinear los objetos dentro de las celdas de una tabla:xxxxxxxxx

xxxxxxxxx

Primera fila (alineacin horizontal): En la primera celda el texto est alineado a la izquierda. No hay que hacer nada, es la alineacin que se establece por defecto. (Podra escribirse, de todas formas: ). En la segunda celda el texto est alineado en el centro: . En la tercera celda el texto est alineado a la derecha: .Segunda fila (alineacin vertical): En la primera celda el texto est alineado en la parte superior: . En la segunda celda el texto est alineado en la parte central. No hay que hacer nada, es la alineacin vertical establecida por defecto. (Podra escribirse, de todas formas: ) . En la tercera celda el texto est alineado en la parte inferior: .Para observar mejor los resultados se ha forzado la altura de las celdas a 50 pxeles. Basta escribirlo en la primera celda de cada fila: pero podra escribirse en todas ellas.

Tablas 8

Alineaciones de celdas xxx xxx xxx xxx xxx xxx

resultado 13.8.- Separaciones entre celdas y entre borde y contenidos.La separacin por defecto entre las celdas es de 2 pxeles. Se puede modificar esta distancia con el atributo de table cellspacing. Tabla con cellspacing de 15 pxeles:xxxxxxxxxxxx

xxxxxxxxxxxx

La separacin entre el borde la tabla y el contenido de las celdas es de 1 pxel. Se puede modificar con el atributo cellpadding de la etiqueta table. Tabla con cellpadding de 15 pxeles:xxxxxxxxxxxx

xxxxxxxxxxxx

En la segunda tabla se ha aumentado la altura de las celdas a 70 pxeles para observar la alineacin vertical.Veamos los cdigos:

Tablas 9

Tabla con espacio entre celdas de 15 pxeles

xxxx xxxx xxxx xxxx xxxx xxxx

resultado

Tablas 10

Tabla con "cellpadding" de 15 pxeles

xxxx xxxx xxxx xxxx xxxx xxxx

resultado 14.- Imgenes.La etiqueta para introducir una imagen en nuestra pgina es (src de source en ingls fuente u origen de la imagen) y siendo nombre el nombre que tiene la imagen y .gif su formato.La etiqueta funcionar bien siempre y cuando la imagen est en la misma carpeta en la que se encuentra la pgina web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imgenes en otra carpeta interna, en ese caso, habr que darle la ruta en la cual se encuentra nuestra imagen. Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sera Veamos un ejemplo:

En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imgenes ms habituales en internet). La imagen se denomina riglos2.jpg

Imgenes 1

Ir al apartado 15.1

Ir al apartado 15.2Ir al apartado 15.3

15.4.- Vnculos a una parte concreta de otro documento de nuestro sitio. Se pueden combinar este ltimo tipo de enlaces con el vnculo a otro documento de nuestro sitio.La sintaxis sera Ir al apartado tal de tal pgina

Vnculos 4

Ir al apartado 13.2 de estecurso

resultado (maximiza la ventana)15.5.- Vnculos de correo electrnico. Vamos a ver los enlaces a una direccin de correo electrnico. Cuando el navegante pinche sobre el activador del vnculo, se abrir el programa de correo con la direccin del destinatario ya escrita en el mensaje.La sintaxis es Mndame un mensaje

Vnculos 5

Dime lo que piensas de este curso

resultado15.6.- Imagen como vnculo a otro documento. En lugar de texto podemos utilizar una imagen como vnculo.En primer lugar deberemos escribir la etiqueta de apertura del vnculo y luego la etiqueta de inclusin de la imagen cerrando, posteriormente, la etiqueta del vnculo.Para este tipo de vnculos se suelen emplear pequeas imgenes, aunque, a veces, tambin se utilizan imgenes de gran formato (sobre todo en los portales de los sitios).

Vnculos 6

Visita la pgina de TERRA:

resultadoPara eliminar este borde tan antiesttico que se coloca alrededor de la imagen tenemos el atributo border="0"

Vnculos 7

Visita la pgina de TERRA:

resultadoSi deseas profundizar en este tema, pulsa el botn...

16.- Marcos. La estructura de los marcos o frames es un poco compleja.Empezamos definiendo una estructura de marcos: Consiste en una divisin de la pantalla en varias zonas de tal forma que, en una de las partes, puede haber un men de vnculos, por ejemplo, que permanecer constante y, en la otra, parte principal o main frame, se cargarn las pginas pinchadas desde el frame de vnculos.Puede haber ms partes, por ejemplo, una parte superior con el ttulo del sitio que permanecer constante segn vayamos navegando.Vamos a empezar definiendo una estructura de dos frames: Una columna izquierda, ms estrecha, y una columna derecha, ms ancha, como frame principal o main frame.Para empezar hay que saber que, de entrada, tenemos que generar tres documentos (tres archivos .html): El primero, el ms extrao, que definir la estructura de los marcos. El segundo, que se cargar en el marco izquierdo. El tercero que se cargar en el marco derecho.Por otro lado, tenemos que decidir, cunto espacio vamos a asignar a cada marco: Decidimos que el marco izquierdo ocupar el 15% del espacio y el marco derecho, el resto (o el 85%).Veamos la sintaxis del primer archivo, la estructura de los marcos:

Estructura de marcos

Esto lo guardamos con el nombre index.html porque va a ser lo que se abra al principio.Vamos a comentar un poco la sintaxis empleada: Lo primero que observamos es que, en vez de la etiqueta hemos empleado la etiqueta en ingls algo as como estructura de marcos. El atributo cols est definiendo las columnas y el espacio reservado a cada una. Si, en vez de columnas hubiramos querido establecer dos filas, hubiramos empleado el atributo rows. A continuacin decimos que la primera columna va a ocupar el 15% del espacio. Y, la segunda, el resto. Esto indica el asterisco *. Hubiramos podido, perfectamente, escribir el tanto por ciento que queda, es decir, el 85%: