Programación HTML CONALEP Gustavo Baz · 2019-01-22 · Programación HTML CONALEP Gustavo Baz...

42
Programación HTML CONALEP Gustavo Baz Página VII Etiquetas del lenguaje HTML ........................................................................................................................ 131 Atributos de las Etiquetas .............................................................................................................................. 131 Etiquetas correctas......................................................................................................................................... 131 Formato de las URL, Definición. ................................................................................................................... 132 Uso y Formato............................................................................................................................................... 132 Estructura Básica de un documento HTML .................................................................................................... 133 Comentarios .................................................................................................................................................. 133 Cabecera de un documento HTML, Introducción ........................................................................................... 134 <TITLE>: Título del documento .................................................................................................................... 134 <BASE>: URL base del documento. .............................................................................................................. 134 <ISINDEX>: El documento es un índice. ....................................................................................................... 134 <META>: Indica refresco del documento. ..................................................................................................... 134 Cuerpo de un documento HTML, Introducción .............................................................................................. 134 Definición de colores ..................................................................................................................................... 135 Atributos de <BODY>................................................................................................................................... 135 Espaciados y saltos de línea, El espaciado en HTML ...................................................................................... 135 <P> Cambio de párrafo. ................................................................................................................................. 136 <BR> Salto de línea : .................................................................................................................................... 136 <HR> Regla Horizontal. ................................................................................................................................ 136 <PRE> Texto preformateado. ........................................................................................................................ 137 <CENTER> Centrado de texto e imágenes..................................................................................................... 137 &nbsp; Espacios en blanco. ........................................................................................................................... 137 Caracteres latinos y especiales, como representarlos. ...................................................................................... 137 Elementos del lenguaje HTML ...................................................................................................................... 137 Caracteres acentuados.................................................................................................................................... 138 Otros Símbolos .............................................................................................................................................. 138 <H1> - <H6> Cabeceras de títulos ................................................................................................................. 138 <Hn ALIGN=CENTER>: Alineación de la cabecera. ..................................................................................... 139 Tamaño y Color de las fuentes de caracteres, Utilidad .................................................................................... 139 <FONT SIZE=n> : Tamaño de la fuente. ....................................................................................................... 139 <BASEFONT SIZE=n> : Fuente por defecto ................................................................................................. 139 <FONT COLOR=texto color ó rrvvaa> : Color de la fuente ........................................................................... 140 Estilos físicos y lógicos ................................................................................................................................. 140 Estilos Físicos. .............................................................................................................................................. 140 Estilos lógicos ............................................................................................................................................... 141 Contesta las siguientes preguntas ................................................................................................................... 141 Definición de Listas en HTML ...................................................................................................................... 142 <UL> Listas no ordenadas. ............................................................................................................................ 142 <OL> Listas ordenadas.................................................................................................................................. 143 <DL> Listas de definiciones .......................................................................................................................... 143 Hiperenlaces.................................................................................................................................................. 144 <A HREF=...> Hiperenlace............................................................................................................................ 144 URL absolutas y relativas. ............................................................................................................................. 145 <A NAME=...> Elemento Ancla .................................................................................................................... 146 Imágenes en los documentos HTML. ............................................................................................................. 146 <IMG SRC=...> Inclusión de Imágenes. ......................................................................................................... 146 <IMG ... ALT=...> Texto alternativo. ............................................................................................................. 147 <IMG .. ALIGN=...> Alineación de la imagen. .............................................................................................. 147 <IMG .. BODER=...> Borde de la imagen. ..................................................................................................... 148 <IMG .. HEIGHT=... WIDTH=...> Tamaño de la imagen. .............................................................................. 148 <IMG .. HSPACE=... VSPACE=...> Espaciado de separación de la imagen. ................................................... 149 Imágenes Sensibles........................................................................................................................................ 149 ISMAP como referenciar la imagen sensible .................................................................................................. 150 Imágenes sensibles definidas desde el cliente ................................................................................................. 150 Creación de una Imagen sensible. .................................................................................................................. 150

Transcript of Programación HTML CONALEP Gustavo Baz · 2019-01-22 · Programación HTML CONALEP Gustavo Baz...

Programacioacuten HTML CONALEP Gustavo Baz

Paacutegina VII

Etiquetas del lenguaje HTML 131

Atributos de las Etiquetas 131

Etiquetas correctas 131

Formato de las URL Definicioacuten 132

Uso y Formato 132

Estructura Baacutesica de un documento HTML 133

Comentarios 133

Cabecera de un documento HTML Introduccioacuten 134

ltTITLEgt Tiacutetulo del documento 134

ltBASEgt URL base del documento 134

ltISINDEXgt El documento es un iacutendice 134

ltMETAgt Indica refresco del documento 134

Cuerpo de un documento HTML Introduccioacuten 134

Definicioacuten de colores 135

Atributos de ltBODYgt 135

Espaciados y saltos de liacutenea El espaciado en HTML 135

ltPgt Cambio de paacuterrafo 136

ltBRgt Salto de liacutenea 136

ltHRgt Regla Horizontal 136

ltPREgt Texto preformateado 137

ltCENTERgt Centrado de texto e imaacutegenes 137

ampnbsp Espacios en blanco 137

Caracteres latinos y especiales como representarlos 137

Elementos del lenguaje HTML 137

Caracteres acentuados 138

Otros Siacutembolos 138

ltH1gt - ltH6gt Cabeceras de tiacutetulos 138

ltHn ALIGN=CENTERgt Alineacioacuten de la cabecera 139

Tamantildeo y Color de las fuentes de caracteres Utilidad 139

ltFONT SIZE=ngt Tamantildeo de la fuente 139

ltBASEFONT SIZE=ngt Fuente por defecto 139

ltFONT COLOR=texto color oacute rrvvaagt Color de la fuente 140

Estilos fiacutesicos y loacutegicos 140

Estilos Fiacutesicos 140

Estilos loacutegicos 141

Contesta las siguientes preguntas 141

Definicioacuten de Listas en HTML 142

ltULgt Listas no ordenadas 142

ltOLgt Listas ordenadas 143

ltDLgt Listas de definiciones 143

Hiperenlaces 144

ltA HREF=gt Hiperenlace 144

URL absolutas y relativas 145

ltA NAME=gt Elemento Ancla 146

Imaacutegenes en los documentos HTML 146

ltIMG SRC=gt Inclusioacuten de Imaacutegenes 146

ltIMG ALT=gt Texto alternativo 147

ltIMG ALIGN=gt Alineacioacuten de la imagen 147

ltIMG BODER=gt Borde de la imagen 148

ltIMG HEIGHT= WIDTH=gt Tamantildeo de la imagen 148

ltIMG HSPACE= VSPACE=gt Espaciado de separacioacuten de la imagen 149

Imaacutegenes Sensibles 149

ISMAP como referenciar la imagen sensible 150

Imaacutegenes sensibles definidas desde el cliente 150

Creacioacuten de una Imagen sensible 150

Programacioacuten HTML Secundaria Segundo Grado

Paacutegina VIII

Insercioacuten de elementos multimedia 152

Sonido 152

Video 154

Plug-ins 155

ltEMBEDgt Insertar Archivos 155

Tablas Introduccioacuten 156

ltTABLEgt Definicioacuten de la Tabla 156

ltCAPTIONgt Titulo de la tabla 156

ltTRgt Fila de la tabla 156

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT VALIGN= TOP oacute MIDDLE oacute BOTTOM gt 157

ltTHgt y ltTDgt Una celda de la tabla 157

Ejemplos de Tablas 157

Ejemplos de colores de fondo de las celdas BGCOLOR 159

FORMULARIOS (FORM) Introduccioacuten 159

ltFORMgt Definicioacuten de formularios 160

ltINPUTgt Entrada baacutesica de datos 160

ltINPUT TYPE=TEXTgt Texto corto 160

ltINPUT TYPE=PASSWORDgt Palabras secretas 161

ltINPUT TYPE=CHECKBOXgt Botones de seleccioacuten 161

ltINPUT TYPE=RADIOgt Seleccioacuten entre muacuteltiples opciones 161

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos 162

ltINPUT TYPE=SUBMITgt Enviar Datos 162

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo graacutefico 162

ltINPUT TYPE=RESETgt Borrar los datos 162

ltTEXTAREAgt Texto en muacuteltiples liacuteneas 162

ltSELECTgt Eleccioacuten entre muacuteltiples opciones 163

(Common Gateway Interface) Definicioacuten 163

Variables de entorno 164

Entrada de datos al cgi-bin 164

Salida de datos del cgi-bin 165

Documentos con Frames Introduccioacuten 165

Definicioacuten 165

ltFRAMESET gt Definicioacuten de las frames 166

ltFRAME gt Definicioacuten de cada una de las frames 167

TARGET Atributo para indicar la frame de destino 167

Contesta las siguientes preguntas 168

Programacioacuten HTML CONALEP Gustavo Baz

Paacutegina 131

Etiquetas del lenguaje HTML El lenguaje HTML es un lenguaje

de marcas estas marcas seraacuten fragmentos de texto destacado de una forma especial que permiten la definicioacuten de las distintas instrucciones de HTML tanto los efectos a aplicar

sobre el texto como las distintas estructuras del lenguaje A estas marcas las denominaremos etiquetas y seraacuten la base principal del lenguaje HTML En documento HTML seraacute un archivo texto con etiquetas que variaraacuten la forma de su presentacioacuten

Una etiqueta seraacute un texto incluido entre los

siacutembolos menor que lt y mayor que gt El texto incluido dentro de los siacutembolos seraacute explicativo de la utilidad de la etiqueta Por ejemplo

ltBgt Letra Negrita del ingleacutes Bold (negrita)

ltTABLEgt Definiraacute una tabla

ltIMGgt Inclusioacuten de una IMaGen

Existe normalmente una etiqueta de inicio y otra de

fin la de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una diagonal El efecto que define la etiqueta tendraacute validez para todo lo que este incluido entre las etiquetas de inicio y fin ya sea texto plano o otras etiquetas HTML

ltETIQUETAgt Elementos Afectados por la Etiqueta ltETIQUETAgt

Por ejemplo con la etiqueta siguiente ltBgtTexto que seraacute en negritaltBgt Obtendremos

Texto que seraacute en negrita

Algunas etiquetas no necesitaraacuten la de fin seraacuten aquellas en las que el final este impliacutecito por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen Definen un efecto que se produciraacute en un punto determinado sin afectar a otros elementos

El uso de mayuacutesculas o minuacutesculas en las

etiquetas es indiferente se interpretaraacuten del mismo modo en ambos casos pero lo normal es expresarlas en mayuacutesculas para que destaquen con maacutes nitidez del texto normal

Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que

llamaremos atributos que permitiraacuten definir diferentes posibilidades de la instruccioacuten HTML Estos atributos se definiraacuten en la etiqueta de inicio y consistiraacuten normalmente en el nombre del atributo y el valor que toma separados por un signo de igual El orden en que se incluyan los atributos es indiferente no afectando al resultado Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido seraacute imprevisible

dependiendo de como lo interprete el navegador Cuando el valor que toma el atributo tiene maacutes de una palabra deberaacute expresarse entre comillas en otro caso no seraacute necesario

Un ejemplo de atributo seraacute ltA HREF=httpwwwucaesgtPagina principal de

la UCAltAgt En este caso la etiqueta A presenta un atributo

HREF cuyo valor es httpwwwucaes Igualmente una etiqueta podriacutea presentar varios

atributos ltHR ALIGN=LEFT NOSHADE SIZE=5

WIDTH=50gt

En este caso la etiqueta HR presenta cuatro atributos El segundo atributo NOSHADE es un caso especial que no presenta valor El orden en que se especifiquen los atributos no afectaraacuten al resultado final

Etiquetas correctas Todo texto que se encuentre entre los caracteres

lt y gt se consideraraacute una etiqueta si la etiqueta no fuera una de las validas del lenguaje HTML no seraacute tenida en cuenta sin causar ninguacuten tipo de error Dejaacutendose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extrantildea Cuando se comete un error sintaacutectico al expresar una etiqueta o un atributo no se produciraacute ninguacuten error simplemente no de obtendraacute el efecto que deseaacutebamos

El lenguaje HTML es un lenguaje que evoluciona

muy raacutepidamente y cada nueva versioacuten de los programas navegadores presenta etiquetas nuevas que causan efectos maacutes espectaculares o atributos nuevos de las etiquetas ya existentes Esto causa que los programas maacutes antiguos no entiendan estas nuevas etiquetas y por tanto las considere erroacuteneas y no realice la accioacuten que deseaacutebamos Daacutendose el caso de atributos que son validos solo para un uacutenico navegador

Cuando creemos coacutedigo HTML hay que hacerlo

lo maacutes estaacutendar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores ya que las personas que se conectan a nuestras paacuteginas no tendraacuten en la mayoriacutea de los casos el mismo que nosotros Tambien es interesante como se veriacutea el documento en los distintos tamantildeos de la ventana del navegador teniendo en cuenta que todos no tienen un monitor con la misma Resulucioacuten

En este manual se han tratado de incluir las

caracteriacutesticas maacutes estaacutendar de HTML y en caso de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 132

tratarse de instrucciones maacutes particulares se indicaraacute convenientemente

Formato de las URL Definicioacuten URL es el acroacutenimo de (Uniform Resource

Locator) localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la www

Con la www se pretende unificar el acceso a

informacioacuten de servicios que antes eran incompatibles entre siacute tratando de conseguir que todos los servicios de internet sean accesibles a traveacutes de la www de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacioacuten en servicios como FTP gopher WAIS etc

Uso y Formato Las URL se utilizaraacuten para definir el documento de

destino de los hiperenlaces para referenciar los graacuteficos y cualquier otro archivo que se desee incluir dentro de un documento HTML Cada elemento de internet tendraacute una URL que lo defina ya se encuentre en un servidor de la www FTP gopher o las News

El formato de una URL seraacute serviciomaquinadominiopuertocaminoarchivo

El servicio seraacute alguno de los de internet estos

pueden ser

http (HyperText Transport Protocol) es el protocolo utilizado para transmitir hipertexto Todas las paacuteginas HTML en servidores www deberaacuten ser referenciadas mediante este servicio Indicaraacute conexioacuten a un servidor de la www

https (HyperText Transport Protocol Secure) es el

protocolo para la conexioacuten a servidores de la www seguros Estos servidores son normalmente de aacutembito comercial y utilizan encriptacioacuten para evitar la intercepcioacuten de los datos enviados usualmente numeros de tarjeta de credito datos personales etc realizaraacute una conexioacuten a un servidor de la www seguro

ftp (File Transfer Protocol) utilizaraacute el protocolo FTP

de transferencia de archivos Se utilizaraacute cuando la informacioacuten que se desee acceder se encuentre en un servidor de ftp Por defecto se accederaacute a un servidor anoacutenimo (anonymous) si se desea indicar el nombre de usuario se usaraacute ftpmaquinadominiousuario y luego le pediraacute la clave de acceso

gopher wais Cualquiera de estos servicios de

localizacioacuten de informacioacuten se indicaraacute el directorio para localizar el recurso concreto

news Accede al servicio de news para ello el visualizador de la www debe ser capaz de presentar este servicio todos no lo son Se indicaraacute el servidor de news y como camino el grupo de noticias al que se desea acceder newsnewscicaesucaes

telnet Emulacioacuten de terminal remota para

conectarse a maquina multiusuario se utiliza para acceder a cuentas puacuteblicas como por ejemplo la de biblioteca Lo normal es llamar a una aplicacioacuten externa que realice la conexioacuten En este caso se indicaraacute la maquina y el login telnetmaquinadominiologin

mailto Se utilizaraacute para enviar correo electroacutenico

todos los navegadores no son capaces En este caso solo se indicaraacute la direccioacuten de correo electroacutenico del destino mailtoalias correodomino

La maquinadominio indicaraacute el servidor que nos

proporciona el recurso en este caso se utilizaraacute el esquema IP para identificar la maquina seraacute el nombre de la maquina y el dominio En el caso de nuestra Universidad el dominio siempre seraacute ucaes Por tanto un nombre valido de maquina seraacute www2ucaes

Es muy importante indicar siempre el dominio ya

que debemos suponer que se conectaraacuten a nuestras paacuteginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podriacutean ser seguidas por los navegadores externos Si en vez de www2ucaes utilizamos www2 seraacute perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 seraacute la maquina llamada asiacute en el dominio remoto si existiera que no es la que deseamos referenciar

El puerto TCP es opcional y lo normal es no

ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio Solo se utilizaraacute cuando el servidor utilice un puerto distinto al puerto por defecto

El camino seraacute la ruta de directorios que hay que

seguir para encontrar el documento que se desea referenciar para separar los subdirectorios utilizaremos la barra de UNIX se usa por convenio al ser este tipo de maquinas las maacutes usadas como servidores El nombre de los subdirectorios y del archivo referenciado puede ser de maacutes de ocho caracteres y se tendraacute en cuenta la diferencia entre mayuacutesculas y minuacutesculas en el nombre

La extensioacuten de los archivos seraacute tambieacuten algo

importante ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento Para definir los tipos de documentos se utiliza los tipos MIME Las extensiones maacutes normales con sus tipos correspondientes son

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 133

Tipo MIME Extensioacuten Tipo de Archivo

texthtml html oacute htm documento HTML

textplain txt por defecto texto

plano

imagegif gif imagen de formato

GIF

imagejpeg jpg oacute jpeg imagen de formato

JPEG

El navegador de la www realiza una accioacuten para

cada tipo de archivo solo los que sean del tipo texthtml seraacuten mostrados como documentos HTML En el caso de que el tipo no sea conocido por el cliente se consideraraacute por defecto como un documento de texto normal

Si no se indica un archivo y solo referenciamos un

directorio accederemos a la paacutegina html por defecto de ese directorio En el servidor estaacuten definidos unos archivos para ser usados si no de indica un archivo concreto el nombre que debe tener este archivo es en nuestro caso defaulthtm oacute defaulthtml En caso que no exista este archivo se mostraraacute un listado de todos los documentos que forman el directorio Este archivo es la paacutegina inicial (home page) del servidor o del espacio Web

Algunos ejemplos de URL podriacutean ser

URL Definicioacuten

httpwwwucaes

En este caso solo se indica el servicio y la maquina y dominio El resto de los paraacutemetros se toman por defecto el puerto 80 el directorio el raiacutez del servidor y el documento por defecto de ese directorio

httpwwwucaes internetinternethtml

Esta URL estaacute maacutes completa en este caso se accede al archivo internethtml que se encuentra en el directorio internet del servidor de la www wwwucaes

httpwww2ucaesservsii

Se accederaacute al archivo por defecto del directorio servsii del servidor de la www www2ucaes

ftpftpucaesimagenes globogif

En este caso se accederaacute a un servidor de FTP anoacutenimo ftpucaes por el protocolo FTP y se accederaacute al archivo globogif del directorio de imaacutegenes

newsucaes En este caso se accederaacute

al grupo de news de la uca en el servidor de news

definido por defecto en el navegador de la www esta opcioacuten solo es soportada por los navegadores maacutes modernos

mailtowww-teamucaes

Enviaraacute un mail al equipo de la www de la UCA esta opcioacuten solo es soportada por los navegadores maacutes modernos

Estructura Baacutesica de un documento HTML Un documento HTML estaacute definido por una

etiqueta de apertura ltHTMLgt y una etiqueta de cierre ltHTMLgt Dentro de este se dividen dos partes fundamentales la cabecera delimitada por la etiqueta ltHEADgt y el cuerpo delimitado por la etiqueta ltBODYgt Por tanto la estructura de un documento HTML seraacute

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltBODYgt Instrucciones HTML ltBODYgt ltHTMLgt Ninguno de estos elementos es obligatorio

pudiendo componer documentos HTML que se muestren sin ninguacuten problema sin incluir estas etiquetas de identificacioacuten Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo) no seraacuten reconocidos correctamente si no se incluyen entre las etiquetas de ltHEADgt

En los proacuteximos apartados explicaremos de

forma separada los componentes de la cabecera y del cuerpo de un documento HTML

Comentarios Para insertar comentarios dentro de un

documento HTML utilizaremos la etiqueta especial lt-- definieacutendose un comentario de la forma

lt-- Esto es un comentario --gt

Los comentarios son uacutetiles para identificar el

documento pudiendo indicar al comienzo del documento su titulo autor y la fecha en el que fue realizado esto se hace antes de la etiqueta ltHTMLgt Tambieacuten aunque ya

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Segundo Grado

Paacutegina VIII

Insercioacuten de elementos multimedia 152

Sonido 152

Video 154

Plug-ins 155

ltEMBEDgt Insertar Archivos 155

Tablas Introduccioacuten 156

ltTABLEgt Definicioacuten de la Tabla 156

ltCAPTIONgt Titulo de la tabla 156

ltTRgt Fila de la tabla 156

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT VALIGN= TOP oacute MIDDLE oacute BOTTOM gt 157

ltTHgt y ltTDgt Una celda de la tabla 157

Ejemplos de Tablas 157

Ejemplos de colores de fondo de las celdas BGCOLOR 159

FORMULARIOS (FORM) Introduccioacuten 159

ltFORMgt Definicioacuten de formularios 160

ltINPUTgt Entrada baacutesica de datos 160

ltINPUT TYPE=TEXTgt Texto corto 160

ltINPUT TYPE=PASSWORDgt Palabras secretas 161

ltINPUT TYPE=CHECKBOXgt Botones de seleccioacuten 161

ltINPUT TYPE=RADIOgt Seleccioacuten entre muacuteltiples opciones 161

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos 162

ltINPUT TYPE=SUBMITgt Enviar Datos 162

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo graacutefico 162

ltINPUT TYPE=RESETgt Borrar los datos 162

ltTEXTAREAgt Texto en muacuteltiples liacuteneas 162

ltSELECTgt Eleccioacuten entre muacuteltiples opciones 163

(Common Gateway Interface) Definicioacuten 163

Variables de entorno 164

Entrada de datos al cgi-bin 164

Salida de datos del cgi-bin 165

Documentos con Frames Introduccioacuten 165

Definicioacuten 165

ltFRAMESET gt Definicioacuten de las frames 166

ltFRAME gt Definicioacuten de cada una de las frames 167

TARGET Atributo para indicar la frame de destino 167

Contesta las siguientes preguntas 168

Programacioacuten HTML CONALEP Gustavo Baz

Paacutegina 131

Etiquetas del lenguaje HTML El lenguaje HTML es un lenguaje

de marcas estas marcas seraacuten fragmentos de texto destacado de una forma especial que permiten la definicioacuten de las distintas instrucciones de HTML tanto los efectos a aplicar

sobre el texto como las distintas estructuras del lenguaje A estas marcas las denominaremos etiquetas y seraacuten la base principal del lenguaje HTML En documento HTML seraacute un archivo texto con etiquetas que variaraacuten la forma de su presentacioacuten

Una etiqueta seraacute un texto incluido entre los

siacutembolos menor que lt y mayor que gt El texto incluido dentro de los siacutembolos seraacute explicativo de la utilidad de la etiqueta Por ejemplo

ltBgt Letra Negrita del ingleacutes Bold (negrita)

ltTABLEgt Definiraacute una tabla

ltIMGgt Inclusioacuten de una IMaGen

Existe normalmente una etiqueta de inicio y otra de

fin la de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una diagonal El efecto que define la etiqueta tendraacute validez para todo lo que este incluido entre las etiquetas de inicio y fin ya sea texto plano o otras etiquetas HTML

ltETIQUETAgt Elementos Afectados por la Etiqueta ltETIQUETAgt

Por ejemplo con la etiqueta siguiente ltBgtTexto que seraacute en negritaltBgt Obtendremos

Texto que seraacute en negrita

Algunas etiquetas no necesitaraacuten la de fin seraacuten aquellas en las que el final este impliacutecito por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen Definen un efecto que se produciraacute en un punto determinado sin afectar a otros elementos

El uso de mayuacutesculas o minuacutesculas en las

etiquetas es indiferente se interpretaraacuten del mismo modo en ambos casos pero lo normal es expresarlas en mayuacutesculas para que destaquen con maacutes nitidez del texto normal

Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que

llamaremos atributos que permitiraacuten definir diferentes posibilidades de la instruccioacuten HTML Estos atributos se definiraacuten en la etiqueta de inicio y consistiraacuten normalmente en el nombre del atributo y el valor que toma separados por un signo de igual El orden en que se incluyan los atributos es indiferente no afectando al resultado Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido seraacute imprevisible

dependiendo de como lo interprete el navegador Cuando el valor que toma el atributo tiene maacutes de una palabra deberaacute expresarse entre comillas en otro caso no seraacute necesario

Un ejemplo de atributo seraacute ltA HREF=httpwwwucaesgtPagina principal de

la UCAltAgt En este caso la etiqueta A presenta un atributo

HREF cuyo valor es httpwwwucaes Igualmente una etiqueta podriacutea presentar varios

atributos ltHR ALIGN=LEFT NOSHADE SIZE=5

WIDTH=50gt

En este caso la etiqueta HR presenta cuatro atributos El segundo atributo NOSHADE es un caso especial que no presenta valor El orden en que se especifiquen los atributos no afectaraacuten al resultado final

Etiquetas correctas Todo texto que se encuentre entre los caracteres

lt y gt se consideraraacute una etiqueta si la etiqueta no fuera una de las validas del lenguaje HTML no seraacute tenida en cuenta sin causar ninguacuten tipo de error Dejaacutendose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extrantildea Cuando se comete un error sintaacutectico al expresar una etiqueta o un atributo no se produciraacute ninguacuten error simplemente no de obtendraacute el efecto que deseaacutebamos

El lenguaje HTML es un lenguaje que evoluciona

muy raacutepidamente y cada nueva versioacuten de los programas navegadores presenta etiquetas nuevas que causan efectos maacutes espectaculares o atributos nuevos de las etiquetas ya existentes Esto causa que los programas maacutes antiguos no entiendan estas nuevas etiquetas y por tanto las considere erroacuteneas y no realice la accioacuten que deseaacutebamos Daacutendose el caso de atributos que son validos solo para un uacutenico navegador

Cuando creemos coacutedigo HTML hay que hacerlo

lo maacutes estaacutendar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores ya que las personas que se conectan a nuestras paacuteginas no tendraacuten en la mayoriacutea de los casos el mismo que nosotros Tambien es interesante como se veriacutea el documento en los distintos tamantildeos de la ventana del navegador teniendo en cuenta que todos no tienen un monitor con la misma Resulucioacuten

En este manual se han tratado de incluir las

caracteriacutesticas maacutes estaacutendar de HTML y en caso de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 132

tratarse de instrucciones maacutes particulares se indicaraacute convenientemente

Formato de las URL Definicioacuten URL es el acroacutenimo de (Uniform Resource

Locator) localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la www

Con la www se pretende unificar el acceso a

informacioacuten de servicios que antes eran incompatibles entre siacute tratando de conseguir que todos los servicios de internet sean accesibles a traveacutes de la www de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacioacuten en servicios como FTP gopher WAIS etc

Uso y Formato Las URL se utilizaraacuten para definir el documento de

destino de los hiperenlaces para referenciar los graacuteficos y cualquier otro archivo que se desee incluir dentro de un documento HTML Cada elemento de internet tendraacute una URL que lo defina ya se encuentre en un servidor de la www FTP gopher o las News

El formato de una URL seraacute serviciomaquinadominiopuertocaminoarchivo

El servicio seraacute alguno de los de internet estos

pueden ser

http (HyperText Transport Protocol) es el protocolo utilizado para transmitir hipertexto Todas las paacuteginas HTML en servidores www deberaacuten ser referenciadas mediante este servicio Indicaraacute conexioacuten a un servidor de la www

https (HyperText Transport Protocol Secure) es el

protocolo para la conexioacuten a servidores de la www seguros Estos servidores son normalmente de aacutembito comercial y utilizan encriptacioacuten para evitar la intercepcioacuten de los datos enviados usualmente numeros de tarjeta de credito datos personales etc realizaraacute una conexioacuten a un servidor de la www seguro

ftp (File Transfer Protocol) utilizaraacute el protocolo FTP

de transferencia de archivos Se utilizaraacute cuando la informacioacuten que se desee acceder se encuentre en un servidor de ftp Por defecto se accederaacute a un servidor anoacutenimo (anonymous) si se desea indicar el nombre de usuario se usaraacute ftpmaquinadominiousuario y luego le pediraacute la clave de acceso

gopher wais Cualquiera de estos servicios de

localizacioacuten de informacioacuten se indicaraacute el directorio para localizar el recurso concreto

news Accede al servicio de news para ello el visualizador de la www debe ser capaz de presentar este servicio todos no lo son Se indicaraacute el servidor de news y como camino el grupo de noticias al que se desea acceder newsnewscicaesucaes

telnet Emulacioacuten de terminal remota para

conectarse a maquina multiusuario se utiliza para acceder a cuentas puacuteblicas como por ejemplo la de biblioteca Lo normal es llamar a una aplicacioacuten externa que realice la conexioacuten En este caso se indicaraacute la maquina y el login telnetmaquinadominiologin

mailto Se utilizaraacute para enviar correo electroacutenico

todos los navegadores no son capaces En este caso solo se indicaraacute la direccioacuten de correo electroacutenico del destino mailtoalias correodomino

La maquinadominio indicaraacute el servidor que nos

proporciona el recurso en este caso se utilizaraacute el esquema IP para identificar la maquina seraacute el nombre de la maquina y el dominio En el caso de nuestra Universidad el dominio siempre seraacute ucaes Por tanto un nombre valido de maquina seraacute www2ucaes

Es muy importante indicar siempre el dominio ya

que debemos suponer que se conectaraacuten a nuestras paacuteginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podriacutean ser seguidas por los navegadores externos Si en vez de www2ucaes utilizamos www2 seraacute perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 seraacute la maquina llamada asiacute en el dominio remoto si existiera que no es la que deseamos referenciar

El puerto TCP es opcional y lo normal es no

ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio Solo se utilizaraacute cuando el servidor utilice un puerto distinto al puerto por defecto

El camino seraacute la ruta de directorios que hay que

seguir para encontrar el documento que se desea referenciar para separar los subdirectorios utilizaremos la barra de UNIX se usa por convenio al ser este tipo de maquinas las maacutes usadas como servidores El nombre de los subdirectorios y del archivo referenciado puede ser de maacutes de ocho caracteres y se tendraacute en cuenta la diferencia entre mayuacutesculas y minuacutesculas en el nombre

La extensioacuten de los archivos seraacute tambieacuten algo

importante ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento Para definir los tipos de documentos se utiliza los tipos MIME Las extensiones maacutes normales con sus tipos correspondientes son

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 133

Tipo MIME Extensioacuten Tipo de Archivo

texthtml html oacute htm documento HTML

textplain txt por defecto texto

plano

imagegif gif imagen de formato

GIF

imagejpeg jpg oacute jpeg imagen de formato

JPEG

El navegador de la www realiza una accioacuten para

cada tipo de archivo solo los que sean del tipo texthtml seraacuten mostrados como documentos HTML En el caso de que el tipo no sea conocido por el cliente se consideraraacute por defecto como un documento de texto normal

Si no se indica un archivo y solo referenciamos un

directorio accederemos a la paacutegina html por defecto de ese directorio En el servidor estaacuten definidos unos archivos para ser usados si no de indica un archivo concreto el nombre que debe tener este archivo es en nuestro caso defaulthtm oacute defaulthtml En caso que no exista este archivo se mostraraacute un listado de todos los documentos que forman el directorio Este archivo es la paacutegina inicial (home page) del servidor o del espacio Web

Algunos ejemplos de URL podriacutean ser

URL Definicioacuten

httpwwwucaes

En este caso solo se indica el servicio y la maquina y dominio El resto de los paraacutemetros se toman por defecto el puerto 80 el directorio el raiacutez del servidor y el documento por defecto de ese directorio

httpwwwucaes internetinternethtml

Esta URL estaacute maacutes completa en este caso se accede al archivo internethtml que se encuentra en el directorio internet del servidor de la www wwwucaes

httpwww2ucaesservsii

Se accederaacute al archivo por defecto del directorio servsii del servidor de la www www2ucaes

ftpftpucaesimagenes globogif

En este caso se accederaacute a un servidor de FTP anoacutenimo ftpucaes por el protocolo FTP y se accederaacute al archivo globogif del directorio de imaacutegenes

newsucaes En este caso se accederaacute

al grupo de news de la uca en el servidor de news

definido por defecto en el navegador de la www esta opcioacuten solo es soportada por los navegadores maacutes modernos

mailtowww-teamucaes

Enviaraacute un mail al equipo de la www de la UCA esta opcioacuten solo es soportada por los navegadores maacutes modernos

Estructura Baacutesica de un documento HTML Un documento HTML estaacute definido por una

etiqueta de apertura ltHTMLgt y una etiqueta de cierre ltHTMLgt Dentro de este se dividen dos partes fundamentales la cabecera delimitada por la etiqueta ltHEADgt y el cuerpo delimitado por la etiqueta ltBODYgt Por tanto la estructura de un documento HTML seraacute

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltBODYgt Instrucciones HTML ltBODYgt ltHTMLgt Ninguno de estos elementos es obligatorio

pudiendo componer documentos HTML que se muestren sin ninguacuten problema sin incluir estas etiquetas de identificacioacuten Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo) no seraacuten reconocidos correctamente si no se incluyen entre las etiquetas de ltHEADgt

En los proacuteximos apartados explicaremos de

forma separada los componentes de la cabecera y del cuerpo de un documento HTML

Comentarios Para insertar comentarios dentro de un

documento HTML utilizaremos la etiqueta especial lt-- definieacutendose un comentario de la forma

lt-- Esto es un comentario --gt

Los comentarios son uacutetiles para identificar el

documento pudiendo indicar al comienzo del documento su titulo autor y la fecha en el que fue realizado esto se hace antes de la etiqueta ltHTMLgt Tambieacuten aunque ya

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML CONALEP Gustavo Baz

Paacutegina 131

Etiquetas del lenguaje HTML El lenguaje HTML es un lenguaje

de marcas estas marcas seraacuten fragmentos de texto destacado de una forma especial que permiten la definicioacuten de las distintas instrucciones de HTML tanto los efectos a aplicar

sobre el texto como las distintas estructuras del lenguaje A estas marcas las denominaremos etiquetas y seraacuten la base principal del lenguaje HTML En documento HTML seraacute un archivo texto con etiquetas que variaraacuten la forma de su presentacioacuten

Una etiqueta seraacute un texto incluido entre los

siacutembolos menor que lt y mayor que gt El texto incluido dentro de los siacutembolos seraacute explicativo de la utilidad de la etiqueta Por ejemplo

ltBgt Letra Negrita del ingleacutes Bold (negrita)

ltTABLEgt Definiraacute una tabla

ltIMGgt Inclusioacuten de una IMaGen

Existe normalmente una etiqueta de inicio y otra de

fin la de fin contendraacute el mismo texto que la de inicio antildeadieacutendole al principio una diagonal El efecto que define la etiqueta tendraacute validez para todo lo que este incluido entre las etiquetas de inicio y fin ya sea texto plano o otras etiquetas HTML

ltETIQUETAgt Elementos Afectados por la Etiqueta ltETIQUETAgt

Por ejemplo con la etiqueta siguiente ltBgtTexto que seraacute en negritaltBgt Obtendremos

Texto que seraacute en negrita

Algunas etiquetas no necesitaraacuten la de fin seraacuten aquellas en las que el final este impliacutecito por ejemplo ltPgt paacuterrafo ltBRgt salto de liacutenea oacute ltIMGgt inclusioacuten de una imagen Definen un efecto que se produciraacute en un punto determinado sin afectar a otros elementos

El uso de mayuacutesculas o minuacutesculas en las

etiquetas es indiferente se interpretaraacuten del mismo modo en ambos casos pero lo normal es expresarlas en mayuacutesculas para que destaquen con maacutes nitidez del texto normal

Atributos de las Etiquetas Las etiquetas pueden presentar modificadores que

llamaremos atributos que permitiraacuten definir diferentes posibilidades de la instruccioacuten HTML Estos atributos se definiraacuten en la etiqueta de inicio y consistiraacuten normalmente en el nombre del atributo y el valor que toma separados por un signo de igual El orden en que se incluyan los atributos es indiferente no afectando al resultado Si se incluyen varias veces el mismo atributo con distintos valores el resultado obtenido seraacute imprevisible

dependiendo de como lo interprete el navegador Cuando el valor que toma el atributo tiene maacutes de una palabra deberaacute expresarse entre comillas en otro caso no seraacute necesario

Un ejemplo de atributo seraacute ltA HREF=httpwwwucaesgtPagina principal de

la UCAltAgt En este caso la etiqueta A presenta un atributo

HREF cuyo valor es httpwwwucaes Igualmente una etiqueta podriacutea presentar varios

atributos ltHR ALIGN=LEFT NOSHADE SIZE=5

WIDTH=50gt

En este caso la etiqueta HR presenta cuatro atributos El segundo atributo NOSHADE es un caso especial que no presenta valor El orden en que se especifiquen los atributos no afectaraacuten al resultado final

Etiquetas correctas Todo texto que se encuentre entre los caracteres

lt y gt se consideraraacute una etiqueta si la etiqueta no fuera una de las validas del lenguaje HTML no seraacute tenida en cuenta sin causar ninguacuten tipo de error Dejaacutendose el texto o las etiquetas a las que afectaba como si no existiera la etiqueta extrantildea Cuando se comete un error sintaacutectico al expresar una etiqueta o un atributo no se produciraacute ninguacuten error simplemente no de obtendraacute el efecto que deseaacutebamos

El lenguaje HTML es un lenguaje que evoluciona

muy raacutepidamente y cada nueva versioacuten de los programas navegadores presenta etiquetas nuevas que causan efectos maacutes espectaculares o atributos nuevos de las etiquetas ya existentes Esto causa que los programas maacutes antiguos no entiendan estas nuevas etiquetas y por tanto las considere erroacuteneas y no realice la accioacuten que deseaacutebamos Daacutendose el caso de atributos que son validos solo para un uacutenico navegador

Cuando creemos coacutedigo HTML hay que hacerlo

lo maacutes estaacutendar posible para permitir que el documento pueda ser visto de forma efectiva por distintos navegadores en maquinas distintas Por tanto debemos renunciar a efectos espectaculares que solo tienen validez en un navegador e intentar comprobar como se ve el documento en una variedad de navegadores ya que las personas que se conectan a nuestras paacuteginas no tendraacuten en la mayoriacutea de los casos el mismo que nosotros Tambien es interesante como se veriacutea el documento en los distintos tamantildeos de la ventana del navegador teniendo en cuenta que todos no tienen un monitor con la misma Resulucioacuten

En este manual se han tratado de incluir las

caracteriacutesticas maacutes estaacutendar de HTML y en caso de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 132

tratarse de instrucciones maacutes particulares se indicaraacute convenientemente

Formato de las URL Definicioacuten URL es el acroacutenimo de (Uniform Resource

Locator) localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la www

Con la www se pretende unificar el acceso a

informacioacuten de servicios que antes eran incompatibles entre siacute tratando de conseguir que todos los servicios de internet sean accesibles a traveacutes de la www de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacioacuten en servicios como FTP gopher WAIS etc

Uso y Formato Las URL se utilizaraacuten para definir el documento de

destino de los hiperenlaces para referenciar los graacuteficos y cualquier otro archivo que se desee incluir dentro de un documento HTML Cada elemento de internet tendraacute una URL que lo defina ya se encuentre en un servidor de la www FTP gopher o las News

El formato de una URL seraacute serviciomaquinadominiopuertocaminoarchivo

El servicio seraacute alguno de los de internet estos

pueden ser

http (HyperText Transport Protocol) es el protocolo utilizado para transmitir hipertexto Todas las paacuteginas HTML en servidores www deberaacuten ser referenciadas mediante este servicio Indicaraacute conexioacuten a un servidor de la www

https (HyperText Transport Protocol Secure) es el

protocolo para la conexioacuten a servidores de la www seguros Estos servidores son normalmente de aacutembito comercial y utilizan encriptacioacuten para evitar la intercepcioacuten de los datos enviados usualmente numeros de tarjeta de credito datos personales etc realizaraacute una conexioacuten a un servidor de la www seguro

ftp (File Transfer Protocol) utilizaraacute el protocolo FTP

de transferencia de archivos Se utilizaraacute cuando la informacioacuten que se desee acceder se encuentre en un servidor de ftp Por defecto se accederaacute a un servidor anoacutenimo (anonymous) si se desea indicar el nombre de usuario se usaraacute ftpmaquinadominiousuario y luego le pediraacute la clave de acceso

gopher wais Cualquiera de estos servicios de

localizacioacuten de informacioacuten se indicaraacute el directorio para localizar el recurso concreto

news Accede al servicio de news para ello el visualizador de la www debe ser capaz de presentar este servicio todos no lo son Se indicaraacute el servidor de news y como camino el grupo de noticias al que se desea acceder newsnewscicaesucaes

telnet Emulacioacuten de terminal remota para

conectarse a maquina multiusuario se utiliza para acceder a cuentas puacuteblicas como por ejemplo la de biblioteca Lo normal es llamar a una aplicacioacuten externa que realice la conexioacuten En este caso se indicaraacute la maquina y el login telnetmaquinadominiologin

mailto Se utilizaraacute para enviar correo electroacutenico

todos los navegadores no son capaces En este caso solo se indicaraacute la direccioacuten de correo electroacutenico del destino mailtoalias correodomino

La maquinadominio indicaraacute el servidor que nos

proporciona el recurso en este caso se utilizaraacute el esquema IP para identificar la maquina seraacute el nombre de la maquina y el dominio En el caso de nuestra Universidad el dominio siempre seraacute ucaes Por tanto un nombre valido de maquina seraacute www2ucaes

Es muy importante indicar siempre el dominio ya

que debemos suponer que se conectaraacuten a nuestras paacuteginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podriacutean ser seguidas por los navegadores externos Si en vez de www2ucaes utilizamos www2 seraacute perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 seraacute la maquina llamada asiacute en el dominio remoto si existiera que no es la que deseamos referenciar

El puerto TCP es opcional y lo normal es no

ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio Solo se utilizaraacute cuando el servidor utilice un puerto distinto al puerto por defecto

El camino seraacute la ruta de directorios que hay que

seguir para encontrar el documento que se desea referenciar para separar los subdirectorios utilizaremos la barra de UNIX se usa por convenio al ser este tipo de maquinas las maacutes usadas como servidores El nombre de los subdirectorios y del archivo referenciado puede ser de maacutes de ocho caracteres y se tendraacute en cuenta la diferencia entre mayuacutesculas y minuacutesculas en el nombre

La extensioacuten de los archivos seraacute tambieacuten algo

importante ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento Para definir los tipos de documentos se utiliza los tipos MIME Las extensiones maacutes normales con sus tipos correspondientes son

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 133

Tipo MIME Extensioacuten Tipo de Archivo

texthtml html oacute htm documento HTML

textplain txt por defecto texto

plano

imagegif gif imagen de formato

GIF

imagejpeg jpg oacute jpeg imagen de formato

JPEG

El navegador de la www realiza una accioacuten para

cada tipo de archivo solo los que sean del tipo texthtml seraacuten mostrados como documentos HTML En el caso de que el tipo no sea conocido por el cliente se consideraraacute por defecto como un documento de texto normal

Si no se indica un archivo y solo referenciamos un

directorio accederemos a la paacutegina html por defecto de ese directorio En el servidor estaacuten definidos unos archivos para ser usados si no de indica un archivo concreto el nombre que debe tener este archivo es en nuestro caso defaulthtm oacute defaulthtml En caso que no exista este archivo se mostraraacute un listado de todos los documentos que forman el directorio Este archivo es la paacutegina inicial (home page) del servidor o del espacio Web

Algunos ejemplos de URL podriacutean ser

URL Definicioacuten

httpwwwucaes

En este caso solo se indica el servicio y la maquina y dominio El resto de los paraacutemetros se toman por defecto el puerto 80 el directorio el raiacutez del servidor y el documento por defecto de ese directorio

httpwwwucaes internetinternethtml

Esta URL estaacute maacutes completa en este caso se accede al archivo internethtml que se encuentra en el directorio internet del servidor de la www wwwucaes

httpwww2ucaesservsii

Se accederaacute al archivo por defecto del directorio servsii del servidor de la www www2ucaes

ftpftpucaesimagenes globogif

En este caso se accederaacute a un servidor de FTP anoacutenimo ftpucaes por el protocolo FTP y se accederaacute al archivo globogif del directorio de imaacutegenes

newsucaes En este caso se accederaacute

al grupo de news de la uca en el servidor de news

definido por defecto en el navegador de la www esta opcioacuten solo es soportada por los navegadores maacutes modernos

mailtowww-teamucaes

Enviaraacute un mail al equipo de la www de la UCA esta opcioacuten solo es soportada por los navegadores maacutes modernos

Estructura Baacutesica de un documento HTML Un documento HTML estaacute definido por una

etiqueta de apertura ltHTMLgt y una etiqueta de cierre ltHTMLgt Dentro de este se dividen dos partes fundamentales la cabecera delimitada por la etiqueta ltHEADgt y el cuerpo delimitado por la etiqueta ltBODYgt Por tanto la estructura de un documento HTML seraacute

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltBODYgt Instrucciones HTML ltBODYgt ltHTMLgt Ninguno de estos elementos es obligatorio

pudiendo componer documentos HTML que se muestren sin ninguacuten problema sin incluir estas etiquetas de identificacioacuten Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo) no seraacuten reconocidos correctamente si no se incluyen entre las etiquetas de ltHEADgt

En los proacuteximos apartados explicaremos de

forma separada los componentes de la cabecera y del cuerpo de un documento HTML

Comentarios Para insertar comentarios dentro de un

documento HTML utilizaremos la etiqueta especial lt-- definieacutendose un comentario de la forma

lt-- Esto es un comentario --gt

Los comentarios son uacutetiles para identificar el

documento pudiendo indicar al comienzo del documento su titulo autor y la fecha en el que fue realizado esto se hace antes de la etiqueta ltHTMLgt Tambieacuten aunque ya

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 132

tratarse de instrucciones maacutes particulares se indicaraacute convenientemente

Formato de las URL Definicioacuten URL es el acroacutenimo de (Uniform Resource

Locator) localizador uniforme de recursos y permite localizar o acceder de forma sencilla cualquier recurso de la red desde el navegador de la www

Con la www se pretende unificar el acceso a

informacioacuten de servicios que antes eran incompatibles entre siacute tratando de conseguir que todos los servicios de internet sean accesibles a traveacutes de la www de esta forma desde un mismo programa se puede tener acceso a todos los recursos de una forma uniforme y permite que los documentos HTML incluyan enlaces a otras fuentes de informacioacuten en servicios como FTP gopher WAIS etc

Uso y Formato Las URL se utilizaraacuten para definir el documento de

destino de los hiperenlaces para referenciar los graacuteficos y cualquier otro archivo que se desee incluir dentro de un documento HTML Cada elemento de internet tendraacute una URL que lo defina ya se encuentre en un servidor de la www FTP gopher o las News

El formato de una URL seraacute serviciomaquinadominiopuertocaminoarchivo

El servicio seraacute alguno de los de internet estos

pueden ser

http (HyperText Transport Protocol) es el protocolo utilizado para transmitir hipertexto Todas las paacuteginas HTML en servidores www deberaacuten ser referenciadas mediante este servicio Indicaraacute conexioacuten a un servidor de la www

https (HyperText Transport Protocol Secure) es el

protocolo para la conexioacuten a servidores de la www seguros Estos servidores son normalmente de aacutembito comercial y utilizan encriptacioacuten para evitar la intercepcioacuten de los datos enviados usualmente numeros de tarjeta de credito datos personales etc realizaraacute una conexioacuten a un servidor de la www seguro

ftp (File Transfer Protocol) utilizaraacute el protocolo FTP

de transferencia de archivos Se utilizaraacute cuando la informacioacuten que se desee acceder se encuentre en un servidor de ftp Por defecto se accederaacute a un servidor anoacutenimo (anonymous) si se desea indicar el nombre de usuario se usaraacute ftpmaquinadominiousuario y luego le pediraacute la clave de acceso

gopher wais Cualquiera de estos servicios de

localizacioacuten de informacioacuten se indicaraacute el directorio para localizar el recurso concreto

news Accede al servicio de news para ello el visualizador de la www debe ser capaz de presentar este servicio todos no lo son Se indicaraacute el servidor de news y como camino el grupo de noticias al que se desea acceder newsnewscicaesucaes

telnet Emulacioacuten de terminal remota para

conectarse a maquina multiusuario se utiliza para acceder a cuentas puacuteblicas como por ejemplo la de biblioteca Lo normal es llamar a una aplicacioacuten externa que realice la conexioacuten En este caso se indicaraacute la maquina y el login telnetmaquinadominiologin

mailto Se utilizaraacute para enviar correo electroacutenico

todos los navegadores no son capaces En este caso solo se indicaraacute la direccioacuten de correo electroacutenico del destino mailtoalias correodomino

La maquinadominio indicaraacute el servidor que nos

proporciona el recurso en este caso se utilizaraacute el esquema IP para identificar la maquina seraacute el nombre de la maquina y el dominio En el caso de nuestra Universidad el dominio siempre seraacute ucaes Por tanto un nombre valido de maquina seraacute www2ucaes

Es muy importante indicar siempre el dominio ya

que debemos suponer que se conectaraacuten a nuestras paacuteginas desde servidores externos a nuestra red local por tanto si no indicamos el dominio las URL que especifiquemos no podriacutean ser seguidas por los navegadores externos Si en vez de www2ucaes utilizamos www2 seraacute perfectamente accesible por cualquier maquina de nuestra red local pero si se referenciara desde una red con distinto dominio la maquina www2 seraacute la maquina llamada asiacute en el dominio remoto si existiera que no es la que deseamos referenciar

El puerto TCP es opcional y lo normal es no

ponerlo si el puerto es el mismo que se utiliza normalmente por el servicio Solo se utilizaraacute cuando el servidor utilice un puerto distinto al puerto por defecto

El camino seraacute la ruta de directorios que hay que

seguir para encontrar el documento que se desea referenciar para separar los subdirectorios utilizaremos la barra de UNIX se usa por convenio al ser este tipo de maquinas las maacutes usadas como servidores El nombre de los subdirectorios y del archivo referenciado puede ser de maacutes de ocho caracteres y se tendraacute en cuenta la diferencia entre mayuacutesculas y minuacutesculas en el nombre

La extensioacuten de los archivos seraacute tambieacuten algo

importante ya que por ella sabe el servidor el tipo de documento que se accede e indica al cliente (navegador) el modo en que debe tratarse ese documento Para definir los tipos de documentos se utiliza los tipos MIME Las extensiones maacutes normales con sus tipos correspondientes son

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 133

Tipo MIME Extensioacuten Tipo de Archivo

texthtml html oacute htm documento HTML

textplain txt por defecto texto

plano

imagegif gif imagen de formato

GIF

imagejpeg jpg oacute jpeg imagen de formato

JPEG

El navegador de la www realiza una accioacuten para

cada tipo de archivo solo los que sean del tipo texthtml seraacuten mostrados como documentos HTML En el caso de que el tipo no sea conocido por el cliente se consideraraacute por defecto como un documento de texto normal

Si no se indica un archivo y solo referenciamos un

directorio accederemos a la paacutegina html por defecto de ese directorio En el servidor estaacuten definidos unos archivos para ser usados si no de indica un archivo concreto el nombre que debe tener este archivo es en nuestro caso defaulthtm oacute defaulthtml En caso que no exista este archivo se mostraraacute un listado de todos los documentos que forman el directorio Este archivo es la paacutegina inicial (home page) del servidor o del espacio Web

Algunos ejemplos de URL podriacutean ser

URL Definicioacuten

httpwwwucaes

En este caso solo se indica el servicio y la maquina y dominio El resto de los paraacutemetros se toman por defecto el puerto 80 el directorio el raiacutez del servidor y el documento por defecto de ese directorio

httpwwwucaes internetinternethtml

Esta URL estaacute maacutes completa en este caso se accede al archivo internethtml que se encuentra en el directorio internet del servidor de la www wwwucaes

httpwww2ucaesservsii

Se accederaacute al archivo por defecto del directorio servsii del servidor de la www www2ucaes

ftpftpucaesimagenes globogif

En este caso se accederaacute a un servidor de FTP anoacutenimo ftpucaes por el protocolo FTP y se accederaacute al archivo globogif del directorio de imaacutegenes

newsucaes En este caso se accederaacute

al grupo de news de la uca en el servidor de news

definido por defecto en el navegador de la www esta opcioacuten solo es soportada por los navegadores maacutes modernos

mailtowww-teamucaes

Enviaraacute un mail al equipo de la www de la UCA esta opcioacuten solo es soportada por los navegadores maacutes modernos

Estructura Baacutesica de un documento HTML Un documento HTML estaacute definido por una

etiqueta de apertura ltHTMLgt y una etiqueta de cierre ltHTMLgt Dentro de este se dividen dos partes fundamentales la cabecera delimitada por la etiqueta ltHEADgt y el cuerpo delimitado por la etiqueta ltBODYgt Por tanto la estructura de un documento HTML seraacute

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltBODYgt Instrucciones HTML ltBODYgt ltHTMLgt Ninguno de estos elementos es obligatorio

pudiendo componer documentos HTML que se muestren sin ninguacuten problema sin incluir estas etiquetas de identificacioacuten Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo) no seraacuten reconocidos correctamente si no se incluyen entre las etiquetas de ltHEADgt

En los proacuteximos apartados explicaremos de

forma separada los componentes de la cabecera y del cuerpo de un documento HTML

Comentarios Para insertar comentarios dentro de un

documento HTML utilizaremos la etiqueta especial lt-- definieacutendose un comentario de la forma

lt-- Esto es un comentario --gt

Los comentarios son uacutetiles para identificar el

documento pudiendo indicar al comienzo del documento su titulo autor y la fecha en el que fue realizado esto se hace antes de la etiqueta ltHTMLgt Tambieacuten aunque ya

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 133

Tipo MIME Extensioacuten Tipo de Archivo

texthtml html oacute htm documento HTML

textplain txt por defecto texto

plano

imagegif gif imagen de formato

GIF

imagejpeg jpg oacute jpeg imagen de formato

JPEG

El navegador de la www realiza una accioacuten para

cada tipo de archivo solo los que sean del tipo texthtml seraacuten mostrados como documentos HTML En el caso de que el tipo no sea conocido por el cliente se consideraraacute por defecto como un documento de texto normal

Si no se indica un archivo y solo referenciamos un

directorio accederemos a la paacutegina html por defecto de ese directorio En el servidor estaacuten definidos unos archivos para ser usados si no de indica un archivo concreto el nombre que debe tener este archivo es en nuestro caso defaulthtm oacute defaulthtml En caso que no exista este archivo se mostraraacute un listado de todos los documentos que forman el directorio Este archivo es la paacutegina inicial (home page) del servidor o del espacio Web

Algunos ejemplos de URL podriacutean ser

URL Definicioacuten

httpwwwucaes

En este caso solo se indica el servicio y la maquina y dominio El resto de los paraacutemetros se toman por defecto el puerto 80 el directorio el raiacutez del servidor y el documento por defecto de ese directorio

httpwwwucaes internetinternethtml

Esta URL estaacute maacutes completa en este caso se accede al archivo internethtml que se encuentra en el directorio internet del servidor de la www wwwucaes

httpwww2ucaesservsii

Se accederaacute al archivo por defecto del directorio servsii del servidor de la www www2ucaes

ftpftpucaesimagenes globogif

En este caso se accederaacute a un servidor de FTP anoacutenimo ftpucaes por el protocolo FTP y se accederaacute al archivo globogif del directorio de imaacutegenes

newsucaes En este caso se accederaacute

al grupo de news de la uca en el servidor de news

definido por defecto en el navegador de la www esta opcioacuten solo es soportada por los navegadores maacutes modernos

mailtowww-teamucaes

Enviaraacute un mail al equipo de la www de la UCA esta opcioacuten solo es soportada por los navegadores maacutes modernos

Estructura Baacutesica de un documento HTML Un documento HTML estaacute definido por una

etiqueta de apertura ltHTMLgt y una etiqueta de cierre ltHTMLgt Dentro de este se dividen dos partes fundamentales la cabecera delimitada por la etiqueta ltHEADgt y el cuerpo delimitado por la etiqueta ltBODYgt Por tanto la estructura de un documento HTML seraacute

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltBODYgt Instrucciones HTML ltBODYgt ltHTMLgt Ninguno de estos elementos es obligatorio

pudiendo componer documentos HTML que se muestren sin ninguacuten problema sin incluir estas etiquetas de identificacioacuten Si se utilizan elementos que forzosamente deban ser incluidos en la cabecera (como la etiqueta de titulo) no seraacuten reconocidos correctamente si no se incluyen entre las etiquetas de ltHEADgt

En los proacuteximos apartados explicaremos de

forma separada los componentes de la cabecera y del cuerpo de un documento HTML

Comentarios Para insertar comentarios dentro de un

documento HTML utilizaremos la etiqueta especial lt-- definieacutendose un comentario de la forma

lt-- Esto es un comentario --gt

Los comentarios son uacutetiles para identificar el

documento pudiendo indicar al comienzo del documento su titulo autor y la fecha en el que fue realizado esto se hace antes de la etiqueta ltHTMLgt Tambieacuten aunque ya

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 134

con menos utilidad para comentar cualquier instruccioacuten o circunstancia del documento

Los comentarios no se muestran en el documento

HTML y el uacutenico modo de verlo es viendo el coacutedigo HTML fuente del documento cosa que permiten algunos navegadores de la www

Cabecera de un documento HTML Introduccioacuten La cabecera de un documento HTML estaacute

delimitado por las etiquetas ltHEADgt y ltHEADgt en esta se incluiraacuten las definiciones generales que afectaraacuten a todo el documento Todas sus etiquetas son opcionales y se utilizaraacuten solo en casos muy determinados solo la etiqueta TITLE tiene un uso general y aunque es opcional se recomienda incluirla en todos los documentos que creemos

A continuacioacuten se citan los distintos componentes

que pueden formar la cabecera de un documento HTML

ltTITLEgt Tiacutetulo del documento Especificaraacute el tiacutetulo del documento HTML todo

documento HTML debe tener un titulo El titulo debe guardar relacioacuten con el contenido del documento y definirlo de forma general su tamantildeo no estaacute limitado aunque se recomienda que no sea excesivamente extenso Dentro de esta etiqueta no se podraacute usar ninguna de las restantes etiquetas HTML

El tiacutetulo no forma parte del documento en siacute y no

se incluye ni se muestra dentro del documento normalmente se muestra en la parte superior de la ventana del programa navegador

Se utiliza principalmente para etiquetar e

identificar la paacutegina en los bookmarks (marcadores) y las history list (lista de documentos accedidos) y tambieacuten se utiliza por algunos servidores de buacutesqueda como resultado de una busqueda para poder intuir el contenido del documento El titulo deberaacute guardar relacioacuten con el contenido del documento y definirlo de forma general

La etiqueta ltTITLEgt debe ser usada dentro de

las etiquetas que definen la cabecera de la siguiente forma

ltHEADgt ltTITLEgtTitulo del documento HTMLltTITLEgt ltHEADgt

ltBASEgt URL base del documento Especificaraacute la URL que se tomaraacute como base del

documento HTML esta se utilizaraacute para las referencias a URL relativas que se encuentren en los hiperenlaces y en las referencias de las imaacutegenes No tiene mucho uso y lo normal es utilizarlo en documentos obtenidos de otros servidores o directorios e incluidos fuera de contexto de esta forma los enlaces siguen siendo validos

Presenta un atributo HREF que indicaraacute la URL base del documento el formato seraacute el siguiente

ltBASE HREF=URLgt Por ejemplo ltBASE HREF=http wwwucaesdocsgt

ltISINDEXgt El documento es un iacutendice Indica que el documento es un iacutendice y por tanto

se deberaacute realizar una buacutesqueda en eacutel Presentaraacute un indicador preguntando la palabra clave de la buacutesqueda

No se utiliza en documentos normales sino en

documentos realizados con cgi-bin para indicar que les debe pasar una palabra clave para realizar la buacutesqueda Presenta dos atributos PROMPT que indica el texto que apareceraacute como inductor de la buacutesqueda y ACTION que especifica el archivo cgi que trata la consulta por defecto seraacute el documento actual

ltMETAgt Indica refresco del documento Aunque tiene maacutes utilidades la principal es

indicar documentos con refresco automaacutetico Se indicaraacute un documento que debe sustituir al actual en un determinado nuacutemero de segundos

El formato es el siguiente ltMETA HTTP-EQUIV=REFRESH

CONTENT=nuacutemero_segundosURL=URL_de_refrescogt

Se indica el nuacutemero de segundos que deben

pasar antes del refresco y el documento HTML que sustituye al actual Si se indica cero segundos la transicioacuten entre uno y otro documento seraacute inmediata Si no se indica URL el documento actual se refrescaraacute

La utilidad puede ser para documentos que

cambien con una gran frecuencia y transcurrido un tiempo se actualizaraacuten o documentos que deban ser vistos de forma secuencial se empieza por un documento pasando a los siguientes transcurrido un periacuteodo de tiempo sin necesidad de accioacuten alguna por parte del lector

Cuerpo de un documento HTML Introduccioacuten El cuerpo de un documento HTML estaraacute

delimitado por las etiquetas ltBODYgt y ltBODYgt y en el se incluiraacuten todas las instrucciones HTML y el texto que forman el documento es similar al BEGIN oacute de un lenguaje de programacioacuten Al igual que la cabecera (HEAD) es opcional pero se recomienda para la buena identificacioacuten de las distintas zonas del documento Si un documento no presenta ninguna de las etiquetas de identificacioacuten de sus distintas partes (ltHTMLgt ltHEADgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 135

oacute ltBODYgt) se consideraraacute que todo lo que se defina pertenece al cuerpo del documento

Definicioacuten de colores Antes de especificar los atributos de la etiqueta

BODY indicaremos la forma de representar los distintos colores Se usa el siguiente formato

rrvvaa Donde se indica en formato hexadecimal la

proporcioacuten de rojo verde y azul que forma el color deseado El siacutembolo es opcional Un nuacutemero hexadecimal es un nuacutemero en base 16 la base normal utilizada es base 10 o decimal del 0 al 9 En este caso los nuacutemero validos seraacuten del 0 al 9 antildeadiendo desde la a oacute A a la f oacute F Por tanto el nuacutemero 0F seraacute el 15 0E seraacute 14

En la especificacioacuten del color utilizaremos para

definir la proporcioacuten de cada color un nuacutemero del 0 al FF (255) 0 indica nada de ese color y FF la mayor proporcioacuten del color

Algunos ejemplos de colores seraacuten

000000 Negro(Negro)

FFFFFF Blanco(Blanco)

FF0000 Rojo(Rojo)

00FF00 Verde(Verde)

0000FF Azul(Azul)

Algunos colores estaacuten predefinidos y pueden ser

referenciados por su nombre estos solo seraacuten validos para Netscape e Internet Explorer de Microsoft estos colores predefinidos son

Color Predefinido Muestra

black Negro

teal Teal

blue Azul

navy Azul Marino

olive Oliva

red Rojo

Maron Marroacuten

gray gris

Atributos de ltBODYgt La etiqueta BODY presenta algunos atributos que

son de definicioacuten global para todo el documento estos definiraacuten los colores y el fondo del documento HTML

Los atributos de BODY son

ltBODY BACKGROUND=URL BGCOLOR=rrvvaa TEXT=rrvvaa LINK=rrvvaa VLINK=rrvvaa gt

BACKGROUND=URLDefiniraacute la imagen que se utilizaraacute de fondo del documento HTML la URL definida seraacute el camino a una imagen Esta se muestra debajo del texto y las imaacutegenes del documento HTML En el caso de que la imagen no rellene todo el fondo del documento esta seraacute reproducida tantas veces como sea necesario

BGCOLOR=rrvvaa oacute nombre del colorIndicaraacute el

color del fondo del documento HTML solo se utilizaraacute si no se ha definido una imagen de fondo o si esta imagen no puede obtenerse

TEXT=rrvvaa oacute nombre del color Especificaraacute el

color del texto normal dentro del documento HTML Por defecto seraacute normalmente negro

LINK=rrvvaa oacute nombre del color Indicaraacute el color

que tendraacuten los hiperenlaces que no han sido accedidos Por defecto seraacute azul

VLINK=rrvvaa oacute nombre del color Color de los

enlaces que ya han sido visitados Por defecto es un color azul maacutes oscuro

Algunos ejemplos podriacutean ser

ltbody background= http www2ucaesfondos1

fondo15gifgt

El documento tendraacute como fondo la imagen indicada en la URL

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color agua

ltbody bgcolor=blue text=white link=red

vlink=aquagt

El fondo seraacute azul el texto blanco los enlaces rojos y los enlaces

ltbody bgcolor=0000FF text=FFFFFF link=FF0000

vlink=008200gt

Este caso es similar al anterior pero usando el formato hexadecimal para definir los colores el fondo seraacute azul el texto blanco los enlaces rojos y los enlaces visitados color verde oscuro

Espaciados y saltos de liacutenea El espaciado en

HTML En HTML no estaacute permitido maacutes de un elemento

blanco (espacios tabuladores saltos de liacutenea) separando cualquier elemento o texto todos estos son convertidos a un uacutenico espacio blanco y el resto se omiten en la representacioacuten del documento En el documento fuente podremos usar el espaciado que

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 136

deseemos y no deberaacute estar bien formateado este se conseguiraacute con las etiquetas HTML

Existen unas etiquetas especiales HTML para

definir estos elementos de control de texto A continuacioacuten se detallaraacute cada una de ellas

ltPgt Cambio de paacuterrafo Definiraacute un paacuterrafo se usaraacute al comienzo o al final

de un paacuterrafo de texto e introduciraacute un espaciado de separacioacuten (normalmente dos liacuteneas) con el proacuteximo texto que se exprese Esta etiqueta se puede utilizar para introducir un espaciado entre cualquier elemento HTML y no solo serviraacute para separar texto

El efecto se conseguiraacute introduciendo la etiqueta

ltPgt en el punto en el que deseemos que se produzca el espaciado La etiqueta de fin de paacuterrafo ltPgt es opcional no siendo necesario incluirla

Existen elementos HTML que ya introducen

separaciones de liacuteneas tanto antes como despues por tanto en estos casos no es necesario pero siacute posible introducir el elemento de nuevo paacuterrafo No es necesario utilizar esta etiqueta ni antes ni despueacutes de cabeceras ltHngt despueacutes de ltHRgt (reglas horizontales) ltADDRESSgt ltBLOCKQUOTEgt ltPREgt Tampoco es necesario dentro de listas tras los elementos ltLIgt ltDTgt ni ltDDgt que se utilizan para separar los distintos elementos de una lista

Ejemplo

Inst HTML Esta es una frase que forma un

paacuterrafoltPgtEste es el otro paacuterrafo

Resultado

Esta es una frase que forma un paacuterrafo

Este es el otro paacuterrafo

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nuevo paacuterrafo se observa una separacioacuten de dos liacuteneas

ltBRgt Salto de liacutenea Su utilidad es similar al anterior pero en este caso

el espaciado del texto es menor se pasaraacute a la liacutenea siguiente sin dejar una liacutenea de separacioacuten En este caso seraacute un cambio de liacutenea y no de parrafo Igualmente no es necesario usarlo tras los elementos que llevan impliacutecitos un salto de liacutenea ni tampoco es necesaria la etiqueta de fin ltBRgt

Ejemplo

Inst HTML Esta es una frase de la primera

liacutenealtBRgtEsta es la siguiente liacutenea

Resultado Esta es una frase de la primera liacutenea Esta es la siguiente liacutenea

Explicacioacuten

En el punto donde se ha introducido la instruccioacuten HTML de nueva liacutenea se observa el cambio de liacutenea

ltHRgt Regla Horizontal ltHR ALIGN=LEFT|RIGTH|CENTER NOSHADE

SIZE=n WIDTH=ngt Se usa para dividir un documento en distintas

secciones mostraraacute una liacutenea horizontal de tamantildeo determinable Se asemejaraacute al salto de paacutegina dentro de un documento Si no se especifican atributos dibujaraacute una liacutenea que ocupe el ancho de la pantalla del navegador y introduciendo una separacioacuten con el texto anterior y siguiente equivalente a cambio de paacuterrafo No es necesaria la etiqueta de fin ltHRgt Con los atributos podemos especificar su forma y tamantildeo esto atributos son

ALIGN=LEFT RIGTH oacute CENTERIndicaraacute la forma

en la que se alinearaacute la regla en el caso de no ocupar todo el ancho de la pantalla del navegador a la izquierda derecha o centrada

NOSHADENo muestra la sombra de la barra

evitando el efecto en tres dimensiones

SIZE=nIndicaraacute la altura de la regla en puntos de la pantalla

WIDTH=n oacute nEspecificaraacute el ancho de la regla se

puede especificar en tanto por ciento del ancho de la ventana ltHR WIDTH=50gt o en valor absoluto ltHR WIDTH=75gt en puntos de la pantalla

Ejemplo

Inst HTML ltHRgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible y de altura 1 con sombra

Ejemplo

Inst HTML ltHR SIZE=5 NOSHADEgt

Resultado

Explicacioacuten Mostraraacute una liacutenea que ocupa

todo el ancho disponible es de 5 de alto y no tiene sombra ni efecto dimensional

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 137

Ejemplo

Inst HTML ltHR SIZE=5 WIDTH=50 ALIGN

=LEFTgt

Resultado

Explicacioacuten

Mostraraacute un liacutenea que ocupa el cincuenta por ciento del ancho disponible es de 5 de alto y estaacute alineada a la izquierda

ltPREgt Texto preformateado Muestra un porcioacuten de texto en el que se respetan

los saltos de liacutenea tabuladores y espacios en blanco Todo lo que se encuentre entre las etiquetas de inicio y fin de texto preformateado se mostraraacute tal y como se expresa en el fuente del documento html Para mostrar este texto se utiliza una fuente de espaciado fijo maacutes pequentildea que el texto normal Presenta un problema cuando la liacutenea es demasiado larga ya que no la corta el navegador y se mostrariacutea tal y como aparece en el archivo fuente No se recomienda como forma raacutepida de convertir un documento texto a formato visible en HTML ya que presenta muchas limitaciones y no se obtiene una buena presentacioacuten

Dentro de la etiqueta PRE no tendraacuten validez la

mayoriacutea de las instrucciones HTML solo se podraacuten utilizar ltBgt ltIgt y los hiperenlaces El resto de las etiquetas HTML son ignoradas

Ejemplo

Inst HTML ltPREgtEste texto se veraacute tal y

como se escribioacute ltPREgt

Resultado Este texto se veraacute tal y

como se escribioacute

Explicacioacuten

Como se ve utiliza otra fuente de caracteres distintos de espaciado fijo y se respetan los espacios en blanco y los saltos de liacutenea de la instruccioacuten original

ltCENTERgt Centrado de texto e imaacutegenes Se utilizaraacute para centrar liacuteneas de texto imaacutegenes

o cualquier otro elemento HTML (tablas listas etc ) Todo lo que se encuentre entre las etiquetas de inicio y fin apareceraacute centrado en el navegador

Ejemplo

Inst HTML ltCENTERgt Este texto se veraacute

centrado ltCENTERgt

Resultado Este texto se veraacute centrado

Explicacioacuten El texto aparece centrado en el

navegador Se puede utilizar tanto para una liacutenea como para un paacuterrafo y para

cualquiera de las instrucciones del lenguaje HTML

Ejemplo

Inst HTML

ltCENTERgt El texto y la imagen se centran ltBRgt ltIMG SRC=iconos1or_stargifgt ltCENTERgt

Resultado El texto y la imagen se centran

Explicacioacuten

Como se ve la etiqueta de centrado puede afectar a otros elementos como una imagen o cualquier otra estructura del lenguaje HTML

ampnbsp Espacios en blanco Con esta secuencia de caracteres

conseguiremos espacios en blanco que se mostraraacuten de forma efectiva pudiendo mostrar maacutes de un espacio en blanco de separacioacuten Se incluiraacuten tantas expresiones ampnbsp como espacios en blanco se desee conseguir

Caracteres latinos y especiales como

representarlos Los caracteres acentuados y algunos caracteres

especiales que usa el lenguaje HTML para definir sus etiquetas no se pueden incluir en un documento de manera normal se deben utilizar una serie de secuencias de escape que al mostrar el documento se sustituyen por el caraacutecter deseado

Estas secuencias de escape comienzan todas

con el siacutembolo ampersand (amp) seguido de un texto (siempre en minuacutesculas) que define el caraacutecter deseado y termina con el siacutembolo punto y coma () El error maacutes comuacuten cuando se usan estas secuencias de escape es no utilizar el punto y coma final en cuyo caso se mostraraacute el literal que define la secuencia en lugar del caraacutecter deseado No es necesario dejar espacios en blanco ni antes ni despueacutes de los caracteres especiales para que queden perfectamente encuadrados en la palabra

Elementos del lenguaje HTML Si incluimos en el texto de un documento HTML

el siacutembolo menor que (lt) o mayor que (gt) se interpretaraacute siempre como la definicioacuten de una etiqueta y por tanto no se mostraraacuten al interpretar el documento

Para expresar estos siacutembolos y otros del

lenguaje HTML usaremos las siguientes secuencias de escape

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 138

Secuencia de Escape

Siacutembolo

amplt Signo lt (menor que)

ampgt Signo gt (mayor que)

ampamp Signo amp (ampersand)

ampquot Se mostraraacute el signo de comillas

Caracteres acentuados Existen una serie de etiquetas que nos permite

mostrar los caracteres acentuados y caracteres latinos (ntilde) Estos caracteres si se incluyen en un documento HTML sin utilizar las secuencias de escape se mostraraacuten correctamente Usted en su ordenador con su navegador podraacute leer estos caracteres correctamente siempre y cuando tenga el mismo coacutedigo (espantildeol) que el autor del documento

Los primeros 127 caracteres del coacutedigo ASCII son

comunes para todos los paiacuteses e incluyen todas las letras del alfabeto a partir del 128 son especiacuteficos para cada lenguaje entre estos se incluyen los caracteres acentuados y la letra ntilde por tanto si alguien desde otro paiacutes que tenga un coacutedigo incompatible intenta leer su documento probablemente encuentre caracteres extrantildeos que no sepa interpretar y por tanto no seraacute capaz de leer los caracteres acentuados

Existen diversas secuencias que definen los

distintos tipos de acentos agudo grave o circunflejo Para el acento agudo usaremos el literal acute tanto para las mayuacutesculas como para las minuacutesculas Por tanto incluiremos el siacutembolo de ampersand (amp) la vocal que deseamos acentuar la palabra acute y el siacutembolo punto y coma () Representaacutendose los acentos de la forma

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampaacute aacute ampAacute Aacute

ampeacute eacute ampEacute Eacute

ampiacute iacute ampIacute Iacute

ampoacute oacute ampOacute Oacute

ampuacute uacute ampUacute Uacute

Para la letra ntilde usaremos la secuencia tilde del

siguiente modo

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampntilde ntilde ampNtilde Ntilde

Para el acento grave usaremos grave siendo en

este caso la representacioacuten

Secuencia de Escape

Letra Secuencia de Escape

Letra

ampagrave agrave ampAgrave Agrave

ampegrave egrave ampEgrave Egrave

ampigrave igrave ampIgrave Igrave

ampograve ograve ampOgrave Ograve

ampugrave ugrave ampUgrave Ugrave

Otros Siacutembolos Para expresar una caraacutecter por su valor en el

coacutedigo ASCII usaremos el siacutembolo seguido de su equivalente numeacuterico

Para el acento circunflejo utilizaremos el literal

circ y para la dieacuteresis utilizaremos el literal uml Para expresar los siacutembolos de apertura

interrogacioacuten apertura de exclamacioacuten y estos acentos usaremos

Secuencia de Escape

Letra Secuencia de Escape

Letra

amp191 iquest amp161 iexcl

ampuuml uuml ampUuml Uuml

ampicirc icirc ampIcirc Icirc

Algunos otros siacutembolos especiales seraacuten los

siguientes

Secuencia de Escape

Siacutembolo Secuencia de Escape

Siacutembolo

ampccedil ccedil ampCcedil Ccedil

ampreg reg Siacutembolo

de registrado ampcopy copy Siacutembolo de

Copyright

ampnnn Donde nnn es un nuacutemero decimal el

caraacutecter nnn del coacutedigo ISO-8859-1 (ASCII)

ltH1gt - ltH6gt Cabeceras de tiacutetulos En un documento HTML es posible definir seis

tipos distintos de cabeceras que seraacuten normalmente el tiacutetulo del documento y los distintos subapartados que lo forman

La etiquetas que definen las cabeceras seraacuten

ltH1gt ltH2gt ltH3gt ltH4gt ltH5gt ltH6gt El texto indicado entre las etiquetas de inicio y de fin seraacute el afectado por las cabeceras

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 139

Para la instruccioacuten ltH1gtEste texto apareceraacute resaltadoltH1gt el resultado seraacute

Este texto apareceraacute resaltado Lo normal es utilizar las cabeceras de forma

consecutiva y descendente es decir comenzaremos el documento con la cabecera ltH1gt que definiraacute el titulo luego para los apartados principales utilizaremos la cabecera ltH2gt para subapartados ltH3gt etc Utilizaacutendolas asiacute de forma consecutiva Sin embargo podremos utilizar cualquier cabecera en el punto que queramos del documento para resaltar cualquier texto El modo en que se presentan las cabeceras pueden variar de un navegador a otro y solo se puede asegurar que se mostraraacute de distinta forma en orden de importancia Lo normal es que la ltH1gt sea negrita y muy grande ltH2gt negrita y grande ltH3gt itaacutelica y grande

ltHn ALIGN=CENTERgt Alineacioacuten de la

cabecera Puede presentar un atributo que especificaraacute que

la cabecera se mostraraacute centrada ALIGN=CENTER La forma de expresarlo seraacute ltH1 ALIGN=CENTERgtEste texto apareceraacute

resaltado y centradoltH1gt

Tamantildeo y Color de las fuentes de caracteres

Utilidad En el apartado anterior se vio el modo de definir

los distintos tiacutetulos de documento mediante cabeceras Estas son poco flexibles y predeterminadas

Existe otra etiqueta HTML que permite una maacutes

sencilla adaptacioacuten del tamantildeo de las fuentes y permite ademaacutes modificar su color

Con esta podremos incluir texto resaltado en

medio de una frase con las cabeceras no es posible ya que estas introducen automaacuteticamente un salto de liacutenea detraacutes y permitiraacute incluir paacuterrafos de distintos tamantildeos o colores proporcionando una mayor versatilidad y pudiendo crear efectos maacutes espectaculares

La etiqueta que permite esto se llama FONT y

presenta atributos que nos permiten modificar el tamantildeo y color del texto incluido entre la etiqueta de inicio y fin

ltFONT SIZE=ngt Tamantildeo de la fuente El atributo SIZE permite indicar el tamantildeo de la

fuente su valor puede estar entre 1 y 7 Incrementaacutendose de tamantildeo progresivamente desde 1 que es la fuente de menor tamantildeo hasta 7 que la fuente de mayor tamantildeo El texto normal equivale a la fuente de tamantildeo 3 por tanto

los valores menores que 3 seraacuten fuentes maacutes pequentildeas que el texto normal y las mayores que 3 seraacuten de mayor tamantildeo

El tamantildeo tambieacuten puede indicarse de forma

relativa indicando el incremento o detrimento a partir de la fuente base Por defecto la fuente base seraacute 3 por tanto si se indica como valor +1 la fuente seraacute de tamantildeo 4

Existe una etiqueta que redefine la fuente por

defecto esta etiqueta es ltBASEFONT SIZE gt Los elementos de tamantildeo de fuentes pueden ser

definidos para todo un documento teniendo validez dentro de elementos tales como listas y formularios pero no tendraacuten validez global en las tablas debiendo definir cada una de las celdas al tamantildeo de fuente deseado

Ejemplos de tamantildeos de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=2gt Muestra ltFONTgt

Muestra Obtendriacuteamos en este caso texto de tamantildeo de fuente 2

ltFONT SIZE=6gt Muestra ltFONTgt

Muestra

Este texto es de tamantildeo de fuente 6

ltFONT SIZE=-1gt Muestra ltFONTgt

Muestra

Obtendriacuteamos tambieacuten en este caso texto de tamantildeo de fuente 2 pero lo definiriacuteamos de forma relativa 3-1=2

ltFONT SIZE=+2gt Muestra ltFONTgt

Muestra

Asiacute definiriacuteamos fuente de tamantildeo 6 de forma relativa 3+2=5

ltFONT SIZE=6gt Muestra ltFONT SIZE=1gt Muestra ltFONTgt Muestra ltFONTgt

Muestra Muestra Muestra

Se pueden combinar en una misma frase varios tamantildeos de fuentes

ltFONT SIZE=4gt Muestra ltBgt ltIgt lt A HREF=httpwwwucaesgt Muestra ltAgt ltIgt Muestra ltBgt ltFONTgt

Muestra Muestra Muestra

Se pueden combinar con elementos de resalte e hiperenlaces

ltBASEFONT SIZE=ngt Fuente por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 140

Definiraacute el tamantildeo de la fuente que se consideraraacute como base para definir los tamantildeos de fuente relativos

Esta etiqueta no define el tamantildeo de la fuente por

defecto para el texto normal y solo se usa para caacutelculos de tamantildeo de fuente relativos La utilidad no es muy amplia y se podriacutea utilizar cuando en un documento en el que todos los tamantildeos esteacuten definidos de forma relativa y se desee cambiar de forma global el tamantildeo de las fuentes

Si no incluye esta etiqueta el valor base para estos

caacutelculos es 3 con esta se puede variar como se ve en el ejemplo

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT SIZE=-2gt Muestra ltFONTgt

ltBASEFONT SIZE=5gt

ltFONT SIZE=-2gt Muestra ltFONTgt

Muestra Muestra

El nuevo valor para el calculo del tamantildeo relativo seraacute 6 notaacutendose el efecto en el tamantildeo de las fuentes

ltFONT COLOR=texto color oacute rrvvaagt Color de

la fuente El atributo COLOR nos permite definir el color que

tendraacute el texto incluido entre las etiquetas de inicio y fin Este atributo solo funciona en el Internet Explorer de Microsoft y en el Netscape versioacuten 20 o superior

Este atributo puede ser definido de forma conjunta

con el atributo SIZE o de forma independiente siendo atributos de la misma etiqueta Si se define el atributo SIZE solo el color del texto que define seraacute el por defecto si se define con la etiqueta COLOR solo el tamantildeo seraacute el de la fuente base

El cambio de color no afectaraacute al texto o

elementos incluidos en un hiperenlace utilizaacutendose para estos el color por defecto definido en la etiqueta BODY

Ejemplos de definicioacuten de colores de fuentes

Instruccioacuten HTML Muestra Explicacioacuten

ltFONT COLOR=FF00FFgt Muestra ltFONTgt

Muestra El texto se mostraraacute

ltFONT COLOR=AQUAgt Muestra ltFONTgt

Muestra Tambieacuten se puede utilizar uno de los colores predefinidos

ltFONT SIZE=5 COLOR=redgt Muestra ltFONTgt

Muestra Se puede combinar con el tamantildeo de fuente

ltFONT COLOR = NAVYgt Mue

Muestra Se pueden combinar varios colores en una

ltFONT SIZE=4 COLOR=BLUEgt str ltFONTgta ltFONTgt

misma frase o palabra

ltH3gt ltFONT COLOR=81426Egt MultIgtesltIgttra ltFONTgt ltH3gt

Muestra Pueden ser utilizados junto con otros elementos de resalte como cabeceras estilos fiacutesicos y loacutegicos etc

Estilos fiacutesicos y loacutegicos Como estilos definiremos los distintos efectos

que se pueden aplicar al texto normal Estos efectos son los resaltes (negrita cursiva subrayado etc ) que se pueden usar

En HTML existen dos grupos principales de

estilos los loacutegicos y los fiacutesicos Los fiacutesicos son aquellos que siempre causan un mismo efecto (negrita cursiva ) y los loacutegicos indicaraacuten un tipo de texto (cita nombre de persona) que por sus caracteriacutesticas tiene un modo de mostrarse propio

Se pueden utilizar ambos estilos para especificar

un mismo efecto por ejemplo para obtener una frase resaltada podemos usar el estilo fiacutesico (negrita) o el estilo loacutegico (STRONG) y en ambos casos el resultado puede ser el mismo

Es maacutes recomendado sin embargo utilizar el

estilo loacutegico ya que en este el modo en que se ven los distintos efectos puede ser definido por el usuario de forma que se pueda obtener una presentacioacuten personalizada Ademaacutes en un futuro los navegadores podriacutean antildeadir modos maacutes sofisticados de presentar los distintos estilos y si estaacuten definidos de forma loacutegica la adaptacioacuten es maacutes sencilla Y por uacuteltimo y maacutes importante al utilizar estilos loacutegicos el modo de escribir HTML se hace independiente de como se presentaraacute finalmente el texto se utilizaraacute el estilo seguacuten el tipo de texto que sea y no seguacuten como se debe presentar

La tendencia actual de los navegadores es el

uso de los estilos fiacutesicos olvidando un poco la versatilidad de los estilos loacutegicos pero sin embargo ambos estilos pueden ser usados indistintamente sin ninguacuten problema

Estilos Fiacutesicos El efecto se aplicaraacute al texto expresado entre la

etiquetas de inicio y fin Los estilos fiacutesicos son los siguientes

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 141

Etiqueta HTML Ejemplo Descripcioacuten

ltBgt Ejemplo Negrita

ltIgt Ejemplo Cursiva

ltTTgt Ejemplo

Maquina de escribir muestra una fuente de caracteres de espaciado fijo

ltBLINKgt Ejemplo Parpadeo

ltSUBgt Ejemplo Subiacutendice Para

Netscape 20+

ltSUPgt Ejemplo

Superiacutendice Para Netscape 20+

ltBIGgt Ejemplo

Texto grande se utilizaraacute el mayor tamantildeo de fuente Para Netscape 20+

ltSMALLgt Ejemplo

Texto pequentildeo se utilizaraacute la fuente de menor tamantildeo Para Netscape 20+

Los estilos se pueden combinar entre siacute

obteniendo cualquier efecto deseado

Ejemplo

Instruccioacuten HTML

Este texto es ltBgtnegrita ltIgtcursiva y ltBLINKgtparpadeante ltBLINKgtltIgtltBgt

Resultado Este texto es negrita cursiva y

parpadeante

Explicacioacuten El texto es por tramos negrita cursiva y

parpadeante

Estilos loacutegicos En este caso se definen las situaciones o tipos de

frases y estas tomaraacuten la representacioacuten maacutes adecuada a cada caso Estos estilos son

Etiqueta HTML Ejemplo Descripcioacuten

ltADDRESSgt Ejemplo

Se utilizaraacute para especificar direcciones de correo electroacutenico

ltBLOCKQUOTEgt Ejemplo

Introduce citas textuales o texto destacado en este caso el texto se separaraacute del texto circundante y se ajustaraacute a los maacutergenes derecho e izquierdo

ltCITEgt Ejemplo Indica el titulo de una

peliacutecula o un libro

ltCODEgt Ejemplo Coacutedigo fuente de un

lenguaje de programacioacuten

ltDFNgt Ejemplo Especifica una

definicioacuten

ltEMgt Ejemplo Indicaraacute eacutenfasis

ltKBDgt Ejemplo Texto introducido

desde el teclado

ltSAMPgt Ejemplo Mensajes de estado

de la computadora

ltSTRIKEgt Ejemplo Texto desechado

tachado

ltSTRONGgt Ejemplo Especificaraacute texto

resaltado

ltVARgt Ejemplo Indicaraacute una variable

Contesta las siguientes preguntas

1- Cual es el significado de HTML

2- Cual es la caracteriacutestica principal del

lenguaje HTML

3- Explica lo que es una etiqueta

4- Cual es la utilidad de las etiquetas de inicio

y fin

5- Explica lo que es un atributo de etiquetas

6- Que sucede si se escribe una etiqueta no

valida por HTML

7- Escribe el significado de URL

8- Explica porque son importantes las

extensiones de los archivos

9- Escribe la estructura baacutesica de un

documento HTML

10- Escribe como se presenta un comentario

en HTML

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 142

11- Como se delimita una cabecera en HTML

12- Escribe los elementos que pueden formar la

cabecera de un documento

13- Explica brevemente como se definen los

colores en HTML

14- Cual es la funcioacuten del atributo ltBODYgt

15- Como se define un cambio de paacuterrafo

16- Como se define un salto de liacutenea

17- Explica como se define un texto

Preformateado

18- Escribe como se definen espacios en

blanco

19- Explica como se representan caracteres

latinos y especiales

20- Explica en que consisten los seis tipos de

cabeceras en un documento HTML

21- Escribe como se define el tamantildeo de una

fuente

Definicioacuten de Listas en HTML El lenguaje HTML proporciona un modo sencillo

de representar elementos en forma de lista Dentro de una lista de puede incluir cualquiera de los elementos HTML e igualmente una lista puede incluirse dentro de formularios tablas etc

Existen principalmente tres tipos de listas las

listas no ordenadas las listas ordenadas y las listas de definiciones

ltULgt Listas no ordenadas Este tipo de lista se usan para enumerar

elementos que no tengan un orden definido Se especificaraacute con el elemento ltULgt todo lo que se incluya dentro de esta etiqueta y la de cierre formaraacute la lista Con los elementos ltLIgt se indicaraacuten cada uno de los componentes de la lista El formato es el siguiente

ltUL TYPE = DISK oacute CIRCLE oacute SQUARE gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento n ltULgt Para marcar los distintos elementos de la lista se

usaraacuten unos siacutembolos que pueden ser un disco (DISK) un circulo (CIRCLE) oacute un cuadrado (SQUARE) seleccionables con el atributo TYPE

Con la etiqueta ltLHgt definiremos el titulo de la

lista este es opcional y apareceraacute en la parte superior de esta Igualmente es posible definir listas de varios niveles que seraacute listas anidadas listas dentro de listas Y combinar este tipo de lista con las que se explicaraacuten en los proximos apartados

Ejemplos

Instruccioacuten HTML

ltUL gt ltLHgt Titulo ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltULgt

Resultado

Titulo I Elemento 1 II Elemento 2

Explicacioacuten

Este seraacute el caso baacutesico de lista no ordenada Se podraacuten incluir tantos elementos como se deseen y estos podraacuten ser texto normal texto resaltado con alguno de los estilos imaacutegenes etc

Instruccioacuten HTML

ltUL TYPE=SQUAREgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltUL TYPE=CIRCLEgt ltLIgt Elemento 31 ltLIgt Elemento 32 ltULgt ltLIgt Elemento 4 ltULgt

Resultado

III Elemento 1

IV Elemento 2

a Elemento 31

b Elemento 32

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 143

Explicacioacuten

Ahora definimos una lista anidada es decir una lista dentro de una lista basta con incluir el nuevo elemento

ltOLgt Listas ordenadas Estas listas seraacuten similares al caso anterior pero

en este se usa un nuacutemero para indicar el orden de cada elemento de la lista El ser ordenada no significa que ordene los elementos alfabeacuteticamente sino que los elementos guardan un orden que es el nuacutemero que indexa la lista

ltOL START = n TYPE = A oacute a oacute I oacute i oacute 0 gt ltLHgt Titulo de la lista ltLHgt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento nltOLgt El punto de comienzo siempre seraacute el 1 si no se

indica en START con otro valor de comienzo y el tipo de numeracioacuten puede seleccionarse con el atributo TYPE Sus posibles valores son

A Letras mayuacutesculas a Letras minuacutesculas I Nuacutemero romanos en mayuacutesculas i Nuacutemero romanos en minuacutesculas 0 Nuacutemeros (es por defecto por tanto no hay que

indicarlo)

Ejemplos

Instruccioacuten HTML

ltOL gt ltLIgt Elemento 1 ltLIgt Elemento 2 ltLIgt Elemento 3

ltOLgt

Resultado

1 Elemento 1 2 Elemento 2 3 Elemento 3

Explicacioacuten Este seraacute el caso baacutesico de lista

ordenada

Instruccioacuten HTML

ltOL TYPE=Igt ltLIgt Elemento 1 ltLIgt Elemento 2 ltOL TYPE=agt ltLIgt Elemento 31 ltLIgt Elemento 32 ltOLgt ltLIgt Elemento 4

ltOLgt

Resultado

I Elemento 1

II Elemento 2

aElemento 31

bElemento 32

III Elemento 4

Explicacioacuten

Ahora definimos una lista anidada y usamos distintos elementos para la numeracioacuten de las opciones

ltDLgt Listas de definiciones En esta lista existiraacuten dos elementos la definicioacuten

y el termino se usaraacute principalmente para listas en las que se incluiraacuten una palabra o frase y su definicioacuten (diccionario) El termino apareceraacute pegado en el borde izquierdo y la definicioacuten apareceraacute ligeramente tabulada a partir del borde izquierdo

Se puede usar de forma separada la definicioacuten y

el termino pudiendo por tanto incluir solo definiciones o solo teacuterminos El incluir solo teacuterminos podriacutea usarse para sangrar el comienzo de un paacuterrafo

ltDLgt ltLHgtTitulo de la lista ltLHgt ltDTgtTermino 1 ltDDgtDefinicioacuten 1 ltDTgtTermino 2 ltDDgtDefinicioacuten 2 ltDDgtTermino N ltDTgtDefinicioacuten N ltDLgt El titulo de las lista ltLHgt como en los casos

anteriores es opcional

Ejemplo

Instruccioacuten HTML

ltDLgt ltDTgt Coche ltDDgt Vehiacuteculo de cuatro ruedas ltDTgt Moto ltDDgt Vehiacuteculo de dos ruedas ltDLgt

Resultado

Coche Vehiacuteculo de cuatro ruedas

Moto Vehiacuteculo de dos ruedas

Explicacioacuten Como se ve se coloca en una posicioacuten la

definicioacuten y en otra el termino

Ejemplo

Instruccioacuten HTML

ltdlgt ltddgtltfont SIZE=+1gtltimg src=servicios iconosconfisgif align=middle border=0gt Conexioacuten a la RedltfontgtltAgtltdlgt ltddgtltA HREF=serviciosconecfisica Normativhtmlgtltimg src=httpwww2

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 144

ucaesiconos1redstargif align=middle border=0gt Normativa de conexioacuten a RedltAgt ltddgtltA HREF=serviciosconecfisicasoftware htmgtltimg rc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Instalacioacuten de Software de ComunicacionesltAgt ltddgtltA HREF=serviciossolicitudhtmgt ltimgsrc=httpwww2ucaesiconos1 redstargif align=middle border=0gt Solicitud de Servicios de ComunicacionesltAgt ltddgtltA HREF=serviciosconecfisica proxyhtmlgtltimg src=httpwww2uca esiconos1redstargif align=middle border=0gt Servidores ProxyltAgt ltdlgt ltddgtlta href=serviciosactuali-soft softwarehtmlgtltddgtltfont SIZE=+1gt ltimg src=httpwww2ucaesiconos icono541gif align=middle border=0gt Actualizacioacuten del Software de Comunicaciones ltfontgtltagtltpgt ltddgtltA NAME=correogtltddgtltfont SIZE=+1gtlta REF=httpwwwucaes servicioscorreocorreohtmgtltimg rc= serviciosiconosmailgif align =middle border=0gtMensajeriacutea Electroacutenica ltagtltfontgtltAgt ltdlgt ltddgtltA HREF=servicioscorreo prac-eudoraportadahtmlgtltimg src= httpwww2ucaesiconos1redstargif align=middle border=0gtManual Praacutectico de EudoraltAgt ltddgtltA HREF=servicioscorreo mensaje_instituhtmlgtltimgsrc=http www2ucaesiconos1redstargif align=middleborder =0gtMensajeriacutea InstitucionalltAgt ltdlgt

ltdlgt

Resultado

Conexioacuten a la Red

Normativa de conexioacuten a Red

Instalacioacuten de Software de Comunicaciones

Solicitud de Servicios de Comunicaciones

Servidores Proxy

Actualizacioacuten del Software de Comunicaciones

Mensajeriacutea Electroacutenica

Manual Praacutectico de Eudora

Mensajeriacutea Institucional

Explicacioacuten

En este ejemplo utilizaremos solo los elementos DD (definiciones) para crear un menu en el que se incluyen tanto imaacutegenes como texto La lista de definiciones se utiliza para mostrar el menuacute de forma correcta con sus correspondientes niveles y subniveles

Hiperenlaces Es la utilidad baacutesica del hipertexto permite

indicar zonas de texto o imaacutegenes que si son seleccionados por el lector del documento nos traslada a otros documentos HTML o otras zonas del documento actual

Para definir un hiperenlace podemos utilizar

cualquier elemento HTML no debe ser texto necesariamente podemos usar cabeceras (ltHngt) cualquiera de los estilos una imagen etc Un hiperenlace igualmente podraacute definirse dentro de cualquier elemento HTML listas paacuterrafos de texto tablas formularios

El texto del hiperenlace aparece normalmente

resaltado sobre el texto normal en azul y subrayado en el caso de las imaacutegenes si tienen definido un borde este apareceraacute resaltado en color azul La mayoriacutea de los navegadores cuando la zona por la que pasa el cursor es sensible este cambia de aspecto indicaacutendolo y en la parte baja de la pantalla se indica el hiperenlace que se activa al pulsar en esa zona Mediante los atributos de BODY es posible cambiar el color de los hiperenlaces

El texto que define el hiperenlace debe ser

clarificador sobre el documento al que referenciamos debemos evitar referencias especificas que hagan al texto poco legible Igualmente deberaacute concordar con el texto del paacuterrafo donde se englobe se debe evitar el uso de pulse aquiacute

ltA HREF=gt Hiperenlace Son los enlaces con documentos externos al

actual En este caso se indicaraacute una URL que definiraacute el documento al que se accede si se sigue el enlace La forma de indicarlo seraacute

ltA HREF=URL a la que se accedegtTexto del

HiperenlaceltAgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 145

El texto indicado entre las etiquetas de comienzo y de fin se presentaraacute de forma resaltada y en el caso de seleccionar este texto el documento actual cambiaraacute por el especificado en la URL

Igualmente se puede indicar una imagen como

enlace en este caso entre las etiquetas del hiperenlace indicamos la inclusioacuten de la imagen tambieacuten dentro de la etiqueta del hiperenlace se pueden incluir cualquiera de las etiquetas del lenguaje HTML para cambiar el aspecto del texto afectado por el hiperenlace Un ejemplo seriacutea

ltA HREF=URL a la que se accedegtltIMG

SRC=Imagengt y tambieacuten textoltAgt En este caso apareceraacute la imagen con el borde

resaltado para indicar que es un hiperenlace Ademas de enlaces con el servicio http podremos

utilizar cualquiera de los servicios de internet que se puede expresar en una URL Es posible por tanto indicar enlaces a servidores FTP servidores GOPHER o de NEWS indicando como URL aquella que identifica al servidor que queremos acceder

Es importante indicar el nombre completo de la

maquina a la que se accede es decir el nombre y el dominio Si se indica www las maquinas de la red local si podraacuten localizarlo pero para maquinas externas la referencia podriacutea ser a otra maquina Por tanto se debe indicar www2ucaes para asegurar que es accesible independientemente del lugar desde el que se conecte el cliente

Utilizaremos los hiperenlaces para dividir de forma

conveniente la informacioacuten Hay que evitar los documentos excesivamente largos estos se pueden dividir en distintos documentos a los que acceder por hiperenlaces a partir de un iacutendice

URL absolutas y relativas Para definir la URL podemos utilizar direcciones

absolutas o relativas Por direcciones absolutas entenderemos la URL completa es decir httpmaquinadominiocaminoarchivohtml En el caso de las relativas todo lo que no pongamos de la URL se tomaraacute de la URL del documento que contiene el hiperenlace por ejemplo si no indicamos el servidor se consideraraacute el actual y si solo indicamos un archivo html se consideraraacute que se encuentra en el servidor y directorio del documento que lo referencia

Una URL relativa comenzaraacute siempre por un

nombre de directorio o por un archivo ya que en este caso se asume que el servicio y el servidor - (httpmaquinadominio) - es el mismo del documento actual

Puede comenzar de alguna de las siguientes

formas

Por una barra que indica que el camino del archivo se especifica desde el directorio raiz del servidor

Por dos puntos y una barra significa subir en la estructura del directorio Se consideraraacute a partir del directorio anterior

Por un nombre de archivo o directorio considerandose este a partir del directorio actual

Algunos ejemplos seriacutean

Ejemplo

Nos encontramos en el documento httpwwwucaesvisitacadizhtml y en este se encuentran los siguientes hiperenlaces

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso se indica la URL completa por tanto no es relativa y no se podraacute utilizar ninguacuten dato de la posicioacuten actual

URL Relativa

ltA HREF=internetinternethtmlgt

URL que se activa

httpwwwucaesinternetinternethtml

Explicacioacuten

En este caso al no indicar el servidor tomaremos el servidor del documento donde estaba el hiperenlace wwwucaes y al comenzar la directorio por se indica que este se toma desde la raiacutez del servidor no siendo valido en este caso ninguacuten dato del directorio actual

URL Relativa

ltA HREF=bahiacadizhtmlgt

URL que se activa

httpwwwucaesvisitabahiacadizhtml

Explicacioacuten

En este caso el directorio se toma desde el directorio actual al no comenzar con la barra Como comienza con un directorio se considera que este se encuentra a partir del directorio donde estaacute el documento actual

URL Relativa

ltA HREF=bahiahtmlgt

URL que se activa

httpwwwucaesvisitabahiahtml

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 146

Explicacioacuten

En este caso solo se indica un archivo HTML Por tanto se considera que este archivo se encuentra en el mismo directorio del documento que lo referencia Considerando por tanto el mismo servidor y el mismo camino pero distinto directorio

Es una buena costumbre utilizar direcciones

relativas ademaacutes de ahorrar escritura permite que la paacutegina pueda ser cambiada de directorio o de servidor sin necesidad de cambiar todos los enlaces haciendo por tanto al documento maacutes portable

Como se vio en el capitulo dedicado a la cabecera

de un documento HTML la etiqueta BASE indica la direccioacuten por defecto en los enlaces esto tendraacute efecto en las URL relativas caso de indicarse se consideraraacute esta como direccioacuten base y no la actual del documento

ltA NAME=gt Elemento Ancla Sirve para indicar puntos de un documento que

son accesibles directamente Marcaraacute las distintas zonas de un documento La forma de indicarlo es

ltA NAME=Id del anclagtTexto del anclaltAgt A cada ancla se le daraacute un nombre distinto que

seraacute el que se utilice luego para referenciarlo El texto que define a la etiqueta no tendraacute ninguacuten tipo de resalte y solo se utiliza como punto de destino del hiperenlace

La forma de especificar un enlace que acceda a

un punto determinado del mismo documento es ltA HREF=Id del anclagtTexto del enlace al

anclaltAgt Seraacute un enlace a la zona del documento actual

que se habiacutea marcado con la etiqueta indicada Tambieacuten es posible acceder a un ancla de un documento externo de la forma

ltA HREF=Direccioacuten URLId del anclagtTexto

del enlace al anclaltAgt De esta forma se podraacute acceder a puntos

determinados o secciones de un documento de forma directa

La utilidad principal es la creacioacuten de iacutendices en

documentos largos al comienzo del documento se especifica el iacutendice con enlaces a las distintas anclas y dentro del documento se indica el comienzo de cada apartado con el ancla que lo define

Imaacutegenes en los documentos HTML Una de las caracteriacutesticas principales del lenguaje

HTML y de la www es la introduccioacuten de elementos

multimedia en este apartado veremos como introducir graacuteficos y archivos de imaacutegenes en un documento HTML

En un documento HTML se puede incluir

cualquier imagen en alguno de los siguientes formatos graacuteficos GIF JPEG oacute XBM El formato maacutes extendido y practico es el GIF todos los navegadores graacuteficos de la Web soportan este formato ademaacutes existen gran cantidad de programas de tratamiento de graacuteficos que permiten grabar los graacuteficos o convertir graacuteficos a GIF Este formato asiacute mismo utiliza algoritmos de compresioacuten que hacen que sus archivos sean de corto tamantildeo y apropiados para su transmisioacuten por la red

El formato GIF es maacutes recomendado para

iconos graacuteficas y el formato JPEG es maacutes uacutetil para imaacutegenes reales como paisajes personas

Para poder utilizar otro formato graacutefico

necesitaraacute usar un enlace cuyo destino sea el archivo del graacutefico Al seguir el enlace se le pediraacute que indique un programa externo que se encargue de mostrar los archivos de ese formato graacutefico por lo tanto no pueden insertarse dentro de documentos HTML

Existe unos casos especiales en las imagenes

GIF que son las imaacutegenes transparentes y las imaacutegenes animadas

ltIMG SRC=gt Inclusioacuten de Imaacutegenes La etiqueta encargada de mostrar imaacutegenes en

HTML es IMG y tiene el siguiente formato ltIMG SRC=URL de la Imagen ALT=Texto

alternativo a la imagengt En el punto del archivo HTML en el que

queramos que se muestre la imagen incluimos esta etiqueta Se puede mostrar la imagen al comienzo del documento al final o intercalada en el texto Igualmente se puede insertar una imagen dentro de cualquiera de las estructuras del lenguaje HTML como listas tablas o formularios Esta etiqueta no necesita la etiqueta de fin ya que el efecto de la etiqueta no su produce sobre un texto o alguacuten elemento HTML

El atributo SRC indica el archivo de imagen que

se incluiraacute en el documento Se indicaraacute el camino hasta la imagen en formato URL el archivo de la imagen deberaacute tener una extensioacuten apropiada a su formato por ejemplo si es GIF la extensioacuten seraacute gif si es JPEG la extensioacuten seraacute jpg o jpeg si no se cumple esto la imagen no se mostraraacute de forma correcta

Al definir la imagen como una URL esta imagen

no es necesario que se encuentre en el servidor local pudiendo especificar el camino completo y el servidor donde se encuentra la imagen En este caso al igual que en los hiperenlaces es posible indicar direcciones de

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 147

URL relativas al documentos actual como se vio en el apartado anterior

Lo normal es referenciar una imagen que se

encuentre en el servidor local ya que el acceso a imaacutegenes en servidores externos puede ser maacutes lento Por tanto conviene copiar las imaacutegenes e iconos que se usen al servidor local

A continuacioacuten se explica la utilidad de cada unos

de los atributos de la etiqueta IMG

ltIMG ALT=gt Texto alternativo

El atributo ALT indicaraacute un texto alternativo a mostrar si no fue posible mostrar la imagen Se usa para navegadores que no permitan mostrar imaacutegenes sean solo texto o tenga inhabilitado el mostrar imaacutegenes Se recomienda cuando existan en el documento imaacutegenes usadas como botones para mostrar un texto en vez del botoacuten en navegadores que no puedan mostrar graacuteficos de esta forma se consigue que todos los usuarios puedan consultar sus paacuteginas

ltIMG ALIGN=gt Alineacioacuten de la imagen Indica como se alinea el texto que sigue a la

imaacutegen con respecto a esta Indicaraacute si la primera frase del texto se colocaraacute en la parte alta de la imaacutegen TOP en el punto medio de la imagen MIDDLE o en la parte de abajo de la imaacutegen BOTTOM

Tambien se pueden utilizar alineaciones un poco

maacutes avanzada TEXTTOP se alinea justo al comienzo del texto maacutes alto de la liacutenea (TOP se alinea al tamantildeo del primer caraacutecter de la liacutenea) ABSMIDDLE es el centro real de la imagen con MIDDLE se coloca el texto a partir del punto medio con ABSMIDDLE el texto aparece centrado con la imagen ABSBOTTOM coloca el texto justo al final de la imagen Se recomienda que se usen estos uacuteltimos al ser maacutes precisa la alineacioacuten aunque solo son validos para los navegadores maacutes avanzados

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=TOPgt ltBgt Numero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten

Como se ve solo aparece la primera frase alineada en la parte alta (TOP) de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=MIDDLEgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este caso el texto estaacute alineado en la

parte central de la imagen

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=BOTTOMgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten El texto estaacute alineado en la parte baja de

la imaacutegen

En los casos anteriores solo se especifica donde

se coloca la primera liacutenea del texto y el resto se incluyen debajo de la imaacutegen quedando un efecto muy feo cuando el texto tiene maacutes de una liacutenea Existen otras alineaciones que incluiraacuten a la imaacutegen insertada dentro del texto La imaacutegen puede quedar a la izquierda LEFT o a la derecha RIGHT No se podraacute utilizar en combinacioacuten con las anteriores alineaciones

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=LEFTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 148

Resultado

Numero de Telefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este

manual

Explicacioacuten

En este caso aparece la imagen insertada en el texto de forma que esta se integra en paacuterrafo que la rodea al contrario que en los casos anteriores

Instruccioacuten HTML

ltIMG SRC=iconos1phone5gif ALIGN=RIGHTgtltBgtNumero de TelefonoltBgt En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Resultado

Numero de Teleacutefono En este apartado se indica el nuacutemero de teleacutefono que puede utilizar si tiene cualquier duda o pregunta que hacer sobre este manual

Explicacioacuten En este ejemplo aparece la imagen

alineada a la derecha

ltIMG BODER=gt Borde de la imagen Indicaraacute el tamantildeo del borde de la imagen si la

imagen se encuentra dentro de un hiperenlace el borde de esta seraacute del color apropiado para indicarlo en caso contrario el borde seraacute invisible Si se desea que no se muestre el borde cuando la imagen sea un enlace se usaraacute BORDER=0

Ejemplos

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gifgtltAgt

Resultado

Explicacioacuten

Como se ve si no se indica nada se muestra un borde entorno a la imagen que activa el hiperenlace

Instruccioacuten HTML

ltA HREF=imageneshtmgtltIMG SRC=iconos1q_mark3gif BORDER=0gtltAgt

Resultado

Explicacioacuten

Con el atributo BORDER al valor 0 no se muestra este borde entorno a la imagen que sirve de hiperenlace

ltIMG HEIGHT= WIDTH=gt Tamantildeo de

la imagen Es posible cambiar el tamantildeo de la imaacutegen de

forma que pueda ajustarse como se desee pudiendo ampliar o disminuir este

El atributo HEIGHT Determina el alto de la

imagen a mostrar se especifica en puntos de la pantalla (pixeles) o en tanto por ciento sobre el tamantildeo del documento En caso de que la imagen sea mayor o menor se escalaraacute a este tamantildeo

El atributo WIDTH indica el ancho al que se

mostraraacute la imagen escalaacutendola a este tamantildeo Tambieacuten se expresaraacute en pixeles o en tanto por ciento

No es necesario indicar el ancho y el alto se

puede especificar solo uno de las dimensiones ajustaacutendose la otra a la proporcioacuten de la imagen Es recomendable indicar solo uno de estos paraacutemetros para que la imaacutegen no se muestre deformada Igualmente se debe usar el valor relativo en tanto por ciento si se desea que la imaacutegen guarde siempre una misma proporcioacuten con respecto al texto Si se desea mostrar dos imaacutegenes y queremos que una ocupe un cuarto de la pantalla y la otra el espacio restante se indica en una el ancho (WIDTH) del 25 y en la otra del 74 no indicando en ninguacuten caso el alto (HEIGHT) de esta forma independientemente como sea el tamantildeo de la ventana del navegador e independientemente del monitor del cliente siempre se podraacuten mostrar ambas imaacutegenes en la misma liacutenea

Ejemplos

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=100 HEIGHT=25gt

Resultado

Explicacioacuten

Si no se indican bien ambos valores teniendo en cuenta la proporcioacuten de la imagen esta puede aparecer deformada

Instruccioacuten HTML

ltIMG SRC=iconos1worldgif WIDTH=75gt

Resultado

Explicacioacuten

En este se ve como al indicar uno solo de los paraacutemetros el otro se ajusta apropiadamente a la proporcioacuten de la imagen

Instruccioacuten HTML

ltIMG SRC=imagenesobra_anigif ALIGN=MIDDLE WIDTH=9gt ltIMG SRC=barras1constrgif WIDTH=89gt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 149

Resultado

Explicacioacuten

Si varia el tamantildeo de la ventana de su navegador comprobaraacute que el tamantildeo de las imaacutegenes cambia pero guardan la misma proporcioacuten el obrero ocupa un 9 de la ventana y la barra el 86 restante Y siempre se mostraraacuten ambas imaacutegenes en la misma liacutenea

ltIMG HSPACE= VSPACE=gt Espaciado de

separacioacuten de la imagen

El atributo HSPACE indica el espaciado horizontal que debe separar a la imagen del texto o cualquier otro elemento circundante Se especificaraacute en puntos Es similar a BORDER pero en este caso el margen no se destaca en el caso de los hiperenlaces y ademaacutes es posible indicar separadamente el margen horizontal y el vertical Con el atributo VSPACE se indica el margen vertical

Ejemplo

Instruccioacuten HTML

ltIMG SRC=iconos1pr_stargifgtltIMG SRC=iconos1or__stargifgt ltIMG SRC=iconos1pr_stargif HSPACE=100gtltIMG SRC=iconos1or__stargifgt

Resultado

Explicacioacuten

Como se ve en el segundo caso las imaacutegenes aparecen separadas 100 puntos El espaciado es igual a la derecha que a la izquierda por tanto tambieacuten aparece la imagen separada del borde

Imaacutegenes Sensibles Una de las caracteriacutesticas principales del lenguaje

HTML es la posibilidad de crear imaacutegenes sensibles o mapeadas que son imaacutegenes en las que se definen diversas zonas que activan distintos hiperenlaces al pulsar con el cursor sobre una de estas zonas activaremos el hiperenlace que la define La imaacutegen se dividiraacute en distintas aacutereas que definiraacuten documentos a los que es posible acceder

Para crear una imagen sensible seraacute necesaria la

especificacioacuten de las distintas aacutereas de la imagen y los enlaces que activaran cada una de ellas Esto se puede hacer a mano indicando las coordenadas o bien lo normal es utilizar alguacuten programa Existen programas que permiten la definicioacuten de las imaacutegenes sensibles en estos

se presentaraacute la imagen en pantalla y mediante un puntero se podraacuten ir indicando las distintas zonas Estas zonas podraacuten ser rectaacutengulo circulo liacutenea poligonal o un punto A cada una de estas zonas le asignamos una URL que seraacute la que se active cuando se pulse en esa zona determinada Con este programa crearemos un archivo con la extensioacuten map que seraacute el que defina el mapa de la imagen

El contenido normal de este tipo de archivos

seraacuten liacuteneas del estilo figura_geomeacutetrica URL coord1 coord2 coordn Donde figura_geomeacutetrica podraacute ser una de

default Indicaraacute la accioacuten a realizar si se pulsa en un lugar no definido en el mapeado

circle Definiraacute un circulo En un servidor del NCSA las coordenadas se definen el centro del circulo y un punto externo (que es el caso de nuestro servidor) en uno del CERN se definiraacute el centro del circulo y el radio

poly Una liacutenea poligonal de a lo sumo 100 veacutertices Se definiraacute tantas coordenadas como veacutertices formen la liacutenea poligonal y no seraacute necesario cerrar la figura

rect Definiraacute un rectaacutengulo Las coordenadas indicaremos el veacutertice de la esquina superior izquierda y la esquina inferior derecha

point Indicaraacute un punto Si en la figura se definen diversos puntos se activaraacute el enlace del punto maacutes cercano al lugar donde se pulso en la imagen

La URL del enlace podraacute ser una local que debe

empezar desde el directorio raiacutez no vale relativa o bien indicar la URL completa

Las coordenadas seraacuten pares x e y separados

por comas Hay que tener en cuenta que las figuras que

definen las zonas no deben solaparse ya que un punto de las imaacutegenes no puede activar dos enlaces En caso que se solapen se utilizaraacute la que estuviera definida en primer lugar en el archivo del mapa

Si se utiliza la directiva point no tiene sentido

definir la URL por defecto default ya que siempre el lugar donde se pulse estaraacute maacutes proacuteximo a un punto En otro caso siempre seraacute necesario indicar la direccioacuten por defecto salvo que el mapeado cubra toda la imagen ya que si no se define en caso de pulsar en un lugar sin mapear produciraacute un error

Existen navegadores los maacutes antiguos y

programas de indexacioacuten los robots de busqueda maacutes extendidos (lycos excite etc ) que no pueden seguir los enlaces que se encuentran en una imagen sensible Por tanto se recomienda incluir en formato texto en la parte baja de la imaacutegen los enlaces que se activan con la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 150

imagen sensible De esta forma los documentos enlazados se pueden activar de las dos maneras

ISMAP como referenciar la imagen sensible Una vez creado el archivo que mapearaacute la imagen

solo queda referenciarlo en el documento HTML Para ello debemos definir la imagen y el enlace que se efectuaraacute Existe dos formas

En los antiguos servidores que no permiten

soporte interno a imaacutegenes sensibles

ltA HREF=httpwww2ucaescgi-binimagemapcamino _hasta- _el_mapaarchivo_mapamapgtltIMG SRC= camino_imagen_sensiblegif ISMAPgtltAgt

En el primer caso la parte primera define el

programa que trata la imagen sensible httpwww2ucaescgi-binimagemap la segunda parte especifica el archivo que mapea la imagen camino_hasta_el_mapaarchivo_mapamap Dentro del hiperenlace se incluye la referencia de la imagen con el atributo ISMAP para indicar que se trata de una imagen sensible

En los servidores que poseen soporte interno de imaacutegenes sensibles

En este caso no es necesario poner el camino al

programa imagemap sino solo la referencia al archivo del mapa El mismo graacutefico se referencia asiacute

ltA HREF=camino_hasta_el_mapaarchivo_mapaMap gt ltIMG SRC=camino_imagen_sensiblegif ISMAPgt ltAgt

El atributo ISMAP en la imagen es importante al

igual que la extensioacuten map del archivo que mapea la imagen

El segundo caso es maacutes raacutepido ya que es el

servidor el que se encarga de determinar las distintas zonas del mapa e indicar el enlace que se debe seguir en lugar de llamar al programa imagemap para que lo trate Dependiendo del servidor instalado usaremos uno u otro meacutetodo en nuestro caso usaremos el segundo

Imaacutegenes sensibles definidas desde el cliente En el caso anterior la interpretacioacuten del mapa de la

imagen sensible correspondiacutea al servidor por tanto cuando el usuario pulsa sobre una imaacutegen sensible las coordenadas se pasan al servidor y este se encarga de comprobar usando el archivo que mapeaba la imaacutegen Por tanto para activar un enlace hariacutea falta enviar los datos al servidor del punto donde se ha pulsado y que este indique el enlace que se activa lo cual hace la consulta un poco maacutes lenta Y ademaacutes a priori no es posible saber que zonas son sensibles y cuales no ni tampoco que enlace se activa en cada zona Para solucionar esto se introdujo la posibilidad de crear imaacutegenes sensibles definidas desde el cliente de esta forma es el cliente (su navegador de la www) el que interpreta la imaacutegen sensible y puede mostrar

los enlaces que se activan en cada zona y que zonas son sensibles y cuales no En este caso no es necesario indicar el documento por defecto ya que solo se podraacuten activar las zonas uacutetiles de la imaacutegen

Existe una nueva etiqueta HTML que permite

definir estas imaacutegenes sensibles interpretadas desde el cliente su formato es el siguiente

ltMAP NAME=nombregt

ltAREA SHAPE=RECT COORDS=x11y11x12 y12 href=URLgt ltAREA SHAPE=RECT COORDS=x21y21x22y22 href=URLgt ltAREA SHAPE=RECT COORDS=xn1yn1xn2yn2 href=URLgt ltMAPgt

Cada una de las liacuteneas con la etiqueta AREA

definen una zona sensible Actualmente solo es posible definir zonas sensibles delimitadas por rectaacutengulos no pudiendo definir otras Con el atributo COORDS se definen las coordenadas de la zona sensible estas seraacuten la coordenada del primer veacutertice xi1 yi1 y la coordenada del veacutertice opuesto xi2 yi2 La etiqueta HREF indica la URL que se activa con esta zona sensible

La forma de referenciarlo es utilizando el atributo

USEMAP indicando el mapa a usar cuando se defina la imaacutegen la forma seraacute

ltIMG SRC= USEMAP=nombre gt

Como nombre utilizaremos el nombre que se le

dio al mapa su definicioacuten Esta etiqueta solo es soportada por los

navegadores maacutes modernos Internet Explorer de Microsoft y el Netscape 20 por tanto los navegadores antiguos no podriacutean interpretar este tipo de mapas sin embargo es posible utilizar ambas formas de definicioacuten a la vez permitiendo que el mapa sea interpretado por todos los navegadores la forma seraacute

ltA HREF=mapamapgtltIMG SRC= ISMAP USEMAP =nombre gtltAgt

De esta forma si el navegador entiende la

etiqueta USEMAP lo interpreta como un mapa sensible definido en el cliente en caso contrario se interpreta como un mapa sensible normal y que debe ser interpretado por el servidor

Creacioacuten de una Imagen sensible En este apartado se explicaraacute paso a paso la

creacioacuten de una imaacutegen sensible Para ello se utilizaraacute el programa maacutes baacutesico para ello mapedit que se incluye en el Paquete Baacutesico para la Creacioacuten de documentos HTML

Al iniciar el programa seleccionaremos File -gt

OpenCreate y apareceraacute la ventana que se muestra en el grafico adjunto En esta indicaremos el nombre del archivo que definiraacute el mapa de la imaacutegen (Map File) que deberaacute tener la extensioacuten map este seraacute el archivo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 151

que habraacute que transferir al servidor para referenciar la imaacutegen sensible lo llameremos ejemplomap en el apartado siguiente indicaremos el archivo GIF sobre el que se aplicaraacute la imaacutegen sensible (GIF Filename)

Una vez cargada la imaacutegen obtenemos la

siguiente pantalla

En la que se muestra la imaacutegen y sobre la que seraacute posible ya definir las zonas sensibles de la imaacutegen en el menuacute Tools estan expresadas todas las figuras que se pueden utilizar en la imaacutegen estas son Polygon para una liacutenea poligonal Circle para definir un circulo y Rectangle define un rectaacutengulo

Para seleccionar cada una de las zonas del dibujo seleccionaremos las figura correspondiente en nuestro caso seraacute Rectangle una vez hecho esto nos situaremos en el primer vertice y pulsaremos el botoacuten izquierdo del ratoacuten fijando el primer vertice luego arrastraremos hasta situarnos en el vertice opuesto y ahiacute pulsaremos el botoacuten derecho del ratoacuten y obtendremos la siguiente ventana en la que nos seraacute posible introducir al URL que activaraacute esta zona

Definir una linea poligonal seraacute similar pero en

este caso marcaremos con el botoacuten izquierdo del ratoacuten todos los puntos que forman el poliacutegono y cuando lleguemos a su fin pulsaremos el botoacuten derecho del ratoacuten y podremos introducir la URL la liacutenea poligonal no seraacute necesario terminarla uniendose automaacuteticamente el primer y uacuteltimo vertice

Una vez que definamos todas las zonas

sensibles de la imaacutegen podemos utilizar la opcioacuten Test+Edit que nos permiraacute probar y en su caso editar las distintas zonas de la imaacutegen obteniendo un muestra de la zona activa como se ve en la imaacutegen

La opcioacuten para definir la URL por defecto es decir la que se activaraacute cuando no se pulse sobre ninguna de las zonas definidas seraacute File -gt Edit Default URL

Una vez definidas todas las zonas de la imaacutegen

y la URL por defecto podremos grabar el mapa de la imaacutegen sensible con File -gt Save

Obteniendo una archivo map con el siguiente

contenido

default httpwww2ucaesmanual-htmlpruebanoimagenhtm rect httpwww2ucaesmanual-htmlpruebaboton1htm 810 6163 rect httpwww2ucaesmanual-htmlpruebaboton2htm 6210 13436

rect httpwww2ucaesmanual-htmlpruebaboton3htm 6236 13464

Este archivo se transferiraacute al servidor y como se

vioacute en con anterioridad existiraacuten dos formas de referenciarlo

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 152

Imagen sensible interpretada por el servidor

Instruccioacuten HTML

ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAPgt ltAgt

Resultado

Explicacioacuten

Como se ve pulsando en las distintas zonas de la imagen se activan los enlaces correspondientes pero no hay forma de saber que zonas son sensibles y que enlaces se activan en cada zona

Imagen sensible interpretada por el cliente

Instruccioacuten HTML

ltMAP NAME=ejemplogt ltAREA SHAPE=RECT COORDS=8106163 HREF=httpwww2ucaesmanual-htmlpruebaboton1htm gt ltAREA SHAPE=RECT COORDS=621013436 HREF=httpwww2ucaesmanual-htmlpruebaboton2htm gt ltAREA SHAPE=RECT COORDS=623613464 HREF=httpwww2ucaesmanual-htmlpruebaboton3htm gt ltMAPgt

ltCENTERgt ltA HREF=ejemplomapgtltIMG SRC=imgmapgif ISMAP USEMAP=ejemplogt ltAgt ltPgt [ ltA HREF=httpwww2ucaesmanual-htmlpruebaboton1htmgtboton 1 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton2htmgtboton 2 ltAgt | ltA HREF=httpwww2ucaesmanual-htmlpruebaboton3htmgtboton 3 ltAgt] ltCENTERgt

Resultado

[boton 1 | boton 2 | boton 3]

Explicacioacuten

En este caso la definicioacuten es maacutes larga pero si su navegador es el Internet Explorer o el Netscape 20 notaraacute que este es capaz de identificar las zonas sensibles de la imagen y muestra en la parte inferior de la ventana los enlaces que se activan cuando se pulsa en cada zona Ademaacutes es maacutes raacutepida la identificacioacuten de que enlace se activa en

cada zona En este caso no hay que definir URL por

Insercioacuten de elementos multimedia Como se ha explicado hasta ahora las

posibilidades multimedia del lenguaje HTML se limita a insertar imaacutegenes dentro de un texto mostrar un fondo en el documentos y modificar los colores que presentaraacuten los distintos textos Con las instrucciones baacutesicas de HTML que hemos visto hasta ahora esto es lo maacuteximo que se puede conseguir la posibilidad de mostrar viacutedeo o sonido en un documento HTML esta limitada a la capacidad y a la configuracioacuten del navegador

La forma baacutesica de incluir un archivo de un

formato no reconocido por el navegador es incluirlo en un hiperenlace de forma que cuando el usuario siga el hiperenlace el programa navegador llame a una aplicacioacuten externa que trate este tipo de archivos El navegador tendraacute definida una lista aplicaciones que trabajaraacuten con los formatos maacutes comunes de archivo de viacutedeo audio o imaacutegenes Esta opcioacuten es poco operativa ya que no podriacutean incluirse en el documento actual

El Internet Explorer de Microsoft incluye una

serie de etiquetas y atributos que permiten el uso de elementos multimedia pero no es estaacutendar y se puede asegurar que no seraacute posible verlos en maquinas distintas a los PC con windows ni en navegadores distintos a este

Otra aproximacioacuten la ha realizado Netscape con

la inclusioacuten de los Plug-ins estos son programas que se antildeaden al navegador de Netscape versioacuten 20 y permiten tratar diversos tipos de archivos de esta forma podraacute insertarse estos tipos de archivos dentro de una paacutegina HTML permitiendo mostrar viacutedeo en distintos formatos (mpeg avi mov) interpretar sonido en varios formatos (au mid ) incluir archivos de Adobe Acrobat (pdf) mostrar archivos VRML etc El principal problema es que estos plug-in no son estaacutendar ni estaacuten realizados por el mismo fabricante ni son todos de libre distribucioacuten y ademaacutes solo son validos hasta ahora en PCacutes con windows Ademaacutes la correcta visioacuten del documento dependeraacute de que el usuario disponga del plug-in correspondiente instalado En la uacuteltima versioacuten de Netscape (30 aunque todaviacutea es beta) se incluyen por defecto plug-inacutes para audio viacutedeo y VRML por lo tanto cuando se extienda el uso de este navegador se podriacutea asegurar la reproduccioacuten de este tipo de archivos

Sonido Un documento HTML puede tener sonidos

incorporados ya sea como fondo sonoro que se ejecute automaacuteticamente al cargar la paacutegina o como opcioacuten para que la ejecute el usuario

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 153

Para reproducir archivos de sonido se emplean las siguientes etiquetas

ltBGSOUNDgt

Esta etiqueta soacutelo la reconoce MS Internet

Explorer El archivo de sonido se ejecuta al ser cargada la paacutegina

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

LOOP= N

Indica el nuacutemero de veces que se debe ejecutar el archivo de sonido Si se pone -1 o INFINITE el

archivo se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo se ejecuta una vez

ltEMBEDgt

Esta etiqueta es para Netscape Navigator (aunque

las uacuteltimas versiones de MS Internet Explorer ya la reconocen) Para que los archivos puedan reproducirse los formatos WAV MID etc han de estar configurados como MIME en el servidor en el que esteacute la paacutegina que los tenga incorporados

Atributo Paraacutemetros Descripcioacuten

SRC= archivo_sonido

Indica el nombre del archivo de sonido y su direccioacuten en caso de estar eacuteste en otro directorio

WIDTH= x

Representan las medidas de la consola que aparece en pantalla para reproducir el archivo (para ello se ha de tener instalado alguacuten plug-in de sonido las medidas de la consola variacutean de un plug-in a otro)

HEIGHT= y

HIDDEN= TRUE

Reproduce el sonido sin que aparezca en pantalla la consola de reproduccioacuten

AUTOSTART= TRUE

Ejecuta el archivo de sonido automaacuteticamente al cargar la paacutegina (es

obligatorio si la consola no se ve)

FALSE El archivo de sonido

no se ejecuta

LOOP= n

Ejecuta el archivo de sonido el nuacutemero de veces indicado si se pone TRUE el sonido se ejecutaraacute ininterrumpidamente Si se omite el archivo soacutelo

Para que tanto los usuarios de Explorer como

los de Navigator escuchen los sonidos de fondo se han de poner las dos etiquetas ya que Explorer ignoraraacute la correspondiente a Navigator y viceversa Ejemplos

Ejecucioacuten del archivo de sonido como fondo

sonoro al ser cargada la paacutegina

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltBGSOUND SRC=sonidowavgt

Ejecucioacuten ininterrumpida del archivo de sonido

ltEMBED SRC=sonidowav WIDTH=200 HEIGHT=50 AUTOSTART=TRUE LOOP=TRUE HIDDEN= TRUEgt ltBGSOUND SRC=sonidowav LOOP=INFINITEgt

En este caso para Netscape es necesario

indicar las dimensiones de la consola (aunque en pantalla no se vea)

Como las versiones recientes de Internet

Explorer (a partir de la 40) reconocen la etiqueta ltEMBEDgt se debe emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para poner dentro de ella la etiqueta ltBGSOUNDgt y evitar de esta forma que el archivo de sonido se ejecute dos veces seguidas es decir

ltEMBED SRC=sonidowav HIDDEN=TRUE AUTOSTART=TRUEgt ltNOEMBEDgt ltBGSOUND SRC=sonidowavgt ltNOEMBEDgt

Cuando se carga la paacutegina con una versioacuten

anterior a la 40 las etiquetas ltEMBEDgt y ltNOEMBEDgtltNOEMBEDgt seraacuten ignoradas y se ejecutaraacute el archivo de sonido mediante ltBGSOUNDgt Si por el contrario se emplea una versioacuten posterior a la 40 se ejecutaraacute la etiqueta ltEMBEDgt mientras que lo que esteacute dentro de ltNOEMBEDgtltNOEMBEDgt seraacute ignorado

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 154

Otra forma de reproducir sonido es mediante un enlace que al ser pulsado por el usuario ejecute el archivo de sonido

ltA HREF=archivo_sonidogttextoltAgt

Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los diversos formatos de archivos de sonido (WAV MID RA MP3 etc)

ltA HREF=nbawavgtSonidoltAgt Si se disentildea una paacutegina con fondo sonoro es

mejor poner la etiqueta del sonido al final del documento HTML para que el sonido se reproduzca una vez se haya cargado la paacutegina por completo ya que si no hasta que no se ejecutara el archivo de sonido no se acabariacutea de cargar la paacutegina

Video Para insertar videos en una paacutegina web se debe

tener en cuenta el navegador empleado para ver la paacutegina ya que ocurre lo mismo que con las etiquetas para insertar sonido cada navegador reconoce su etiqueta e ignora la del otro aunque a partir de la versioacuten 40 de Internet Explorer se puede emplear la misma etiqueta para los dos navegadores

La etiqueta empleada en Internet Explorer para

insertar video es ltIMGgt la misma que se emplea para insertar imaacutegenes En este caso su formato es el siguiente (este formato no es reconocido por Netscape Navigator)

ltIMG DYNSRC=archivo_videogt

El nombre del archivo de video debe incluir la

extensioacuten y el path si estuviera en otro directorio

Atributo Paraacutemetros Descripcioacuten

LOOP= n

Indica el nuacutemero de veces que se reproduce el video (al menos debe valer 1 si n

vale -1 o INFINITE el video se reproduciraacute ininterrumpidamente)

ALT= descripcioacuten

Sirve para incluir una

palabra o frase breve

indicativa del video (se veraacute cuando no se cargue el video uacutetil cuando se trabaja con el navegador en forma de texto)

ALIGN=

TOP Pone una liacutenea de texto

junto a la parte superior del video

MIDDLE Pone una liacutenea de texto a

media altura del video

BOTTOM

Pone una liacutenea de texto junto a la parte inferior del video (en estos tres casos si el texto ocupa maacutes de una liacutenea continuacutea en la parte inferior del video)

ALIGN=

RIGHT Alinea el video a la

derecha

LEFT

Alinea el video a la izquierda (en estos dos casos el texto rodea completamente el video)

WIDTH= x

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HEIGHT= y

Ajustan el tamantildeo del video a x pixels de ancho e y pixels de alto Esto es uacutetil ya que de este modo al cargar la paacutegina el navegador reserva espacio para el video y distribuye el texto de la forma apropiada sin interrupcioacuten a la vez que va cargando el video

HSPACE= x Indican el espacio

horizontal y vertical respectivamente de separacioacuten entre el video y el texto que le rodea

VSPACE= y

CONTROLS Muestra la consola de

video con los controles para parar y reproducir el video

START= FILEOPEN El video empieza a

reproducirse al cargarse la paacutegina

MOUSEOVER El video se reproduce al

poner el puntero del ratoacuten sobre el cuadro de video

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 155

ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 LOOP=-1gt

Para ver videos en Netscape Navigator al igual

que para insertar sonidos se debe emplear la etiqueta ltEMBEDgt con el siguiente formato

ltEMBED SRC=archivo_videogt

Atributo Paraacutemetro

s Descripcioacuten

WIDTH= x

Representan las medidas de la imagen del video (para reproducir video se debe tener instalado alguacuten plug-in de video (para reproducir video se debe tener instalado alguacuten plug-in de video)

HEIGHT= y

AUTOSTART=

TRUE Ejecuta el archivo de video

automaacuteticamente al cargar la paacutegina

FALSE

El video no se reproduce al cargar la paacutegina (para reproducir el video hay que hacer clic sobre eacutel)

LOOP= n

Ejecuta el archivo de video el nuacutemero de veces indicado si se pone TRUE el video se ejecutaraacute ininterrumpidamente Si se omite soacutelo se ejecutaraacute una vez

ltEMBED=mjordanavi HEIGHT=160 WIDTH=120gt

Al igual que ocurre con los archivos de sonido

como las versiones de Internet Explorer posteriores a la 40 tambieacuten reconocen la etiqueta ltEMBEDgt se deberaacute emplear la etiqueta ltNOEMBEDgtltNOEMBEDgt para evitar problemas a la hora de cargar la paacutegina

ltEMBED SRC=mjordanavi HEIGHT=160 WIDTH=120 AUTOSTART=TRUEgt ltNOEMBEDgt ltIMG DYNSRC=mjordanavi HEIGHT=160 WIDTH=120 CONTROLS START=FILEOPENgt ltNOEMBEDgt

Al igual que ocurre con los archivos de sonido

otra forma de reproducir video en una paacutegina web es

mediante un enlace (ver el tema ENLACES) que al ser

pulsado por el usuario ejecute el archivo de video

ltA HREF=archivo_videogttextoltAgt Esta etiqueta es vaacutelida para todos los

navegadores y soacutelo se necesita tener configurado un programa auxiliar plug-in capaz de reproducir los

diversos formatos de archivos de video (AVI MOV MPG etc)

ltA HREF=lglogoavigtVideoltAgt

Plug-ins Plug-in es un programa que extiende las

capacidades del navegador de Netscape en un modo especifico dado por ejemplo la capacidad de mostrar viacutedeo audio archivos de un determinado formato (archivos PDF presentaciones de ASAP archivo VRML etc )

No existe actualmente un conjunto estaacutendar de

plug-inacutes para cada tipo de archivos sino que existen diversas aplicaciones realizadas por diversos fabricantes y no todas de libre distribucioacuten Se puede asegurar que todas las aplicaciones seraacuten compatibles y si por ejemplo se referencia un archivo de sonido en formato wav en su paacutegina este podraacute ser oiacutedo por todos aquellos que tengan un plug-in para este tipo de archivos

Para que un archivo multimedia que es incluido

en una paacutegina sea visible por el usuario debe cumplir dos condiciones la primera es que posea el navegador de Netscape en su versioacuten 20 y la segunda es que tenga el plug-in correspondiente que trata el archivo deseado Por tanto se recomienda un uso moderado de los plug-inacutes utilizando archivos que sean de formatos comunes y un uso complementario en una paacutegina ya que muchos usuarios no podraacuten verlo Es aconsejable incluir un enlace en el que se referencie el archivo de esta forma un usuario podraacute seguir el enlace y ver el archivo en un visualizador externo si lo posee

Existe una instruccioacuten que permite incluir

cualquier tipo de archivo dentro de un documentos HTML pero se veraacute en el proacuteximo apartado

ltEMBEDgt Insertar Archivos Esta instruccioacuten permite la inclusioacuten de cualquier

tipo de archivo en la posicioacuten del documento HTML donde se especifique Su funcionalidad es similar a la IMG para incluir imaacutegenes En este caso para que pueda mostrase el archivo deberaacute tener el plug-in adecuado que lo trata

El formato es el siguiente

ltEMBED SRC=URL del archivo WIDTH=n oacute n HEIGHT=n oacute ngt

En el atributo SRC se indicaraacute el archivo que se

desea mostrar y los atributos WIDTH y HEIGHT se indicaraacute el tamantildeo que tendraacute en objeto insertado siendo estos opcionales

El archivo que podraacute ser un archivo de viacutedeo

audio imaacutegen de alguacuten tipo distinto a las por defecto

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 156

archivo de presentaciones etc solo podraacute ser visto por el usuario si este posee el plug-in correspondiente que trata ese tipo de archivos en caso contrario mostraraacute un mensaje de error indicando al usuario que debe proveerse de ese plug-in para poder consultar el documento de forma correcta

En el caso que se pueda mostrar el plug-in se

incluiraacute en la zona del documento que se indicoacute pudiendo asiacute de este modo insertar dentro de un documento HTML peliacuteculas de viacutedeo o incluir sonido de fondo

Se recomienda un uso limitado de esta posibilidad

ya que existiraacuten muchas personas que no posean el Netscape 20 y no posean el plug-in correspondiente y por lo tanto no podraacuten ver todo el esplendor de su paacutegina

Tablas Introduccioacuten Permite la representacioacuten de datos por filas y

columnas en forma tabular La definicioacuten es muy flexible indicando solo los elementos que forman cada fila y columna calculaacutendose de forma automaacutetica el tamantildeo que deben tener las celdas En una tabla podemos introducir todo tipo de elementos del lenguaje HTML como imagenes enlaces texto listas cabeceras formularios etc

No es necesario definir inicialmente el nuacutemero de

filas o columnas ya que estas se calculan seguacuten se va definiendo la tabla En el caso que una fila tenga maacutes columnas que otra en las otras filas las columnas se representaraacuten vacias no siendo necesario que todas las filas sean iguales

ltTABLEgt Definicioacuten de la Tabla Para definir una tabla usaremos la etiqueta

ltTABLEgt que tiene el siguiente formato

ltTABLE BORDER=tamantildeo del borde gt Definicioacuten de la tabla ltTABLEgt En la etiqueta inicial TABLE definiremos los

atributos que afectaraacuten a toda la tabla todos los atributos son opcionales Todo lo que se incluya dentro de la instruccioacuten de tabla se consideraraacute como tal pudiendo definir tablas anidadas (tablas dentro de tablas)

Puede presentar los siguientes atributos BORDER =n Si se especifica se dibujaraacute un borde alrededor de

la tabla y separanado los distintos campos que presenta Indicaremos un nuacutemero que especificaraacute el tamantildeo del borde por defecto seraacute 0 es decir no se dibujaraacute ninguacuten borde Aunque no se dibuje el borde siacute se mantendraacute el espaciado los elementos de la tabla

Ejemplo de tabla 4

Ejemplo de tabla 5 CELLSPACING=n Indica el espacio que debe existir entre las

distintas celdas de la tabla Por defecto seraacute 2 Si se indica 0 no habraacute ninguacuten espacio entre las celdas

CELLPADDING=n Es la cantidad de espacio entre el borde de la

celda y el contenido de esta por defecto es 1 Si se indica 0 las celdas apareceraacuten sin separacioacuten

Ejemplo de tabla 6 WIDTH=valor o porcentaje Seraacute el ancho de la tabla se puede indicar como

valor absoluto o como porcentaje del ancho del documento En el primer caso se definiraacute en puntos y en el segundo en funcioacuten del tamantildeo del documento (tamantildeo de la ventana del visualizador) Se recomienda utilizar tamantildeos de tabla en porcentaje del documento ya que de esta forma la tabla queda perfectamente ajustada para cualquier tamantildeo del documento

Ejemplo de tabla 9 HEIGHT=valor o porcentaje Definiraacute el alto de la tabla a igual que WIDTH se

puede indicar en valor absoluto o en porcentaje En este caso es maacutes recomendado en valor absoluto ya que el alto es maacutes dificil que pueda coincir con el tamantildeo de la ventana

Dentro de la instruccioacuten de la tabla se incluiraacuten

los diversas etiquetas que defininen el contenido de la tabla

ltCAPTIONgt Titulo de la tabla Especifica el titulo de la tabla este se mostraraacute

resaltado en la parte superior externa de la tabla Siempre se mostraraacute centrado horizontalmente

ltCAPTION ALIGN=TOP|BOTTOMgtTitulo de la tablaltCAPTION gt

Con el atributo ALIGN indicaremos si el titulo

debe aparecer arriba (TOP) o debajo (BOTTOM) de la tabla

ltTRgt Fila de la tabla Definiraacute cada una de las filas de la tabla y

especificaraacute los paraacutemetros que afectaraacuten a todas las celdas de la fila Por cada elemento TR que se incluya se crearaacute una fila de la tabla No es necesario indicar la etiqueta de cierre ltTRgt En caso de tablas anidadas seraacute necesario incluir la etiqueta de cierre

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 157

ltTR ALIGN= LEFT oacute CENTER oacute RIGHT

VALIGN= TOP oacute MIDDLE oacute BOTTOM gt Se podraacute especificar por defecto la alineacioacuten que

tendraacuten los elementos dentro de las celdas ALIGN = LEFT oacute CENTER oacute RIGHT Indica la alineacioacuten del elemento dentro de la

celda en este caso afectaraacute a todos los valores situados en la fila actual tambien se podraacute indicar individualmente en los elementos TD Puede tomar uno de los siguientes valores

LEFT Alineacioacuten a la izquierda de la celda Este el

valor que se toma por defecto RIGHT Alineacioacuten a la derecha CENTER Indicaraacute centrado

VALIGN = TOP oacute MIDDLE oacute BOTTOM Indicaraacute la alineacioacuten vertical del dato dentro de la

celda Se podraacute especificar donde se colocaraacuten los datos dentro de la celda Afectaraacuten a toda la fila Los valores que puede tomar son

TOP Parte superior de la celda MIDDLE Centrado verticalmente dentro de la celda BOTTOM En la parte baja de la celda BGCOLOR

Indicaraacute el color de fondo que tendraacuten todas las

celda de la fila de la tabla El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ltTHgt y ltTDgt Una celda de la tabla Define cada una de las celdas de una fila de la

tabla TH se usaraacute para definir una celda de tipo cabecera en este caso se mostraraacuten destacados en negrita y TD para definir una celda de datos Estos elementos deben aparecer tras los elementos TR para definir cada una de las columnas de la fila Existiraacute una columna por cada elemento TD oacute TH que se defina Aunque se puede indicar la etiqueta de cierre no es necesario al tomarse implicitamente Utilizaremos los elementos TH para los titulos de las filas o columnas y los elementos TD para los datos

ltTH ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY | DECIMAL ) VALIGN= ( TOP | MIDDLE | BOTTOM | BASELINE ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la celdardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAP gt

ltTD ALIGN= (LEFT | CENTER | RIGHT | JUSTIFY ) VALIGN= ( TOP | MIDDLE | BOTTOM ) WIDTH=Tamantildeo BGCOLOR=color ROWSPAN=ldquoFilas que debe contener la columnardquo COLSPAN= ldquoColumnas que ocupa la celdardquo NOWRAPgt

Pueden presentar los siguientes atributos

ALIGN Indica la alineacioacuten horizontal del dato dentro de la celda se especificaraacute individualmente para cada una de las celdas Su significado es igual que el expresado para la etiqueta TR

VALIGN Indicaraacute la alineacioacuten vertical del dato

dentro de la celda Se especifica individualmente para cada celda el formato es el mismo que el expresado para TR

WIDTH Especifica el ancho que tendra la columna

de la tabla se puede especificar eln valor absoluto en puntos de la pantalla o en tanto por ciento del tamantildeo de la tabla

BGCOLOR Indicaraacute el color de fondo que tendraacute la

celda de la tabla El color hay que indicarlo independientemente para cada una de las celdas de la columna El formato para definir los colores es el mismo al que se usa para los atributos de BODY Esta etiqueta solo es valida para el Internet Explorer de Microsoft y el Netscape 30 o superior

ROWSPAN Indicaraacute el nuacutemero de filas que ocuparaacute

estaacute celda en la misma fila En este caso la celda se expandiraacute ocupando tantas celdas de la tabla inicial como se especifique Esto permite definir por ejemplo celdas de cabecera que afecten a varias celdas de la tabla oacute bien crear una fila que ocupen toda la tabla

COLSPAN Indicaraacute el nuacutemero de columnas que

ocuparaacute la celda actual obtendremos una celda que ocupa varias columnas Igual que el anterior pero para el caso de las columnas

NOWRAP Se usaraacute para que no se divida la liacutenea

por defecto Si la usamos las liacuteneas de texto no se dividiraacuten dentro de la celda en varias liacuteneas Por tanto si la linea es muy larga la columna de la tabla seraacute tan ancha como la liacutenea solo se dividiraacute si se usa el elemento

Ejemplos de Tablas Una Tabla Simple

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 158

Demostracioacuten de TH COLSPAN y ROWSPAN

N

uacutemeros

Num

1

2

3

4

5

6

ltTABLE BORDERgt ltTRgt ltTDgtltTH COLSPAN=3gtNuacutemeros ltTRgt ltTH ROWSPAN=2gtNumltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Demostracioacuten de Multiples Cabeceras

Datos1 Datos2

Datos11 Datos12 Datos21 Datos22

1 2 3 4

5 6 7 8

ltTABLE BORDERgt ltTRgt ltTH COLSPAN=2gtDatos1 ltTHgtltTH

COLSPAN=2gtDatos2 ltTHgt ltTRgt ltTRgt ltTHgtDatos11 ltTHgtltTHgtDatos12

ltTHgtltTHgtDatos21 ltTHgtltTHgtDatos22 ltTHgt ltTRgt ltTRgt ltTDgt1ltTDgtltTDgt2ltTDgtltTDgt3ltTDgtltTDgt4ltTDgt ltTRgt ltTRgt ltTDgt5ltTDgtltTDgt6ltTDgtltTDgt7ltTDgtltTDgt8ltTDgt ltTRgt ltTABLEgt Tabla sin Borde

1

2

3

4

5

6

ltTABLEgt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Tabla con Borde=15

1 2 3

4 5 6

ltTABLE BORDER=15gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt Ejemplos con CELLPADDING y CELLSPACING

1 2 3

4 5 6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=0gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=0

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

1

2

3

4

5

6

ltTABLE BORDER CELLPADDING=10

CELLSPACING=10gt ltTRgt ltTDgt1 ltTDgt 2 ltTDgt 3 ltTRgt ltTDgt4 ltTDgt 5 ltTDgt 6 ltTABLEgt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 159

Ejemplos de alineaciones ALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH

ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3

ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt

Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTRgt ltTD ALIGN=RIGHTgtCelda 4 ltTD

ALIGN=CENTERgt Celda 5 ltTD ALIGN=LEFTgt Celda 6 ltTABLEgt Ejemplos de alineaciones verticales VALIGN

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Cabecera de Titulo 4

Celda 1 Celda 2 Celda 3 Celda 4

Celda 5

Celda 7 Celda 8

Celda 9 Celda 10

Celda 12

ltTABLE BORDERgt ltTRgt ltTH ALIGN=CENTERgtCabecera de Titulo 1 ltTH ALIGN=CENTERgt Cabecera de Titulo 2 ltTH ALIGN=CENTERgt Cabecera de Titulo 3 ltTH ALIGN=CENTERgt Cabecera de Titulo 4 ltTRgt ltTD ALIGN=LEFTgtCelda 1 ltTD ALIGN=CENTERgt Celda 2 ltTD ALIGN=RIGHTgt Celda 3 ltTD ALIGN=CENTERgt Celda 4 ltTRgt ltTD ALIGN=LEFT VALIGN=TOPgtCelda 5 ltTD ALIGN=CENTERgtltIMG

SRC=imagenesbiblioggifgt ltTD ALIGN=RIGHT VALIGN=BOTTOMgt Celda 7 ltTD ALIGN=CENTER VALIGN=MIDDLEgt Celda 8 ltTRgt ltTD VALIGN=BOTTOMgtCelda 9 ltTD VALIGN=MIDDLEgt Celda 10 ltIMG SRC=imagenesmundoggifgt ltTD VALIGN=TOPgt Celda 12 ltTABLEgt

Ejemplos de colores de fondo de las celdas

BGCOLOR

Cabecera de Titulo 1

Cabecera de Titulo 2

Cabecera de Titulo 3

Celda 1 Celda 2 Celda 3

Celda 4 Celda 5 Celda 6

ltTABLE BORDERgt ltTR BGCOLOR=YELLOWgt ltTHgtCabecera de Titulo 1 ltTHgt Cabecera de

Titulo 2 ltTHgt Cabecera de Titulo 3 ltTR BGCOLOR=WHITEgt ltTDgtCelda 1 ltTDgt Celda 2 ltTDgt Celda 3 ltTRgt ltTD BGCOLOR=REDgtCelda 4 ltTD

BGCOLOR=WHITEgt Celda 5 ltTD BGCOLOR=GREENgt Celda 6

ltTABLEgt

WIDHT=50

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=75

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

WIDHT=100

Esta es la celda nuacutemero 1

La dos

y por uacuteltimo esta es la celda nuacutemero 3

Celda 1 segunda fila

dos 2 fila

y por uacuteltimo esta es la celda nuacutemero 3 de la uacuteltima fila

FORMULARIOS (FORM) Introduccioacuten Los formularios son plantillas que permiten la

creacioacuten de documentos HTML con peticiones de datos La principal utilidad de los formularios es la posibilidad de crear cuestionarios encuestas paacuteginas de comentarios o cualquier documento en la que se desee una interaccioacuten por parte del usuario

Se podraacuten definir distintos tipos de recuadros de

dialogo botones de seleccioacuten menuacutes de muacuteltiples

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 160

opciones Para permitir obtener los datos de una manera maacutes intuitiva

ltFORMgt Definicioacuten de formularios Existe una instruccioacuten HTML para la creacioacuten de

formularios esta es FORM que tiene la siguiente estructura

lt FORM ACTION=archivo que trata el formulario METHOD= POST | GET gt

Elementos que forman el formulario

lt FORMgt Dentro de la etiqueta de formulario se definiraacuten los

distintos elementos de peticioacuten de datos Estas instrucciones que se explicaraacuten a continuacioacuten definiraacuten los tipos de botones cajas de dialogo y ventanas para la introduccioacuten de datos Y definiraacuten las variables que almacenaraacuten los datos introducidos por el usuario Estas etiquetas se incluiraacuten entre la de definicioacuten del formulario y la etiqueta de final de formulario

Los atributos que presenta la etiqueta FORM son

los siguientes

ACTION Indica el programa que se encargaraacute de tratar los datos del formulario Este programa debe encontrarse en el servidor y estar escrito en alguacuten lenguaje de programacioacuten A este programa se pasaraacute como paraacutemetros los datos introducidos en el formulario y retornaraacute un coacutedigo HTML que se mostraraacute tras procesar el formulario A este tipo de programas se les llama cgi-bin y se explican en el uacuteltimo apartado de este manual (CGI-BIN)

METHOD Indica el protocolo usado para el enviacuteo de los datos Con POST enviacutea los datos en la entrada estaacutendar del programa que trata el formulario y con GET los datos se pasan por paraacutemetro en la liacutenea de comandos al programa El usar uno o otro meacutetodo vendraacute determinado por como son tratados los paraacutemetros en el formulario en el (CGI-BIN) El meacutetodo de uso maacutes normal seraacute POST

Una vez definidas las caracteriacutesticas globales del

formulario incluiremos los distintos botones y cajas de dialogo que lo constituyen Dentro de la instruccioacuten del formulario podraacuten incluirse cualquier texto o instruccioacuten HTML siendo recomendado a fin de poder etiquetar las opciones de entrada y especificar cualquier dato importante relacionado con el formulario Igualmente un formulario puede ser incluido en algunas instrucciones HTML como las listas tablas etc

ltINPUTgt Entrada baacutesica de datos La etiqueta INPUT se utiliza para definir gran

variedad de tipos de campos de entrada de datos Por lo

general seraacuten entradas de texto corto (a lo sumo una frase) o opciones El formato baacutesico es el siguiente

lt INPUT TYPE = ( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = Variable que toma el valor VALUE = Valor de Inicializacioacuten gt

El atributo TYPE se usa para determinar el tipo

de recuadro de dialogo de entrada que se estaacute definiendo a continuacioacuten se explicaraacuten por separado cada una de las opciones El atributo NAME especifica el nombre de la variable que se define Este nombre seraacute pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario El atributo VALUE suele especificar el valor de inicializacioacuten que seraacute el valor por defecto

ltINPUT TYPE=TEXTgt Texto corto Se utiliza para la entrada de cadenas de texto

corto como por ejemplo nombre de personas nuacutemeros fechas o diversos datos que se puedan expresar en una liacutenea de texto

Se mostraraacute un recuadro que ocupa una liacutenea y

la que seraacute posible especificar este texto El formato de la instruccioacuten es el siguiente

ltINPUT TYPE=TEXT NAME=variable VALUE=valor inicialSIZE=tamantildeo MAXLENGTH=longitud maacuteximagt

El tamantildeo de la ventana de introduccioacuten de texto

se fija con el atributo SIZE que indica el tamantildeo de la ventana en caracteres Aquiacute solo se define la parte visible pero el usuario podraacute introducir maacutes texto si lo desea Para indicar el maacuteximo nuacutemero de caracteres que se permiten en la entrada usaremos MAXLENGTH El atributo NAME indica el nombre de la variable que toma el valor de la entrada y VALUE especifica el valor de inicializacioacuten del campo De todos los atributos solo seraacute obligatorio NAME siendo el resto opcionales En la entrada se podraacuten usar cualquier tipo de caracteres incluso los acentuados en su formato normal

Ejemplos

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variablegt

Resultado Nombre

Explicacioacuten Seraacute una introduccioacuten de texto baacutesica

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacutengt

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 161

Resultado Nombre Texto de Inicia

Explicacioacuten

En este caso introduciremos un texto de inicializacioacuten que seraacute el texto por defecto y es editable por el usuario

Instruccioacuten HTML

Nombre ltINPUT TYPE=TEXT NAME=variable VALUE=Texto de Inicializacioacuten SIZE=50 MAXLENGHT=55gt

Resultado

Nombre

Texto de Inicializacioacuten

Explicacioacuten

Ahora definimos con SIZE un mayor tamantildeo del recuadro y con MAXLENGHT definimos el nuacutemero maacuteximo de caracteres que se pueden introducir

ltINPUT TYPE=PASSWORDgt Palabras

secretas Es similar al anterior pero en este caso no se

imprimen los caracteres seguacuten se van introduciendo se muestra un asterisco en vez de los caracteres Solo se puede ver el nuacutemero de caracteres pero no el valor Se usa para la introduccioacuten de claves de acceso (passwords) y datos que no deban ser vistos al introducirlos El formato es

lt INPUT TYPE=PASSWORD NAME=variable VALUE=valor inicial SIZE=tamantildeo MAXLENGTH=ligtlongitud maacutexima gt

Ejemplo

Instruccioacuten HTML

Password ltINPUT TYPE=PASSWORD NAME=variable VALUE=passwordgt

Resultado Password

Explicacioacuten

El texto introducido no puede ser visto pero si es posible saber el nuacutemero de caracteres que se introducen

ltINPUT TYPE=CHECKBOXgt Botones de

seleccioacuten El checkbox es un botoacuten que puede presentar dos

estados activado o desactivado El formato es el siguiente

ltINPUT TYPE=CHECKBOX NAME=variable CHECKEDgt

Se requiere el atributo NAME Los valores que

tomaraacute la variable seraacuten on oacute off dependiendo de su estado Si el botoacuten estaba activado cuando se enviacutean los datos del formulario se enviaran el nombre de la variable y

el valor que indique su estado Si se incluye el atributo CHECKED el botoacuten se encontraraacute activado en la inicializacioacuten Si se indica el atributo VALUEcuando se envian los datos con el botoacuten activado se mandaraacute la variable con el valor indicado y en caso contrario no se mandaraacute ninguacuten valor

Ejemplos

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variablegt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

En este caso esta desactivado por defecto y su utilizaraacute en caso de los valores on y off para definir su estado

Instruccioacuten HTML

ltINPUT TYPE=CHECKBOX NAME= variable CHECKEDgt Opcioacuten

Resultado Opcioacuten

Explicacioacuten

Ahora se especifica CHECKED para indicar que por defecto debe estar activado

ltINPUT TYPE=RADIOgt Seleccioacuten entre

muacuteltiples opciones Se usa cuando la opcioacuten puede tomar un valor

simple de una serie de alternativas En este caso se presentan unos valores opcionales de los que solo puede tomar un valor Para especificar cada uno de estos valores se incluiraacute una etiqueta RADIO por cada una de las posibles alternativas su estructura general seraacute

lt INPUT TYPE=RADIO NAME=variable VALUE=valor 1 CHECKED gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor 2 gt lt INPUT TYPE=RADIO NAME=variable VALUE=valor n gt

Cada una de las etiquetas RADIO tendraacute el

mismos atributo NAME y con un distinto atributo VALUE que seraacute el valor que tome si se selecciona esta opcioacuten Para inicializarlo se usa el atributo CHECKED que se indicaraacute solo en la opcioacuten que se quiera especificar por defecto

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=RADIO NAME= variable VALUE=opcion1 gtOpcioacuten 1ltBRgt ltINPUT TYPE=RADIO NAME= variable

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 162

VALUE=opcion2 CHECKEDgtOpcioacuten 2ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion3 gtOpcioacuten 3ltBRgt ltINPUT TYPE=RADIO NAME= variable

VALUE=opcion4 gtOpcioacuten 4ltBRgt

Resultado

Opcioacuten 1

Opcioacuten 2

Opcioacuten 3

Opcioacuten 4

Explicacioacuten

En este caso solo es posible seleccionar uno de los posibles valores la opcioacuten CHECKED indica cual es la opcioacuten activa por defecto

ltINPUT TYPE=HIDDENgt Paraacutemetros ocultos En este caso no se muestra ninguacuten campo para la

entrada de datos al usuario pero el par variable valor especificado es enviado junto con el formulario Se suele usar para transmitir informacioacuten de estado oacute control oacute para enviar alguacuten tipo de informacioacuten que no debe ser variada en el formulario pero siacute debe ser enviada junto a este El formato es

lt INPUT TYPE=HIDDEN NAME=variable VALUE=valor gt

Deberaacute incluir tanto la variable como el valor

ltINPUT TYPE=SUBMITgt Enviar Datos Este botoacuten se usa para enviar los datos del

formulario al pulsar el usuario este botoacuten se acaba la introduccioacuten del formulario y pasa el control al programa indicado en ACTION En todo formulario debe existir al menos un botoacuten de SUBMIT si solo incluye un recuadro del tipo TEXT no seraacute necesario incluirlo El formato es

lt INPUT TYPE=SUBMIT VALUE=mensaje a mostrar gt

El atributo VALUE especifica una etiqueta no

editable que se mostraraacute en el botoacuten de enviacuteo Lo normal es que este botoacuten no enviacutee datos pero si se indica el atributo NAME con un nombre de variable seraacute enviada la variable con el valor de VALUE Esto puede ser uacutetil si se incluyen distintos botones de SUBMIT para distinguir cual fue pulsado

Ejemplo

Instruccioacuten HTML

lt INPUT TYPE=SUBMIT VALUE = Enviar Datos gt

Resultado Enviar Datos

Explicacioacuten

El texto indicado en VALUE es el que etiqueta el botoacuten al pulsar sobre eacutel se enviaraacuten los datos del formulario

ltINPUT TYPE=IMAGEgt Botoacuten de Enviacuteo

graacutefico Su funcionalidad es similar al botoacuten de SUBMIT

se usa igualmente para enviar los datos de un formulario pero en este caso se presenta una imagen como botoacuten Igualmente al pulsar sobre el botoacuten se enviaraacute el formulario El formato es el siguiente

lt INPUT TYPE=IMAGE NAME=variable SRC=URL de la Imagen gt

El punto de la imagen en el que pulsa el usuario

tambieacuten es pasado al programa interprete del formulario de forma que la imagen igualmente podriacutea ser un mapa sensible Se pasaraacuten dos paraacutemetros x e y con las coordenadas del punto donde pulso siendo el programa interprete el encargado de determinar la zona donde se pulsoacute si se desea

Ejemplo

Instruccioacuten HTML

ltINPUT TYPE=IMAGE SRC = botongifgt

Resultado

Explicacioacuten Se muestra la imagen como botoacuten de

enviacuteo sustituyendo al botoacuten de SUBMIT

ltINPUT TYPE=RESETgt Borrar los datos Este botoacuten se usa para volver a los valores por

defecto todos los elementos del formulario borrando todos los datos introducidos por el usuario Su formato es el siguiente

lt INPUT TYPE=RESET VALUE=Etiqueta a mostrar gt

El atributo VALUE especifica la etiqueta que

tendraacute el botoacuten

ltTEXTAREAgt Texto en muacuteltiples liacuteneas

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 163

Permite la introduccioacuten de un texto que puede abarcar varias liacuteneas introduciendo este en forma de paacuterrafo El formato general seraacute

ltTEXTAREA NAME=variable ROWS=Filas COLS=Columnasgt Texto de Inicializaciamp oacuten que puede incluir varias lampiacuteneas ltTEXTAREAgt

En este caso se presenta una ventana del tamantildeo

especificado con los atributos ROWS filas y COLS columnas El texto expresado entre la etiqueta de inicio y de final sirve para indicar que texto apareceraacute inicialmente en la ventana en este texto se podraacuten incluir las marcas del lenguaje HTML pero solo se tendraacuten en cuenta para incluir acentos y otro tipo de efectos Los atributos ROWS y COLS determinan el tamantildeo de la ventana visible el texto se podraacute extender maacutes allaacute de estos limites

Ejemplo

Instruccioacuten HTML

ltTEXTAREA NAME=variable ROWS=10 COLS=54gt Texto de Inicializaciampoacuten que puede

incluir varias lampiacuteneas ltTEXTAREAgt

Resultado

Texto de Inicializacioacuten que puede

incluir varias liacuteneas

Explicacioacuten

Se puede especificar el tamantildeo de la ventana para introducir datos e indicar un texto de inicializacioacuten aunque este seraacute opcional

ltSELECTgt Eleccioacuten entre muacuteltiples opciones Se usa para menuacutes simple o muacuteltiples Define

menuacutes de tipo pop-up (menuacute de barras) y ofrece una alternativa maacutes compacta al uso de botones RADIO o CHECKBOX Su formato es el siguiente

ltSELECT NAME=variablegt lt OPTION SELECTED VALUE=valor1gt Opcioacuten Primera lt OPTION VALUE=valor2gt Opcioacuten Segunda lt OPTION VALUE=valorngt Opcioacuten Eneacutesima ltSELECTgt

Si se desea que sea un menuacute muacuteltiple se deberaacute

incluir el atributo MULTIPLE en la etiqueta de SELECT en este caso se mostraraacuten todas las opciones en forma de tabla en el otro caso se mostraraacute la opcioacuten activa y un botoacuten para poder modificar esta opcioacuten En ambos casos solo podraacute seleccionarse una de las opciones Cuando se

enviacutea el resultado del formulario la variables NAME tomaraacute el valor de la opcioacuten que este activa

La etiqueta OPTION que contenga el atributo

SELECTED seraacute considerada la opcioacuten por defecto caso de no especificarse ninguna se consideraraacute la primera de las opciones

Ejemplos

Instruccioacuten HTML

ltSELECT NAME=variablegt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Segunda

Explicacioacuten

Se muestra la opcioacuten activa que puede ser cambiada por defecto esta activada la segunda opcioacuten

Instruccioacuten HTML

ltSELECT NAME=variable MULTIPLEgt ltOPTION VALUE=1gt Opcioacuten Primera ltOPTION SELECTED VALUE=2gt

Opcioacuten Segunda ltOPTION VALUE=3gt Opcioacuten Tercera ltSELECTgt

Resultado Opcioacuten Primera

Explicacioacuten

En este caso al ser muacuteltiple se muestran todas las opciones posibles de las que solo es posible seleccionar una

(Common Gateway Interface) Definicioacuten Los cgi-bin son programas que se ejecutan en el

servidor pueden servir para tratar informacioacuten como pasarela con una aplicacioacuten o base de datos o para generar documentos html de forma automaacutetica

Como se vioacute con anterioridad una de las

principales utilidades de los cgi-bin es tratar los resultados de un formulario (FORM)

Estos programas pueden ser escritos en

cualquier tipo de lenguaje de programacioacuten y son ejecutados en el servidor cuando se realiza su referencia Algo importante es que el programa debe ser ejecutable en el servidor por tanto al ser el servidor una maquina UNIX no se puede utilizar por ejemplo los compiladores de los PC sino los del servidor

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 164

Los lenguajes maacutes comunes para escribir estos programas son el lenguaje perl C oacute bien un script escrito en cualquier shell (csh sh ksh oacute zsh)

Algo importante es que los cgi-bin deben tener

una extensioacuten especial cgi o bien encontarse en un directorio especial llamado cgi-bin Cuando se referencie en una pagina html un binario cualquier archivo con la extensioacuten cgi en el servidor se ejecutaraacute este programa y la salida se enviaraacute al cliente de la www

Para que sea posible ejecutar el binario (cgi-bin)

seraacute necesario que el archivo tenga los permisos de forma correcta para ello tendraacute que ejecutar en Unix el siguiente comando

www2gt chmod 755 programacgi Con esto el programa seraacute ejecutable por el

servidor Los cgi-bin se podraacuten escribir con las instrucciones

normales del lenguaje de programacioacuten pero hay ciertos aspectos a tener en cuenta

Variables de entorno Entrada de datos al cgi-bin Salida de datos del cgi-bin

Variables de entorno Para pasar datos el servidor al cgi-bin utiliza una

serie de variables de entorno que quedan definidas al ejecutar el script Las variables de entorno maacutes interesantes son

REQUEST_METHOD El meacutetodo por el que se

realiza la llamada al script este puede ser GET o POST como se explicoacute anteriormente cuando se habla de los formularios

PATH_INFO El cgi-bin puede ser llamado

directamente desde el cliente en esta variable se incluiraacute toda la informacioacuten que siga al nombre del cgi-bin por ejemplo

httpwww2ucaesbinarioscgibincgicaminoarchi

vo PATH_INFO = caminoarchivo Seraacute la

informacioacuten adicional que se antildeade tras el nombre de cgi-bin

La informacioacuten que se incluye seraacute pasada de

forma codificada al cgi-bin de forma que los espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caracter Esto debe ser tenido en cuenta cuando se interprete la informacioacute obtenida en formato URL

PATH_TRANSLATED Una versioacuten decodificada de PATH_INFO obtiene el camino y lo convierte de camino virtual (en referencia del servidor) a camino real (camino completo)

SCRIPT_NAME Nombre por el que fue llamado

el cgi-bin QUERY_STRING La informacioacuten que sigue al

siacutembolo en la URL que referencia al cgi-bin Seraacute alguacuten tipo de consulta que se realice al cgi-bin No necesita ser decodificada de ninguna manera

Cuando se utiliza el meacutetodo GET las variables

del formulario se pueden interpretar con esta variable de entorno

El formato en que se envian estas variables es el

siguiente variable1=valor1ampvariable2=valor2amp

ampvariablen=valorn REMOTE_HOST El ordenador desde el que se

ejecuto el cgi-bin REMOTE_ADDR Direccioacuten IP del ordenador

remoto que ejecuto el cgi-bin CONTENT_LENGTH El nuacutemero de caracteres

enviados por el cliente al cgi-bin HTTP_USER_AGENT El cliente de la www que

ejecuta el cgi-bin el formato general es programaversioacuten libreriaversioacuten El cgi-bin podriacutea enviar un distinto coacutedigo HTML

seguacuten cada cliente

Entrada de datos al cgi-bin Para los formularios que utilizan el meacutetodo

POST la informacioacuten es enviada al cgi-bin por la entrada estaacutendar (stdin)

El servidor enviacutea las variables de entorno

CONTENT_LENGTH y CONTENT_TYPE indicando la longitud y el tipo de datos enviados El servidor no esta obligado a enviar una marca de final de archivo tras los datos enviados por tanto la variable CONTENT_LENGTH debe ser tenida en cuenta para determinar la cantidad de datos enviados CONTENT_TYPE suele contener el valor applicationx-www-form-urlencoded que indica que se trata de informacioacuten con codificacioacuten URL

En esta codificacioacuten como se vio antes los

espacios se convierten en signos + y los caracteres especiales se codifican de la forma xx donde xx el coacutedigo ASCII en hexadecimal del caraacutecter Por tanto esto debe ser tenido en cuenta cuando se interpreten los datos enviados del formulario Las variables del formulario se enviaraacuten de la forma

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 165

variable1=valor1ampvariable2=valor2amp ampvariablen=valorn

Salida de datos del cgi-bin El cgi-bin debe enviar sus datos a la salida

estaacutendar (stdout) esta salida puede ser un documento generado por el cgi-bin o instrucciones al servidor para obtener el documento correcto

La salida del cgi-bin debe comenzar con una

pequentildea cabecera que identificaraacute al documento Las directivas que definen esta cabecera seraacuten

Content-type Es el tipo MIME del documento que se retorna Si

tuviera el valor texthtml la salida se interpretariacutea como coacutedigo html Por tanto la salida del cgi-bin podriacutea contener instrucciones HTML que serian interpretadas correctamente por el cliente Otros valores que puede tomar son textplain para texto normal oacute imagegif la salida se interpreta como una imagen GIF

Por ejemplo printf ( Content-type texthtmlnn ) Seriacutea el

comienzo de la salida de cgi-bin escrito en ldquoCrdquo que comienza a generar coacutedigo html

Location Indicaraacute al servidor que se esta enviado

la referencia a un documento en lugar del documento en siacute Si el valor es una URL el servidor indicaraacute al cliente que debe realizar un redireccionamiento a esa direccioacuten

Esta permitido el uso de informacioacuten adicional

(PATH_INFO) y la directiva pero no la directiva para indicar un punto determinado dentro de un documento

Status Indicaraacute un coacutedigo de estado para indicar

errores El formato seraacute nnn xxxxxxx donde nnn es un nuacutemero de tres diacutegitos y xxxxxxx es una cadena de caracteres

Tras la cabecera se incluiraacuten dos caracteres de

retorno de carro (n) siendo obligatorio para que sea bien interpretada la cabecera de cgi-bin si no se respeta esto la salida del cgi-bin podriacutea indicarnos el error Server Error 500

Despues de definida la cabecera se podraacute generar

la salida del cgi-bin que se interpretaraacute seguacuten el valor dado a Content-type

Documentos con Frames Introduccioacuten Con las frames es posible dividir la ventana del

navegador en varias subregiones (frames) permitiendo mostrar una URL distinta en cada una de ellas En cada frame se nos permite

Mostar su propia URL diferenciada del resto de las frames de la pantalla de esta forma un hiperenlace

puede tener como destino un documento y la frame en el que se mostraraacute

Tendraacuten asociado un nombre que las

distinguiraacuten del resto de las frames de la pantalla y permitiraacute usarlo en los hiperenlaces

En el caso que se cambie el tamantildeo de la

ventana se podraacute determinar si la frame se ajusta a este tamantildeo o mantiene su tamantildeo intacto

Esto permite crear nuevos tipos de documentos

en los que por ejemplo se mantendraacute una regioacuten estaacutetica (lista de enlaces barra de botones formulario) y otra zona dinaacutemica en la que se mostraraacute el resultado De esta forma una de las principales utilidades de las frames es la creacioacuten de paacuteginas con un iacutendice (por ejemplo un manual) o una cabecera estaacutetica consiguiendo asiacute una mejora de la navegacioacuten al poder acceder al iacutendice de una manera maacutes rapida y efectiva

El uso de las frames es uacutetil para cierto tipo de

documentos pero puede llegar a dificultar la navegacioacuten dentro de un documento con frames no tendraacute utilidad los botones de documento previo (back) ni documento siguiente (forward) ya que ambos nos trasladaraacuten fuera del documento con frames Para ver el documento previo en una de las frames debemos utilizar el botoacuten derecho del ratoacuten sobre ella y seleccionar la opcioacuten volver en el frame (Back in Frame) Esto hace que cuando se utilicen frames haya que cuidar la correcta transicioacuten entre documentos

No todos los navegadores pueden mostrar

documentos con frames solo son interpretables por el Netscape 20 o superior y el Internet Explorer 30 Por tanto en este caso si se quiere que el documento sea accesible por gran cantidad de usuarios de debe crear un documento con frames y otro sin ellas usando la etiqueta NOFRAMES

Definicioacuten Un documento con frames se define de manera

diferente a un documento normal siendo la estructura del documento distinta en este caso no se define la etiqueta BODY Su estructura es la siguiente

ltHTMLgt ltHEADgt Definiciones de la cabecera ltHEADgt ltFRAMESETgt Definicioacuten de las frames que forman el

documento y de los archivo que incluye cada una ltFRAMESETgt ltNOFRAMESgt Instrucciones HTML que se mostraraacute en los

navegadores que no soporten frames

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 166

ltNOFRAMESgt ltHTMLgt Dentro de la etiqueta NOFRAMES se podraacute incluir

una explicacioacuten de que el documento solo es visible con el navegadores que soporten frames o bien incluir una versioacuten del documento que se muestre sin necesidad de frames

ltFRAMESET gt Definicioacuten de las frames Con esta instruccioacuten definiremos las frames que

formaraacuten el documento su sintaxis es similar a la de las tablas permitiendo definir muy distintos tipos de frames Su formato es el siguiente

ltFRAMESET ROWS=Lista de las Filas COLS=Lista de las Columnasgt ltFRAME SRC=URL_1 NAME=Nombre de la frame1gt ltFRAME SRC=URL_2 NAME=Nombre de la frame1gt ltFRAME SRC=URL_N NAME=Nombre de la frameNgt ltFRAMESETgt

Se definiraacute solo uno de los atributos o la lista de

filas (ROWS) o la lista de columnas (COLS) ROWS Se definiraacute separado por comas el tamantildeo

de cada una de las frames De esta forma se dividiraacute la pantalla de forma horizontal seguacuten cada una de las filas definidas El tamantildeo de la frame puede expresarse de las siguientes formas

En valor absoluto que indicaraacute el tamantildeo en

puntos de la pantalla En este caso si todas las frames se indican de este modo los valores se ajustaraacuten para que las frames ocupen la totalidad del espacio de la ventana del navegador no guardando siempre la proporcioacuten con la que se definen las frames

En tanto por ciento sobre el tamantildeo de la ventana

en este caso si los porcentajes suman un valor distinto del 100 se ajustaraacuten para que coincidan con el tamantildeo de la ventana Se podraacute combinar con el apartado anterior de forma que algunas frames se definan en valor absoluto y otras en porcentaje

De forma relativa con el siacutembolo que indica el

tamantildeo restante de la ventana Si se indica una frame como 2 y otra como la primera ocuparaacute dos tercios del espacio restante y la segunda un tercio del espacio restante Se puede combinar con las definiciones anteriores

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm

NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt

ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

Se definen tres frames horizontales la primera (roja) ocuparaacute 100 puntos de la pantalla la segunda (azul) el 50 del tamantildeo de la ventana del navegador y la tercera (verde) el espacio restante si se variacutea el tamantildeo de la ventana del navegador cambiaraacute el tamantildeo de las dos uacuteltimas

COLS Toma los mismos posibles valores que ROWS

pero en este caso para las columnas se definiraacuten las frames de forma vertical

Ejemplo

Instruccioacuten HTML

ltFRAMESET COLS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAME SRC=frame2htm

NAME=frame2gt ltFRAME SRC=frame3htm

NAME=frame3gt ltFRAMESETgt

Muestra

Explicacioacuten

En este caso se definen las frames de forma vertical guardando la misma proporcioacuten que en el caso anterior

Una vez definida el nuacutemero de frames por fila o

por columna se definiraacute el contenido de cada una de estas con la etiqueta FRAME pero igualmente se podriacutea definir frames dentro de frames de forma que cada una de las definidas anteriormente podriacutea estar divida en varias frames esto se haraacute incluyendo dentro de la

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 167

instruccioacuten FRAMESET nuevas instrucciones FRAMESET que dividiraacuten esta en las frames indicadas como se ve en el siguiente ejemplo

Ejemplo

Instruccioacuten HTML

ltFRAMESET ROWS=100 50 gt ltFRAME SRC=frame1htm NAME=frame1gt ltFRAMESET COLS=2gt ltFRAME SRC=frame2htm NAME=frame2gt ltFRAME SRC=frame3htm NAME=frame3gt ltFRAMESETgt ltFRAMESET COLS=50 30 20gt ltFRAME SRC=frame4htm NAME=frame4gt

ltFRAME SRC=frame5htm NAME=frame5gt

ltFRAME SRC=frame6htm NAME=frame6gt

ltFRAMESETgt ltFRAMESETgt

Muestra

Explicacioacuten

Tomando como base las frames que se definieron en un ejemplo anterior hemos dividido dos de las frames en nuevas frames formando en este caso un documento con 6 frames en cada una se muestra un fichero distinto y tienen un nombre distinto Dentro de las frames definidas se podriacutean definir nuevas frames pudiendo dividir la ventana tantas veces como se desee

ltFRAME gt Definicioacuten de cada una de las

frames Como se ha visto en el apartado anterior con la

etiqueta FRAME definiremos el documento que se mostraraacute en la frame y su nombre Esta etiqueta presenta ademaacutes algunos otros atributos

ltFRAME SRC=URL NAME=Nombre de la frame MARGINWIDTH=ancho del margen MARGINHEIGHT=alto del margen SCROLLING=YES | NO | AUTO NORESIZEgt URLComo su nombre indica especifica el

documento HTML o archivo que se mostraraacute en la

frame definida Si no se especifica documento alguno se mostraraacute la frame vaciacutea

NAME Indica el nombre de la frame este nombre

es importante ya que se usaraacute en los hiperenlaces (normalmente en los documentos de las otras frames) para indicar la frame de destino del documento Si no se indica el nombre solo se podraacute mostrar el documento actual sin que sea posible cambiarlo mediante hiperenlaces

MARGINWIDTH Indica el ancho del margen este

atributo es opcional y normalmente el navegador ajusta todos los maacutergenes al mismo tamantildeo si se especifica se valor seraacute en puntos de la pantalla

MARGINHEIGHT Igual que en el caso anterior pero

para el alto de los maacutergenes Lo normal es no especificar ninguno de estos dos atributos

SCROLLING Indica si la frame tendraacute o no una

barra de scroll la barra de scroll se muestra en el lateral y permite desplazarse por el documento pulsando con el ratoacuten en ella Si toma el valor YES siempre se mostraraacute esta barra para el valor AUTO solo se mostraraacute si el documento no cabe en la frame si es necesaria Y por uacuteltimo NO indica que en ninguacuten caso se muestre la barra de scroll Si no se indica nada se toma por defecto el valor AUTO

NORESIZE Indica que la frame no debe ser variada

de tamantildeo por el usuario se puede variar el tamantildeo de una frame situando el cursor del ratoacuten encima y arrastrando en la direccioacuten deseada Con este atributo el usuario no podraacute cambiar el tamantildeo de la frame en ninguacuten caso Por defecto todas las frames pueden variar su tamantildeo

TARGET Atributo para indicar la frame de

destino El uso de frames introduce un nuevo atributo a

alguna de las etiquetas especificadas con anterioridad este atributo es TARGET que indicaraacute la frame de destino de la operacioacuten Normalmente en paacuteginas sin frames cuando se seguiacutea un hiperenlaces este se mostraba en la ventana del navegador sustituyendo el documento actual con las frames se puede especificar que frame seraacute la de destino no siendo necesario que sea la frame del documento actual

Como nombre de la frame su usaraacute el nombre

que se especifico en el atributo NAME de la etiqueta FRAME Estas instrucciones se utilizaraacuten normalmente en los documentos que se incluyen dentro de las frames

Las etiquetas que permiten el uso de TARGET

son las siguientes A En los hiperenlaces indicaraacute la frames donde

se mostraraacute el documento una vez que se siga el hiperenlace

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 168

ltA HREF=url TARGET=framegt BASE Indicaraacute la frame en la que se mostraraacute por

defecto todos los hiperenlaces del documento actual Se debe especificar en la cabecera del documento (HEAD)

ltBASE TARGET=framegt AREA En la definicioacuten de imaacutegenes sensibles en

el cliente se indica la frame donde se veraacute el documento que se activa en la zona correspondiente de la imagen

ltAREA SHAPE=RECT COORDS=xy

HREF=url TARGET=framegt FORM Indicaraacute la frame de destino del resultado

del formulario ltFORM ACTION=url TARGET=framegt Existen unos valores especiales de TARGET que

nos permitiraacuten definir destinos distintos a las frames definidas Estos valores son los siguientes

TARGET=_blank Indica que se muestre en una

nueva ventana vaciacutea para seguir el enlace se lanza otra ventana distinta del navegador

TARGET=_self Se mostraraacute en la misma

ventana o frame que lo referencia se puede usar para modificar el valor dado por BASE

TARGET=_parent Se muestra en la frame o

estructura de frames que llamoacute al documento actual TARGET=_top Indica que se muestre en la

ventana completa eliminando la estructura de frames que tenga la ventana

Contesta las siguientes preguntas

1- Cuales son los tres tipos de lista que maneja

un documento de HTML

2- Que es un Hiperenlace

3- Que es una URL aboluta

4- Que es una URL relativa

5- Para que sirve un elemento de ancla

6- Escribe la sintaxis requerida para incluir

una imagen en un documento HTML

7- Explica lo que es un texto alternativo

8- Escribe la sintaxis para alinear una imagen

9- Explica como se puede agregar un borde a

la paacutegina

10- Cual es la etiqueta que permite definir el

tamantildeo de una imagen

11- Escribe la etiqueta necesaria para dar el

espaciado de separacioacuten de una imagen

12- Explica lo que es una imagen sensible o

mapeada

13- Explica brevemente como se crea una

imagen sensible

14- Menciona que otros elementos multimedia

se puede agregar a un documento HTML

15- Explica lo que es un Plug-ins

16- Escribe la etiqueta que permite insertar

archivos

17- Cual es la etiqueta que permite introducir

tablas

18- Cual es la utilidad de la etiqueta

CAPTION

19- Como se determina un fin e tabla

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 169

20- Cual es la utilidad de los FORM

21- Cual es la funcioacuten de la etiqueta INPUT

22- Para que sirve la etiqueta ltINPUT

TYPE=PASSWORDgt

23- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=RADIOgt

24- Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=SUBMITgt

25-Cual es la funcioacuten de la etiqueta ltINPUT

TYPE=IMAGEgt

26- Cual es la funcioacuten de la etiqueta

ltSELECTgt

27- Explica en que consisten los Common

Gateway Interface

28- Explica la utilidad de la siguiente etiqueta ltFRAMESET gt

29- Escribe cuales son las etiquetas que

permiten el uso de TARGET

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170

Programacioacuten HTML Secundaria Tercer Grado

Paacutegina 170