TABLA DE CONTENIDO

Prctica No. 1. ETIQUETAS DE APERTURA..................................................................................... 3 Prctica No. 2. ESTRUCTURA BSICA ............................................................................................ 3 Prctica No. 3. PRRAFOS ............................................................................................................. 4 Prctica No. 4. ENCABEZADOS ...................................................................................................... 5 Prctica No. 5. CENTRADO ............................................................................................................ 6 Prctica No. 6. SEPARADOR HORIZONTAL .................................................................................... 6 Prctica No. 7. SEPARADOR HORIZONTAL ANCHO ....................................................................... 7 Prctica No. 8. SEPARADOR NOSHADE ......................................................................................... 7 Prctica No. 9. SEPARADOR NOSHADE SIZE .................................................................................. 8 Prctica No. 10. DERECHA ............................................................................................................. 8 Prctica No. 11. IZQUIERDA .......................................................................................................... 9 Prctica No. 12. ETIQUETAS ANIDADAS ........................................................................................ 9 Prctica No. 13. SALTO DE LNEA ................................................................................................ 10 Prctica No. 14. TEXTO CON TAMAO MENOR .......................................................................... 11 Prctica No. 15. TEXTO CON TAMAO MAYOR .......................................................................... 12 Prctica No. 16. NEGRITAS Y CURSIVAS ...................................................................................... 13 Prctica No. 17. Tipo de fuente ................................................................................................... 14 Prctica No. 18. TEXTO PREFORMATEADO ................................................................................. 15 Prctica No. 19. TAMAO DE FUENTE ........................................................................................ 17 Prctica No. 20. CITA TEXTUAL .................................................................................................... 19 Prctica No. 21. VIETAS............................................................................................................. 21 Prctica No. 22. ANIDAR VIETAS ............................................................................................... 22 Prctica No. 23. VIETAS CUADRADAS ....................................................................................... 23 Prctica No. 24. VIETAS CON NMEROS ROMANOS ................................................................ 24 Prctica No. 25. COLOR DE TEXTO .............................................................................................. 25 Prctica No. 26. COLOR DE FONDO ............................................................................................. 26 Prctica No. 27. IMAGEN DE FONDO .......................................................................................... 27 Prctica No. 28. IMAGEN DE BOTN .......................................................................................... 28 Prctica No. 29. ANCLAS O MARCADORES .................................................................................. 29 Prctica No. 30. ENLACE CON UNA PGINA DE INTERNET ......................................................... 31 Prctica No. 31. ENLACE DE CORREO ELECTRNICO .................................................................. 32 Prctica No. 32. ENLAZAR A OTRA PGINA UTILIZANDO UNA IMAGEN ..................................... 33
1 MAGN Alberto Karim Gmez Vzquez

Prctica No. 33. TEXTO ALTERNATIVO ........................................................................................ 34 Prctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN ........................ 35 Prctica No. 35. ENLACE A UN DOCUMENTO ............................................................................. 36 Prctica No. 36. ENLACE TEXTO A UNA IMAGEN ....................................................................... 37 Prctica No. 37. TEXTO CON RESPECTO A LA IMAGEN .............................................................. 38 Prctica No. 38. LETRAS Y CARACTERES ESPECIALES .................................................................. 39 Prctica No. 39. TABLAS .............................................................................................................. 41 Prctica No. 40. TABLAS CON BORDE.......................................................................................... 42 Prctica No. 41. COLOR DE BORDE.............................................................................................. 43 Prctica No. 42. SEPARACIN ENTRE LAS CELDAS DE UNA TABLA ............................................. 44 Prctica No. 43. SEPARACIN ENTRE EL CONTENIDO Y EL BORDE DE LA CELDA ....................... 46 Prctica No. 44. DIMENSIONES DE TABLA Y CELDAS .................................................................. 48 Prctica No. 45. TABLAS FILAS DESIGUALES................................................................................ 50 Prctica No. 46. IMAGEN EN UNA TABLA.................................................................................... 51 Prctica No. 47. TTULO DE LA TABLA ......................................................................................... 53 Prctica No. 48. CELDAS DE CABECERA ....................................................................................... 55 Prctica No. 49. CELDAS QUE ABARCAN A OTRAS CELDAS ......................................................... 56 Prctica No. 50. UNA CELDA OCUPE EL ESPACIO DE VARIAS FILAS ............................................ 57 Prctica No. 51. POSICIN DEL CONTENIDO DENTRO DE LA CELDA........................................... 58 Prctica No. 52. ALINEACIN DE TEXTO EN UNA CELDA ARRIBA O ABAJO ................................ 60 Prctica No. 53. DIMENSIONES DE LAS CELDAS .......................................................................... 61 Prctica No. 54. COLOR DE FONDO DE LA TABLA ....................................................................... 62 Prctica No. 55. COLOR DE FONDO DE LAS CELDAS.................................................................... 63 Prctica No. 56. IMAGEN DE FONDO DE LA TABLA ..................................................................... 64 Prctica No. 57. IMAGEN DE FONDO DE LA CELDA ..................................................................... 65

2 MAGN Alberto Karim Gmez Vzquez

PRCTICAS DE HTML
HTML es un lenguaje de hipertexto, Nos sirve para modelar texto, Trabaja con etiquetas y cada etiqueta indicar algo. <etiquetas> < abre >cierra Su extensin es HTML

Prctica No. 1. ETIQUETAS DE APERTURA

Todo documento HTML debe estar incluido dentro de las etiquetas <HTML></HTML>. Esto le indica al navegador en que lenguaje est creado el documento <HTML> INSTITUTO MAR DE CORTES </HTML>

Prctica No. 2. ESTRUCTURA BSICA

Dentro de las etiquetas <HTML></HTML>. Existen dos partes fundamentales la cabecera del documento que son: <HEAD> </HEAD> <HTML> <HEAD> <!-- (Cabecera del documento) --> <TITLE> TTULO DEL PROGRAMA</TITLE> <!-- (Aparece el nombre del archivo en la barra de ttulo) --> </HEAD> <BODY> Entre estas etiquetas pondremos el contenido de nuestra pgina web </BODY> </HTML>
3 MAGN Alberto Karim Gmez Vzquez

Prctica No. 3. PRRAFOS

Cuando llegamos al final de la lnea de texto, ste saltar automticamente a la lnea siguiente, pero si queremos crear prrafos separados por una lnea en blanco utilizaremos la etiqueta <P> <HTML> <HEAD> <TITLE> Prrafos </TITLE> </HEAD> <BODY> <P>Esto es un prrafo dentro de una pgina web. <P> Esto es otro prrafo que est separado del anterior por una lnea en blanco. </BODY> </HTML>

4 MAGN Alberto Karim Gmez Vzquez

Prctica No. 4. ENCABEZADOS

Tambin podemos crear encabezados (tambin llamados cabeceras) para el texto por ejemplo para sealar los distintos encabezados <HTML> <HEAD> <TITLE> Encabezados</TITLE> </HEAD> <BODY> <H1> Encabezado 1 </H1> <H2> Encabezado 2 </H2> <H3> Encabezado 3 </H3> <H4> Encabezado 4 </H4> <H5> Encabezado 5 </H5> <H6> Encabezado 6 </H6> </BODY> </HTML>

5 MAGN Alberto Karim Gmez Vzquez

Prctica No. 5. CENTRADO

Para centrar los elementos del documento HTML utilizamos las etiquetas <center></center> <HTML> <HEAD> <TITLE>Centrado</TITLE> </HEAD> <BODY> <CENTER>INSTITUTO MAR DE CORTES</CENTER> </BODY> </HTML>

Prctica No. 6. SEPARADOR HORIZONTAL

Es posible colocar un separador horizontal con la instruccin <HR>. <HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR> Podemos utilizar una lnea horizontal para separar distintas partes de una pgina Web, y para ello utilizaremos esta etiqueta </BODY> </HTML>

6 MAGN Alberto Karim Gmez Vzquez

Prctica No. 7. SEPARADOR HORIZONTAL ANCHO

<HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL ANCHO</TITLE> </HEAD> <BODY> <HR WIDTH="50%"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR WIDTH="50%"> </BODY> </HTML>

Prctica No. 8. SEPARADOR NOSHADE

Si queremos que el separador horizontal aparezca incrustado en la pgina, podemos aadir la etiqueta <HR> el comando NOSHADE <HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE> </HEAD> <BODY> <HR NOSHADE> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR NOSHADE> </BODY> </HTML>

7 MAGN Alberto Karim Gmez Vzquez

Prctica No. 9. SEPARADOR NOSHADE SIZE

Podemos hacer el que separador horizontal sea ms grueso aadiendo el comando SIZE=grueso en pixeles a la etiqueta HR. Si queremos crear un separador horizontal con un grosor de 20 pixeles y con sombras tendramos que escribir la siguiente lnea de cdigo <HR NOSHADE SIZE="20"> <HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL NOSHADE</TITLE> </HEAD> <BODY> <HR NOSHADE SIZE="20"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR NOSHADE SIZE="20"> </BODY> </HTML>

Prctica No. 10. DERECHA

ALINEACIN DEL SEPARADOR HORIZONTAL Podemos alinear el separador horizontal a la izquierda o a la derecha. si no especificamos la alineacin, el separador aparecer siempre centrado. Para alinearlo a la izquierda utilizaremos el COMANDO ALINGN="LEFT" aadiendo a la etiqueta <HR>, tal y como puede verse en el ejemplo <HR WIDTH="50%" ALIGN="LEFT"> <HTML> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <HR WIDTH="50%" ALIGN="RIGHT"> <CENTER>INSTITUTO MAR DE CORTES</CENTER> <HR WIDTH="50%" ALIGN="RIGHT"> </BODY> </HTML>
8 MAGN Alberto Karim Gmez Vzquez

Prctica No. 11. IZQUIERDA

Para alinearlo a la izquierda utilizaremos el comando align="left" aadiendo a la etiqueta <hr>, tal y como puede verse en el ejemplo <HR WIDTH="50%" ALIGN="LEFT"> <HEAD> <TITLE>SEPARADOR HORIZONTAL</TITLE> </HEAD> <BODY> <HR WIDTH="50%" ALIGN="LEFT"> <CENTER>INSTITUTO MAR DE CORTES </CENTER> <HR WIDTH="50%" ALIGN="LEFT"> </BODY> </HTML>

Prctica No. 12. ETIQUETAS ANIDADAS

<HTML> <HEAD> <TITLE>ETIQUETAS ANIDADAS</TITLE> </HEAD> <BODY> ETIQUETAS ANIDADAS <CENTER><H1>CURSO HTML</H1></CENTER> <CENTER><H2>CURSO HTML</H2></CENTER> <CENTER><H3>CURSO HTML</H3></CENTER> <HR> </BODY> </HTML>

9 MAGN Alberto Karim Gmez Vzquez

Prctica No. 13. SALTO DE LNEA

<HTML> <HEAD> <TITLE>SALTO DE LNEA</TITLE> </HEAD> <BODY> SALTOS DE LNEA <BR> <HR> <CENTER><H1>CARRERA</H1></CENTER> <BR> <BR> <BR> <CENTER><H1>INFORMATICA</H1></CENTER> <BR> <BR> <BR> <HR> </BODY> </HTML>

10 MAGN Alberto Karim Gmez Vzquez

Prctica No. 14. TEXTO CON TAMAO MENOR

Con las etiquetas <TT> y </TT> conseguimos un texto con un tamao menor y con la apariencia de un texto escrito a mquina, pero en este caso no se formatea el texto, slo afecta al tipo de letra. <HTML> <HEAD> <TITLE>Texto con tamao menor</TITLE> </HEAD> <BODY> TEXTO CON TAMAO MENOR <HR> <CENTER><H1><B><I>CARRERA</I></B></H1></CENTER> <CENTER><H1>INFORMATICA</H1></CENTER> <HR> <TT> Podemos crear un texto que parezca haber sido escrito con una mquina de escribir, el texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. </TT> </BODY> </HTML>

11 MAGN Alberto Karim Gmez Vzquez

Prctica No. 15. TEXTO CON TAMAO MAYOR

<HTML> <HEAD> <TITLE>Texto con tamao mayor</TITLE> </HEAD> <BODY> TEXTO CON TAMAO MAYOR <HR> <CENTER><H1><B><I>CARRERA</I></B></H1></CENTER> <CENTER><H1>INFORMATICA<H1></CENTER> <HR> <BASEFONT SIZE=10> Podemos crear un texto con tamao mayor </BODY> </HTML>

12 MAGN Alberto Karim Gmez Vzquez

Prctica No. 16. NEGRITAS Y CURSIVAS

(<B>) TEXTO EN NEGRITAS (</B>) (<I>) TEXTO EN CURSIVAS (</I>) <HTML> <HEAD> <TITLE>NEGRITAS Y CURSIVAS</TITLE> </HEAD> <BODY> <HR> TEXTO CON TAMAO MAYOR, ENCABEZADO H1, NEGRITAS Y CURSIVA <HR> <CENTER><H1><B><I>INSTITUTO MAR DE CORTES</I></B></H1></CENTER> <BR> <BR> <BR> <CENTER><H1>TERCER SEMESTRE</H1></CENTER> <BR> <BR> <BR> </BODY> </HTML>

13 MAGN Alberto Karim Gmez Vzquez

Prctica No. 17. Tipo de fuente

<FONT></FONT> ESTA ETIQUETA ADMITE VARIOS ATRIBUTOS: TAMAO DE FUENTE, TIPO DE FUENTE AADIREMOS A ESTA ETIQUETA EL ATRIBUTO size=Nmero tamao letra. Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente: <P><FONT FACE=arial>Fuente arial</FONT>

Ejemplo: <HTML> <HEAD> <TITLE>TIPO DE FUENTE</TITLE> </HEAD> <BODY> TIPO DE FUENTE <P> <HR> <CENTER><H1><B><I>INSTITUTO MAR DE CORTES</I></B></H1></CENTER> <HR> <CENTER><H1>Tipo de fuente</H1></CENTER> <HR> <H3> <FONT face="Arial"> Fuente Arial <BR> </FONT> <FONT face="Arial Black"> Fuente Arial Black <BR> </FONT> <FONT face="Comic Sans MS"> Fuente Comic Sans MS <BR> </FONT> <FONT face="Courier New"> Fuente Courier New <BR> </FONT> <FONT face="Georgia"> Fuente Georgia <BR> </FONT> <FONT face="Impact"> Fuente Impact <BR> </FONT> <FONT face="Times New Roman"> Fuente Times New Roman <BR> </FONT> <FONT face="Trebuchet MS"> Fuente Trebuchet MS <BR> </FONT> <FONT face="Verdana"> Fuente Verdana <BR> </FONT> </H3> </BODY> </HTML>

14 MAGN Alberto Karim Gmez Vzquez

Prctica No. 18. TEXTO PREFORMATEADO

Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las etiquetas <PRE></PRE> El texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo Courier) Y respetar los espacios en blanco y los saltos de lnea sin necesidad de incluir ninguna etiqueta ms. <HTML> <HEAD> <TITLE>Texto preformateado</TITLE> </HEAD> <BODY> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE". El texto aparecer con el tipo de letra de las mquinas de escribir antiguas (tipo curier) respetar los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta ms <HR> <CENTER><H1><B><I>LENGUAJE DE MARCADO DE HIPERTEXTO</I></B></H1></CENTER> <CENTER><H1>TEXTO PREFORMATEADO</H1></CENTER> <HR> <PRE> Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir para ello utilizamos las etiquetas cerradas "PRE" y "/PRE". El texto aparecer con el tipo de letra de las mquinas de
15 MAGN Alberto Karim Gmez Vzquez

escribir antiguas (tipo curier) respetar los espacios en blanco y los saltos de linea sin necesidad de incluir ninguna etiqueta ms </PRE> </BODY> </HTML>

16 MAGN Alberto Karim Gmez Vzquez

Prctica No. 19. TAMAO DE FUENTE

<FONT></FONT> ESTA ETIQUETA ADMITE VARIOS ATRIBUTOS: TAMAO DE FUENTE, TIPO DE FUENTE AADIREMOS A ESTA ETIQUETA EL ATRIBUTO size=Nmero tamao letra. Los tamaos de letras van, de menor a mayor, del 1 al 7. Si dentro del cuerpo del documento escribimos lo siguiente: <P><FONT SIZE=5>Tamao 5</FONT> El tamao por defecto es el 3 y podemos cambiar el texto con respecto a este tamao base utilizando -1 para un tamao algo menor, +1 para un tamao algo mayor que el 3 y +2 para un tamao an mayor. Ejemplo: <P><FONT>el tamao base </FONT> <P><FONT SIZE=-1>menor</FONT> <P><FONT SIZE=+1>mayor</FONT> <P><FONT SIZE=+2>Tgrande 5</FONT> Ejemplo: <HTML> <HEAD> <TITLE>TAMAO DE FUENTE</TITLE> </HEAD> <BODY> TAMAO DE FUENTE <P><FONT SIZE="48"> <HR> <CENTER><H1><B><I>INTERFAZ GRAFICA DE USUARIO</I></B></H1></CENTER> <HR> <CENTER><H1>VANNEVAR BUSH</H1></CENTER> <HR> Desarrolla a nivel terico el concepto de ordenador personal incluyendo adems el concepto de hipertexto, como propuesta para un modelo de informacin interconectada. </FONT> </BODY> </HTML>

17 MAGN Alberto Karim Gmez Vzquez

18 MAGN Alberto Karim Gmez Vzquez

Prctica No. 20. CITA TEXTUAL

Utilizando las etiquetas <BLOCKQUOTE>.</BLOCKQUOTE> <HTML> <HEAD> <TITLE>CITA TEXTUAL</TITLE> </HEAD> <BODY> CITA TEXTUAL <HR> <CENTER><H1><B><I>INTERFAZ GRAFICA</I></B></H1></CENTER> <CENTER><H1>PRECURSORES</H1></CENTER> <HR> <H3> El primer periodo de la historia del interfaz est marcado por la investigacin y la bsqueda de un paradigma de interaccin definitivo y ptimo. <BR> <BLOCKQUOTE> Theodor Holm Nelson <BLOCKQUOTE> Introducira el concepto de hipermedia, virtualidad, hipertexto (1963). </BLOCKQUOTE> Alan Kay <BLOCKQUOTE> Sus aportaciones estn relacionadas con el lenguaje orientado a objetos, Smaltalk, desarrollado en el centro de investigacin Xerox Parc. </BLOCKQUOTE> </BLOCKQUOTE> </H3> </BODY> </HTML>

19 MAGN Alberto Karim Gmez Vzquez

20 MAGN Alberto Karim Gmez Vzquez

Prctica No. 21. VIETAS

<HTML> <HEAD> <TITLE>LISTA CON VIETAS</TITLE> </HEAD> <BODY> <HR> LISTA CON VIETAS <HR> <BR> <BR> <UL> <LI>CAPITULO 1 <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML> El resultado ser.

21 MAGN Alberto Karim Gmez Vzquez

Prctica No. 22. ANIDAR VIETAS

<HTML> <HEAD> <TITLE>LISTA CON VIETAS ANIDADAS</TITLE> </HEAD> <BODY> <HR> <CENTER><H1><B><I>IMC</I></B></H1></CENTER> <CENTER><H1>VIETAS ANIDADAS</H1></CENTER> <HR> <UL> <LI>TEMA 1 <UL> <LI>SUBTEMA 1 <LI>SUBTEMA 2 <LI>SUBTEMA 3 </UL> <LI>TEMA 2 <LI>TEMA 3 </UL> </BODY> </HTML>

22 MAGN Alberto Karim Gmez Vzquez

Prctica No. 23. VIETAS CUADRADAS

<HTML> <HEAD> <TITLE>LISTA CON VIETAS CUADRADAS</TITLE> </HEAD> <BODY> <BR> <BR> LISTA CON VIETAS CUADRADAS <BR> <BR> <HR> <CENTER><H1><B><I>IMC</I></B></H1></CENTER> <HR> <UL> <LI>CAPITULO 1 <UL TYPE="square"> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> </UL> <UL> <LI>CAPITULO 2 <LI>CAPITULO 3 </UL> </BODY> </HTML>

23 MAGN Alberto Karim Gmez Vzquez

Prctica No. 24. VIETAS CON NMEROS ROMANOS

<HTML> <HEAD> <TITLE>LISTA CON VIETAS ANIDADAS</TITLE> </HEAD> <BODY> LISTA CON VIETAS ANIDADAS <HR> <CENTER><H1><B><I>CNAD</I></B></H1></CENTER> <CENTER><H1>MECATRNICA</H1></CENTER> <HR> <UL TYPE="I"> <LI>CAPITULO 1 <UL> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 2 <UL> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> <LI>CAPITULO 3 <UL> <LI>INICIO <LI>TRAMA <LI>DESENLACE </UL> </UL> </BODY> </HTML>

24 MAGN Alberto Karim Gmez Vzquez

Prctica No. 25. COLOR DE TEXTO

Para establecer un color, utilizamos el formato RGB(rojo, verde, azul) Cada color va representado por un par Colores primarios COLOR ROJO VERDE AZUL BLANCO NEGRO AMARILLO Con las etiquetas: <BODY TEXT="#RRVVAA"> <BODY LINK="#RRVVAA"> <BODY VLINK="#RRVVAA"> <BODY ALINK="#RRVVAA"> Color del texto Color de los enlaces Color de los enlaces una vez visitados Color de los enlaces activos (el que se ve al hacer clic sobre l) CDIGO HEXADECIMAL #FF0000 #00FF00 #0000FF #FFFFFF #000000 #FFFF00

<HTML> <HEAD> <TITLE>ATRIBUTO FACE</TITLE> </HEAD> <BODY TEXT="#0000FF"> <font face="Comic Sans MS,">Este texto tiene otra tipografa</font> <HR> <CENTER>IMC</CENTER> <HR> <CENTER>ATRIBUTO FACE</CENTER> <HR> Podemos crear un texto que aparezca muy colorido con la etiqueta TEXT y con el atributo face, podemos cambiar el tipo de letra. </BODY> </HTML>

25 MAGN Alberto Karim Gmez Vzquez

Prctica No. 26. COLOR DE FONDO

Cambiar el color de fondo utilizando el atributo <BGCOLOR=#RRVVAA> dentro de la etiqueta <BODY>. Por ejemplo si escribimos la siguiente lnea de cdigo <BODY BGCOLOR="#00FF00"> <HTML> <HEAD> <TITLE>Colores de fondo</TITLE> </HEAD> <BODY TEXT ="FF0000" BGCOLOR="00FF00"> <FONT FACE="ARIAL" SIZE="12"> <HR> <CENTER>IMC</CENTER> <CENTER>COLOR DE FONDO</CENTER> <HR> Para cambiar el color de fondo de toda la pgina utiliza el atributo BGCOLOR seguido de un nmero hexadecimal de 6 posiciones. Los dos primeros son para el rojo, los siguientes dos para el verde y los ltimos dos para el azul. </FONT> </BODY> </HTML>

26 MAGN Alberto Karim Gmez Vzquez

Prctica No. 27. IMAGEN DE FONDO

La sintaxis para incluir una imagen como fondo sera: BODY BACKGROUND=IMGENES/nombre de la magen.gif> Ejemplo: <HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="imagenes/cascada.jpg" TEXT="FFFF00"> <center> <FONT SIZE="48"> CASCADA </FONT> </center> </BODY> </HTML>

27 MAGN Alberto Karim Gmez Vzquez

Prctica No. 28. IMAGEN DE BOTN

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO</TITLE> </HEAD> <BODY BACKGROUND="imagenes/cascada.jpg"> <center> Conoce el logo del IMC:<P> <img src="imagenes/logo_mar_de_cortes.jpg" WIDTH ="70"HEIGHT=100"> </center> </BODY> </HTML>

28 MAGN Alberto Karim Gmez Vzquez

HIPERVNCULOS

Una de las caractersticas fundamentales de las pginas web es la posibilidad de enlazar distintos documentos La sintaxis para crear un enlace es: <A HREF=yahoo.com.mx>Enlace</A> Entre comilla se pone la ruta de la pgina a la que queremos dirigir el enlace. Podemos distinguir 4 tipos de enlaces que son: Enlaces dentro de la misma pgina Enlace con otra pgina de forma local Enlace con una pgina ya publicada en Internet Enlaces con una direccin de correo electrnico

Prctica No. 29. ANCLAS O MARCADORES

Cuando el contenido de una pgina es muy largo tendremos que facilitar la navegacin al usuario creando enlaces dentro de la propia pgina para que ste pueda ir a una parte concreta del documento. En este caso, en vez de poner entre comillas el nombre de otra pgina, pondremos el nombre de la marca que se seale <A NAME=marca>texto</A> <HTML> <HEAD> <TITLE>Vnculo de ANCLAS</TITLE> </HEAD> <BODY> Esta pgina es un ejemplo de vnculo de anclas. <A name="principio">Este es el principio del documento!!<a> <BR> <A HREF="#final">Vamos al final del documento</A> <br> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR>
29 MAGN Alberto Karim Gmez Vzquez

<BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <BR> <font face="ARIAL" SIZE"14"><A name="seccion2">Esta es la seccin 2</A></FONT> <A HREF="#principio">Vamos al principo del documento</A> <BR> <BR> <a name="final">Este es el final del documento!!</a> </BODY> </HTML>

30 MAGN Alberto Karim Gmez Vzquez

Prctica No. 30. ENLACE CON UNA PGINA DE INTERNET

Para crear un enlace que se dirija a una pgina de internet tendremos que poner entre comillas la direccin de dicha pgina. Por ejemplo si queremos hacer un enlace desde nuestra pgina a la web de CNAD escribiremos el siguiente cdigo: <A HREF=http://www.institutomardecortes.edu.mx>IMC</A> <HTML> <HEAD> <TITLE>VINCULO A UNA PAGINA DE INTERNET</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="14"> <HR> <CENTER>IMC</CENTER> <HR> VISITA LA PGINA DEL INSTITUTO MAR DE CORTES DANDO CLICK EN EL SIGUIENTE ENLACE <A HREF=http://www.institutomardecortes.edu.mx>IMC</A> </FONT> </BODY> </HTML>

31 MAGN Alberto Karim Gmez Vzquez

Prctica No. 31. ENLACE DE CORREO ELECTRNICO

La sintaxis para crear un enlace a una direccin de correo electrnico es la siguiente: <A HREF=mailito.nfernand97@hotmail.com>nfernand97@hotmail.com</A> <HTML> <HEAD> <TITLE>VINCULO A UN CORREO ELECTRONICO</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="12"> <HR> <CENTER>IMC</CENTER> <HR> <CENTER>Enlace de correo electrnico</CENTER> <HR> <BR> <BR> Contctanos en la siguiente direccin: <BR> <A HREF="mailto:karimgv@hotmail.com">karimgv@hotmail.com</A> </FONT> </BODY> </HTML>

32 MAGN Alberto Karim Gmez Vzquez

Prctica No. 32. ENLAZAR A OTRA PGINA UTILIZANDO UNA IMAGEN

<A HREF=nombrepagina.html>Texto</A> <A HREF=http://www.cnad.edu.mx>IMG.SRC=cnad.jpg</A> <HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> <center> Visita la pgina del IMC:<P> <A HREF="http://institutomardecortes.edu.mx"> <img src="imagenes/logo_mar_de_cortes2.jpg"> </A> </center> </BODY> </HTML>

33 MAGN Alberto Karim Gmez Vzquez

Prctica No. 33. TEXTO ALTERNATIVO

<HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> <center> Visita la pgina del IMC:<P> <A HREF="http://institutomardecortes.edu.mx"> <img src="imagenes/logo_mar_de_cortes2.jpg" ALT="Logo IMC"> </A> </center> </BODY> </HTML>

34 MAGN Alberto Karim Gmez Vzquez

Prctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA VER OTRA IMAGEN
<HTML> <HEAD> <TITLE>VINCULO CON IMAGEN</TITLE> </HEAD> <BODY> Conoce el logo del IMC:<P> <A HREF="imagenes/logo_mar_de_cortes.jpg"> <img src="imagenes/logo_mar_de_cortes2.jpg"> </A> </BODY> </HTML>

35 MAGN Alberto Karim Gmez Vzquez

Prctica No. 35. ENLACE A UN DOCUMENTO

<HTML> <HEAD> <TITLE>VINCULO A UN ARCHIVO EXISTENTE</TITLE> </HEAD> <BODY TEXT="RRVVAA"> <FONT FACE="ARIAL" SIZE="12"> VINCULO A UN ARCHIVO EXISTENTE <P>Encontrars informacin sobre la INTEFAZ GRAFICA DE USUARIO en el enlace siguiente: <BR> <BR> <A HREF="docs/02_interfaz_grafica.pdf">PULSA AQUI...</A> </FONT> </BODY> </HTML>

36 MAGN Alberto Karim Gmez Vzquez

Prctica No. 36. ENLACE TEXTO A UNA IMAGEN

<HTML> <HEAD> <TITLE>ENLAZAR TEXTO CON IMAGEN</TITLE> </HEAD> <BODY> <A HREF="imagenes/logo_mar_de_cortes.jpg"> Da clic aqui para ver el logotipo </a> </BODY> </HTML>

37 MAGN Alberto Karim Gmez Vzquez

Prctica No. 37. TEXTO CON RESPECTO A LA IMAGEN

<HTML> <HEAD> <TITLE>TEXTO CON RESPECTO A LA IMAGEN</TITLE> </HEAD> <BODY> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=BOTTOM> </A> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=MIDDLE> </A> <p>IMC <img src="imagenes/logo_mar_de_cortes2.jpg" ALIGN=TOP> </A> </BODY> </HTML>

38 MAGN Alberto Karim Gmez Vzquez

Prctica No. 38. LETRAS Y CARACTERES ESPECIALES

<HTML> <HEAD> <TITLE>LETRAS Y CARACTERES ESPECIALES</TITLE> </HEAD> <BODY> <HR> LETRAS Y CARACTERES ESPECIALES <HR> <BR> <BR> <UL> <LI> &aacute; <LI> &eacute; <LI> &iacute; <LI> &oacute; <LI> &uacute; <LI> &Aacute; <LI> &Eacute; <LI> &Iacute; <LI> &Oacute; <LI> &Uacute; <LI> &iquest; <LI> &amp; <LI> &#161; </UL> </BODY> </HTML>

39 MAGN Alberto Karim Gmez Vzquez

40 MAGN Alberto Karim Gmez Vzquez

Prctica No. 39. TABLAS

Las tablas son fundamentales para organizar las pginas web. No solo sirven para ordenar datos, sino que tambin nos permiten MAQUETAR LA PGINA La etiqueta que define la tabla completa es <TABLE></TABLE> Para crear una tabla formada por 3 filas y con 4 celdas en cada fila escribiremos lo siguiente dentro del cuerpo del documento: <HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD> </TR> <TR> <TD>COLUMNA1-FILA2</TD> <TD>COLUMNA2-FILA2</TD> <TD>COLUMNA3-FILA2</TD> </TR> <TR> <TD>COLUMNA1-FILA3</TD> <TD>COLUMNA2-FILA3</TD> <TD>COLUMNA3-FILA3</TD> </TR> </table> </BODY> </HTML>

41 MAGN Alberto Karim Gmez Vzquez

Prctica No. 40. TABLAS CON BORDE

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER="2"> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD> </TR> <TR> <TD>COLUMNA1-FILA2</TD> <TD>COLUMNA2-FILA2</TD> <TD>COLUMNA3-FILA2</TD> </TR> <TR> <TD>COLUMNA1-FILA3</TD> <TD>COLUMNA2-FILA3</TD> <TD>COLUMNA3-FILA3</TD> </TR> </table> </BODY> </HTML>

42 MAGN Alberto Karim Gmez Vzquez

Prctica No. 41. COLOR DE BORDE

Tambin podemos determinar un color para el borde de la tabla, bastar con aadir a la etiqueta table el atributo bordercolor=#rrvvaa, la misma tabla de antes con el borde de color negro tendra este cdigo <TABLE BORDER="5" BORDERCOLOR=#RRVVAA> <HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER="4" BORDERCOLOR=#RRVVAA> <TR> <TD>COLUMNA1-FILA1</TD> <TD>COLUMNA2-FILA1</TD> <TD>COLUMNA3-FILA1</TD> </TR> <TR> <TD>COLUMNA1-FILA2</TD> <TD>COLUMNA2-FILA2</TD> <TD>COLUMNA3-FILA2</TD> </TR> <TR> <TD>COLUMNA1-FILA3</TD> <TD>COLUMNA2-FILA3</TD> <TD>COLUMNA3-FILA3</TD> </TR> </table> </BODY> </HTML>

43 MAGN Alberto Karim Gmez Vzquez

Prctica No. 42. SEPARACIN ENTRE LAS CELDAS DE UNA TABLA

Si queremos que exista un espacio entre cada una de las celdas, aadiremos el atributo CELLSPACING=No. De pixeles de la separacin a la etiqueta TABLE. COMPROBAMOS QUE OCURRE SU A LA TABLA ANTERIOR LE AADIREMOS UNA SEPARACIN ENTRE CELDAS DE 2 PIXELES. <TABLE BORDER="2" BORDERCOLOR=#FFFF00 CELLSPACING="2"> <HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE> <table border="5" bordercolor="#ab4322" cellspacing="20"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD> </TR> <TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> </TR> </table> </BODY> </HTML>

44 MAGN Alberto Karim Gmez Vzquez

45 MAGN Alberto Karim Gmez Vzquez

Prctica No. 43. SEPARACIN ENTRE EL CONTENIDO Y EL BORDE DE LA CELDA

Aadimos el atributo CELLPADDING=No. De pixeles de separacin a la etiqueta TABLE conseguimos separar el contenido de la celda del borde de la misma. <TABLE BORDER="2" BORDERCOLOR=#FFFF00 CELLSPACING="2" CELLPADDING="12"> <HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <TABLE> <table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD> </TR> <TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> </TR> </table> </BODY> </HTML>

46 MAGN Alberto Karim Gmez Vzquez

47 MAGN Alberto Karim Gmez Vzquez

Prctica No. 44. DIMENSIONES DE TABLA Y CELDAS

Utilizando el atributo WIDTH (ancho) en la etiqueta TABLE podemos establecer las dimensiones de la tabla completa. Podemos establecer un tamao en pixeles o en centmetros <TABLE BORDER="2" BORDERCOLOR=#FFFF00 CELLSPACING="2" CELLPADDING="12" WIDTH="50%">

<HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <center> <TABLE> <table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="30%"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD> </TR> <TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> </TR> </table> </center> </BODY> </HTML>

48 MAGN Alberto Karim Gmez Vzquez

49 MAGN Alberto Karim Gmez Vzquez

Prctica No. 45. TABLAS FILAS DESIGUALES

Hasta ahora hemos trabajado con tablas que tenan filas con igual nmeros de celdas. Pero tambin existe la posibilidad de crear una tabla que tenga filas desiguales. <HTML> <HEAD> <TITLE>TABLAS</TITLE> </HEAD> <BODY> <center> <TABLE> <table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="30%"> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> <TD>CELDA3 FILA2</TD> </TR> <TR> <TD>CELDA1 FILA3</TD> <TD>CELDA2 FILA3</TD> <TD>CELDA3 FILA3</TD> <TD>CELDA4 FILA3</TD> </TR> </table> </center> </BODY> </HTML>

50 MAGN Alberto Karim Gmez Vzquez

Prctica No. 46. IMAGEN EN UNA TABLA

<HTML> <HEAD> <TITLE>IMAGEN EN UNA TABLA</TITLE> </HEAD> <BODY> <TABLE> <table border="5" bordercolor="#ab4322" cellspacing="20" cellpadding="12" width="100%"> <TR> <TD> <center><img src="imagenes/logo_mar_de_cortes.jpg" width="170" HEIGHT="200"></CENTER> </TD> <TD> <FONT FACE="ARIAL" SIZE="7">ESTA ES OTRA FORMA DE ORGANIZAR EL CONTENIDO DE UNA PAGINA WEB. PODEMOS UTILIZAR TABLAS PARA ORDENAR LOS ELEMENTOS DE NUESTRA PGINA </FONT> </TD> </TR> </table> </BODY> </HTML>

51 MAGN Alberto Karim Gmez Vzquez

52 MAGN Alberto Karim Gmez Vzquez

Prctica No. 47. TTULO DE LA TABLA

HTML> <HEAD> <TITLE>TABLAS TITULO ARRIBA</TITLE> </HEAD> <BODY> <TABLE> <table border="5"> <!-- El nmero indica el grosor del borde podemos manejar valores desde 1--> <caption align=top>Tabla 1 Ttulo arriba</caption> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> </tr> </table> <BR> <BR> <TABLE> <table border="3"> <!-- El nmero indica el grosor del borde podemos manejar valores desde 1--> <caption align=bottom>Tabla 2 Ttulo abajo</caption> <TR> <TD>CELDA1 FILA1</TD> <TD>CELDA2 FILA1</TD> <TD>CELDA3 FILA1</TD> </TR> <TR> <TD>CELDA1 FILA2</TD> <TD>CELDA2 FILA2</TD> </tr> </table> </BODY> </HTML>

53 MAGN Alberto Karim Gmez Vzquez

54 MAGN Alberto Karim Gmez Vzquez

Prctica No. 48. CELDAS DE CABECERA

Podemos crear una serie de celdas de cabecera en la tabla. En este tipo de celdas aparecer el texto en negritas y centrado, para crearlas utilizamos las etieTASD <HTML> <HEAD> <TITLE>CABECERA EN TABLAS</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TH>Head1</th> <th>Head2</th> <th>head3</th> </tr> <tr> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR> <TR> <TD>D</TD> <TD>E</TD> <TD>F</TD> </TR> </table> </BODY> </HTML>

55 MAGN Alberto Karim Gmez Vzquez

Prctica No. 49. CELDAS QUE ABARCAN A OTRAS CELDAS

<HTML> <HEAD> <TITLE>CELDAS COMBINADAS</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="#000000"> <CELLSPACING="2" CELLSPADING="3"> <TR> <TD COLSPAN="3">Celda1 fila1 </td> <!-- COLSPAN indica el nmero de columnas a combinar --> </tr> <tr> <TD>Celda1 Fila2</TD> <TD>Celda2 Fila2</TD> <TD>Celda2 Fila2</TD> </TR> </table> </BODY> </HTML>

56 MAGN Alberto Karim Gmez Vzquez

Prctica No. 50. UNA CELDA OCUPE EL ESPACIO DE VARIAS FILAS

<HTML> <HEAD> <TITLE>CELDAS COMBINADAS VERTICALES</TITLE> </HEAD> <BODY> <TABLE BORDER> <TR> <TD ROWSPAN=2>Item 1 </td> <TD>Item 2</td> <TD>Item 3</td> <TD>Item 4</td> </tr> <tr> <TD>Item 5</td> <TD>Item 6</td> <TD>Item 7</td> </TR> </table> </BODY> </HTML>

57 MAGN Alberto Karim Gmez Vzquez

Prctica No. 51. POSICIN DEL CONTENIDO DENTRO DE LA CELDA

Por defecto el contenido de la celda aparece alineado a la izquierda. Para cambiar la alineacin utilizaremos el atributo ALIGN dentro de la etiqueta TD. Este atributo ofrece tres posibilidades: CENTER (contenido centrado) LEFT (contenido alineado ala izquierda) RIGHT(contenido alineado a la derecha) <HTML> <HEAD> <TITLE>ALINEACION DEL CONTENIDO DE UNA CELDA</TITLE> </HEAD> <BODY> <TABLE BORDER="2" BORDERCOLOR="#000000" CELLSPACING="2" cELLPADDING="30" WIDTH="50%" HEIGTH="60%"> <TR> <TD ALIGN="CENTER"> Item 2</td> <TD ALIGN="RIGHT"> Item 3</td> <TD ALIGN="LEFT"> Item 4</td> </tr> <tr> <TD>Item 5</td> <TD>Item 6</td> <TD>Item 7</td> </TR> </table> </BODY> <HTML>

58 MAGN Alberto Karim Gmez Vzquez

59 MAGN Alberto Karim Gmez Vzquez

Prctica No. 52. ALINEACIN DE TEXTO EN UNA CELDA ARRIBA O ABAJO

<HTML> <HEAD> <TITLE> TABLAS</TITLE></HEAD> <BODY> <TABLE BORDER=2 BORDERCOLOR=#000000 CELLSPACING=2 CELLPADDING=3 HEIGHT="60%"> <TR> <TD VALIGN="TOP"> Celda 1 fila 1 </TD> <TD VALIGN="BOTTOM"> Celda 2 fila 1 </TD> <TD VALIGN=MIDDLE> Celda 3 fila 1 </TD> </TR> </TABLE> </BODY> </HTML>

60 MAGN Alberto Karim Gmez Vzquez

Prctica No. 53. DIMENSIONES DE LAS CELDAS

Ya vimos que se pueden establecer el ancho y alto de la tabla completa, pero tambin podemos establecer un ancho y alto para la tabla. Obviamente, si hemos establecido la tabla con un ancho en pixeles de 250, la suma de ancho de las celdas no pueden ser mayor que el ancho total de la tabla. Tambin en este caso es aconsejable utilizar ancho y alto en porcentajes. Para establecerlo utilizamos los atributos WIDTH Y HEIGHT aplicados a la etiqueta TD. En el caso del atributo HEIGHT si ponemos un alto distinto en cada celda, las dos tendrn el mismo alto en el resultado. EJEMPLO <HTML> <HEAD> <TITLE> TABLAS</TITLE></HEAD> <BODY> <TABLE BORDER=2 BORDERCOLOR=#0000FF WIDTH="30%" HEIGHT="50%"> <TR> <TD WIDTH="70%"> Celda 1 fila 1 </TD> <TD WIDTH="30%"> Celda 2 fila 1 </TD> </TR> </TABLE> </BODY> </HTML> CELLPADDING=3

61 MAGN Alberto Karim Gmez Vzquez

Prctica No. 54. COLOR DE FONDO DE LA TABLA

Para terminar con el tema de las tablas veremos cmo determinar el color de fondo de la tabla y el color de fondo de las celdas, as como la manera de colocar como fondo de la tabla o de una celda una imagen concreta. Utilizaremos el atributo BGCOLOR=#RRVVAA dentro de la etiqueta TABLE para establecer el color de fondo de la tabla completa. El cdigo quedara as EJEMPLO: <HTML> <HEAD> <TITLE>COLOR DE FONDO DE LA TABLA</TITLE> </HEAD> <BODY> <TABLE BORDER="4" BORDERCOLOR="#00000ff" cELLPADDING="3" WIDTH="30%" HEIGTH="50%" bgcolor="#00ffff"> <TR> <TD WIDTH="70%"> Item 1</td> <TD WIDTH="30%"> Item 2</td> </tr> <TR> <TD WIDTH="70%"> Item 3</td> <TD WIDTH="30%"> Item 4</td> </tr> <TR> <TD WIDTH="70%"> Item 5</td> <TD WIDTH="30%"> Item 6</td> </tr> </table> </BODY> </HTML>

62 MAGN Alberto Karim Gmez Vzquez

Prctica No. 55. COLOR DE FONDO DE LAS CELDAS

Para establecer un color de fondo en una celda determinada aplicaremos el atributo BGCOLOR=#RRVVAA <HTML> <HEAD> <TITLE>COLOR DE FONDO DE LA TABLA</TITLE> </HEAD> <BODY> <TABLE bgcolor="#fffff0" border="2"> <TR> <TD bgcolor="#00ff00"> Item 1</td> <TD> Item 2</td> </tr> <TR> <TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td> </tr> <TR> <TD bgcolor="#0000ff"> Item 5</td> <TD> Item 6</td> </tr> </table> </BODY> </HTML>

63 MAGN Alberto Karim Gmez Vzquez

Prctica No. 56. IMAGEN DE FONDO DE LA TABLA

<HTML> <HEAD> <TITLE>IMAGEN DE FONDO EN TABLAS</TITLE> </HEAD> <BODY> <TABLE background="imagenes/cascada.jpg" width="44%" Height="44%" border="2" bordercolor="ff0000"> <TR> <TD> <img src="imagenes/logo_mar_de_cortes.jpg" width="100" HEIGHT="100"> </td> <TD> Item 2</td> </tr> <TR> <TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td> </tr> <TR> <TD bgcolor="#0000ff"> Item 5</td> <TD><img src="imagenes/logo_mar_de_cortes2.jpg" width="200" HEIGHT="100"></td> </tr> </table> </BODY> </HTML>

64 MAGN Alberto Karim Gmez Vzquez

Prctica No. 57. IMAGEN DE FONDO DE LA CELDA

Si utilizamos el atributo BACKGROUND=imagen.gif dentro de la etiqueta TD, solo la celda donde lo pongamos tendr la imagen de fondo que determinemos, veamos el cdigo. <HTML> <HEAD> <TITLE>IMAGEN DE FONDO EN TABLAS</TITLE> </HEAD> <BODY> <TABLE background="imagenes/cascada.jpg" width="44%" Height="44%" border="2" bordercolor="ff0000"> <TR> <TD> Item 1</td> <TD> Item 2</td> </tr> <TR> <TD bgcolor="#ff0000"> Item 3</td> <TD> Item 4</td> </tr> <TR> <TD bgcolor="#0000ff"> Item 5</td> <TD background="imagenes/logo_mar_de_cortes2.jpg" width="200" Height="100">Item 6</td> </tr> </table> </BODY> </HTML>

65 MAGN Alberto Karim Gmez Vzquez

66 MAGN Alberto Karim Gmez Vzquez