Está en la página 1de 70

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4

Aquiles Serdn Alatriste


Desarrollo de pginas WEB

Nombre del Alumno: ___________________________________________ Fecha:
_______________________
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>
CENTRO NACIONAL DE ACTUALIZACIN DOCENTE
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

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>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

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>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 4. ENCABEZADOS

Tambin podemos crear encabezados (tambin llamados cabeceras) para el texto por ejemplo para sealar
los distintos encabezados

<HTML>
<HEAD>
<TITLE> Encabezado</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>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 5. CENTRADO

Para centrar los elementos del documento HTML utilizamos las etiquetas <center></center>

<HTML>
<HEAD>
<TITLE>Centrado</TITLE>
</HEAD>
<BODY>
<CENTER>CNAD</CENTER>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 6. SEPARADOR HORIZONTAL

<HTML>
<HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<CENTER>Texto centrado</CENTER>
<HR>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 7. SEPARADOR HORIZONTAL ANCHO

<HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<HR WIDTH="50%">
<CENTER>Texto centrado</CENTER>
<HR>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 8. SEPARADOR NASHADE

Si queremos que el separador horizontal aparezca incrustado en la pgina, podemos aadir la etiqueta <HR>
el comando NOSHADE

<HEAD>
<TITLE>sEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<HR NOSHADE>
<CENTER>C E N A D</CENTER>
<HR NOSHADE>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 9. SEPARADOR NASHADE 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">

HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<HR NOSHADE SIZE="20">
<CENTER>C E N A D</CENTER>
<HR NOSHADE SIZE="20">
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

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">

<HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<HR WIDTH="50%" ALIGN="LEFT">
<CENTER>C E N A D</CENTER>
<HR WIDTH="50%" ALIGN="LEFT">
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 11. IZQUIERDA

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="RIGHT">

<HEAD>
<TITLE>SEPARADOR HORIZONTAL</TITLE>
</HEAD>
<BODY>
<HR WIDTH="50%" ALIGN="RIGHT">
<CENTER>Centra Nacional de Actualizacin Docente</CENTER>
<HR WIDTH="50%" ALIGN="RIGHT">
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 13. ETIQUETAS ANIDADAS

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




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 14. SALTO DE LNEA

<HTML>
<HEAD>
<TITLE>Salto de lnea</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1>CNAD</H1></CENTER>
<BR>
<BR>
<BR>
<CENTER><H1>MECATRNICA</H1></CENTER>
<BR>
<BR>
<BR>
<HR>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 15. 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 menor tamao</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>

<CENTER><H1>Mecatronica</H1></CENTER>
<HR>
<TT>

Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir, para ello utilizamos las
etiquetas 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>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 17. NEGRITAS Y CURSIVAS

(<B>) TEXTO EN NEGRITAS (</B>)
(<I>) TEXTO EN CURSIVAS (</I>)

<HTML>
<HEAD>
<TITLE>NEGRITAS Y CURSIVAS</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>
<BR>
<BR>
<BR>
<CENTER><H1>MECATRNICA</H1></CENTER>
<BR>
<BR>
<BR>
<HR>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 18. 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 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:

TAMAO DE FUENTE

<HTML>
<HEAD>
<TITLE>TAMAO DE FUENTE</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE="48">
<HR>
<CENTER>CNAD</CENTER>

<CENTER>Mecatronica</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 19. 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>
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>

<CENTER><H1>Mecatronica</H1></CENTER>
<HR>
<PRE>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</PRE>
</PRE>
</BODY>
</HTML>


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 20. TAMAO DE FUENTE

<HTML>
<HEAD>
<TITLE>TAMAO DE FUENTE</TITLE>
</HEAD>
<BODY>
<P><FONT SIZE="48">
<HR>
<CENTER>CNAD</CENTER>

<CENTER>Mecatronica</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 21. CITA TEXTUAL

Utilizando las etiquetas <BLOCKQUOTE>.</BLOCKQUOTE>

<HTML>
<HEAD>
<TITLE>cita textual</TITLE>
</HEAD>
<BODY>
<HR>
<CENTER><H1><B><I>CNAD</I></B></H1></CENTER>

<CENTER><H1>Mecatronica</H1></CENTER>
<HR>
<BLOCKQUOTE>ISAMEL. HACE AOS, NO IMPORTA CUANTOS
EXACTAMENTE, HALLNDOME CON POCO O NINGN DINERO EN LA BOLASA
Y SIN NADA DE ESPECIAL
INTERS QUE ME TUVIERA EN TIERRA, PENS QUE LO MEJOR SERA DARME A LA MAR POR UNA
TEMPORADA PARA VER LA PARTE ACUTICA DEL MUNDO.</BLOCKQUOTE>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 22. VIETAS

<UL>
<LI>CAPITULO 1
<LI>CAPITULO 2
<LI>CAPITULO 3
</UL>

El resultado ser.



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 23. VIETAS CUADRADAS

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




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 24. VIETAS CON NMEROS ROMANOS

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




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 25. ANIDAR VIETAS

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



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 27. Colores 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 BGCOLOR="#00FF00">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<CENTER>CNAD</CENTER>

<CENTER>Mecatronica</CENTER>
<HR>

Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 28. COLOR DE TEXTO

Para establecer un color, utilizamos el formato RGB(rojo, verde, azul)
Cada color va representado por un par

Colores primarios

COLOR CDIGO HEXADECIMAL
ROJO #FF0000
VERDE #00FF00
AZUL #0000FF
BLANCO #FFFFFF
NEGRO #000000
AMARILLO #FFFF00

Con las etiquetas:

<BODY TEXT="#RRVVAA"> Color del texto
<BODY LINK="#RRVVAA"> Color de los enlaces
<BODY VLINK="#RRVVAA"> Color de los enlaces una vez visitados
<BODY ALINK="#RRVVAA"> Color de los enlaces activos
(el que se ve al hacer clic sobre l)


Ejemplo:

<HTML>
<HEAD>
<TITLE>COLORES DE TEXTO</TITLE>
</HEAD>
<BODY TEXT="#RRVVAA">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<CENTER>CNAD</CENTER>

<CENTER>Mecatronica</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 29. IMAGEN DE FONDO

La sintaxis para incluir una imagen como fondo sera:

BODY BACKGROUND=IMGENES/nombre de la magen.gif>

Ejemplo

<HTML>
<HEAD>
<TITLE>EL ATRIBUTO FACE</TITLE>
</HEAD>
<BODY BACKGROUND="IMAGENES/pollitos.jpg">
<FONT FACE="ARIAL"SIZE="14">
<HR>
<CENTER>CNAD</CENTER>

<CENTER>Mecatronica</CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 30. IMAGEN DE BOTN

<HTML>
<HEAD>
<TITLE>EL ATRIBUTO FACE</TITLE>
</HEAD>
<BODY>
<FONT FACE="ARIAL"SIZE="14">
<HR>
<CENTER>CNAD</CENTER>
<CENTER>Mecatronica</CENTER>
<CENTER><img src="IMAGENES/ramo rosas.jpg"WIDTH ="144"HEIGHT=140"></CENTER>
<HR>
Podemos crear un texto que aparezca haber sido escrito con una mquina de escribir,
para ello utilizamos las etiquetas
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.
</FONT>
</BODY>
</HTML>


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 31. 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. 32. 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>

Prctica No. 33. 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.cnad.edu.mx>CNAD</A>

Prctica No. 34. 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>

Prctica No. 35. 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>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 36. ENLACE UTILIZANDO UNA IMAGENPARA VER OTRA IMAGEN













Prctica No. 37. TEXTO CON RESPECTO A LA IMAGEN



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 38. TEXTO ARRIBA

<HTML>
<HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
<BODY>

<P>MARGARITAS
<IMG SRC=IMAGENES/margaritas" ALIGN=TOP>

</BODY>
</HTML>










CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 39. TEXTO EN MEDIO

<HTML>
<HEAD> <TITLE> TEXTO EN MEDIO</TITLE></HEAD>
<BODY>

<P>MARGARITAS
<IMG SRC=IMAGENES/margaritas" ALIGN=MIDDLE>

</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 40. TEXTO ABAJO

<HTML>
<HEAD> <TITLE> TEXTO ARRIBA</TITLE></HEAD>
<BODY>

<P>MARGARITAS
<IMG SRC=IMAGENES/margaritas" ALIGN=TOP>

</BODY>
</HTML>






CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 41. ENLAZAR IMAGEN A IMAGEN

<A HREF=IMGENES/ramo rosas.jpg><IMG SRC=IMGENES/pollitos.jpg BORDER=0></A>

Prctica No. 42. ENLAZAR TEXTO CON IMAGEN

<HTML>
<HEAD> <TITLE> ENLAZAR TEXTO CON IMAGEN</TITLE></HEAD>
<BODY>

<A HREF=IMAGENES/margaritas,jpg"> De clic para ver la imagen</A>

</BODY>
</HTML>

Prctica No. 42. CARACTERES ESPECIALES

CARACTERES CDIGO
<(less than, menor que) &t;
>(greater tan, mayor que) &gt;
& (ampersand) &amp;
(doubl quotation, comillas) &quo;

Prctica No. 41. LETRAS ESPECFICAS

Letras Cdigo
&aacute;
&eacute;
&iacute;
&oacute;
&uacute;
&Aacute;
&Eacute;
&Iacute;
&Oacute;
&Uacute;
&ntilde;
&Ntilde;
&uuml;
&Uuml;
&iquest;
&#161;

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 43. 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>
Dentro de

Para crear una tabla formada por 2 filas y con 3 celdas en cada fila escribiremos lo siguiente dentro del cuerpo
del documento:

<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>

<TABLE>
<TR>
<TD>CELDA 1 FILA1</TD>
<TD>CELDA 2 FILA1</TD>
<TD>CELDA 3 FILA1</TD>
</TR>
<TR>
<TD>CELDA 1 FILA2</TD>
<TD>CELDA 2 FILA2</TD>
<TD>CELDA 3 FILA2</TD>
</TR>
<TR>
<TD>CELDA1 FILA3</TD>
<TD>CELDA 2 FILA3</TD>
<TD>CELDA 3 FILA3</TD>
<TD>CELDA 4 FILA3</TD>

</TR>
</TABLE>
</BODY>
</HTML>

PARA PONER BORDES SE UTILIZAR LA SIGUIENTE

<TABLE BORDER="2">

EJEMPLO

<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>

<TABLE>
<TABLE BORDER="2">
<TR>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
<TD>CELDA 1 FILA1</TD>
<TD>CELDA 2 FILA1</TD>
<TD>CELDA 3 FILA1</TD>
</TR>
<TR>
<TD>CELDA 1 FILA2</TD>
<TD>CELDA 2 FILA2</TD>
<TD>CELDA 3 FILA2</TD>
</TR>
<TR>
<TD>CELDA1 FILA3</TD>
<TD>CELDA 2 FILA3</TD>
<TD>CELDA 3 FILA3</TD>

</TR>
</TABLE>
</BODY>
</HTML>

Prctica No. 44. 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>


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 45. 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">

EJEMPLO

Prctica No. 46. 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">




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 47. 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%">



Con el 100%


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 48. IMAGEN EN UNA TABLA

<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>

<TABLE>
<TABLE BORDER="2" BORDERCOLOR=#FFFF00 CELLSPACING="2" CELLPADDING="12"
width="100%">
<TR>
<TD>
<center><IMG SRC="IMAGENES/ramo rosas.jpg "WIDTH="200"HEIGHT="200"></center>

</TD>

<TD>
<FONT FACE="Arial" SIZE="7">ESTA ES OTRA FORMA DE ORGANIZAR EL CONTENIDO DE UNA
PGINA WEB. PODEMOS UTILIZAR TABLAS PARA ORDENAR LOS ELEMENTOS DE NUESTRA PGINA
</FONT>
</TD>

</TABLE>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 49. FILAS CON DESTINO NMERO DE CELDAS

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.

<TABLE BORDER=2>
<TR>
<TD>CELDA 1 FILA 1</TD>
<TD>CELDA 2 FILA 1</TD>
<TD>CELDA 3 FILA 1</TD>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
</TR>
</TABLE>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 50. TTULO DE LA TABLA

<TABLE BORDER=2 BORDERCOLOR=#000000>
<CAPTION>Muestra de table con ttulos</CAPTION>
<TR>
<TD>CELDA 1 FILA 1</TD>
<TD>CELDA 2 FILA 1</TD>
<TD>CELDA 3 FILA 1</TD>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
<TD>CELDA 2 FILA 3</TD>
</TR>
</TABLE>




Podemos aadir un titulo a la tabla (caption, en ingls)


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 51. 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

<TABLE BORDER=2 BORDERCOLOR=#000000>
<CELLSPACING=2>
<TR>
<TH>CABECERA 1</TH>
<TH>CABECERA 2</TH>
<TH>CABECERA 3</TH>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
<TD>CELDA 2 FILA 3</TD>
</TR>
</TABLE>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 52. CELDAS QUE ABARCAN A OTRAS CELDAS

<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>
<TABLE>
<TABLE BORDER=2 BORDERCOLOR=#000000>
<CELLSPACING=2 CELLSPADING=3>
<TR>
<TD COLSPAN=3> Celda 1 final1 </TD>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
</TR>

</TABLE>
</BODY>
</HTML>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

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

<HTML>
<HEAD> <TITLE> TABLAS</TITLE></HEAD>
<BODY>
<TABLE>
<TABLE BORDER=2 BORDERCOLOR=#000000>
<TR>
<TD ROWSPAN=3> Celda 1 final1 </TD>
<TD> Celda 2 Fila 1 </TD>
<TD> Celda 3 Fila 1 </TD>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
</TR>

</TABLE>
</BODY>
</HTML>


Prctica No. 54. 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> TABLAS</TITLE></HEAD>
<BODY>

<TABLE BORDER=2 BORDERCOLOR=#000000 CELLSPACING=2 CELLPADDING=3 WIDTH="50%">
<TR>
<TD ALIGN="CENTER"> Celda 1 fila 1 </TD>
<TD ALIGN="LEFT"> Celda 2 fila 1 </TD>
<TD ALIGN="RIGHT"> Celda 3 fila 1 </TD>
</TR>
<TR>
<TD>CELDA 1 FILA 2</TD>
<TD>CELDA 2 FILA 2</TD>
<TD>CELDA 3 FILA 2</TD>
</TR>

</TABLE>
</BODY>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
</HTML>




Prctica No. 55. 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 Celda 3 fila 1 </TD>
</TR>
</TABLE>
</BODY>
</HTML>







CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 56. 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 CELLPADDING=3 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>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 57. 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> TABLAS</TITLE></HEAD>
<BODY>

<TABLE BGCOLOR=#00FFFF BORDER="4">
<TR>
<TD> Celda 1 fila 1 </TD>
<TD> Celda 2 fila 1 </TD>
<TD> Celda 3 fila 1 </TD>
</TR>
<TR>
<TD> Celda 1 fila 2 </TD>
<TD> Celda 2 fila 2 </TD>
<TD> Celda 3 fila 2 </TD>
</TR>
</TABLE>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica 58. COLOR DE FONDO DE LAS CELDAS

Para establecer un color de fondo en una celda determinada aplicaremos el atributo BGCOLOR=#RRVVAA

<HTML>
<HEAD><TITLE>TABLAS</TITLE></HEAD>
<BODY>
<BODY BGCOLOR="#FFFF00">
<TABLE BGCOLOR=#FFFFF0 BORDER="2">
<TR>
<TD BGCOLOR="#00FF00">Celda 1 fila 1</TD>
<TD> Celda 2 fila 1</TD>
<TD> Celda 3 fila 1</TD>
</TR>
<TR>
<TD> Celda 1 fila 2 </TD>
<TD> Celda 2 fila 2 </TD>
<TD> Celda 3 fila 2 </TD>
</TR>
</TABLE>
</BODY>
</HTML>



Prctica No. 59. IMAGEN DE FONDO DE LA TABLA

<HTML>
<HEAD><TITLE>TABLAS</TITLE></HEAD>

<BODY BGCOLOR="#FFFF00">
<TABLE BACKGROUND="IMAGENES/ramo rosas.jpg" WIDTH="44" HEIGHT="44" BORDER="2"
BORDERCOLOR=#FF0000>
<TR>
<TD WIDTH="100%">Celda 1 fila 1</TD>
<TD> WIDTH="100%">Celda 2 fila 1</TD>
<TD> WIDTH="100%">Celda 3 fila 1</TD>
</TR>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
<TR>
<TD> Celda 1 fila 2 </TD>
<TD> Celda 2 fila 2 </TD>
<TD> Celda 3 fila 2 </TD>
</TR>
<TR>
<TD> Celda 1 fila 3 </TD>
<TD> Celda 2 fila 3 </TD>
<TD> Celda 3 fila 3 </TD>
</TR>
</TABLE>
</BODY>
</HTML>



Prctica No. 60. 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>TABLAS</TITLE></HEAD>

<BODY BGCOLOR="#FFFF00" CELLSPACING="30" CELLPADDING="50%">

<TABLE BACKGROUND="IMAGENES/ramo rosas.jpg" BORDER="2" BORDER COLOR=#FF0000
WIDHT="100%" HEIGHT="100%">
<TR>
<TD WIDTH="25%" BACKGROUND="IMAGENES/margaritas.jpg">Celda 1 fila 1</TD>
<TD WIDTH="25%"> Celda 2 fila 1</TD>
<TD WIDTH="25%"> Celda 3 fila 1</TD>
</TR>
<TR>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
<TD WIDTH="25%"> Celda 1 fila 2 </TD>
<TD WIDTH="25%"> Celda 2 fila 2 </TD>
<TD WIDTH="25%"> Celda 3 fila 2 </TD>
</TR>

</TABLE>
</BODY>
</HTML>




CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 60. CALCULO DE COLORES EN FORMATO HEXADECIMAL

Utilizando dos programas que toda PC con Windows tiene disponibles podemos averiguar el cdigo
hexadecimal de un color determinado.

PAINT

Abrimos el programa PAINT,

y dar doble clic en la paleta de colores,


Aparece la siguiente ventana

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


Dar doble clic en la opcin Definir colores personalizados y la ventana se ampliar de la siguiente
manera



En esta parte se elegir el color deseado, haciendo las siguientes anotaciones

C solido Color Decimal Hexadecimal
Verde Rojo 34 22
Verde 177 B1
Azul 76


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


CALCULADORA CIENTFICA


CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
FORMULARIOS

La manera ms eficaz de conseguir que los usuarios de nuestra pgina se comuniquen con nosotros es a
travs de un formulario.

Es habitual ver en las pginas web

Aunque bastara con crear un enlace a nuestra direccin de correo electrnico para que el usuario pueda
hacer sus comentarios, en ocasiones nos pueden interesar que conteste a preguntas que nosotros
determinaremos o limitar el espacio para los comentarios

Hay dos formas de recibir la informacin que introduce el usuario: recibirla directamente en nuestra direccin
de correo o utilizar un programa que gestione los datos y despus nos los incluya en una bd. Para trabajar con
la segunda opcin necesitaremos un CGI son scripts creados normalmente en lenguaje Perl o C, aunque
pueden utilizarse otros lenguajes de programacin para crearlos. Se colocan en el servidor web (normalmente
en una carpeta determinada por el proveedor de dicho servidor)

ESTRUCTURA GENERAL DE UN FORMULARIO

Etiqueta de inicio:
<FORM ACTION=mailito: direccin@correo.com
METHOD=POST ENCTYPE=TEXT/PLAIN>

El atributo ACTION indica al navegador que el formulario se enviar a la direccin de correo electrnico que
determinaremos.

El atributo METHOD=POST indica que los datos sern enviados por correo electrnico inmediatamente
despus de que en usuario pulse el botn de envi.

El atributo ENCTYPE=(TEXT/PLAIN consigue que recibamos la respuesta en formato de fichero de texto y si
codifica.
Cuerpo del formulario: aqu incluiremos los distintos elementos de introduccin de datos.
Botones de envi y de borrado.
Etiqueta de cierre de formulario </FORM>

ELEMENTOS DE INTRODUCCIN DE DATOS

La etiqueta base para crear elementos de introduccin de datos es la siguiente:

<INPUT TYPE=tipo del elemento NAME=nombre del elemento VALUE=valor predeterminado>

No siempre es necesario establecer un valor predeterminado para el elemento de introduccin de datos.
Veremos cmo crear elementos de introduccin de datos mediante texto y en este caso no se necesita incluir
en la etiqueta el atributo VALUE.

Si queremos crear un campo de texto en el que el usuario debe introducir su nombre la lnea de cdigo que
tendramos que incluir dentro de las etiquetas <FORM></FORM> (en el cuerpo del documento HTML) sera la
siguiente:
Introduzca su nombre: <INPUT TYPE=text NAME=nombre>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
Prctica No. 62: FORMULARIOS

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

Introduzca su nombre: <INPUT TYPE="text"NAME="nombre">


</FORM>
</BODY>

</HTML>



La longitud por defecto de un campo de texto de una lnea es de 20 caracteres

Para crear un campo de texto ms largo utilizaremos el atributo size=nmero, dentro de la etiqueta del
elemento,

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Prctica No. 63: Campo de texto ms largo

INTRODUZCA SU NOMBRE: <INPUT TYPE="text" NAME="nombre" SIZE=50>

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="50">

</FORM>
</BODY>

</HTML>



TAMBIN PODEMOS LIMITAR EL NMERO DE CARACTERES UTILIZANDO EL ATRIBUTO
maxlenfth=nmero. Si escribimos:

INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="20" MAXLENGTH=40>

El usuario slo podr incluir 40 caracteres en el campo de texto y slo 20 caracteres se vern dentro del
mismo. El campo de texto quedara as

Prctica No.

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="text"NAME="nombre" SIZE="40" MAXLENGTH="50">
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


</FORM>
</BODY>

</HTML>



Tambin se puede crear un campo de texto codificado, es decir que el usuario slo vera asteriscos al
escribir el texto. Esto es muy til para contraseas de usuario.
Para ello cambiamos el atributo TYPE=text por TYPE=password:

Ejemplo:

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="password" NAME="nombre" SIZE="40" MAXLENGTH="50">


</FORM>
</BODY>

</HTML>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


Si lo que queremos es que el usuario escriba sus comentarios o que introduzca un texto largo,
utilizaremos la siguiente etiqueta:

<TEXTAREA NAME="nombre del elemento" ROWS="nmero de filas" COLS="nmero de
columnas"></TEXTAREA>


EJEMPLO

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="password" NAME="nombre" SIZE="40"
MAXLENGTH="50">
<BR>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA PGINA<TEXTAREA NAME="QUE LE PARECIO LA
PGINA" ROWS="10" COLS="30"></TEXTAREA>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
</FORM>
</BODY>

</HTML>




EJERCICIO 62. BOTONES DE ENVO Y BORRADO


Es importante al menos crear un botn para que el usuario enve el formulario. La etiqueta sera la
siguiente:


EJEMPLO:

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="password" NAME="nombre" SIZE="40" MAXLENGTH="50">
<BR>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA PGINA<TEXTAREA NAME="QUE LE PARECIO LA
PGINA" ROWS="10" COLS="30"></TEXTAREA>

<BR>
<BR>
<BR>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
<INPUT TYPE="SUBMIT" VALUE="ENVIAR">
</FORM>
</BODY>

</HTML>



BOTON DE BORRADO

Aunque no es necesario, es habitual y recomendable incluir adems un botn de borrado de los datos por si el
usuario se ha equivocado al escribirlos.

Para ello utilizamos la etiqueta:

<INPUT TYPE="reset" VALUE="BORRAR">

EJEMPLO

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="password" NAME="nombre" SIZE="40" MAXLENGTH="50">
<BR>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA PGINA<TEXTAREA NAME="QUE LE PARECIO LA
PGINA" ROWS="10" COLS="30"></TEXTAREA>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

<BR>
<BR>
<BR>
<INPUT TYPE="SUBMIT" VALUE="ENVIAR">

<INPUT TYPE="reset" VALUE="BORRAR">
</FORM>
</BODY>

</HTML>




CORREO ELECTRNICO

EJEMPLO

<HTML>
<AHEAD>
<TITLE>FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM>

INTRODUZCA SU NOMBRE: <INPUT TYPE="password" NAME="nombre" SIZE="40" MAXLENGTH="50">
<BR>
<BR>
<BR>
EXPRESE UN COMENTARIO RESPECTO A LA PGINA<TEXTAREA NAME="QUE LE PARECIO LA
PGINA" ROWS="10" COLS="30"></TEXTAREA>

<BR>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
<BR>
<BR>
<INPUT TYPE="SUBMIT" VALUE="ENVIAR">

<INPUT TYPE="reset" VALUE="BORRAR">
<FORM ACTION="mailto: nfernand97@hotmail.com" METHOD="POST" ENCTYPE="TEXT/PLAIN"
</FORM>
</BODY>

</HTML>





CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB



ADJUNTAR ARCHIVO

CON LA SIGUIENTE CODIFICACIN

<FORM NAME=FICHERO METHOD=POST ACTION=mailto:nfernand97@hotmail.com
enctype=multipart/form-data>
Adjuntar al fichero:
<INPUT TYPE=FILE NAME=mifichero> <IMPUT TYPE=SUBMIT VALUE=Adjuntar fichero>
</FORM>

EJEMPLO

<HTML>
<HEAD>
<TITLE> ADJUNTAR ARCHIVOS EN FORMULARIOS</TITLE>
</HEAD>
<BODY>

<FORM NAME="FICHERO" METHOD="POST" ACTION=mailto:nfernand97@hotmail.com"
enctype="multipart/form-data">
Adjuntar al fichero:
<INPUT TYPE="FILE" NAME="mifichero">
<INPUT TYPE="SUBMIT" VALUE="Adjuntar fichero">

</FORM>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
</BODY>
</HTML>



FORMULARIOS INCLUYENDO MENUS, CASILLAS DE CONFIRMACIN Y BOTONES DE RADIO

Si lo que queremos es que el usuario elija una opcin entre varias que determinemos, lo mejor es utilizar los
mens desplegables, la etiqueta que engloba a todo el men es <SELECT NAME=nombre del
elemento></SELECT>.

Las distintas opciones del men se crean colocando la etiqueta <OPTION> dentro de la etiqueta mencionada
antes. Por ejemplo: para crear un men desplegable con los meses del ao tendramos que escribir el
siguiente cdigo dentro del formulario.

<SELECT NAME="meses">
<OPTION>ENERO</OPTION>
<OPTION>FEBRERO</OPTION>
<OPTION>MARZO</OPTION>
<OPTION>ABRIL</OPTION>
<OPTION>MAYO</OPTION>
<OPTION>JUNIO</OPTION>
<OPTION>JULIO</OPTION>
<OPTION>AGOSTO</OPTION>
<OPTION>SEPTIEMBRE</OPTION>
<OPTION>OCTUBRE</OPTION>
<OPTION>NOVIEMBRE</OPTION>
<OPTION>DICIEMBRE</OPTION>

</SELECT>



CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


En este caso solo se ve un elemento del men. Pero aadiendo el atributo MULTIPLE SIZE=nmero de
opciones A LA ETIQUETA >SELECT>


</FORM>
<SELECT NAME="meses" MULTIPLE SIZE="3">
<OPTION>ENERO</OPTION>
<OPTION>FEBRERO</OPTION>
<OPTION>MARZO</OPTION>
<OPTION>ABRIL</OPTION>
<OPTION>MAYO</OPTION>
<OPTION>JUNIO</OPTION>
<OPTION>JULIO</OPTION>
<OPTION>AGOSTO</OPTION>
<OPTION>SEPTIEMBRE</OPTION>
<OPTION>OCTUBRE</OPTION>
<OPTION>NOVIEMBRE</OPTION>
<OPTION>DICIEMBRE</OPTION>

</ZELECT>

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB


CASILLAS DE CONFIRMACIN

Este tipo de elementos son muy comunes en los formularios. Permiten al usuario marcar una opcin
determinada como por ejemplo si desea recibir informacin sobre un producto, suscribirse a un boletn, etc.

La etiqueta es la siguiente:

<INPUT TYPE=CHECKBOX name=nombre elemento>

Si queremos que la casilla aparezca

<P>DESEO SUSCRIBIRME A SU BOLETN<INPUT TYPE=checkbox NAME=boletn

BOTONES DE RADIO

Los botones de radio permiten elegir una sola opcin entre varias.la etiqueta para este elemento es:

<P><INPUT TYPE=radio> name=OCUPACIN> VALUE=ESTUDIA>ESTUDIANTE
<P><INPUT TYPE=radio NAME=OCUPACIN VALUE=radio>TRABAJADOR
EJERCICIO 63. FRAMES

Los frames (o marcos) permiten dividir una pgina web en varias regiones vertical u horizontalmente. La
caracterstica fundamental de los frames es que cada una de esas partes en la que est dividida la pgina
contiene dentro de otra pgina web completa, totalmente independiente de las contenidas en el resto de los
marcos.
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

Otra caracterstica importante de los frames es que podemos crear un enlace en uno de los marcos y
conseguir FALTA


Podremos, por ejemplo crear una pgina dividida en dos frames verticalmente, en el de la izquierda aparecer
una pgina con el ndice y en el de la derecha el contenido.

Cada vez que demos clic en unmo de los enlaces aparecer un contenido diferente en el marco de la derecha
y el ndice siempre ser visible

Por lo tanto para crear una pgina con frames habr qaue definir la p

DOCUMENTO DE DEFINICIN DE LOS FRAMES

Lo primero que haremos ser crear el documento que contiene los frames.

Definiremos cuantas marcos tendr, su distribucin, tamao y de que pginas estar formado cada marco.



EL atributo ROWS define los marcos en filas (horizontalmente), entre comillas pondremos el alto de dichos
marcos,

Definimos el alto en porcentaje

HORIZONTAL



VERTICAL

CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB
SI QUISIERAMOS CREAR UNA PGINA DIVIDIDA EN MARCOS VERTICALMENTE TENDRAMOS QUE
UTILIZAR EL ATRIBUTO

COLS=ancho:marco1, ancho_marco2.

Por ejemplo

<FRAMESET COLS_=20%,80%>



<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>

<FRAMESET COLS="40%,80%">
<FRAME SRC="INDEX.HTML">
<FRAME SRC="formulario.HTML" NAME="INICIO">

</FRAMESET>
</HTML>




MARCOS ANIDADOS

EJEMPLO
TRES DOS HORIZONTALES Y UN VERTICAL

<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
CENTRO DE ESTUDIOS TECNOLGICOS industrial y de servicios N 4
Aquiles Serdn Alatriste
Desarrollo de pginas WEB

<FRAMESET COLS="20%,80%">
<FRAME SRC="INDEX.HTML">
<FRAMESET ROWS="20%,80%">
<FRAME SRC="PROYECTO.HTML">
<FRAME SRC="formulario.HTML" NAME="INICIO">

</FRAMESET>
</HTML>