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
Top Related