Curso de HTML bsico

Indice de Contenido

Porqu el HTML?

Historia del HTML HTML 4 Las races del HTML Las etiquetas Estructura de las pginas WEB

Etiquetas importantes Escribir y guardar pginas WEB Etiquetas de contenido

La etiqueta <P> Los encabezados Otras etiquetas Caracteres especiales Los espacios Las tablas

Definicin de tablas La etiqueta <TABLE> Las etiquetas <TR> y <TD> Los marcos (frames)

Definicin de marcos La etiqueta <FRAMESET> La etiqueta <FRAME> Marcos mltiples Enlaces entre marcos La etiqueta <NOFRAMES> Formularios

Definicin de formularios Elementos de un formulario Guiones (scripts)

Definicin de guiones Inclusin de giuones Applets

Uso de applets

Recursos en HTML Software Cursos En Lnea

1.2.3.4.5.6.Por qu el HTML? Estructura de las pginas WEB Etiquetas de contenido Las tablas Los Marcos (Frames) Formularios

Por qu el HTML?
Porqu el HTML? Para publicar informacin de manera que pueda ser distribuida globalmente, se necesita un lenguaje comprensible en forma universal, un tipo de "lengua madre" que todas las computadoras puedan potencialmente comprender. El lenguaje de publicacin usado por la World Wide Web es el HTML (HyperText Markup Language), en espaol, lenguaje de marcado hipertextual. El HTML brinda a los autores la capacidad de:

Publicar documentacin en lnea con encabezados, texto, tablas, listados, imgenes, etc. Enviar informacin en lnea va enlaces hipertextuales, a travs del uso del ratn. Incluir hojas de clculo, videos, sonidos y otras aplicaciones directo en los documentos.

Historia del HTML El HTML fue desarrollado inicialmente por Tim Berners-Lee mientras trabajaba en el CERN y popularizado gracias a la aparicin del navegador Mosaic (Desarrollado en NCSA). Durante la dcada del 90, el HTML creci y se desarroll al tiempo que lo haca la World Wide Web. De un tiempo a esta parte el HTML se ha extendido hacia diversas reas de desarrollo, lo cual no podra realizarse sin la activa colaboracin de un enorme nmero de desarrolladores Web en todo el mundo. El desarrollo de la version 2.0 del HTML fue patrocinado por el IETF (Internet Engineering Task Force) durante 1994 y la versin 3.0, desarrollada durante 1995 propona una versin mucho ms rica del HTML, a pesar que an no haba acuerdo en cuanto a la estandarizacin de alguna de las versiones, lo cual recin se llev adelante en 1997, con la aparicin de la versin 3.2 del HTML desarrollada por el Web Consortium. La idea de los desarrolladores del HTML es que los documentos escritos en este lenguaje deberan funcionar bien en cualquiera de los navegadores (Netscape Navigator, Microsoft Internet Explorer, etc.) y en todas las plataformas (Windows, UNIX, Mac, etc.) logrando de esta forma una interoperabilidad que reduce los costos al tener que desarrollar una sola versin de los documentos. Si esto no se consigue, existe el gran riesgo de que la Web se convierta en un mundo donde existan diferentes propietarios de formatos incompatibles entre si, reduciendo el potencial comercial de la Web para todos sus participantes. El HTML ha sido desarrollado con la visin de que todo tipo de dispositivos puedan ser capaces de visualizar informacin de la Web: Computadoras personales con monitores grficos y variedad de resolucin de colores y tamao, telfonos celulares, agendas electrnicas personales, dispositivos de reconocimiento de voz, computadoras con alto o bajo ancho de banda, etc. HTML 4 El HTML 4 extiende el HTML con mecanismos para el uso de hojas de estilo, scripting, marcos, objetos, soporte para el uso de distintas direcciones de texto (de derecha a izquierda), tablas y formularios mejorados, ofreciendo accesibilidad a personas con capacidades disminuidas. El HTML 4.01 es una revisin del HTML 4.0 que corrige errores y realiza algunos cambios de la versin anterior. Internacionalizacin Esta versin de HTML ha sido diseada con la ayuda de expertos en el campo de la internacionalizacin, para que los documentos escritos en cualquier lenguaje puedan ser transportados fcilmente alrededor del mundo. Un paso importante dentro del desarrollo del HTML ha sido la adopcin del estndar de la norma ISO/IEC:10646

como juego de caracteres para el HTML. Es el estndar que mejor trata los asuntos relacionados con la representacin internacional de caracteres, direccin del texto, puntuacin y otros asuntos sobre lenguaje. El HTML ofrece actualmente un gran soporte para diversos lenguajes humanos dentro de sus documentos. Esto facilita el indexado de documentos para motores de bsqueda, tipografa de alta calidad, mejoras en la conversin de texto a sonido, etc. Accesibilidad Como la comunidad de la Web crece, tambin lo hace la diversidad de sus miembros en cuanto a sus habilidades y destrezas. Es por eso que resulta crucial que las tecnologas de base sean apropiadas para sus necesidades bsicas. El HTML ha sido desarrollado para lograr que las pginas Web sean ms accesibles para aquellos con capacidades fsicas disminuidas. La versin 4 del HTML incluye:

Mejor distincin entre estructura y presentacin de los documentos. La habilidad de marcar una descripcin de texto de un objeto incluido (con el elemento OBJECT). Un nuevo mecanismo para los mapas de imgenes (elemento MAP) que permite a los autores integrar enlaces de imagen y texto. El requerimiento que un texto alternativo acompae las imgenes y los mapas de imagen incluidos con el elemento AREA. Descripciones largas para tablas, imgenes, marcos, etc.

Aquellos autores que diseen pginas teniendo en cuenta su accesibilidad, no slo recibirn loas de la comunidad de personas con capacidades disminuidas sino que tendrn otro beneficio: los documentos de HTML bien diseados, y que separan estructura y presentacin, se adaptarn ms fcilmente a las nuevas tecnologas. Las races del html El HTML (HyperText Markup Language) tiene sus races en el SGML (Standard Generalized Markup Language) el cual es un sistema para la definicin de lenguajes de marcado. El HTML es un ejemplo de un lenguaje de marcado. A continuacin, un documento tpico en HTML:

<HTML> <HEAD> <TITLE>Mi primer documento HTML</TITLE> </HEAD> <BODY> <P>HOLA!!!</p> </BODY> </HTML>
Historia de la World Wide Web La Web fue creada en 1989. Las palabras utilizadas por Tim Berners-Lee para definir el origen de la WWW resultan ms que elocuentes: "haba necesidad de una herramienta que permita compartir el conocimiento". Entonces l y su compaero Robert Cailliau crearon un prototipo para el CERN y lo presentaron a la comunidad de Internet para testarlo. La Web no es Internet. Es, en realidad, una forma de utilizar la infraestructura de Internet. En otras palabras, la

Web es una aplicacin de Internet. Quizs el desarrollo tecnolgico ms importante en la historia de la Web, ms all de su creacin, fue el de los navegadores con entorno grfico (los hay en modo texto, como el Lynx). Comenzando con el Mosaic, de NCSA y su evolucin hacia el Netscape Navigator y el Microsoft Internet Explorer, estos programas permiten a los usuarios "navegar" entre los diferentes recursos de la Web en un entorno extremadamente amigable. Esto convierte a la Web en una experiencia entretenida y apoya definitivamente la verdadera revolucin que es la Web. Entonces qu es exactamente la Web?. Es una compleja, internacional, multi-plataforma, multi-lenguaje, multicultural mezcla de servidores, clientes, usuarios, bases de datos, todos hablando, trabajando, buscando, accediendo, descargando archivos, y quien sabe que ms. Como tal, nadie es dueo de la web, nadie la controla. De hecho, por su naturaleza y diseo, esto es imposible, ya que la Web es intangible, no se la puede agarrar, pero se puede pensar en la web no como una cosa, sino ms bien como un proceso, una accin, un medio de comunicacin. Podemos pensar tambin que la Web es el gran contenedor de la informacin, que se distribuye globalmente a travs de diversas plataformas utilizando diferentes protocolos de comunicaciones, uno de los cuales es en HTTP (HyperText Transfer Protocol). Este protocolo es el utilizado para transmitir un documento HTML entre el servidor y el cliente. El navegador recibe el documento y lo interpreta. Las etiquetas En principio, una pgina Web se escribe utilizando etiquetas de HTML, que son instrucciones que se insertan en el documento entre los smbolos "<" (menor que) y ">" (mayor que). Para comenzar a dar formato al texto, se inserta el nombre de la etiqueta de la siguiente forma: Para finalizar, se inserta el mismo nombre de etiqueta, antecedido de una barra inclinada: Por ejemplo, para insertar un prrafo, el cdigo necesario es el siguiente: <p>Este es el prrafo</p> Los nombres de las etiquetas pueden estar escritos indistintamente con maysculas o minsculas. As, las dos posibles formas de escribir un prrafo son: <p>Este es el prrafo</p> <P>Este es el prrafo</P> Tambin es posible escribir etiquetas dentro de otras etiquetas. Por ejemplo, para centrar un prrafo en la pgina, se utiliza el siguiente cdigo: <p><center>Este es el prrafo centrado</center></p> Hay que tener en cuenta el sistema de anidado de etiquetas. Para el ejemplo anterior, aqu van dos formas errneas de escribir el cdigo: <p><center>Este es el prrafo centrado</p></center> <center><p>Este es el prrafo centrado</center></p> Finalmente, las etiquetas pueden ser modificadas agregndoles atributos: <p align=center>Este texto est centrado</p> Algunas cosas a tener en cuenta sobre los atributos:

No es necesario escribirlos entre comillas, a no ser que el primer carcter del atributo sea un espacio en blanco. No hay que dejar espacios en blanco antes o despus del signo igual. Los atributos se escriben en la apertura de la etiqueta y no se incluyen en el cierre de la misma.

Es importante saber que los navegadores no tratan los espacios en blanco de la forma en que estamos acostumbrados. De hecho, el siguiente ejemplo: <p>Esto Se ver: Esto es un prrafo Como vemos, el navegador no muestra los espacios en blanco ms all del primero. Para insertar espacios dentro del texto en una pgina Web, se utiliza un cdigo de carcter especial: (non breaking space). Ejemplo: <p>Esto&nbsp;&nbsp;&nbsp;&nbsp;es&nbsp;un&nbsp;&nbsp;prrafo</p> Se ver: Esto es un prrafo es un prrafo</p>

Lo mismo sucede con los saltos de lnea: <p>Este prrafo est escrito en tres lneas diferentes</p> Se ver: Este prrafo est escrito en tres lneas diferentes Para insertar un salto de lnea, se utiliza la etiqueta <br>. De esta manera, para el ejemplo anterior: <p>Este prrafo<br> est escrito en<br> tres lneas diferentes</p> Se ver: Este prrafo est escrito en tres lneas diferentes Prxima leccin "Estructura de las pginas Web" Etiquetas importantes Las etiquetas ms importantes de una pgina Web no son las que dan formato al contenido de la pgina misma, sino las que comunican cosas sobre la configuracin del documento al navegador:

Cdigo
<!DOCTYPE> (no tiene cierre)

Utilidad Define la especificacin de HTML que se est utilizando:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Esta etiqueta se escribe en la primera lnea del documento, antes de <HTML>

<HTML>..</HTML>

Especifica que este documento debe ser ledo como un archivo de HTML. La apertura se escribe luego de <!DOCTYPE> Y el cierre en la ltima lnea del documento.

<HEAD>..</HEAD>

Especifica un rea de la pgina donde el navegador encontrar informacin sobre el documento. Requiere la etiqueta <TITLE> como mnimo.

<TITLE>..</TITLE>

Es el ttulo de la pgina, y su contenido aparece en la barra superior de la ventana del navegador. Se escribe entre las etiquetas <HEAD> y </HEAD>.

<BODY>..</BODY>

Especifica la informacin que ser mostrada en la ventana del navegador. Se escribe luego de la etiqueta </HEAD>. Posee una serie de atributos que modifican globalmente a la pgina: BGCOLOR: asigna un color de fondo. TEXT: asigna un color al texto. BACKGROUND: Especifica una imagen de fondo.

Ej.:
<BODY BGCOLOR=#008080> <BODY TEXT=red BACKGROUND=fondo.jpg>

<!-- -->

Incluye un comentario que no ser mostrado en la ventana del navegador. Ej:

<!-- este es el comentario -->

Se puede escribir entre <HTML> y </HTML>.

<META> (no tiene cierre)

Se utiliza para ingresar informacin sobre el documento. Ejemplos:

<META HTTP-EQUIV="REFRESH" url=segunda.html">

CONTENT="10;

Redirecciona automticamente a otra pgina web

<META NAME="Description" CONTENT="descripcin de mi pgina">

Indica a los buscadores una descripcin de la pgina.

<META NAME="Keywords" CONTENT="palabras,clave,separadas,por,coma">

Le da a los buscadores datos para la indexacin del documento.

<META HTTP-EQUIV="PRAGMA" CONTENT="nocache">

Indica al navegador que no incluya esta pgina en el cach.

<META HTTP-EQUIV="expires" CONTENT="9 de Abril de 2001 10:23:23 GMT">

Indica al navegador la fecha de expiracin de la pgina.

Escribir y guardar pginas Web Para poder escribir una pgina Web (documento HTML), no es necesario el uso de aplicaciones tales como el Microsoft Front Page, Macromedia Dreamweaver, HoTMeTal, etc.. Si bien estos programas facilitan la tarea, no resultan indispensables. De hecho, a lo largo del curso, escribiremos nuestras pginas Web utilizando el Bloc de Notas que se incluye en Microsoft Windows (se puede utilizar cualquier procesador de texto). Hay que tener en cuenta que el Bloc de Notas guarda los archivos con extensin "TXT" (Ej.: prueba.txt). Pero las pginas Web deben tener la extensin "HTML" o "HTM", con lo cual, al guardar por primera vez nuestros archivos, deberemos tipiar el nombre completo con su extensin (Ej.: "primera.html") e indicarle al Bloc de Notas que guarde el documento como "todos los archivos" en la ventana desplegable de "tipo de archivo". Los comentarios Al escribir una pgina Web puede resultar importante la inclusin de comentarios que son puedan ser vistos por los lectores (navegantes del sitio). Para esto, se utiliza la etiqueta de comentario, que permite introducir cdigo que el navegador no mostrar en la ventana. Se lo utiliza tambin para hacer "invisible" parte del cdigo de una pgina. Sintaxis de la etiqueta: <!-- comentario --> En el siguiente ejemplo utilizamos los comentarios para indicar cuestiones referentes al formato de la pgina. <HTML> <!-- comienzo del encabezado --> <HEAD> <!-- comienzo del ttulo --> <TITLE>Este es el ttulo</TITLE> <!-- final del ttulo --> </HEAD>

<!-- final del encabezado --> <!-- comienzo del contenido --> <BODY> <P>Hola!!</P> </BODY> <!-- fin del contenido --> Ahora utilizamos un comentario para ocultar el contenido de la pgina. En este ejemplo, la palabra "Hola!!" no se ver en la ventana del navegador:

<!-- <P>Hola!!</P> --> Los colores Hemos visto diferentes etiquetas que permiten la utilizacin de atributos para la asignacin de colores (Ej.: <FONT color="red">; <BODY BGCOLOR="#008080">). Existen dos formas bsicas de indicar los colores. La primera es tipiando el nombre del color. Hay muy pocos colores que pueden ser utilizados con igual resultado en los dos navegadores ms populares (Netscape Navigator y Microsoft Internet Explorer). La segunda forma de indicar un color es por su nmero de cdigo. Aunque este sistema es algo ms complejo, es mucho ms recomendable que el anterior, puesto que resulta muy difcil recordar el nombre de todos los colores posibles, mientras que el nmero de cdigo esta relacionado con las cantidades de cada color bsico que conforman el color final. Para formar un color se utiliza una cantidad de cada uno de los tres colores bsicos (rojo, verde y azul), de manera que si queremos lograr un rojo pleno, utilizamos el nmero ms alto de rojo y el ms bajo de verde de azul. Pero cules son esos nmeros?. El cdigo de un color se obtiene de un nmero formado a su vez por otros tres nmeros. Vemoslo en un ejemplo concreto: FF0000 Este es el cdigo para el color rojo puro. Los dos primeros nmeros corresponden a la cantidad de rojo que contiene este color, los siguientes dos nmeros indican la cantidad de verde y los ltimos tres nmeros, la cantidad de azul. La parte ms difcil es entender el sistema de numeracin, que es hexadecimal en vez del decimal al que estamos acostumbrados a usar. En la numeracin hexadecimal se cuenta del 0 a la F (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F). De esta manera, el nmero ms bajo que podemos conseguir es el "00" y el ms alto, el "FF". Veamos algunos ejemplos:

Nombre Traduccin Black Silver Gray White Maroon Red Purple Fuchsia Green Lime Olive

Nmero de cdigo negro plateado gris blanco marron rojo prpura fucsia verde lima oliva

000000 C0C0C0 808080 FFFFFF 800000 FF0000 800080 FF00Ff 008000 00FF00 808000

Yellow Navy Blue Teal Aqua

amarillo azul marino azul verde azulado celeste claro

FFFF00 000080 0000FF 008080 00FFFF

Nota: al ingresar el cdigo de color, se debe anteponer el numeral ("#"), en todos los casos. Prxima leccin "Etiquetas de contenido"

Etiquetas de contenido
Etiquetas de contenido Estas etiquetas indican al navegador la forma en que se debe mostrar el contenido de la pgina. La etiqueta <p> Especifca un prrafo. Al ingresarla el navegador incluir una lnea en blanco que lo separa del contenido anterior y posterior. El siguiente cdigo:

<p>Esto es un prrafo</p> <p>Esto es otro prrafo</p>

Se ver: Esto es un prrafo Esto es otro prrafo A partir de la versin 3.2 del HTML, se incluy la posibilidad de alinear los prrafos con el atributo "ALIGN". Es posible hacerlo a la izquierda, al centro o a la derecha:

<P ALIGN="left">Este prrafo est alineado a la izquierda</P> <P ALIGN="center">Este prrafo est alineado al centro</P> <P ALIGN="right">Este prrafo est alineado a la derecha</P>
Esto se ver asi:

Los encabezados Existen seis niveles de encabezados que se pueden incluir en una pgina Web:

<H1>Encabezado de nivel uno</H1> <H2>Encabezado de nivel dos</H2> <H3>Encabezado de nivel tres</H3> <H4>Encabezado de nivel cuatro</H4> <H5>Encabezado de nivel cinco</H5> <H6>Encabezado de nivel seis</H6>
Ejemplos:

Otras etiquetas Existen otras etiquetas que permiten trabajar con el diseo del texto de una pgina Web. A continuacin, algunos ejemplos:

Cdigo
<ADRESS>..</ADRESS>

Utilidad Contiene informacin sobre una direccin postal. Se escribe usualmente al final de la pgina.

<BLOCKQUOTE>..</BLOCKQUOTE>

Se utiliza para ingresar una cita. Al interpretarlo, el navegador deja una sangra.

<CENTER>..</CENTER>

Todo lo que est contenido por esta etiqueta, aparecer centrado en la ventana del navegador. Se lo utiliza para contener a otras etiquetas HTML, para mostrarlas de un modo separado al resto del

<DIV>..</DIV>

documento, aadiendo un corte de lnea antes y otro despus de su inclusin.

<MARQUEE>..</MARQUEE>

Permite la insercin de un prrafo que se deslizar por la ventana. El texto ser mostrado en negrita. El texto ser mostrado en negrita. El texto ser mostrado en itlica. El texto ser mostrado en itlica. El texto ser subrayado. El texto ser tachado. No asigna ningn formato especial al texto. Provoca un salto de lnea. Se utiliza para dar formato especial a la tipografa. Para que surta efecto, debe ser usado con alguno de sus atributos: color: cambia el color de la letra size: cambia el tamao de la letra face: cambia el tipo de letra

<B>..</B>

<STRONG>..</STRONG>

<I>..</I>

<EM>..</EM>

<U>..</U>

<S>..</S>

<PRE>..</PRE>

<BR> (no tiene cierre)

<FONT>..</FONT>

Ejemplos:
<FONT face=verdana> <FONT size=2 color=blue>

Caracteres especiales Dentro de un documento HTML, todo lo que este dentro de las etiquetas HTML ser considerado como texto (excepto etiquetas dentro de etiquetas). Una pgina web es codificada utilizando un juego de caracteres que se describe dentro de la especificacin MIME "text/html". Especficamente, esto se refiere al juego de caracteres conocido como "US-ASCII" (o ISO-8859-1) que codifica al juego de caracteres conocido como Latin Alphabet No 1. Como ciertos caracteres estn sujetos a interpretacin, dependiendo del lenguaje que utilizan por defecto las diferentes computadoras, para asegurarse que en cualquier lugar del mundo el texto de una pgina web sea visto de la misma manera, se utilizan caracteres especiales, como se describe a continuacin:

Smbolo < > &

<BR> (no tiene cierre)

Cdigo &aacute; &eacute; &iacute; &oacute; &uacute; &Aacute; &Eacute; &Iacute; &Oacute; &Uacute; &lt; &gt; &amp; &quot;

Descripcin Letra a (minscula acentuada) Letra e (minscula acentuada) Letra i (minscula acentuada) Letra o (minscula acentuada) Letra u (minscula acentuada) Letra A (mayscula acentuada) Letra E (mayscula acentuada) Letra I (mayscula acentuada) Letra O (mayscula acentuada) Letra U (mayscula acentuada) Signo menor que Signo mayor que Ampersand (y) Comillas Genera un corte de lnea. El espacio que se genera depende del tipo de

Los espacios Estas etiquetas se utilizan para generar espacios dentro del contenido de un documento HTML:

navegador que est utilizando el lector.

<HR> (no tiene cierre)

Establece una lnea horizontal. Posee una serie de atributos: SIZE=valor: Indica el alto de la lnea horizontal. WIDTH=valor o porcentaje: Indica el ancho de la lnea horizontal. ALIGN=left|center|right: Establece la alineacin de la lnea horizontal. NOSHADE: Quita la sombra que por defecto tienen las lneas horizontales. COLOR=cdigo o nombre: Establece el color de la lnea.

&nbsp;

Genera un espacio en blanco. No es exactamente una etiqueta, puesto que no conserva las caractersticas de sintaxis (no posee < y >). De hecho, pertenece al grupo de caracteres especiales.

Las tablas
Definicin de tablas Una tabla brinda la posibilidad de organizar el contenido (todo o una parte) de una pgina web. El HTML permite la inclusin de tablas dentro de una pgina web. La etiqueta <TABLE> Los posibles atributos de esta etiqueta son:

BORDER=valor

Establece el ancho del borde de la tabla. Si el valor es 0, se ocultarn los bordes. El valor por defecto depende de los diferentes navegadores, por lo cual es recomendable poner siempre este atributo.

CELLPADDING=valor

Establece la cantidad de espacio en blanco que quedar entre el contenido de una celda y el borde de esta. Indica la cantidad de espacio en blanco que quedar entre cada una de las celdas. Expresa el ancho total de la tabla. En el caso de utilizar un porcentaje, este ser respecto del elemento contenedor (de la pgina o de la celda en la que est). Expresa el alto total de la tabla. En el caso de utilizar un porcentaje, este ser respecto del elemento contenedor (de la pgina o de la celda en la que est). Establece la alineacin de la tabla. Indica un color de fondo para la tabla. Indica un color de fondo para el borde de la tabla. Establece el color para los bordes superior e izquierdo de la tabla y derecho e inferior de cada celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

CELLSPACING=valor

WIDTH=valor o porcentaje

HEIGHT=valor o porcentaje

ALIGN=left|right

BGCOLOR=cdigo o nombre

BORDERCOLOR=cdigo o nombre

BORDERCOLORLIGHT=cdigo o nombre

BORDERCOLORDARK=cdigo o nombre

Establece el color para los bordes inferior y derecho de la tabla y superior e izquierdo de cada celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

BACKGROUND=nombre de archivo

Inserta una imagen de fondo para la tabla.

Nota: los distintos navegadores difieren en la forma en que presentan esta imagen.
La etiqueta <TABLE> es en realidad la que contiene una serie de etiquetas que dan formato a las tablas. Es decir que resulta necesario incluir otras etiquetas para poder "armar" una tabla. Estas son:

<TR>..</TR>

Indica una fila dentro de la tabla. Se escribe dentro de las etiquetas <TABLE> y </TABLE>. Debe contener las etiquetas <TD> y </TD>

<TD>..</TD>

Especifica cada celda dentro de la fila. Se escribe dentro de las etiquetas <TR> y </TR>. Contiene la informacin que ser visible dentro de la tabla.

<TH>..</TH>

Indica una celda de encabezado de tabla. Son bastante similares a <TD> con la diferencia que su contenido por defecto est en negrita y centrado.

Veamos ahora el detalle de cada una. La etiqueta <TR> Como ya se dijo, la etiqueta <TR> genera una fila dentro de la tabla y a su vez posee una serie de atributos:

ALIGN=left|center|right

Establece el tipo de alineacin horizontal dentro de las celdas de la fila. Establece el tipo de alineacin vertical dentro de las celdas de la fila. Indica un color de fondo para la tabla. Indica un color de fondo para el borde

VALIGN=top|middle|bottom

BGCOLOR=cdigo o nombre

BORDERCOLOR= cdigo o nombre

de la tabla.
BORDERCOLORLIGHT= cdigo o nombre

Establece el color para los bordes superior e izquierdo de la tabla y derecho e inferior de cada celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

BORDERCOLORDARK= cdigo o nombre

Establece el color para los bordes inferior y derecho de la tabla y superior e izquierdo de cada celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

La etiqueta <TD> Esta etiqueta, que como se dijo antes genera una celda dentro de la fila, a su vez posee una serie de atributos:

ALIGN=left|center|right

Establece el tipo de alineacin horizontal dentro de la celda. Establece el tipo de alineacin vertical dentro de la celda. Especifica el ancho de la celda. Nota: al modificar el ancho de una celda, se estar modificando el ancho de toda la columna

VALIGN=top|middle|bottom

WIDTH=valor o porcentaje

HEIGHT=valor o porcentaje

Especifica el alto de la celda. Nota: al modificar el alto de una celda, se estar modificando el alto de toda la fila.

COLSPAN=valor

Indica la cantidad de columnas que abarcar la celda.

ROWSPAN=valor

Indica la cantidad de filas que abarcar la celda. Indica un color de fondo para la celda. Indica un color para el borde de la celda. Establece el color para los bordes superior e izquierdo de la tabla y derecho e inferior de la celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

BGCOLOR=cdigo o nombre

BORDERCOLOR=cdigo o nombre

BORDERCOLORLIGHT=cdigo o nombre

BORDERCOLORDARK=cdigo o nombre

Establece el color para los bordes inferior y derecho de la tabla y superior e izquierdo de la celda.
Nota: Este atributo slo es aceptado por el Microsoft Internet Explorer.

Ejemplo:

<TABLE border="9" width="75%" height="80%" bordercolor="#008080" bordercolordark="#008000" bordercolorlight="#000080" bgcolor="#FF9999"> <TR> <TD>A1</TD> <TD>A2</TD> <TD>A3</TD> </TR> <TR> <TD>B1</TD> <TD>B2</TD> <TD>B3</TD> </TR> <TR> <TD>C1</TD> <TD>C2</TD> <TD>C3</TD> </TR> </TABLE>

Se ver asi:

<< Anterior - Siguiente >>

Los Marcos (Frames)

Definicin de marcos El uso de marcos permite al navegador sub-dividir la ventana en que se muestran las pginas Web en secciones separadas, las cuales pueden ser actualizadas, o mostrar cada una diferentes documentos HTML al mismo tiempo. Esto resulta muy til cuando cierta parte de la informacin ser requerida en todo el sitio, de manera que, por ejemplo, podemos generar un ndice de contenidos que permanecer a la vista de los lectores del sitio mientras navegan por el mismo. Los marcos (en ingls, frames) utilizan tres tipos de etiquetas: <FRAMESET> , <FRAME> y <NOFRAMES>. Los documentos que incluyen marcos no difieren demasiado de aquellos escritos en HTML normal. La diferencia es que la seccin documento.

<BODY> es reemplazada por <FRAMESET>, donde se describe la estructura del

La sintaxis bsica para una pgina de marcos es la siguiente:

<HTML> <HEAD> <TITLE>Marcos</TITLE> </HEAD> <FRAMESET COLS="35%,*">

<FRAME NAME="izq" SRC="menu.html" scrolling="yes"> <FRAME NAME="der" SRC="inicial.html" scrolling="yes"> </FRAMESET> <NOFRAMES> <BODY> <P>Esta pgina contiene marcos, pero su navegador no los soporta</P> </BODY> </NOFRAMES> </HTML>
Veamos los tres tipos de etiquetas que utilizan los marcos: La etiqueta <FRAMESET> Esta etiqueta da formato al conjunto de marcos. Ejemplo:

<FRAMESET COLS="25%,75%"> .. </FRAMESET>

Es la que contiene a las etiquetas <FRAME> y tiene algunos atributos: Atributo ROWS="valores_separados_por_coma" Utilidad Indica que este grupo de marcos estar dividido en forma horizontal. Adems, especifica el espacio que ocupa cada una de las filas. Ej.:

<FRAMESET

ROWS="25%,75%">
COLS="valores_separados_por_coma" Indica que este grupo de marcos estar dividido en forma vertical. Adems, especifica el espacio que ocupa cada una de las filas. Ej.:

<FRAMESET

COLS="25%,75%">
BORDER="valor" Especifica el ancho en pixels del borde que separa un marco de otro.

BORDERCOLOR="cdigo o nombre"

Indica un color para el borde que separa un marco de otro.

FRAMEBORDER="yes|no"

Especifica si se debe mostrar o no el borde que separa un marco de otro.

La etiqueta <FRAME> Se escribe dentro de la etiqueta <FRAMESET> y es la que da formato a cada marco de la pgina. Adems indica el documento que se mostrar dentro de ese marco. Esta etiqueta no tiene cierre, es decir, no existe la etiqueta </FRAME>. Ejemplo:

<FRAME SRC="menu.html">
Los atributos que acepta esta etiqueta son: Atributo SRC="ubicacin y nombre de archivo" NAME="nombre_de_frame" Utilidad Indica el documento HTML que ser mostrado dentro de este marco. Ej.: <FRAME SRC="menu.html"> Se utiliza para nombrar a un marco, de manera que pueda ser utilizado como objetivo de enlaces en otros documentos, utilizando la sintaxis MARGINWIDTH="valor" MARGINHEIGHT="valor" SCROLLING="yes|no|auto"

<A HREF="archivo" TARGET="nombre_de_frame">

Establece los mrgenes izquierdo y derecho dentro de este marco. Establece los mrgenes superior e inferior dentro de este marco. Controla la aparicin de las barras de desplazamiento de cada marco. La opcin "yes", fuerza la aparicin de estas barras, aunque no sea necesario. La opcin auto inserta las barras slo si el contenido de la pgina lo requiere. Si se utiliza la opcin no, las barras no se mostrarn, aunque el contenido de la pgina no pueda ser visto en su totalidad. Nota: se debe tener cuidad con el uso de la opcin "no", pues no se puede saber la resolucin en que ser vista la pgina por cada lector.

NORESIZE FRAMEBORDER="yes|no" BORDERCOLOR="cdigo o nombre"

Por defecto, los marcos pueden ser cambiados de tamao por los lectores. Al agregar este atributo (que no requiere un valor) se anula esa posibilidad. Controla la aparicin del borde del marco. Especifica un color para el borde del marco. Nota: este atributo slo es vlido para el Netscape Navigator

Mltiples marcos Para generar una pgina con mltiples marcos, existen bsicamente dos posibilidades. La primera es:

<FRAMESET COLS="35%,*" border="5"> <FRAME NAME="izq" SRC="menu.html" noresize scrolling="auto"> <FRAMESET rows="25%,*"> <FRAME NAME="supder" SRC="superior.html" noresize scrolling="no"> <FRAME NAME="infder" SRC="inicial.html" noresize scrolling="auto"> </FRAMESET> </FRAMESET>
Ntese que en el lugar en que debera ir el segundo <FRAME> se ha colocado un nuevo <FRAMESET> compuesto a su vez por dos <FRAME>. De esta manera, estamos armando un conjunto de marcos mltiples en una sola pgina Web. La segunda posibilidad implica la creacin de un documento Web extra, y es la siguiente:

<FRAMESET COLS="35%,*" border="5"> <FRAME NAME="izq" SRC="menu.html" noresize scrolling="auto"> <FRAME NAME="der" SRC="multiple.html" noresize scrolling="auto">

</FRAMESET>
Donde el segundo <FRAME> inserta un documento (multiple.html) que contiene el siguiente cdigo:

<FRAMESET ROWS="25%,*" border="5"> <FRAME NAME="sup" SRC="superior.html" noresize scrolling="no"> <FRAME NAME="inf" SRC="inicial.html" noresize scrolling="auto"> </FRAMESET>
En este caso, el primer <FRAMESET> est insertando una pgina Web en el marco de la izquierda y otra en el de la derecha. Pero la pgina de la derecha no es un documento HTML normal, sino que es otro conjunto de marcos, que vuelve a dividir el navegador (en este caso, el marco de la derecha) e inserta otras dos pginas Web, una en el marco superior y otra en el inferior. Enlaces entre marcos Como se muestra anteriormente, cada marco posee un atributo que lo nombra (<NAME="nombre_del_marco">). Este atributo permite que al insertar un enlace dentro de un marco, el creador de la pgina pueda decidir en qu marco se activar dicho enlace. Por ejemplo, si se tiene una pgina construida con dos marcos, es posible insertar un enlace dentro de uno de ellos y que la pgina Web que se muestra, aparezca dentro del otro marco. Esto se consigue utilizando el atributo "TARGET" dentro del enlace, de la siguiente forma:

<A HREF="nueva.html" TARGET="nombre_del_marco">

As, cuando el lector haga click sobre el enlace, la pgina "nueva.html" se ver en el otro marco. La etiqueta <NOFRAMES> Esta etiqueta se escribe a continuacin de </FRAMESET>, es decir, justo despus de cerrar el conjunto de marcos. Ha sido desarrollada para aquellos navegadores que no soportan marcos, de manera que se pueda insertar informacin para los lectores que navegan con estos programas. Dentro de las etiquetas <NOFRAMES> y </NOFRAMES> se suele insertar las etiquetas dentro de las cuales se escribir un mensaje para aquellos que no pueden ver los marcos. Ejemplo:

<BODY> y </BODY>

<NOFRAMES> <BODY> <P>Esta pgina contiene marcos, pero su navegador no los soporta</P> </BODY> </NOFRAMES>
De todas formas, hoy en da es mnima la cantidad de gente que recorre la Web con este tipo de navegadores.

ormularios
Definicin de formularios Uno de los principales aportes de la versin 2.0 del HTML fue la inclusin de elementos que permitan a los lectores ingresar informacin dentro de una pgina Web. Son las etiquetas de formulario y permiten la inclusin de objetos como cajas de texto, listados desplegables, casillas de verificacin, etc.. Pero es importante aclarar que mientras estos elementos se utilizan para mostrar al lector un formulario, el verdadero valor de estos radica en lo que sucede cuando la informacin ingresada es enviada (usualmente al activar el botn de envo de formulario). Aqu es donde aparece el uso de CGI (Common Gateway Interface), que es la interface que comunica al cliente (el navegador) con el servidor.

La etiqueta para la inclusin de un formulario es ACTION=url

<FORM> y

posee los siguientes atributos:

METHOD=post | get

Especifica el lugar donde deben ser enviados los datos del formulario para buscar una respuesta. Este atributo puede contener simplemente una direccin de correo electrnico, o apuntar a una aplicacin que utilice CGI para manejar los datos enviados. Especifica el mtodo de acceso a la url indicada en el atributo ACTION y su valor puede ser get o post . El mtodo get suele utilizarse cuando el envo de los datos no requiere procesamiento externo de los mismos. Pero cuando el formulario es utilizado para actualizar una base de datos, se usa el mtodo post. Asigna un nombre al formulario, que puede ser utilizado posteriormente por diversos tipos de guiones (scripts) Especifica el tipo de codificacin que se utiliza para escribir el formulario. Usualmente el valor es:

NAME=texto ENCTYPE=tipo de MIME

application/x-www-form-urlencoded
Ejemplo:

Elementos de un formulario Un formulario no est completo sino hasta que se utiliza alguno de los elementos internos, que no son ms que ciertas etiquetas que insertan dentro del documento HTML los diferentes campos del formulario. La etiqueta <INPUT atributos son:

...> inserta un campo cuyo contenido puede ser modificado o activado por el usuario. Sus

ALIGN=top | middle | bottom

Define la alineacin del

<INPUT>

CHECKED MAXLENGHT=valor

SIZE=valor NAME=texto VALUE=...

Indica cuando un checkbox o radio button se encuentran seleccionados Especifica el nmero mximo de caracteres que pueden ser ingresados por el usuario en un campo de texto. El valor puede ser mayor al indicado en el atributo SIZE, en cuyo caso el texto har scroll dentro del campo. El valor por defecto de este atributo es ilimitado. Indica el espacio que ocupar el elemento en la pgina. El nmero que se ingrese como valor ser una cantidad de caracteres. Atribuye un nombre al campo de formulario, que se utilizar posteriormente, durante el procesamiento de los datos del mismo. Asigna al campo de formulario un valor inicial.

Existe adems otro atributo para la etiqueta <INPUT>, que es "TYPE", y que especifica el tipo de datos que el campo INPUT aceptar. Sus posibles valores son: TYPE=button Inserta un botn dentro del documento HTML y se lo suele utilizar junto con JavaScript o Visual Basic Script. Se utiliza para selecciones simples o mltiples de tipo booleanas (donde un campo puede estar seleccionado o no seleccionado). Es representado en la pgina por una o ms casillas de verificacin que el usuario puede activar (una o ms). Cada grupo de checkbox deber tener un NAME (nombre) nico. Se utiliza para selecciones simples (donde solo una opcin puede seleccionarse). Es representado en la pgina web por dos o ms crculos de seleccin que el usuario puede activar (slo uno a la vez). Al activar cada radio automticamente se desactivar el seleccionado anteriormente. Inserta una imagen, la cual podr ser clickeada por el usuario para enviar el formulario. Se utiliza para crear campos de ingreso de texto de una sola lnea. Se recomienda utilizarlo junto con los atributos SIZE y MAXLENGHT. Similar a text excepto que en este caso, el texto que el usuario ingresa no se muestra como tal, sino como una serie de asteriscos. Genera un botn que al ser activado enva el formulario. Si no se utiliza al mismo tiempo el atributo VALUE (que en este caso especifica el texto que se leer dentro del botn), el navegador incluir un texto por defecto dentro del botn. Genera un botn que al ser activado regresa todos los campos del formulario a su valor inicial. Se comporta del mismo modo que submit respecto del atributo VALUE. Otras etiquetas que pueden ser utilizadas dentro de un formulario son:

TYPE=checkbox

TYPE=radio

TYPE=image TYPE=text TYPE=password TYPE=submit

TYPE=reset

<SELECT>

Inserta un campo de seleccin. Es un men desplegable dentro del cual el usuario puede seleccionar una de las opciones. Si se utiliza dentro de esta etiqueta el atributo MULTIPLE, el usuario podr seleccionar ms de una opcin.

<OPTION>

Requiere el atributo NAME Define cada una de las opciones dentro del campo

<SELECT>.

<TEXTAREA>

Requiere los atributos NAME y VALUE Define un campo de entrada de texto de una o ms lneas. Posee los siguientes atributos:

ROWS=valor Indica la cantidad de filas que

ocupar.

COLS=valor Indica la cantidad de columnas que <LABEL >

ocupar. Se utiliza para conectar el texto que se relaciona con un campo de formulario, de manera que al hacer click sobre el texto, se activa el campo. Ejemplo:

<LABEL FOR="rojo">Red:<INPUT TYPE="radio" NAME="Color" VALUE="Rojo" ID="Rojo"></LABEL>