Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Manual HTML

    Enviado por

    will.obando7041
    49 visualizações29 páginas

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    49 visualizações29 páginas

    Manual HTML

    Enviado por

    will.obando7041

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 29

    Introduccin

    El lenguaje HTML (HyperText Markup Language), es el formato estndar que se utiliza para crear e interpretar documentos de texto e imgenes, conocidos popularmente como pginas web. Estos documentos, que en realidad son archivos de texto plano, estn compuestos bsicamente por: - la informacin que el usuario ve en la pantalla cuando accede a una pgina, y - cdigos (tags o etiquetas), transparentes para el usuario, que son interpretados por el programa del navegador y que controlan la manera como la informacin es mostrada en la pantalla. El objeto del presente mdulo es aprender a utilizar de manera correcta, algunas de esas etiquetas, con el fin de crear y modificar pginas mediante el uso de cualquier editor de texto. El siguiente ejemplo sencillo, contiene lo necesario para crear una pgina que desplegar en el explorador (browser o navegador), la frase Bienvenido al curso de HTML:

    <HTML> <HEAD> <TITLE>Primer Pgina</TITLE> </HEAD> <BODY> Bienvenido al curso de HTML </BODY> </HTML> Las palabras encerradas entre los smbolos menor y mayor que (< >), son las etiquetas de HTML y las frases dentro de stas, constituyen la informacin que realmente ver el usuario. Todo archivo HTML comienza siempre con la etiqueta <HTML> y finaliza con la etiqueta </HTML>. La estructura de una pgina est compuesta bsicamente por dos secciones: el encabezado (HEAD), y el cuerpo (BODY), delimitados por las etiquetas <HEAD>, </HEAD>, <BODY> y </BODY> respectivamente. El cuerpo contiene toda la informacin de la pgina que ser desplegada por el browser al accederla, mientras que el encabezado cuyo contenido generalmente no es visible, se utiliza principalmente para colocar en l, adems del ttulo de la pgina, scripts y otras etiquetas

    especiales en las que se consignan datos relacionados con el autor, palabras claves sobre el contenido, descripcin, etc. En un documento HTML se pueden incluir un sinnmero de etiquetas, que controlan la manera como la informacin ser presentada por el explorador. Existen etiquetas para formatear la presentacin del texto y las imgenes, otras indican al sistema cmo responder a eventos generados por el usuario, tales como, hacer clic con el ratn o desplazarlo sobre una imagen, texto o ciertas reas sensibles. Tambin hay etiquetas para organizar la informacin dentro tablas, dividir la pantalla en secciones o ventanas independientes, etc. Una de las ms importantes es la etiqueta que le permite al usuario navegar entre documentos, simplemente dando clic sobre los denominados vnculos (links), sin importar dnde residen las pginas a las cuales apuntan. El explorador, tambin conocido como navegador o browser, es el software que permite acceder, interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya direccin es conocida. El navegador interpreta las etiquetas y muestra el documento en pantalla. La principal ventaja del formato HTML es su portabilidad. Es decir, los exploradores son capaces de interpretar y mostrar la informacin contenida en una pgina web, independientemente de la plataforma en que se usen (IBM, MAC, UNIX, LINUX, etc.). El presente mdulo no pretende hacer una explicacin exhaustiva del lenguaje HTML ni de ninguna herramienta de edicin grfica. Aqu se tratarn nicamente, aquellos aspectos bsicos que le permitan al lector desarrollar pginas sencillas que funcionen de acuerdo a lo esperado, sin importar la versin y la casa productora del software del navegador ni la plataforma de trabajo

    Qu necesita
    Dado que las pginas Web son simples documentos de texto plano, lo nico que se requiere para su creacin es un editor de texto. Aunque existen muchas y potentes herramientas para la creacin y edicin grfica de documentos HTML, el Block de Notas (NotePad), el editor (EDIT) de DOS, o cualquier otro editor de texto sirven bien para estos propsitos. Mientras que para visualizar documentos HTML, debemos disponer de un explorador como Netscape Navigator , Mozilla Firefox o Microsoft Internet Explorer , que son los ms populares en el mercado.

    Primer pgina
    Para crear sta y todas las pginas propuestas, se utilizar el Block de Notas de Microsoft (notepad). bralo y escriba en l el siguiente texto: <HTML>

    <HEAD> <TITLE>Mi primera pgina</TITLE> </HEAD> <BODY> HOLA A TODOS! STA ES MI PRIMERA PGINA WEB </BODY> </HTML> HTML no es un lenguaje sensible a las maysculas, lo que significa que cualquier etiqueta puede ser escrita en maysculas, minsculas o una combinacin de ellas. Por ejemplo, escribir <HTML> tendr el mismo efecto que escribir <html> o <Html>. De igual forma, no es necesario utilizar una lnea para cada etiqueta, ni conservar la sangra y formato propuestos en los ejemplos de ste mdulo. Lo anterior se hace para facilitar la lectura, comprensin y edicin de los archivos, adems de ser una prctica casi obligada entre los buenos desarrolladores. El cdigo anterior pudo haberse escrito de la siguiente manera, y el resultado obtenido seguir siendo el mismo: <html><HEAD><TITLE>Mi primera pgina</title></HEAD><BODY> HOLA A TODOS! STA ES MI PRIMERA PGINA WEB</BODY> </HTML> Guarde el archivo con el nombre PrimeraPagina.html en un directorio cualquiera, por ejemplo, C:/CursoHTML/, asegurndose de colocarle la extensin .html. Abra en el explorador el archivo que acaba de crear y si todo va bien, obtendr una pgina similar a la siguiente:

    Texto
    ETIQUETAS PARA TEXTO Las etiquetas de texto como su nombre lo indica, permiten cambiar los atributos y la manera como el texto se ver dentro de la pgina. Se puede afectar todo un prrafo, una lnea, una

    palabra o caracteres individuales simplemente encerrndolos dentro de las etiquetas apropiadas. Algunos atributos del texto pueden ser controlados por diferentes etiquetas, obteniendo resultados similares. ETIQUETA <HX> </HX> Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir ttulos y subttulos, dado que permite mostrar texto en negrillas con seis tamaos diferentes, dependiendo del valor asignado al atributo X. Para ver su funcionalidad, escriba las siguientes lneas en un nuevo archivo: <HTML> <HEAD> <TITLE> Encabezados</TITLE> </HEAD> <BODY> <H1>Este texto tiene el tamao que le da la etiqueta H1</H1> <H2>Este texto tiene el tamao que le da la etiqueta H2</H2> <H3>Este texto tiene el tamao que le da la etiqueta H3</H3> <H4>Este texto tiene el tamao que le da la etiqueta H4</H4> <H5>Este texto tiene el tamao que le da la etiqueta H5</H5> <H6>Este texto tiene el tamao que le da la etiqueta H6</H6> </BODY> </HTML> Una vez guardado el archivo, bralo en el explorador y observe los resultados. La etiqueta <HX> tiene otro atributo que permite controlar la alineacin del texto. ste se puede alinear al centro (align="center"), a la derecha (align="right"), a la izquierda, que es la alineacin que toma por defecto cuando el atributo align es omitido, o justificado (align="justify"). Por ejemplo, <H1 align=center>Texto </H1> mostrar la palabra Texto alineada al centro de la pgina, mientras que <H1 align=right>Texto </H1> alinear Texto a la derecha y <H1>Texto </H1> presentar Texto alineada a la izquierda. Lo mismo ocurrir si se comete un error al escribir el valor del atributo align. Veamos un par de ejemplos: <H1 align=centre>Este texto no se alinear al centro </H1> <H1 aling=right>Este tampoco se alinear a la derecha</H1> En general, se puede afirmar que cuando la sintaxis de una etiqueta no es la correcta, el

    navegador no generar error o advertencia alguna al respecto, ni dejar de mostrar la pgina, simplemente los resultados no sern los esperados. ETIQUETA <FONT> </FONT> Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamao (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, las siguientes lneas escritas dentro del cuerpo de un nuevo archivo, mostrarn texto con cuatro tamaos de fuente diferentes: Texto con fuente tamao normal <FONT SIZE="+1">Texto con fuente tamao + 1</FONT> <FONT SIZE="+2">Texto con fuente tamao + 2</FONT> <FONT SIZE="-1">Texto con fuente tamao - 1</FONT> <FONT SIZE="-2">Texto con fuente tamao - 2</FONT> La sintaxis completa de la etiqueta <FONT> es la siguiente: <FONT SIZE="X" COLOR="color" FACE="Nombre de la fuente">Texto</FONT> Donde X corresponde como ya se vi, al tamao de la fuente que admite valores positivos y negativos. El atributo color puede ser un valor hexadecimal o el nombre en ingls de un color especfico. Aunque en teora se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada Paleta Segura. El uso de cualquiera de esos colores, garantiza que las pginas podrn ser vistas tal como fueron diseadas, aun cuando se utilice para su visualizacin un monitor con la configuracin ms pobre. La tabla siguiente muestra los valores hexadecimales (cdigos) y nombres de los 16 colores mencionados.

    Finalmente, Nombre de la fuente es el atributo correspondiente a los nombres de las fuentes disponibles en el sistema, tales como: Arial, Helvetica, Times New Roman, Arial Black, Chalesworth, etc. Como ejemplo, se propone escribir las siguientes lneas dentro del cuerpo de una nueva pgina: <FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT> <FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT> <FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT> <FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT> cuyo resultado ser similar al de la siguiente grfica:

    ETIQUETA <PRE> </PRE> HTML slo reconoce y muestra un espacio en blanco entre palabras, aunque se hayan escrito dos o ms. Tampoco reconocer tabuladores o retornos de carro. Es decir, s dentro del cuerpo de un archivo HTML se escribe el siguiente texto: <BODY> Este texto tiene varios espacios y retornos de carro </BODY> al abrir la pgina en el explorador se obtendr:

    S se quiere que el texto se vea en la pgina tal como fue escrito, ste debe encerrarse dentro de las etiquetas <PRE> y </PRE> (preformated), que forzarn al explorador a mostrar todos los espacios, tabuladores y retornos de carro que encuentre. ETIQUETA <BR> y <P> La etiqueta <BR> permite forzar un salto de lnea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razn por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciar un nuevo prrafo dejando una lnea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo prrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parmetro ALIGN. A continuacin se muestran algunos ejemplos:

    ETIQUETA <HR > Esta etiqueta abierta, dibuja una lnea horizontal (Horizontal Rule), con alineacin, tamao y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes lneas: Lnea centrada, de tamao 10 puntos y ocupando el 30% de la pgina <HR ALIGN=center SIZE= 10 WIDTH= 30%> Lnea alineada a la izquierda, de tamao 5 puntos y ocupando la mitad de la pgina <HR ALIGN=left SIZE= 5 WIDTH= 50%> Lnea alineada a la derecha, de tamao 20 puntos y ocupando la mitad de la pgina <HR ALIGN=right SIZE= 20 WIDTH= 50%> Lnea sencilla que ocupar el 90% de la pgina <HR> OTRAS ETIQUETAS PARA TEXTO La siguiente tabla muestra otras etiquetas muy tiles a la hora de trabajar con texto y los efectos que se conseguirn:

    COMENTARIOS En HTML, como en cualquier otro lenguaje existe una forma de escribir comentarios dentro del cdigo. Todo lo escrito dentro de los signos <!-- y --> ser ignorado por el navegador sin que se muestre cuando la pgina sea visualizada. CARACTERES ESPECIALES Existen una serie de signos que aunque estn disponibles en el teclado, pertenecen a un conjunto especfico de caracteres propios del idioma para el cual fue configurado el computador. Es as como, una pgina escrita por un

    hispano parlante, que probablemente utiliza el conjunto de caracteres de Europa Occidental, denominado Latin-1 (ISO 8859-1), sea visualizada de manera diferente por un usuario ubicado en un pas de Asia o Europa Oriental. Las vocales acentuadas, la letra ee, el signo del Euro y otros caracteres especiales deben sustituirse por ciertos cdigos, para que su visualizacin sea la correcta, sin importar el conjunto de caracteres predefinido en el navegador. Por ejemplo, la letra ee debe ser reemplazada por &ntilde;, de tal forma que la palabra ao se escribe dentro de una pgina Web de la siguiente manera: a&ntilde;o La tabla siguiente muestra algunos de los caracteres especiales ms utilizados, y su correspondiente cdigo:

    Antes de realizar el primer ejercicio, es importante anotar que el lenguaje HTML soporta el anidamiento de etiquetas. Si fuera necesario por ejemplo, exhibir en una pgina la frase "MDULO DE HTML" subrayada, en negrilla, con fuente "VERDANA" y de color azul, bastar con escribir la siguiente lnea dentro del

    cuerpo del archivo: <FONT SIZE="6" COLOR="#0000ff" FACE="Verdana"> <U><B>MDULO DE HTML</B></U></FONT> Lo anterior significa que un trozo de texto puede estar afectado simultneamente por varias etiquetas. Lo nico que se debe tener en cuenta a la hora de anidarlas es que la primera etiqueta en ser abierta debe ser la ltima en

    Etiqueta
    Hasta ahora se ha trabajado con pginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma or defecto. El uso adecuado de la etiqueta <BODY>, que por supuesto tiene atributos, permite entre otras cosas cambiar o establecer: el color del texto, un color o una imagen de fondo y los colores de los enlaces que tendr la pgina. La siguiente es la sintaxis completa de esta etiqueta: <BODY BACKGROUND = "nombre_imagen" BGCOLOR = "color_fondo" TEXT = "color_texto" LINK = "color_enlace" VLINK = "color_enlace_V" ALINK = " color_enlace_A"> </BODY> nombre_imagen se refiere al nombre, o mejor la ubicacin del archivo de una imagen que se quiere aparezca como fondo de la pgina, color_fondo, color_texto, color_enlace, color_enlace_V y color_enlace_A corresponden a los cdigos o los nombres de los colores para el fondo de la pgina, el texto de la informacin, el texto de los enlaces no visitados, el texto de los enlaces visitados y el texto de los enlaces activos respectivamente. El manejo de estos tres ltimos se ver ms adelante en el captulo correspondiente a enlaces. El siguiente ejemplo desplegar una pgina con fondo negro (black) y texto de color lima (#00ff00): <HTML> <HEAD> <TITLE>Cuerpo</TITLE> </HEAD> <BODY BGCOLOR=black TEXT=#00ff00> <H3>ESTA PGINA TENDR FONDO NEGRO Y TEXTO LIMA</H3> </BODY> </HTML>

    UBICACIN DE ARCHIVOS Antes de comenzar a trabajar con imgenes, es indispensable entender el concepto de la ubicacin relativa de archivos. Existen en HTML algunos atributos que indican la ruta o el camino donde se encuentran ubicados ciertos elementos y no un valor simple como un nmero o el cdigo de un color. Tal es el caso del atributo background cuyo valor hace referencia a la ubicacin y el nombre de una imagen que se quiere aparezca como fondo en la pgina (BACKGROUND=ruta). Cualquiera que sea el sistema operativo que se utilice, los programas, aplicaciones, archivos y documentos se guardan fsicamente en una unidad de almacenamiento, dentro de una jerarqua de directorios y subdirectorios conocida como Sistema de Archivos. Un directorio puede contener archivos y otros directorios denominados subdirectorios. Dependiendo de la ubicacin de las pginas y las imgenes u otros objetos dentro del sistema de archivos, el valor o ruta de los atributos, cambia. Existen tres posibilidades (ver grfica de Ejemplo de sistema de Archivos): 1. la pgina y la imagen se encuentra dentro del mismo subdirectorio (ejemplos: Pgina1 e Imagen1, Pgina 2 e Imagen 2 y Pgina 3 e Imagen 3). 2. la imagen se encuentra en un subdirectorio ubicado en el mismo nivel o por debajo del subdirectorio que contiene la pgina (ejemplos: Pgina 3 e Imagen 1, Pgina 3 e Imagen 2 y Pgina 1 e Imagen 2). 3. la imagen se encuentra en un subdirectorio arriba del que contiene la pgina (ejemplos: Pgina 2 e Imagen 1, Pgina 2 e Imagen3 y Pgina 1 e Imagen 3).

    El ejemplo ms sencillo se tiene cuando, tanto la imagen de fondo como la pgina residen en el mismo directorio o subdirectorio. En este caso la ruta se reduce al nombre de la imagen: <BODY BACKGROUND=nombre_imagen> Si la imagen de fondo reside en un subdirectorio al mismo nivel o por debajo del directorio que contiene la pgina, la ruta adems del nombre de la imagen debe estar compuesta por el o los nombres de los subdirectorios que la contienen, separados por un slash (/). Si por ejemplo, se desea que Imagen 2 aparezca como fondo de la Pgina 3, la ruta ser: D2/D3/Imagen 2, con lo que la etiqueta BODY ser similar a: <BODY BACKGROUND=D2/D3/Imagen 2> La ltima posibilidad que existe es que la imagen se encuentre ubicada uno o mas niveles por encima del directorio que contiene la pgina. En este caso la ruta estar compuesta por el nombre de la imagen, precedida por un conjunto de dos puntos y un slash (../) por cada nivel que sea necesario subir para alcanzar el directorio donde est ubicada la imagen. Con los siguientes ejemplos se ilustra esta situacin: La Imagen 1, ubicada un nivel por encima debe aparecer como fondo de la Pagina 2 . La ruta ser: ../Imagen 1 y la etiqueta BODY debe ser: <BODY BACKGROUND=../Imagen 1>

    Ahora se quiere que Imagen 3 sea el fondo de la Pagina 2: <BODY BACKGROUND=../../Imagen 3> Una prctica comn y muy til, consiste en crear un subdirectorio ubicado al mismo nivel de las pginas, que contendr todas las imgenes. De esta manera, la siguiente pgina tendr como fondo una imagen llamada logoPostgres.gif, que se encuentra ubicada en el subdirectorio Imagenes: <HTML> <HEAD> <TITLE>Cuerpo1</TITLE> </HEAD> <BODY BACKGROUND=Imagenes/logoPostgres.gif> </BODY> </HTML>

    Es importante mencionar que HTML soporta slo ciertos formatos de imagen. Bsicamente se pueden mostrar imgenes creadas en formato GIF y JPG. Las ltimas versiones de navegadores soportan el formato PNG de MACROMEDIA

    Listas
    En ocasiones es necesario presentar informacin de manera ordenada mediante listas con vietas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con vietas o listas de definicin, cada una de ellas con sus variaciones. LISTA ORDENADA <OL> Considere el caso en el que debe presentar la lista numerada de algunas de las dependencias de la empresa donde trabaja, comenzando con un nmero en particular: 4. Direccin de Informtica 5. Planeacin 6. Vicepresidencia Financiera 7. Comunicaciones El listado anterior se consigue en HTML mediante el uso de las etiquetas <OL> (Ordered List) y <LI> (List Item): <OL TYPE ="1" START ="4"> <LI>Direccin de Informtica <LI>Planeacin <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL>

    En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista ser numrica (el nmero entre comillas puede ser cualquier entero y el resultado ser el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado est precedido por el nmero 4, el segundo por el nmero 5 y as sucesivamente. S no se incluye ninguno de los dos atributos anteriores, el explorador desplegar la misma lista pero comenzando el listado en 1. S se quiere presentar el mismo listado pero de la siguiente manera: A. Direccin de Informtica B. Planeacin C. Vicepresidencia Financiera D. Comunicaciones Bastar con cambiar el 1 del atributo TYPE por una A y el 4 del atributo START por un 1, o

    simplemente omitir ste ltimo: <OL TYPE = "A" START ="1"> <LI>Direccin de Informtica <LI>Planeacin <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL>

    LISTA CON VIETAS <UL> S en lugar de una letra o un nmero precediendo los tems del listado, lo que se quiere es que aparezca una vieta, se debe entonces utilizar la etiqueta <UL> (Unorderd List) de la siguiente manera: <UL TYPE = "circle"> <LI> tem 1 <LI> tem 2 <LI> tem 3 <LI> tem 4 </UL> lo que producir una lista similar a: o tem 1 o tem 2 o tem 3 o tem 4 La etiqueta <UL> nicamente tiene el atributo TYPE, que se refiere al tipo de vieta que presentar. Pruebe omitiendo este atributo o cambiando circle por disc o por square. LISTA DE DEFINICIN <DL> Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definicin. Se utiliza tpicamente en la construccin de glosarios. Considere por ejemplo, la siguiente lista de trminos que definen las funciones de algunas dependencias de la empresa: PLANEACIN: Encargada de ejecutar y revisar los planes de inversin.

    INFORMTICA: Encargada de disear, implementar y ejecutar los planes de desarrollo informtico en la empresa. RECURSOS HUMANOS: Encargada de los asuntos relacionados con el recurso humano. El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los trminos a definir se precede con la etiqueta <DT>, mientras que a la definicin en s, se le antepone la etiqueta <DD>: <DL> <DT>PLANEACIN: <DD>Encargada de ejecutar y revisar los planes de inversin. <DT>INFORMTICA: <DD>Encargada de disear, implementar y ejecutar los planes de desarrollo informtico en la empresa. <DT>RECURSOS HUMANOS. <DD>Encargada de los asuntos relacionados con el recurso humano. </DL>

    Tablas
    Una tabla est compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar informacin de manera organizada. En una celda se puede incluir indistintamente texto, imgenes o cualquier otro elemento soportado por HTML. Para crear tablas en HTML, se utiliza la etiqueta <TABLE> cuyos atributos principales son: WIDTH ="95%" Ancho de la tabla con respecto al tamao de la pgina. En este caso la tabla ocupar el 95%; o WIDTH ="600", con lo que la tabla tendr un ancho de 600 pxeles. BORDER ="1" Ancho en puntos de los bordes exteriores de la tabla. CELLSPACING ="0" Ancho en puntos entre los bordes de las celdas CELLPADDING ="4" Espacio en puntos, que separa el borde de la celda de su contenido. BGCOLOR ="#0000ff" Color del fondo de tabla. En el ejemplo azul.

    En la etiqueta <TABLE> se definen las caractersticas principales de la tabla, pero no se dice de cuntas filas y columnas estar compuesta ni cul ser su contenido. En realidad existen tres etiquetas adicionales, que colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el nmero de filas y columnas, adems de otras caractersticas: <TR> Se utiliza para definir una nueva fila. <TD> Permite agregar una celda o columna dentro de una fila <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella ser escrito en negrilla. Lo anterior significa que una tabla en HTML tendr tantas filas como etiquetas <TR> contenga y una fila estar compuesta por un nmero de celdas igual al de etiquetas <TD> o <TH> que la misma tenga. Las siguientes lneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas:

    Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=color), la alineacin del texto o de la imagen dentro de la celda (ALIGN=alineacin), y que funcionan de manera idntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el nmero de columnas o de filas que ocupar una celda en particular. Suponga que se debe crear una tabla similar a la siguiente: Observe que la tabla est compuesta por dos filas y dos columnas, y que la celda del ttulo ocupa dos columnas. Cuando este es el caso, es decir que una celda est distribuida en dos o mas columnas o filas, se utiliza para su definicin el atributo COLSPAN=X o ROWSPAN=X respectivamente. X obviamente corresponde al nmero de columnas o filas sobre las que se distribuir la celda. Para crear la tabla que se muestra arriba, se debe escribir:

    Se debe escribir:

    Imagenes
    Las pginas Web adems de mostrar texto, son capaces de desplegar imgenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Una imagen con extensin BMP, CDR, PCX o cualquier otro formato diferente no ser exhibida en el explorador Una imagen puede ubicarse en cualquier parte de la pgina, incluso puede ocupar el lugar de un carcter. Para insertar imgenes lo nico que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su atributo SRC ="ruta" permiten mostrar una imagen: <IMG SRC ="logo.gif">

    El ejemplo anterior mostrar la imagen logo.gif ubicada en el mismo directorio donde reside la pgina web. Si por el contrario la imagen se encuentra en otro directorio o subdirectorio, se debe incluir su ruta en el atributo SRC. La ruta tiene las mismas caractersticas ya definidas en el aparte dedicado a Ubicacin de Archivos de ste mdulo. Por ejemplo, SRC=Imagenes/logo.gif mostrar la imagen logo.gif, ubicada bajo el subdirectorio Imagenes. La etiqueta <IMG> cuenta adems de SRC con otros atributos que controlan la manera como se desplegarn las imgenes: ALT ="Texto alternativo" Permite definir un texto que aparecer en caso de que la imagen por alguna razn no pueda ser mostrada, o cuando se desplaza el puntero del ratn sobre la imagen ya desplegada. HEIGHT = XX y WIDTH = XX Medida en pxeles del alto y ancho de la imagen. Aunque estos atributos son opcionales, es conveniente incluirlos para que de esta manera el navegador conozca el tamao de la imagen antes de descargarla. Con ellos podemos controlar adems el tamao original de una imagen. Si por ejemplo, se quiere que logo.gif, que originalmente tiene 120 x 120 pxeles, sea mostrada a la mitad de su tamao en el navegador, basta con escribir una de las tres lneas siguientes, siendo ms recomendable la tercera: <IMG SRC ="Imagenes/logo.gif" HEIGHT = 60 > <IMG SRC ="Imagenes/logo.gif" WIDTH = 60 > <IMG SRC ="Imagenes/logo.gif" WIDTH = 60 HEIGHT = 60 > S se desea cambiar el tamao de la imagen de manera proporcional, solo es necesario incluir uno de los dos atributos. ALIGN = Alineacin de texto Permite especificar la alineacin respecto de la imagen de un texto que se escriba inmediatamente despus de la etiqueta <IMG>. El texto en mencin, puede alinearse arriba, utilizando TOP como valor; en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el valor para ALIGN es BOTTOM. Adems, el atributo ALIGN puede recibir el valor LEFT, con lo que la imagen se colocar a la izquierda del texto, o RIGHT, caso en el que la imagen aparecer a la derecha. BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen. Si se omite este atributo, simplemente no se dibujar ningn borde. Para comprender mejor el comportamiento de las imgenes, copie en un directorio denominado Imgenes el logotipo que se encuentra al final de la pgina y luego escriba en un archivo las lneas que a continuacin se muestran: <IMG SRC ="Imagenes/logo.png" ALT ="Logo tamao 180 x 180 pxeles" WIDTH = 180 ALIGN = top BORDER=5>Texto alineado arriba de la imagen <P>

    <IMG SRC ="Imagenes/logo.png" ALT =" Logo tamao original" ALIGN = middle BORDER=3>Texto alineado en la mitad de la imagen <P> <IMG SRC ="Imagenes/logo.png" ALT =" Logo tamao 60 x 60 pxeles" HEIGHT = 80 ALIGN= Bottom>Texto alineado abajo de la imagen <P>

    Vnculos
    Como ya se mencion, una de las etiquetas ms importantes de HTML es la que permite, a travs de vnculos o enlaces, navegar por las diferentes pginas y sitios en la red. Se pueden colocar enlaces que nos lleven a un lugar especfico en la misma pgina, que abran otra pgina o un sitio nuevo e inclusive utilizar un vnculo para enviar un correo electrnico a una direccin dada o permitir que el usuario descargue y ejecute, o guarde archivos ubicados en una localizacin remota. Un vnculo puede ser colocado sobre una zona de texto o sobre una imagen, lo que lo convierte en un elemento sensible. Es decir, el elemento responder a acciones tales como hacer clic, doble clic o desplazar el puntero del ratn sobre l. Si el enlace se coloca sobre una franja de texto, sta aparecer subrayada y con diferente color; si es una imagen la que lo soporta, HTML entonces le colocar un borde del color definido para el atributo LINK de la etiqueta BODY. VNCULOS DENTRO DE LA PGINA Para facilitar la navegacin dentro de una pgina cuando su contenido es demasiado largo y al desplegarla ocupa ms de una pantalla, se pueden colocar enlaces que lleven al usuario a sitios especficos o predeterminados de la misma. Para esto, se deben utilizar dos atributos de la etiqueta <A>: <A NAME = "nombre">Texto de marca</A> sirve para marcar la zona de nuestra pgina a la cual saltar el explorador cuando demos clic sobre el enlace definido por la etiqueta <A HREF = "#nombre">Texto de enlace</A> que es la que en realidad contiene el enlace. ENLACES A OTRA PGINA Para ilustrar el uso de enlaces a otras pginas, se utilizarn Menu.html (creada en el ejercicio 2), Automvil.html y dos pginas nuevas: Computador.html y Telefono.html, que se crearn con los siguientes textos:

    Computador.txt y Telefono.txt. Las pginas as creadas deben guardarse dentro del mismo directorio. La idea es que al abrir Menu.html en el explorador, se pueda desde all acceder a cualquiera de las otras tres pginas (Automvil, Computador y Telfono). Para esto se debe editar la pgina Menu.html y agregar los links faltantes: <LI><A HREF="Automovil.html">Automvil</A> <LI><A HREF="Computador.html">Computador</A> <LI><A HREF="Telefono.html">Telfono</A> Es importante anotar, que en lo que se refiere a nombres de archivos y pginas, HTML es sensible a las maysculas. Es decir, Telefono.html es diferente a telefono.html. Lo anterior no se aplica a las etiquetas como ya se explic. ENLACES A PGINAS REMOTAS La verdadera potencia del lenguaje HTML consiste en que permite enlazar y acceder pginas Web localizadas en cualquier servidor y punto geogrfico del mundo, para lo cual lo nico que se necesita conocer es su direccin, que constituye el valor (nombre) del atributo HREF. Por ejemplo, la etiqueta para colocar un enlace a mi servidor, cuya direccin es www.senavirtual.edu.co, es: <A HREF ="http://www.senavirtual.edu.co"> IR A MASTERLINUX </A> Los caracteres http se refieren al tipo de servicio o protocolo que presta el servidor, en este caso protocolo de transferencia de hipertexto, en ingls HyperText Transfer Protocol. Aunque existen otros servicios como ftp, telnet, y news, no es del alcance de ste modulo profundizar en ellos. El procedimiento para utilizar una imagen como elemento de enlace es similar al anteriormente explicado. En el siguiente ejemplo, se utilizar la imagen logo.png como elemento de enlace. <A HREF ="http://www.senavirtual.edu.co"> <IMG SRC ="logo.png" HEIGHT=100 ALIGN ="left"> </A> ENLACE AL SERVICIO MAIL El protocolo o servicio mailto permite definir otro tipo de enlace, que activa la herramienta de correo electrnico para enviar un mensaje a la direccin definida en el atributo HREF. Este enlace, al igual que los anteriores, puede ser colocado indistintamente sobre imgenes o texto. <A HREF=" mailto:elcorreo@senavirtual.edu.co"> Escribanos </A> si desea recibir ms informacin. Al abrir esta pgina en el explorador, la palabra Escribanos aparecer subrayada, y al dar clic sobre ella se desplegar la herramienta de Mail, lista para enviar un mensaje a mi cuenta de correo.

    Marcos o frames
    Los marcos o FRAMES, son etiquetas o procedimientos especiales de HTML que permiten dividir, lo que aparentemente es una sola pgina, en diferentes zonas o ventanas, independientes unas de las otras. En cada ventana se puede mostrar una pgina diferente. La divisin puede hacerse verticalmente por columnas, de manera horizontal por filas, o una combinacin de ambas. La pgina contenida en cada marco tendr definidas sus propiedades de manera independiente y desde un marco se puede, a travs de enlaces, hacer que se despliegue una pgina cualquiera en otro marco, lo que los hace muy tiles para varios propsitos. Por ejemplo, en una misma ventana se puede definir un marco que contenga el logotipo o banner de la compaa, un segundo marco para desplegar el men de navegacin, y por ltimo un marco que muestre la pgina o documento actual.

    La construccin de pginas que contienen marcos se hace de manera similar a la de cualquier documento HTML. La nica diferencia radica en el hecho de que la etiqueta <BODY> es reemplazada por <FRAMESET>, que es la etiqueta que define la estructura de los frames o marcos en los que se dividir la ventana del navegador. Para explicar el uso de <FRAMESET>, y el de otras etiquetas necesarias para la implementacin de frames, se utilizarn cuatro pginas ya creadas:

    Computador.html, Automovil.html, Telefono.html y Menu.html, y una nueva que servir como pgina de definicin de los marcos, la cual debe guardarse con el nombre de Marcos.html, dentro del mismo directorio de las otras pginas mencionadas. Se crear como ejercicio una pgina dividida verticalmente en dos marcos: en el de la izquierda, ocupando el 20% de la pantalla, aparecer el contenido de la pgina MenuFrames.html; mientras que en el marco de la derecha que ocupar el 80% restante, se desplegar inicialmente la pgina Computador.html o cualquiera de las otras dos, dependiendo de el enlace que se active en el frame de la izquierda. Para este propsito se deben escribir las siguientes lneas: <HTML> <FRAMESET COLS="20%, 80%"> <FRAME SRC = "MenuFrames.html" NAME ="izquierda"> <FRAME SRC="Computador.html" NAME ="derecha"> </FRAMESET> <NOFRAMES> Lo sentimos, su navegador no soporta FRAMES </NOFRAMES> </HTML> La etiqueta FRAMESET sirve para dos propsitos principales: definir la orientacin de los marcos que puede ser horizontal (ROWS) o vertical (COLS); y el nmero y tamao de cada marco. En el ejemplo, el atributo COLS ="20%, 80%", divide la pantalla en dos marcos verticales, ocupando el primero de ellos a la izquierda, el 20%, y el segundo el 80% del espacio. Para conformar n marcos dentro de una pantalla, el atributo COLS o ROWS debe contener n valores separados por comas. Estos valores pueden ser porcentajes o valores absolutos; en cuyo caso el marco as definido, tendr un espacio igual al del nmero de pxeles indicado. Si se quiere por ejemplo, dividir la pantalla de manera horizontal en cuatro frames, y se necesita que el primero de ellos tenga una altura fija de 40 pxeles, el segundo ocupe el 50% del espacio restante, y los otros dos se dividan el espacio de manera proporcional: <FRAMESET ROWS="40, 50%, 25%, 25%"> Otra forma de definir el tamao de los frames consiste en utilizar el carcter *. En el siguiente ejemplo, una pantalla de 800 pxeles ser dividida en tres marcos verticales: el primero de 400 pxeles (50% de 800), el segundo de 260 (valor absoluto) y el tercero 140 pxeles, correspondiente al espacio restante. <FRAMESET COLS="50%, 260, *"> Las etiquetas <FRAME> definen entre otras cosas el origen de la pgina que contendr y el nombre del marco. En el ejercicio propuesto, se observan dos de estas etiquetas, en la primera

    se define el marco denominado izquierda donde se desplegar la pgina MenuFrames.html y en el segundo marco de nombre derecha se mostrar la pgina Computador.html. Para que el ejercicio sea completamente funcional, es necesario editar el archivo Menu.html como se indica a continuacin, guardndolo luego como MenuFrames.html: <A HREF = "Computador.html" TARGET = "derecha"> Computador</A> <A REF ="Automovil.html" TARGET ="derecha"> Automovil</A> <A REF ="Telefono.html" TARGET ="derecha"> Telfono</A> El atributo TARGET de la etiqueta <A>, cuyo valor en el ejemplo es derecha, indica en cual de los marcos definidos se debe desplegar la pgina correspondiente a cada uno de los enlaces. Si se omite este atributo, el documento ser mostrado dentro del mismo marco. Otro valor posible para TARGET es blank, con lo que se abrir una nueva ventana en la cual se mostrar la pgina correspondiente al enlace invocado. La etiqueta <FRAME> tiene otros atributos que permiten controlar el comportamiento de cada marco: <FRAME SRC="xx" NAME="xx" MARGINWIDTH="x" MARGINHEIGHT="y" SCROLLING="z" FRAMEBORDER="w" NORESIZE> Donde: MARGINWIDTH="x" define el valor en pxeles del margen izquierdo y derecho entre el contenido y los bordes del frame. El valor de x debe ser mayor que 1. Si este atributo es omitido, el browser se auto ajustar para hacer el mejor despliegue posible del contenido del marco. MARGINHEIGHT="y" trabaja de manera similar a MARGINWIDTH, pero controla los mrgenes superior e inferior del frame. El atributo SCROLLING="z" soporta tres valores posibles yes, no y auto. Se utiliza para controlar la aparicin o no de las barras de desplazamiento (scrollbars), cuando el contenido del frame excede el rea del mismo. FRAMEBORDER="w" se utiliza para controlar que el browser muestre o no los bordes del marco. En Internet Explorer w debe ser un valor numrico (cero significa sin bordes), mientras que en Netscape Navigator w toma cualquiera de los valores yes o no. Por defecto, el tamao de todos los frames especificados en una pgina puede ser cambiado por el usuario arrastrando los bordes del marco. Si se desea mantener fijo el tamao predefinido de un marco, basta con agregar el atributo NORESIZE dentro de la etiqueta de definicin. Aunque no es muy comn en la actualidad, si el navegador desde donde se accede la pgina no soporta el procedimiento FRAMES, se desplegar en lugar de los marcos definidos, la

    informacin contenida dentro de las etiquetas <NOFRAMES> y </NOFRAMES>. Dentro de un documento que contiene frames pueden existir varias etiquetas <FRAMESET>, lo que se conoce como anidamiento. Con este procedimiento, un marco puede ser subdividido en otros marcos, para lo cual la etiqueta <FRAME> que define las caractersticas del marco a subdividir se reemplaza por una nueva etiqueta de definicin de frames. En el ejemplo siguiente, la pantalla es dividida inicialmente en dos zonas horizontales, mediante la etiqueta <FRAMESET rows="30%, *">; la etiqueta <FRAMESET cols="25%, *">, divide al segundo marco horizontal en dos nuevos marcos verticales. <HTML> <HEAD> <TITLE>Ejemplo de Frames</TITLE> </HEAD> <FRAMESET ROWS="30%, *"> <FRAME SRC = "banner.htm"> <FRAMESET COLS="25%, *"> <FRAME SRC="menu.html" NAME ="menu"> <FRAME SRC="princ.html" NAME ="princ"> </FRAMESET> </FRAMESET> </HTML>

    Formularios
    Los formularios son por excelencia los elementos utilizados para recolectar informacin de los usuarios que luego es enviada al servidor para ser procesada. Estn constituidos por un conjunto de elementos denominados controles, cuyo contenido puede ser editado o activado por el cliente. Un control es bsicamente un elemento de HTML que pertenece a un tipo y que tiene asociado un nombre y un valor. El envo se hace mediante un controlador de formulario (generalmente un botn). Cuando el usuario, despus de completar un formulario lo enva, en realidad est transmitiendo un conjunto de parejas: nombre del control y valor. Un formulario puede contener adems de controles, imgenes, texto en todos los estilos, tablas, etc., pero nunca puede contener a otro formulario. Para declarar un formulario se utiliza la etiqueta FORM que consta bsicamente de dos atributos: <FORM ACTION ="programa" METHOD ="mtodo"> </FORM> En programa se especifica un servicio o un programa escrito en cualquiera de los lenguajes compatibles (CGI, PERL, PHP, VBSCRIPT, etc.), que se encargar de procesar las variables contenidas en cada uno de los controles incluidos dentro del formulario. Por no ser la programacin del alcance de este mdulo, nicamente se utilizar aqu la accin ACTION

    ="mailto: direccin de correo", cuya accin ser enviar a la direccin de correo especificada los datos contenidos en los controles. El atributo METHOD soporta dos valores: el mtodo POST y el mtodo GET. El primero de ellos se utiliza cuando se requiere procesamiento externo de los datos del formulario o la introduccin de modificaciones al destino, por ejemplo, escribir en una base de datos. El mtodo GET es ideal para el envo de formularios que no producen ninguna modificacin en el destino, ejemplo una consulta sobre una base de datos. Los controles disponibles en HTML, se pueden clasificar segn su utilidad en cuatro tipos: controles para texto, opciones, mens y botones. CONTROLES PARA TEXTO Texto de una sola lnea Para especificar dentro de un formulario un control de texto de una sola lnea que contendr cadenas de texto, se utiliza la etiqueta: <INPUT TYPE ="text" NAME ="Nombre" SIZE ="60" MAXLENGTH ="80" VALUE = "Texto que aparecer cuando se abra la pgina">

    Con el atributo NAME ="Nombre" se bautiza el campo para distinguirlo de otros campos del mismo tipo. El texto que introduzca el usuario, quedar asociado a la variable Nombre. El atributo SIZE ="60" especifica la longitud del campo en caracteres que se visualizar en la pantalla (para el ejemplo 60), mientras que MAXLENGTH ="80" indica el nmero mximo de caracteres (en este caso 80), que el usuario podr introducir. VALUE = "Texto que aparecer cuando se abra la pgina" define el valor inicial del control, que aparecer cuando la pgina que contiene el formulario sea abierta. Este atributo puede dejarse en blanco, especificando como valor " ", o simplemente omitiendo el atributo. Otro control para texto de una sola lnea es el conocido como control de tipo password. Funciona y se define de manera similar al anterior, con la diferencia de que los caracteres introducidos dentro del control no sern visibles para el usuario, en su lugar se mostrar un conjunto de asteriscos. rea de texto Este control se utiliza cuando se sabe de antemano que los datos ingresados por el usuario ocuparn ms de una lnea. Para construir uno de estos campos se

    debe especificar adems del nombre de la variable a la cual se asociar el texto, el nmero de filas y columnas que se visualizarn en la pantalla. La sintaxis de esta etiqueta es como sigue: <TEXTAREA NAME ="nombre" ROWS = "2" COLS ="60"> Texto </TEXTAREA>

    La etiqueta anterior mostrar sobre la pgina un campo de dos lneas de 60 caracteres de ancho. Lo anterior no significa que el usuario no pueda introducir texto que sobrepase una de estas dos dimensiones. Cuando esto ocurre, simplemente se activar el scrollbar vertical u horizontal segn sea el caso. La variable nombre contendr el texto que el usuario introduzca. Observe que esta etiqueta debe cerrarse con </TEXTAREA>, y que los caracteres contenidos dentro de las dos etiquetas, en el ejemplo Texto, constituyen el valor inicial. CONTROLES DE OPCIN Radio Botones Este tipo de control se utiliza cuando se quiere que el usuario escoja una y solo una de entre varias opciones disponibles. Por ejemplo, si se est realizando una encuesta y es necesario conocer el estado civil del encuestado, se puede colocar dentro del formulario algo similar a:

    para lograrlo debemos escribir las siguientes lneas: <PRE> <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Soltero"> Soltero(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Casado"> Casado(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="U.Libre"

    CHECKED> U. Libre <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Viudo"> Viudo(a) <INPUT TYPE ="radio" NAME ="EstadoCivil" VALUE ="Divorciado"> Divorciado(a) </PRE> En el ejemplo, la variable EstadoCivil tendr como valor U.Libre que es la que se encuentra seleccionada. Si se quiere que una de las opciones aparezca seleccionada por defecto, se debe agregar a la etiqueta que define tal opcin el atributo CHECKED. Casilla de verificacin Al contrario de los radio botones, la casilla de verificacin permite seleccionar ms de una opcin. La sintaxis de su etiqueta es como sigue: <INPUT TYPE ="checkbox" NAME ="nombre" VALUE ="valor" CHECKED> Si el usuario selecciona esta casilla, la variable nombre contendr el texto especificado en el atributo valor. MEN DESPLEGABLE Esta es otra forma de permitir al usuario escoger una nica opcin dentro de varias disponibles, ocupando dentro de la pgina un rea menor a la que se necesitara si se utilizaran radio botones. La encuesta del estado civil desplegada lucira como se muestra ms adelante y se construye mediante las siguientes lneas: <SELECT NAME="EstadoCivil"> <OPTION>Soltero(a) <OPTION>Casado(a) <OPTION SELECTED>U. Libre <OPTION>Viudo(a) <OPTION>Divorciado(a) </SELECT>

    Una variante a este tipo de control se consigue agregando el atributo MULTIPLE a la etiqueta SELECT, lo que permite seleccionar ms de un valor entre las opciones posibles: <SELECT NAME="EstadoCivil" MULTIPLE> BOTNES Aunque se pueden implementar otros usos, los botones son controladores que se utilizan bsicamente para: enviar (SUBMIT) el formulario o para reinicializar o borrar (RESET) los campos del mismo. El botn de tipo SUBMIT, ejecutar el programa especificado en el atributo ACTION ="programa" de la etiqueta FORM, cuando el usuario de clic sobre l. La forma de construir botones SUBMIT y RESET es como sigue:

    Etiqueta Botn <INPUT TYPE ="submit" VALUE ="Enviar"> <INPUT TYPE ="reset" VALUE ="Borrar">

    En ambos casos, el valor contenido en el atributo VALUE, corresponde al texto que aparecer sobre el botn.

    Você também pode gostar