HTML

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
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> 
<TITLE> TTULO DEL PROGRAMA</TITLE>

</HEAD>
<BODY>
Entre estas etiquetas pondremos el contenido
de nuestra pgina web
</BODY>
</HTML>
3
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
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>
</BODY>
</HTML>
5
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>
<HR>
Podemos utilizar una lnea horizontal para
separar distintas partes de una pgina Web,
y para ello utilizaremos esta etiqueta
</BODY>
</HTML>
6
Prctica No. 7. SEPARADOR HORIZONTAL ANCHO

<HTML>
<HEAD>
<TITLE>SEPARADOR HORIZONTAL
ANCHO</TITLE>
</HEAD>
<BODY>
<HR WIDTH="50%">
<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>
NOSHADE</TITLE>
</HEAD>
<BODY>
<HR NOSHADE>
<HR NOSHADE>
</BODY>
</HTML>
7
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>
NOSHADE</TITLE>
</HEAD>
<BODY>
<HR NOSHADE SIZE="20">
<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>
</HEAD>
<BODY>
<HR WIDTH="50%" ALIGN="RIGHT">
<HR WIDTH="50%" ALIGN="RIGHT">
</BODY>
</HTML>
8
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>
</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>
<HR>
</BODY>
</HTML>
9
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
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
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
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
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
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
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
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
18
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
20
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
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
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
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
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
CDIGO HEXADECIMAL
#FF0000
#00FF00
#0000FF
#FFFFFF
#000000
#FFFF00
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)
<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
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>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
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
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
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
<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
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">
<HR>
<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
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>
<HR>
<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
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
Prctica No. 33. TEXTO ALTERNATIVO

<HTML>
<HEAD>
</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
Prctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA

VER OTRA IMAGEN
<HTML>
<HEAD>
</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
Prctica No. 35. ENLACE A UN DOCUMENTO

<HTML>
<HEAD>
<TITLE>VINCULO A UN ARCHIVO EXISTENTE</TITLE>
</HEAD>
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
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
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
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> á
<LI> é
<LI> í
<LI> ó
<LI> ú
<LI> Á
<LI> É
<LI> Í
<LI> Ó
<LI> Ú
<LI> ¿
<LI> &
<LI> ¡
</UL>
</BODY>
</HTML>
39
40
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>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</BODY>
</HTML>
41
Prctica No. 40. TABLAS CON BORDE

<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="2">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</BODY>
</HTML>
42
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>
</HEAD>
<BODY>
<TABLE BORDER="4" BORDERCOLOR=#RRVVAA>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</BODY>
</HTML>
43
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>
</HEAD>
<BODY>
<TABLE>
<table border="5" bordercolor="#ab4322" cellspacing="20">
<TR>
<TD>CELDA1 FILA1</TD>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</BODY>
</HTML>
44
45
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>
</HEAD>
<BODY>
<TABLE>
<table border="5" bordercolor="#ab4322" cellspacing="20"
cellpadding="12">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</BODY>
</HTML>
46
47
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>
</HEAD>
<BODY>
<center>
<TABLE>
cellpadding="12" width="30%">
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</center>
</BODY>
</HTML>
48
49
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>
</HEAD>
<BODY>
<center>
<TABLE>
<TR>
</TR>
<TR>
</TR>
<TR>
</TR>
</table>
</center>
</BODY>
</HTML>
50
Prctica No. 46. IMAGEN EN UNA TABLA

<HTML>
<HEAD>
<TITLE>IMAGEN EN UNA TABLA</TITLE>
</HEAD>
<BODY>
<TABLE>
<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
52
Prctica No. 47. TTULO DE LA TABLA

HTML>
<HEAD>
<TITLE>TABLAS TITULO ARRIBA</TITLE>
</HEAD>
<BODY>
<TABLE>
<table border="5"> 
<caption align=top>Tabla 1 Ttulo arriba</caption>
<TR>
</TR>
<TR>
</tr>
</table>
<BR>
<BR>
<TABLE>
<table border="3"> 
<caption align=bottom>Tabla 2 Ttulo abajo</caption>
<TR>
</TR>
<TR>
</tr>
</table>
</BODY>
</HTML>
53
54
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
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>

</tr>
<tr>
<TD>Celda1 Fila2</TD>
</TR>
</table>
</BODY>
</HTML>
56
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
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
59
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
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>
CELLPADDING=3
</TR>
</TABLE>
</BODY>
</HTML>
61
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>
</tr>
<TR>
</tr>
<TR>
</tr>
</table>
</BODY>
</HTML>
62
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
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> Item 4</td>
</tr>
<TR>
<TD><img
src="imagenes/logo_mar_de_cortes2.jpg"
width="200"
HEIGHT="100"></td>
</tr>
</table>
</BODY>
</HTML>
64
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> Item 4</td>
</tr>
<TR>
<TD background="imagenes/logo_mar_de_cortes2.jpg" width="200"
Height="100">Item 6</td>
</tr>
</table>
</BODY>
</HTML>
65
66

HTML

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

TABLA DE CONTENIDO

Prctica No. 1. ETIQUETAS DE APERTURA..................................................................................... 3

Prctica No. 33. TEXTO ALTERNATIVO ........................................................................................ 34

Prctica No. 1. ETIQUETAS DE APERTURA

Prctica No. 2. ESTRUCTURA BSICA

Prctica No. 3. PRRAFOS

Prctica No. 4. ENCABEZADOS

Prctica No. 5. CENTRADO

Prctica No. 6. SEPARADOR HORIZONTAL

Prctica No. 7. SEPARADOR HORIZONTAL ANCHO

Prctica No. 8. SEPARADOR NOSHADE

Prctica No. 9. SEPARADOR NOSHADE SIZE

Prctica No. 10. DERECHA

Prctica No. 11. IZQUIERDA

Prctica No. 12. ETIQUETAS ANIDADAS

Prctica No. 13. SALTO DE LNEA

Prctica No. 14. TEXTO CON TAMAO MENOR

Prctica No. 15. TEXTO CON TAMAO MAYOR

Prctica No. 16. NEGRITAS Y CURSIVAS

Prctica No. 17. Tipo de fuente

Prctica No. 18. TEXTO PREFORMATEADO

Prctica No. 19. TAMAO DE FUENTE

Prctica No. 20. CITA TEXTUAL

Prctica No. 21. VIETAS

Prctica No. 22. ANIDAR VIETAS

Prctica No. 23. VIETAS CUADRADAS

Prctica No. 24. VIETAS CON NMEROS ROMANOS

Prctica No. 25. COLOR DE TEXTO

Con las etiquetas:

Color del texto

Prctica No. 26. COLOR DE FONDO

Prctica No. 27. IMAGEN DE FONDO

Prctica No. 28. IMAGEN DE BOTN

Una de las caractersticas fundamentales de las pginas web es la posibilidad

Enlaces dentro de la misma pgina

Prctica No. 29. ANCLAS O MARCADORES

Prctica No. 30. ENLACE CON UNA PGINA DE INTERNET

Prctica No. 31. ENLACE DE CORREO ELECTRNICO

Prctica No. 32. ENLAZAR A OTRA PGINA UTILIZANDO

Prctica No. 33. TEXTO ALTERNATIVO

Prctica No. 34. ENLACE UTILIZANDO UNA IMAGEN PARA

Prctica No. 35. ENLACE A UN DOCUMENTO

Prctica No. 36. ENLACE TEXTO A UNA IMAGEN

Prctica No. 37. TEXTO CON RESPECTO A LA IMAGEN

Prctica No. 38. LETRAS Y CARACTERES ESPECIALES

Prctica No. 39. TABLAS

Prctica No. 40. TABLAS CON BORDE

Prctica No. 41. COLOR DE BORDE

Prctica No. 42. SEPARACIN ENTRE LAS CELDAS DE UNA

Prctica No. 43. SEPARACIN ENTRE EL CONTENIDO Y EL

Prctica No. 44. DIMENSIONES DE TABLA Y CELDAS

Prctica No. 45. TABLAS FILAS DESIGUALES

Prctica No. 46. IMAGEN EN UNA TABLA

Prctica No. 47. TTULO DE LA TABLA

Prctica No. 48. CELDAS DE CABECERA

Prctica No. 49. CELDAS QUE ABARCAN A OTRAS CELDAS

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

Prctica No. 51. POSICIN DEL CONTENIDO DENTRO DE

Prctica No. 52. ALINEACIN DE TEXTO EN UNA CELDA

Prctica No. 53. DIMENSIONES DE LAS CELDAS

Prctica No. 54. COLOR DE FONDO DE LA TABLA

Prctica No. 55. COLOR DE FONDO DE LAS CELDAS

Prctica No. 56. IMAGEN DE FONDO DE LA TABLA

Prctica No. 57. IMAGEN DE FONDO DE LA CELDA