Lenguaje HTML

UNIDAD II

Lenguaje de Publicacin HTML

Tecsup Virtu@l ndice

INDICE

1. Introduccin ...........................................................................................................1 2. Objetivos .................................................................................................................1 3. HTML bsico ...........................................................................................................1

3.1 Una pgina bsica .....................................................................................1 4. Dando forma al texto ............................................................................................4

4.1 Listas............................................................................................................5 5. Enlaces con otras pginas....................................................................................7

5.1 Estructura de los enlaces .........................................................................7 5.2 Tipos de enlaces ........................................................................................7 5.3 Enlaces con otra pgina nuestra .............................................................8 5.4 Enlaces con una pgina fuera de nuestro sistema...............................8 5.5 Enlaces con una direccin de e-mail ......................................................9

6. Imgenes ..............................................................................................................10 7. Tablas ....................................................................................................................13

7.1 Estructura de una tabla ..........................................................................13 7.2 Filas con desigual nmero de celdas....................................................14 7.3 Variando el espesor de los bordes ........................................................15 7.4 Celdas de cabecera .................................................................................15 7.5 Contenido de las celdas ..........................................................................16 7.6 Celdas que abarcan a otras varias........................................................18 7.7 Color de fondo en las tablas ..................................................................19 7.8 Imgenes de fondo en las tablas..........................................................21 7.9 Separacin entre las celdas de una tabla ............................................21

8. Referencias Bibliogrficas...................................................................................24

Tecsup Virtu@l Diseo de Pginas Web

Unidad II Pag. 1

LENGUAJE DE PUBLICACIN HTML 1. Introduccin

En esta unidad definiremos cmo se desarrolla una pgina Web, utilizando el cdigo HTML. Se describirn las principales etiquetas usadas de este cdigo para su mejor comprensin cuando deseen modificar alguna pgina que encuentren por Internet. A pesar de que ya existen editores de pginas Web, creemos necesario el aprendizaje de esta unidad para que usted pueda entender la estructura de una archivo HTML cuando tenga que revisar el cdigo fuente u hacer alguna modificacin sencilla sin un editor de pginas Web.

2. Objetivos

Identificar las principales etiquetas del HTML. Introducir al alumno en el diseo de pginas Web, utilizando hipertexto,

aadiendo enlaces, grficos, tablas, etc 3. HTML bsico

3.1 Una pgina bsica El principio esencial del lenguaje HTML (HyperText Markup Language) es el uso de las etiquetas (tags). Para poder crear una pgina, debemos tener un editor de textos por ejemplo Wordpad, o el Bloc de notas de Windows. Una vez que deseemos guardar la pgina creada, debemos colocar el nombre con extensin HTML. Por ejemplo: Mipagina.html Las etiquetas mencionadas funcionan de la siguiente manera

Este es el inicio de una etiqueta. Este es el cierre de una etiqueta.

Lo que haya entre ambas etiquetas estar influenciada por ellas. Por ejemplo, todo el documento HTML debe estar entre las etiquetas y : [Todo el documento] El documento en s est dividido en dos zonas principales: El encabezamiento, comprendido entre las etiquetas y . El cuerpo, comprendido entre las etiquetas y . Dentro del encabezamiento hay informacin del documento que no se ve en la pantalla principal, sobretodo el ttulo del documento, comprendido entre las etiquetas y . El ttulo debe ser breve y descriptivo, pues ser lo que vean los dems cuando aadan nuestra pgina a su bookmark o favoritos.

Diseo de Pginas Web Tecsup Virtu@l

Pag. 2 Unidad II

Dentro del cuerpo est todo lo que queremos que aparezca en la pantalla principal (texto, imgenes, etc.), por tanto, la estructura queda de esta manera:

Antes de crear nuestra primera pgina, tendremos en cuenta algunas consideraciones

Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que ste se acomoda a ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos prrafos debemos usar la etiqueta , (que no tiene su correspondiente etiqueta de cierre ).

El texto puede tener unas cabeceras, comprendidas entre las etiquetas y , y , etc. (hasta el nmero 6). El nmero indica el tamao de la letra, el mayor tamao es el correspondiente al nmero 1. Puedes practicar en el ejemplo que sigue, cambiando el nmero para comprobar el efecto que se logra.

Una etiqueta muy interesante es la de centrado y (no la soportan todos los navegadores, aunque s la mayora de ellos). Nos centra todo lo que est dentro de ella, ya sea texto, imgenes, etc. Tambin tenemos los separadores (horizontal rules), que se consiguen con la etiqueta (no existe la correspondiente de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre el fondo, como se puede observar a continuacin:

Ttulo de la pgina [Aqu van las etiquetas que visualizan la pgina]

Normalmente toda etiqueta debe ser cerrada, pero existen algunas que no lo necesitan por ejemplo


Unidad II Pag. 3

Actividad: En el editor de textos copiamos lo siguiente:

Mi primer Ejercicio Primera pgina

Esta es mi primera pgina, aunque todava es muy sencilla. Como el lenguaje HTML no es difcil, pronto estar en condiciones de hacer cosas ms interesantes. Aqu va un segundo prrafo

Las indentaciones del texto se han puesto para mayor claridad, pero no son necesarias. De hecho, podra estar todo en una sola lnea. Lo importante es el orden correcto de las etiquetas. Por cierto, una etiqueta puede estar anidada dentro de otra. Vea en el ejemplo cmo est la etiqueta dentro de la etiqueta . Es muy importante, en estos casos, que las etiquetas de inicio y de cierre vayan en el orden correcto, pues de lo contrario se produciran errores. Guarde el archivo en el procesador de textos con el nombre de ejercicio1.html y lo cargamos en el navegador. Este ser el resultado.

Indentacin (anglicismo informtico) es mover un bloque de texto hacia la derecha insertando espacios o tabuladores para separarlo del texto adyacente.


Pag. 4 Unidad II

4. Dando forma al texto

Como hemos visto en el ejemplo anterior, cuando queremos poner un texto sin ninguna caracterstica especial, lo ponemos directo. nicamente, la separacin entre prrafos (dejando una lnea en blanco) la conseguimos con la etiqueta . Si queremos separar los prrafos, o cualquier otra cosa, pero sin dejar una lnea en blanco, usamos una etiqueta parecida (break o romper). Tampoco tiene etiqueta de cierre. Si queremos obtener mltiples lneas en blanco no basta con repetir la etiqueta , sino que hay que combinarla con la etiqueta . As por ejemplo, si queremos obtener cuatro lneas en blanco, pondramos:

Al escribir el texto, si ponemos ms de un espacio en blanco entre dos palabras observamos que el navegador slo reconoce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el cdigo "" (non-breaking space). Para destacar alguna parte del texto se pueden usar: y para poner algo en negrita (bold). y para poner algo en cursiva (italic). Otra etiqueta interesante es y . El texto que se encuentre entre ella estar preformateado, es decir que aparecer como si hubiera sido escrito con una mquina de escribir, con una fuente de espaciado fijo (tipo Courier). Adems se respetarn los espacios en blanco y retornos del carro, tal como estaban en nuestro documento HTML (lo cual no ocurre normalmente, como hemos visto anteriormente). Es muy apropiada para confeccionar tablas y otros documentos similares. La etiqueta y se utiliza para destacar una cita textual dentro del texto general. En las frmulas matemticas puede interesar poder escribir ndices y subndices, que se consiguen con las etiquetas y respectivamente. As, por ejemplo:

m2 se consigue de la siguiente manera: m2 Vx se consigue con: vx


Unidad II Pag. 5

4.1 Listas A menudo nos interesar presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos: Listas desordenadas (unordered lists) Este formato nos sirve para presentar cosas que, por no tener un orden determinado, no necesitan ir precedidas por un nmero. Su estructura es la siguiente:

Es decir, toda la lista est dentro de la etiqueta y , y luego cada cosa va precedida de la etiqueta (list item). El resultado de lo anterior es el siguiente: Una cosa. Otra cosa. Otra ms. Etc. Se puede anidar una lista dentro de otra. Por ejemplo:

Que dara el siguiente resultado: Mamferos. Peces.

Sardina. Bacalao.

Aves.

Una cosa. Otra cosa. Otra ms. Etc.

Mamferos. Peces. Sardina. Bacalao. Aves.

Cmo podra colocar vietas en mi pgina Web?


Pag. 6 Unidad II

Listas ordenadas (ordered lists) Estas listas nos sirven para presentar listados en un orden determinado. Su estructura es muy similar a la anterior. La diferencia estriba en que en el resultado aparecer automticamente un nmero correlativo para cada cosa. Por ejemplo:

El resultado es:

1. Primera cosa 2. Segunda cosa 3. Tercera cosa 4. Etc.

Al igual que las listas desordenadas, tambin se pueden anidar las listas ordenadas. Listas de definicin Como su nombre indica, son apropiadas para glosarios (o definiciones de trminos). Toda la lista debe ir englobada entre las etiquetas y . Y a diferencia de las dos que hemos visto, cada rengln de la lista tiene dos partes: 1) el nombre de la cosa a definir, que se consigue con la etiqueta (definition term) y 2) la definicin de dicha cosa, que se consigue con la etiqueta (definition definition).

Su resultado es: Una cosa a definir

La definicin de esta cosa Otra cosa a definir

La definicin de esta otra cosa

Primera cosa Segunda cosa Tercera cosa Etc.

Una cosa a definir La definicin de esta cosa Otra cosa a definir La definicin de esta otra cosa

Cmo podra colocar numeracin en mi pgina Web?


Unidad II Pag. 7

Actividad:

Cree una pgina HTML, donde pueda apreciar: Las aplicaciones o programas que aprenders en este curso

en forma ordenada. Que temas con relacin al curso te gustara aprender. Defina que es HTML. Guarde el ejercicio con el siguiente nombre ejercicio2.html

5. Enlaces con otras pginas

sta es la caracterstica que ms ha influido en el diseo de las pginas, aparte la de su carcter multimedia, la posibilidad de unir los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto.

5.1 Estructura de los enlaces

En general, los enlaces tienen la siguiente estructura:

yyy Donde xxx es el destino del enlace (Observe las comillas). yyy es el texto o grfico indicativo en la pantalla del enlace (con un color especial y generalmente subrayado).

5.2 Tipos de enlaces

Vamos a distinguir cuatro tipos de enlaces:

Enlaces dentro de la misma pgina A veces, en el caso de documentos (o pginas) muy extensos, nos puede interesar dar un salto desde una posicin a otra determinada. En este caso, lo que antes hemos llamado XXX, es decir el destino del enlace, viene a ser el sitio dentro de la pgina a donde queremos saltar, por ejemplo #marca (la palabra marca puede ser cualquier palabra que queramos). Lo que hemos llamado antes YYY es la palabra (o palabras) que aparecern en la pantalla en color (en forma de hipertexto). Su estructura entonces es: YYY Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta:

Un enlace o vnculo nos permite enlazar una pgina con otra, podemos enlazar nuestras propias pginas o direccional a una pgina externa


Pag. 8 Unidad II

Por ejemplo, si quiero saltar desde aqu a la pantalla final, pongo la siguiente etiqueta: Pulsa para ir al final Que resulta como: Pulsa para ir al final Y en el final del documento html ha de ir puesto sta otra etiqueta:

5.3 Enlaces con otra pgina nuestra

Puede ser que tengamos una sola pgina. Pero lo ms frecuente es que tengamos varias pginas, una inicial (o principal) y otras conectadas a ella, e incluso entre ellas mismas. Supongamos que queremos enlazar la pgina ejercicio1.html con la pgina ejercicio2.html. En este caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del fichero: Ejemplo 2 Esto tendras que escribirlo en el archivo ejercicio1.html utilizando el Bloc de Notas (Puedes comprobarlo). Si queremos que vaya a un sitio concreto de otra pgina nuestra, en vez de ir al principio de la pgina adonde va por defecto, en ese sitio tenemos que colocar una marca (vea el punto anterior), y completar el enlace con la referencia a esa marca.

5.4 Enlaces con una pgina fuera de nuestro sistema

Si queremos enlazar con una pgina que est fuera de nuestro sistema (es decir, que est en un servidor distinto al que soporta nuestra pgina), es necesario conocer su direccin completa, o URL (Uniform Resource Locator). El URL podra ser, adems de la direccin de una pgina del Web, una direccin de ftp, gopher, etc. Una vez conocida la direccin (o URL), lo colocamos en vez de lo que hemos llamado anteriormente xxx (el destino del enlace). Si queremos enlazar con la pgina de Tecsup (cuyo URL es: http://www.tecsup.edu.pe), la etiqueta sera: Vamos A TECSUP Que dara como resultado: Vamos a TECSUP

Es muy importante copiar estas direcciones correctamente respetando las maysculas y minsculas, pues los servidores UNIX s las distinguen.


Unidad II Pag. 9

5.5 Enlaces con una direccin de e-mail

En este caso, sustituimos lo que se ha llamado antes xxx (el destino del enlace) por mailto: seguido de la direccin de e-mail. La estructura de la etiqueta es: Texto del enlace Ejemplo Comentarios a Soporte de Tecsup Virtual Comentarios a Soporte de Tecsup Virtual Ejemplo prctico: En el procesador de textos copiamos: Actividad: En el procesador de textos copiamos Enlaces Mis pginas favoritas

Netscape Microsoft

Yahoo! Guardamos el fichero de texto con el nombre ejercicio3.html y lo cargamos en el navegador.


Pag. 10 Unidad II

6. Imgenes

La etiqueta que nos sirve para incluir imgenes en nuestras pginas del Web es muy similar a la de enlaces a otras pginas, que hemos visto en el punto anterior. La nica diferencia es que, en lugar de indicar al programa navegador el nombre y la localizacin de un documento de texto HTML para que lo cargue, se le indica el nombre y la localizacin del fichero que contiene la imagen.

La estructura de la etiqueta es:

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada imagen.gif (o el nombre que tenga). Dentro de la etiqueta se pueden aadir otros comandos, tal como ALT Con el comando ALT se introduce una descripcin (una palabra o una frase breve) indicativa de la imagen. Este comando, que en principio se puede omitir, es en beneficio de los que accedan a nuestra pgina con un programa navegador en forma de texto slo. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero no es slo por esto. Hay casos, como veremos ms adelante, en los que se utiliza una imagen como enlace a otra pgina. Si se omitiera este comando, los que utilizan dichos navegadores no podran de ninguna manera acceder a esas pginas.

Con respecto a la localizacin del fichero de la imagen, si no se indica nada especial, quiere decir que el fichero imagen.gif est en el mismo directorio que el documento HTML que estamos escribiendo. Al igual que una pgina con la que queremos enlazar puede estar fuera de nuestro sistema, (en cuyo caso haba que indicar su URL o direccin completa), podemos cargar una imagen que no est en nuestro sistema siguiendo el mismo mtodo, es decir, indicar en la etiqueta el URL completo de la imagen. Aunque esto no es muy aconsejable, pues alargara innecesariamente el tiempo de carga de nuestra pgina. Las imgenes deben estar guardadas en un formato de fichero especial llamado GIF o JPG. Este formato GIF almacena las imgenes con un mximo de 256 colores, en forma comprimida.

Las imgenes nos permitirn ilustrar nuestra pgina Web, estas imgenes podemos convertirlas en enlaces.


Unidad II Pag. 11

Hay programas grficos (como el Paint Shop Pro para el PC, o el Graphic Converter para el Mac) que nos permiten guardar las imgenes en este formato, adems de cumplir otras muchas tareas de manipulacin de las mismas.

Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pgina. Para estos casos se utilizan generalmente imgenes pequeas (iconos), aunque se puede usar cualquier tipo de imagen. En el punto anterior vimos la estructura general de un enlace es: yyy Donde xxx era el destino del enlace e yyy el texto del enlace. En este caso sustituimos xxx por el nombre del fichero de la pgina a la que queremos acceder. Y en lugar de yyy ponemos la etiqueta completa de la imagen (que queda as englobada dentro de la etiqueta del enlace). Por ejemplo para acceder a la imagen (hombre.gif) Tendramos que colocar lo siguiente Que da como resultado:

Pulsando la imagen comprobamos cmo efectivamente enlaza con la pgina deseada. Obsrvese adems que la imagen est rodeada de un rectngulo del color normal en los enlaces. Si no se desea que aparezca ese rectngulo, hay que incluir dentro de la etiqueta de la imagen el atributo BORDER=0, es decir: Posicionando el cursor sobre esta ltima imagen, comprobamos que acta tambin como enlace aunque carezca del rectngulo de color. Esto puede resultar ms esttico, pero se corre el riesgo de que el usuario no se d cuenta de que la imagen sirve de enlace.

Un aspecto muy importante a tener en cuenta es el tamao de las imgenes, pues una imagen grande supone un fichero grande, y esto puede resultar un tiempo excesivo de carga, con el consiguiente riesgo de que quien est intentando cargar nuestra pgina se canse de esperar, y desista de ello.


Pag. 12 Unidad II

Actividad: Primero es necesario capturar las tres imgenes (puedes

utilizar las que se encuentran en el CD). Graf1.gif, graf2.gif, graf3.gif guardarlas en el mismo

directorio de tu Pc en el que se guardar el fichero de texto que se va a crear a continuacin, junto con los anteriores.

En el Bloc de Notas copia lo siguiente: Imgenes Mi pgina del Web

sta es mi pgina del Web. No es muy extensa, pero tiene todos los elementos bsicos, ir aadiendo ms cosas interesantes.

Mis aficiones

Mis pginas favoritas

Un lugar ideal para mis vacaciones Guardamos el fichero de texto con el nombre ejercicio4.html y lo probamos.


Unidad II Pag. 13

7. Tablas

Hasta que no se empezaron a usar las tablas, la nica manera de tabular las cosas era utilizar la etiqueta de pre-formateado, con la que es necesario poner manualmente los espacios en blanco para que quede todo alineado formando filas y columnas, con un resultado muy poco esttico.

7.1 Estructura de una tabla

Vamos a ver ordenadamente (de fuera hacia dentro) las etiquetas necesarias para confeccionar las tablas. La etiqueta general La etiqueta general es y . Es decir: [Resto de las etiquetas] Con esto se presentaran los datos tabulados, pero faltara la caracterstica que hace ms atractivas a las tablas, y es que estos datos vayan dentro de unos cajones formados por un borde. Para esto tenemos que aadir el atributo BORDER a la etiqueta, es decir: [Resto de las etiquetas] En el siguiente nivel Dentro de la anterior, estn las etiquetas para formar cada fila (row) de la tabla, y stas se forman con las etiquetas y . Hay que repetirlas tantas veces como filas queremos que tenga la tabla. Es decir, para una tabla con dos filas, sera: [Etiquetas de las distintas celdas de la primera fila] [Etiquetas de las distintas celdas de la segunda fila]

Las tablas nos permiten distribuir la informacin dentro de nuestra pgina, aunque no siempre debe ser evidente que estn presentes.


Pag. 14 Unidad II

En el ltimo nivel (Dentro de las etiquetas anteriores) estn las etiquetas de cada celda, o las que forman las columnas, que son y , que engloban el contenido de cada celda concreta (texto, imgenes, etc.). Hay que repetirla tantas veces como celdas queremos que haya en esa fila. Veamos un ejemplo de una tabla con dos filas. Cada fila va a tener tres celdas. Dentro de cada celda vamos a poner un texto indicativo de la posicin de dicha celda:

Da como resultado:

7.2 Filas con desigual nmero de celdas En este ejemplo hemos puesto dos filas con igual nmero de celdas. Qu pasa si ese nmero es distinto? Pues el navegador forma el nmero de filas y columnas que haga falta, dejando espacios en blanco en las filas que tengan menos celdas. Si en el ejemplo anterior eliminamos la tercera celda de la segunda fila, es decir si borramos fila2-celda3, resultar:

fila1-celda1 fila1-celda2 fila1-celda3 fila2-celda1 fila2-celda2 fila2-celda3


Unidad II Pag. 15

7.3 Variando el espesor de los bordes El atributo BORDER (visto ms arriba) pone por defecto un borde de espesor igual a la unidad. Pero se puede hacer que este borde sea tan grueso como queramos, poniendo: Si en el ejemplo anterior ponemos: Resultar:

7.4 Celdas de cabecera Adems de las celdas que contienen datos normales, podemos poner si nos conviene, celdas de cabecera (header), que se distinguen por estar el texto de dichas celdas en negrita y centrado. Esto se consigue con la etiqueta y (en vez de la normal y ). Vamos a aadir, en el ejemplo anterior, una fila de estas celdas de cabecera, antes de las otras dos que ya existan: Columna 1 Columna 2 Columna 3 Da como resultado:

Se pueden colocar en el sitio que se quiera, aunque lo normal es que vayan en los bordes, encabezando las columnas o las filas.


Pag. 16 Unidad II

7.5 Contenido de las celdas Hasta ahora, en todos los ejemplos se ha puesto un texto normal dentro de las distintas celdas. Pero se puede poner en ellas cualquier otro elemento de los que van en un documento HTML, como imgenes, enlaces, etc. No hay ms que poner dentro de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. Ejemplo con una imagen:

Ejemplo con un enlace:

Pgina principal

Posicionamiento del contenido dentro de una celda El contenido de una celda est alineado normalmente a la izquierda. Pero se puede cambiar esto aadiendo dentro de la etiqueta de la celda los siguientes atributos:

Pgina principal


Unidad II Pag. 17

El alineamiento por defecto en el sentido vertical es en el medio. Se puede cambiar tambin aadiendo dentro de la etiqueta de la celda los siguientes atributos: Arriba Abajo

Variando las dimensiones de la tabla El navegador se encarga normalmente de dimensionar el tamao total de la tabla de acuerdo con el nmero de filas, de columnas, por el contenido de las celdas, espesor de los bordes, etc. A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, tanto en anchura como en longitud. Esto se consigue aadiendo, dentro de la etiqueta de la tabla, los atributos WIDTH y HEIGHT igual a un porcentaje de la dimensin de la pantalla, o a una cifra que equivale al nmero de pxeles.

Ejemplo de alineamiento horizontal dentro de la celda

Al centro A la derecha

Cabecera a la izquierda


Pag. 18 Unidad II

Por ejemplo, si en el ltimo ejemplo ponemos:

O si en ese mismo ejemplo, ponemos:

7.6 Celdas que abarcan a otras varias A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue aadiendo dentro de la etiqueta de la celda los atributos COLSPAN=nmero para extenderse sobre un nmero determinado de columnas, o ROWSPAN=nmero para extenderse verticalmente sobre un nmero determinado de filas. Por ejemplo, en la primera tabla de este captulo vamos a aadir una fila con una sola celda, que abarca a dos columnas: Celda sobre 2 columnas

Cmo podramos unir o combinar las celdas?


Unidad II Pag. 19

O, en la misma tabla, vamos a aadir una celda en la primera fila, pero que abarque tambin a la siguiente: Celda junto a 2 filas

7.7 Color de fondo en las tablas Podemos conseguir que las tablas tengan un color de fondo, para ello debemos utilizar el atributo BGCOLOR="#XXYYZZ". Se puede conseguir: Que la totalidad de la tabla tenga un color de fondo. Para ello, colocamos el atributo dentro de la etiqueta TABLE. Por ejemplo, vamos a hacer que la tabla tenga un fondo verde (#00FF00):

Dar como resultado:

Si desea que solamente una celda determinada tenga un color de fondo, colocamos el atributo dentro de la etiqueta de la celda correspondiente. Por ejemplo, vamos a hacer que slo la celda 1 de la fila 1 tenga un color verde:

fila1-celda1 fila1-celda2 fila2-celda1 fila2-celda2


Pag. 20 Unidad II

Dar como resultado:

Si deseamos que la generalidad de las celdas tenga un color, pero que alguna celda tenga uno particular. El atributo del color general se coloca en la etiqueta TABLE, y el del color particular en la etiqueta de la celda en cuestin (una combinacin de los dos casos anteriores). Por ejemplo, vamos a hacer que la generalidad de la tabla sea de color rojo (#FF0000), pero que la celda 1 de la fila 1 sea de color verde (#00FF00): Da como resultado:

fila1-celda1

fila1-celda2 fila2-celda1 fila2-celda2

fila1-celda1 fila1-celda2 fila2-celda1 fila2-celda2


Unidad II Pag. 21

7.8 Imgenes de fondo en las tablas El Explorer de Microsoft soporta la colocacin de imgenes de fondo en el interior de las tablas. Para ello debemos utilizar el atributo BACKGROUND="imagen.gif" o BACKGROUND="imagen.jpg" Si se utiliza dentro de la etiqueta la imagen en cuestin se multiplicar detrs de todas las celdas. Por ejemplo, si ponemos: Obtenemos:

Si, por el contrario, slo se pone este atributo dentro de la etiqueta de una celda concreta ( o ), entonces la imagen de fondo se ver slo en esa celda, como por ejemplo:

7.9 Separacin entre las celdas de una tabla Por defecto, la separacin entre las distintas celdas de una tabla es de dos pxeles. Pero se puede variar esto con el atributo CELLSPACING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pxeles entre celdas ponemos: Con lo que se obtiene:

A primera vista parece como si esto fuera lo mismo que si hubiramos aumentado el espesor de los bordes. Pero para comprobar que no es as, hagamos que en el caso anterior, tenga adems unos bordes de 5 de espesor:


Pag. 22 Unidad II

Con lo que se obtiene: Separacin entre el borde y el contenido dentro de las celdas.

Por defecto, la separacin entre el borde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. Por ejemplo, para obtener una separacin de 20 pxeles entre el contenido y los bordes, dentro de cada celda: Con lo que se obtiene:

Se puede combinar este atributo con CELLSPACING Por ejemplo, una tabla con bordes de 5 de espesor, separacin entre celdas de 15 y separacin del contenido con respecto a los bordes de las celdas de 20, lo obtendramos con: Con lo que se obtiene:


Unidad II Pag. 23

Actividad: Vamos a crear una tabla de dos filas, con una celda cada una. La primera, como cabecera, con el texto "Un lugar ideal para mis vacaciones", y la segunda con la imagen graf1.gif. Adems vamos a alargar a lo ancho la tabla al 75% de la pantalla. Para ello sustituimos del archivo ejercicio4.html:

Un lugar ideal para mis vacaciones

Por lo siguiente:

Un lugar ideal para mis vacaciones

Guardamos este fichero como ejercicio5.html y lo cargamos en el navegador para verlo. Puedes agregar cosas que ya has aprendido en los anteriores ejemplos. Recuerda que siempre deber de empezar con la etiqueta ...

Con estas etiquetas hemos aprendido, lo bsico del cdigo HTML. Hay mucho ms por conocer, pero debido al tiempo que uno demora en tipear y realizar las actualizaciones, aparecieron los editores de HTML, sin necesidad de presentarles alguno de los muchos que existen, les comentar de que ya conocemos varios muy tiles, y viene con el Office de Microsoft (WORD, POWER POINT, EXCEL). Pero ya tenemos editores muy sofisticados como el Adobe PageMill, Front Page, y el que estudiaremos Dreamweaver. Con el Dreamweaver veremos los frames, mapas, sonidos e imgenes animadas.


Pag. 24 Unidad II

8. Referencias Bibliogrficas

http://www.ldc.usb.ve/~vtheok/webmaestro/index.html

FIN DE LA UNIDAD

Documents

Lenguaje HTML