curso de diseño web
DESCRIPTION
Curso de Diseño WEB Curso HTML Instituto cybertronicTRANSCRIPT
Instituto de Formacioacuten Profesional Curso de disentildeo Web 4
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Instituto de Formacioacuten Profesional
Esta es una publicacioacuten de CYBERTRONICreg Departamento de Ensentildeanza de Informaacutetica
Reconocido por el MEC (Ministerio de Educacioacuten y Culto) Res No 246
CYBERTRONIC regES UNA MARCA REGISTRADA
Edif Plas 2| Piso Of 8 y 9 Telef 504622 E_mail cybertroniccdegmailcom
Direccioacuten en Internet wwwcybertronic-cdeblogspotcom
Ciudad del Este - Paraguay
Instituto de Formacioacuten Profesional Curso de disentildeo Web 5
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Nombre y apellido _______________________________________________________________
Teleacutefono ________________________________________________________________________
Direccioacuten ________________________________________________________________________
Ciudad
_________________________________________________________________________
Profesor ______________________________________________________________________
Curso _______________________________________________________________________
Horario ______________________________________________________________________
Diacuteas _________________________________________________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Teleacutefonos ndash E-mail - Sitios web
Anotaciones Importantes ndash Horarios de Exaacutemenes - Notas
Cybertronic (061) 5046222 cybertroniccdegmailcom
wwwcybertronic-cdeblogspotcom
Instituto de Formacioacuten Profesional Curso de disentildeo Web 6
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Este Material le daraacute a conocer los conceptos de La programacioacuten HTML
Eacutexitos y Buena Suerte
Presentacioacuten
El Instituto Profesional CYBERTRONIC es una Institucioacuten privada fundada el 17 de junio
de 1996 con recursos propios Incorporado al Ministerio De Educacioacuten Resolucioacuten No
246
Desde sus inicios se ha destacado en Ciudad del Este por hacer de la ensentildeanza de la
informaacutetica una tarea amena y sin complicaciones Desde su inauguracioacuten hasta el presente
innumeras personas se han graduado y muchos han transformado su mundo gracias al
dominio de esta nueva herramienta
CYBERTRONIC Busca ofrecer cursos de calidad y es por ello que trata de estar siempre a
la vanguardia para acompantildear los pasos agigantados de la evolucioacuten tecnoloacutegica
Por eso siempre va innovando con nuevos cursos
Como Oratoria
Relaciones Humanas
Relaciones Publicas
Secretariado
Entre otros
Para mas informes poacutengase en contacto con nosotros o visiacutetenos en
Telefax 504 622 ndash 0973 550896
E -mail cybertroniccdegmailcom Direccioacuten en Internet wwwsecretariadocdeblogspotcom
Toacutemese un tiempo y repase los temas de este folleto consulte en Internet
Vamos animo )
Repase siempre sus lecciones )
Instituto de Formacioacuten Profesional Curso de disentildeo Web 7
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Curso de HTML
1 INTRODUCCIOacuteN 9
11 INTERNET 9
12 URL 9
13 LENGUAJE HTML 10
131 Queacute es HTML 10
132 Coacutemo Especificar Efectos del Texto 10
14 NAVEGADORES 10
2 HTML BAacuteSICO 11
21 ESTRUCTURA DEL DOCUMENTO HTML 11
211 HTML 11
212 HEAD 11
213 BODY 12
22 DEFINICIOacuteN DE BLOQUES DE TEXTO 14
221 Tiacutetulos de H1 a H6 14
222 BR 14
223 P 14
224 BLOCKQUOTE 14
225 CENTER 15
226 HR 15
227 MULTICOL 16
228 SPACER 16
23 MODIFICADORES DEL TEXTO 17
231 B 17
232 BLINK 17
233 EM 17
234 FONT 17
235 I 18
236 SUB 19
237 SUP 19
238 U 19
239 Otros Modificadores menos utilizados 19
24 LISTAS 20
241 OL 20
242 UL 20
243 LI 21
25 ENLACES Y ANCLAS 22
251 A como enlace 22
252 A como ancla 23
26 IMAacuteGENES 23
261 IMG 23
262 AREA 26
263 MAP 27
264 MapThis 29
Instituto de Formacioacuten Profesional Curso de disentildeo Web 8
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
265 GIFrsquos animados 29
3 HTML AVANZADO 30
31 TABLAS 30
311 Table 30
312 Caption 32
313 TR 33
314 TD 33
32 FRAMES 34
321 Frame 34
322 Frameset 36
323 A 38
324 Navegadores que no soportan frames 39
33 FORMULARIOS 40
331 Form 40
332 Input 41
333 Select 43
334 Option 43
335 TextArea 44
34 COLUMNAS 45
35 MULTIMEDIA Y APPLETS 46
351 Sonido 46
352 Viacutedeo 49
353 QuickTime 50
354 Modelos 3D 53
355 Applets iexclError Marcador no definido
4 EDITORES iexclERROR MARCADOR NO DEFINIDO
41 NETSCAPE COMPOSER iexclERROR MARCADOR NO DEFINIDO
42 EDICIOacuteN WYSIWYG iexclERROR MARCADOR NO DEFINIDO
43 PAacuteGINAS CON MARCADORES BAacuteSICOS iexclERROR MARCADOR NO DEFINIDO
44 PUBLICACIOacuteN DE LAS PAacuteGINAS EN INTERNET iexclERROR MARCADOR NO DEFINIDO
45 LIMITACIONES iexclERROR MARCADOR NO DEFINIDO
5 JAVASCRIPT iexclERROR MARCADOR NO DEFINIDO
6 HTML DINAacuteMICO iexclERROR MARCADOR NO DEFINIDO
61 HOJAS DE ESTILO iexclERROR MARCADOR NO DEFINIDO
62 POSICIONAMIENTO iexclERROR MARCADOR NO DEFINIDO
63 CAPAS iexclERROR MARCADOR NO DEFINIDO
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 5
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Nombre y apellido _______________________________________________________________
Teleacutefono ________________________________________________________________________
Direccioacuten ________________________________________________________________________
Ciudad
_________________________________________________________________________
Profesor ______________________________________________________________________
Curso _______________________________________________________________________
Horario ______________________________________________________________________
Diacuteas _________________________________________________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Vto de Cuota_______________________________________
Teleacutefonos ndash E-mail - Sitios web
Anotaciones Importantes ndash Horarios de Exaacutemenes - Notas
Cybertronic (061) 5046222 cybertroniccdegmailcom
wwwcybertronic-cdeblogspotcom
Instituto de Formacioacuten Profesional Curso de disentildeo Web 6
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Este Material le daraacute a conocer los conceptos de La programacioacuten HTML
Eacutexitos y Buena Suerte
Presentacioacuten
El Instituto Profesional CYBERTRONIC es una Institucioacuten privada fundada el 17 de junio
de 1996 con recursos propios Incorporado al Ministerio De Educacioacuten Resolucioacuten No
246
Desde sus inicios se ha destacado en Ciudad del Este por hacer de la ensentildeanza de la
informaacutetica una tarea amena y sin complicaciones Desde su inauguracioacuten hasta el presente
innumeras personas se han graduado y muchos han transformado su mundo gracias al
dominio de esta nueva herramienta
CYBERTRONIC Busca ofrecer cursos de calidad y es por ello que trata de estar siempre a
la vanguardia para acompantildear los pasos agigantados de la evolucioacuten tecnoloacutegica
Por eso siempre va innovando con nuevos cursos
Como Oratoria
Relaciones Humanas
Relaciones Publicas
Secretariado
Entre otros
Para mas informes poacutengase en contacto con nosotros o visiacutetenos en
Telefax 504 622 ndash 0973 550896
E -mail cybertroniccdegmailcom Direccioacuten en Internet wwwsecretariadocdeblogspotcom
Toacutemese un tiempo y repase los temas de este folleto consulte en Internet
Vamos animo )
Repase siempre sus lecciones )
Instituto de Formacioacuten Profesional Curso de disentildeo Web 7
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Curso de HTML
1 INTRODUCCIOacuteN 9
11 INTERNET 9
12 URL 9
13 LENGUAJE HTML 10
131 Queacute es HTML 10
132 Coacutemo Especificar Efectos del Texto 10
14 NAVEGADORES 10
2 HTML BAacuteSICO 11
21 ESTRUCTURA DEL DOCUMENTO HTML 11
211 HTML 11
212 HEAD 11
213 BODY 12
22 DEFINICIOacuteN DE BLOQUES DE TEXTO 14
221 Tiacutetulos de H1 a H6 14
222 BR 14
223 P 14
224 BLOCKQUOTE 14
225 CENTER 15
226 HR 15
227 MULTICOL 16
228 SPACER 16
23 MODIFICADORES DEL TEXTO 17
231 B 17
232 BLINK 17
233 EM 17
234 FONT 17
235 I 18
236 SUB 19
237 SUP 19
238 U 19
239 Otros Modificadores menos utilizados 19
24 LISTAS 20
241 OL 20
242 UL 20
243 LI 21
25 ENLACES Y ANCLAS 22
251 A como enlace 22
252 A como ancla 23
26 IMAacuteGENES 23
261 IMG 23
262 AREA 26
263 MAP 27
264 MapThis 29
Instituto de Formacioacuten Profesional Curso de disentildeo Web 8
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
265 GIFrsquos animados 29
3 HTML AVANZADO 30
31 TABLAS 30
311 Table 30
312 Caption 32
313 TR 33
314 TD 33
32 FRAMES 34
321 Frame 34
322 Frameset 36
323 A 38
324 Navegadores que no soportan frames 39
33 FORMULARIOS 40
331 Form 40
332 Input 41
333 Select 43
334 Option 43
335 TextArea 44
34 COLUMNAS 45
35 MULTIMEDIA Y APPLETS 46
351 Sonido 46
352 Viacutedeo 49
353 QuickTime 50
354 Modelos 3D 53
355 Applets iexclError Marcador no definido
4 EDITORES iexclERROR MARCADOR NO DEFINIDO
41 NETSCAPE COMPOSER iexclERROR MARCADOR NO DEFINIDO
42 EDICIOacuteN WYSIWYG iexclERROR MARCADOR NO DEFINIDO
43 PAacuteGINAS CON MARCADORES BAacuteSICOS iexclERROR MARCADOR NO DEFINIDO
44 PUBLICACIOacuteN DE LAS PAacuteGINAS EN INTERNET iexclERROR MARCADOR NO DEFINIDO
45 LIMITACIONES iexclERROR MARCADOR NO DEFINIDO
5 JAVASCRIPT iexclERROR MARCADOR NO DEFINIDO
6 HTML DINAacuteMICO iexclERROR MARCADOR NO DEFINIDO
61 HOJAS DE ESTILO iexclERROR MARCADOR NO DEFINIDO
62 POSICIONAMIENTO iexclERROR MARCADOR NO DEFINIDO
63 CAPAS iexclERROR MARCADOR NO DEFINIDO
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 6
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Este Material le daraacute a conocer los conceptos de La programacioacuten HTML
Eacutexitos y Buena Suerte
Presentacioacuten
El Instituto Profesional CYBERTRONIC es una Institucioacuten privada fundada el 17 de junio
de 1996 con recursos propios Incorporado al Ministerio De Educacioacuten Resolucioacuten No
246
Desde sus inicios se ha destacado en Ciudad del Este por hacer de la ensentildeanza de la
informaacutetica una tarea amena y sin complicaciones Desde su inauguracioacuten hasta el presente
innumeras personas se han graduado y muchos han transformado su mundo gracias al
dominio de esta nueva herramienta
CYBERTRONIC Busca ofrecer cursos de calidad y es por ello que trata de estar siempre a
la vanguardia para acompantildear los pasos agigantados de la evolucioacuten tecnoloacutegica
Por eso siempre va innovando con nuevos cursos
Como Oratoria
Relaciones Humanas
Relaciones Publicas
Secretariado
Entre otros
Para mas informes poacutengase en contacto con nosotros o visiacutetenos en
Telefax 504 622 ndash 0973 550896
E -mail cybertroniccdegmailcom Direccioacuten en Internet wwwsecretariadocdeblogspotcom
Toacutemese un tiempo y repase los temas de este folleto consulte en Internet
Vamos animo )
Repase siempre sus lecciones )
Instituto de Formacioacuten Profesional Curso de disentildeo Web 7
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Curso de HTML
1 INTRODUCCIOacuteN 9
11 INTERNET 9
12 URL 9
13 LENGUAJE HTML 10
131 Queacute es HTML 10
132 Coacutemo Especificar Efectos del Texto 10
14 NAVEGADORES 10
2 HTML BAacuteSICO 11
21 ESTRUCTURA DEL DOCUMENTO HTML 11
211 HTML 11
212 HEAD 11
213 BODY 12
22 DEFINICIOacuteN DE BLOQUES DE TEXTO 14
221 Tiacutetulos de H1 a H6 14
222 BR 14
223 P 14
224 BLOCKQUOTE 14
225 CENTER 15
226 HR 15
227 MULTICOL 16
228 SPACER 16
23 MODIFICADORES DEL TEXTO 17
231 B 17
232 BLINK 17
233 EM 17
234 FONT 17
235 I 18
236 SUB 19
237 SUP 19
238 U 19
239 Otros Modificadores menos utilizados 19
24 LISTAS 20
241 OL 20
242 UL 20
243 LI 21
25 ENLACES Y ANCLAS 22
251 A como enlace 22
252 A como ancla 23
26 IMAacuteGENES 23
261 IMG 23
262 AREA 26
263 MAP 27
264 MapThis 29
Instituto de Formacioacuten Profesional Curso de disentildeo Web 8
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
265 GIFrsquos animados 29
3 HTML AVANZADO 30
31 TABLAS 30
311 Table 30
312 Caption 32
313 TR 33
314 TD 33
32 FRAMES 34
321 Frame 34
322 Frameset 36
323 A 38
324 Navegadores que no soportan frames 39
33 FORMULARIOS 40
331 Form 40
332 Input 41
333 Select 43
334 Option 43
335 TextArea 44
34 COLUMNAS 45
35 MULTIMEDIA Y APPLETS 46
351 Sonido 46
352 Viacutedeo 49
353 QuickTime 50
354 Modelos 3D 53
355 Applets iexclError Marcador no definido
4 EDITORES iexclERROR MARCADOR NO DEFINIDO
41 NETSCAPE COMPOSER iexclERROR MARCADOR NO DEFINIDO
42 EDICIOacuteN WYSIWYG iexclERROR MARCADOR NO DEFINIDO
43 PAacuteGINAS CON MARCADORES BAacuteSICOS iexclERROR MARCADOR NO DEFINIDO
44 PUBLICACIOacuteN DE LAS PAacuteGINAS EN INTERNET iexclERROR MARCADOR NO DEFINIDO
45 LIMITACIONES iexclERROR MARCADOR NO DEFINIDO
5 JAVASCRIPT iexclERROR MARCADOR NO DEFINIDO
6 HTML DINAacuteMICO iexclERROR MARCADOR NO DEFINIDO
61 HOJAS DE ESTILO iexclERROR MARCADOR NO DEFINIDO
62 POSICIONAMIENTO iexclERROR MARCADOR NO DEFINIDO
63 CAPAS iexclERROR MARCADOR NO DEFINIDO
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 7
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Curso de HTML
1 INTRODUCCIOacuteN 9
11 INTERNET 9
12 URL 9
13 LENGUAJE HTML 10
131 Queacute es HTML 10
132 Coacutemo Especificar Efectos del Texto 10
14 NAVEGADORES 10
2 HTML BAacuteSICO 11
21 ESTRUCTURA DEL DOCUMENTO HTML 11
211 HTML 11
212 HEAD 11
213 BODY 12
22 DEFINICIOacuteN DE BLOQUES DE TEXTO 14
221 Tiacutetulos de H1 a H6 14
222 BR 14
223 P 14
224 BLOCKQUOTE 14
225 CENTER 15
226 HR 15
227 MULTICOL 16
228 SPACER 16
23 MODIFICADORES DEL TEXTO 17
231 B 17
232 BLINK 17
233 EM 17
234 FONT 17
235 I 18
236 SUB 19
237 SUP 19
238 U 19
239 Otros Modificadores menos utilizados 19
24 LISTAS 20
241 OL 20
242 UL 20
243 LI 21
25 ENLACES Y ANCLAS 22
251 A como enlace 22
252 A como ancla 23
26 IMAacuteGENES 23
261 IMG 23
262 AREA 26
263 MAP 27
264 MapThis 29
Instituto de Formacioacuten Profesional Curso de disentildeo Web 8
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
265 GIFrsquos animados 29
3 HTML AVANZADO 30
31 TABLAS 30
311 Table 30
312 Caption 32
313 TR 33
314 TD 33
32 FRAMES 34
321 Frame 34
322 Frameset 36
323 A 38
324 Navegadores que no soportan frames 39
33 FORMULARIOS 40
331 Form 40
332 Input 41
333 Select 43
334 Option 43
335 TextArea 44
34 COLUMNAS 45
35 MULTIMEDIA Y APPLETS 46
351 Sonido 46
352 Viacutedeo 49
353 QuickTime 50
354 Modelos 3D 53
355 Applets iexclError Marcador no definido
4 EDITORES iexclERROR MARCADOR NO DEFINIDO
41 NETSCAPE COMPOSER iexclERROR MARCADOR NO DEFINIDO
42 EDICIOacuteN WYSIWYG iexclERROR MARCADOR NO DEFINIDO
43 PAacuteGINAS CON MARCADORES BAacuteSICOS iexclERROR MARCADOR NO DEFINIDO
44 PUBLICACIOacuteN DE LAS PAacuteGINAS EN INTERNET iexclERROR MARCADOR NO DEFINIDO
45 LIMITACIONES iexclERROR MARCADOR NO DEFINIDO
5 JAVASCRIPT iexclERROR MARCADOR NO DEFINIDO
6 HTML DINAacuteMICO iexclERROR MARCADOR NO DEFINIDO
61 HOJAS DE ESTILO iexclERROR MARCADOR NO DEFINIDO
62 POSICIONAMIENTO iexclERROR MARCADOR NO DEFINIDO
63 CAPAS iexclERROR MARCADOR NO DEFINIDO
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 8
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
265 GIFrsquos animados 29
3 HTML AVANZADO 30
31 TABLAS 30
311 Table 30
312 Caption 32
313 TR 33
314 TD 33
32 FRAMES 34
321 Frame 34
322 Frameset 36
323 A 38
324 Navegadores que no soportan frames 39
33 FORMULARIOS 40
331 Form 40
332 Input 41
333 Select 43
334 Option 43
335 TextArea 44
34 COLUMNAS 45
35 MULTIMEDIA Y APPLETS 46
351 Sonido 46
352 Viacutedeo 49
353 QuickTime 50
354 Modelos 3D 53
355 Applets iexclError Marcador no definido
4 EDITORES iexclERROR MARCADOR NO DEFINIDO
41 NETSCAPE COMPOSER iexclERROR MARCADOR NO DEFINIDO
42 EDICIOacuteN WYSIWYG iexclERROR MARCADOR NO DEFINIDO
43 PAacuteGINAS CON MARCADORES BAacuteSICOS iexclERROR MARCADOR NO DEFINIDO
44 PUBLICACIOacuteN DE LAS PAacuteGINAS EN INTERNET iexclERROR MARCADOR NO DEFINIDO
45 LIMITACIONES iexclERROR MARCADOR NO DEFINIDO
5 JAVASCRIPT iexclERROR MARCADOR NO DEFINIDO
6 HTML DINAacuteMICO iexclERROR MARCADOR NO DEFINIDO
61 HOJAS DE ESTILO iexclERROR MARCADOR NO DEFINIDO
62 POSICIONAMIENTO iexclERROR MARCADOR NO DEFINIDO
63 CAPAS iexclERROR MARCADOR NO DEFINIDO
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 9
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
1 Introduccioacuten
11 Internet
Internet es una red de ordenadores localizados a lo largo y ancho de todo el planeta Desde hace
aproximadamente 4 antildeos la principal forma de acceso a la informacioacuten en esta red es el lenguaje HTML que
es la base de las paacuteginas web que se visualizan mediante los navegadores maacutes comunes (Netscape Navigator o
Internet Explorer)
Uno de los primeros problemas que se plantearon en el desarrollo de las redes que dieron lugar a Internet fue
el acceso a un nuacutemero siempre creciente de maacutequinas conectadas Para resolver este problema se desarrolloacute
un sistema de nombres jeraacuterquico basado en dominios En un primer nivel estaban los dominios de los paises
(con una abreviatura de dos letras es fr pt it) y los dominios geneacutericos originales de EEUU (com
comercial net propio de la re org organizaciones mil militar)
Este sistema de nombres se gestiona mediante el DNS (Domain Name Service ndash Servicio de Nombres de
Dominio) que permite que cualquier maacutequina de Internet pueda realizar una conexioacuten con cualquier otra Esta
conexioacuten puede ser de cualquier tipo y no soacutelo para visualizar paacuteginas web
12 URL
Ya dentro de lo que es la navegacioacuten de paacuteginas web cuando se quiere acceder a una direccioacuten en concreto
hay que especificar un URL (Universal Resource Location ndash Localizacioacuten Universal de Recursos) que viene a
ser una forma estaacutendar para definir servicios dentro de Internet
Un URL estaacute compuesto de tres partes
1 Tipo de servicio
2 Maacutequina que ofrece el servicio
3 Recurso al que queremos acceder (normalmente un fichero) incluyendo el
directorio
Para acceder a paacuteginas web el tipo de servicio es http por lo que un URL vaacutelido de un servidor web viene a
ser httpmaquinapaisdir1dir2ficherohtml
Para acceder a paacuteginas que residen en el ordenador en el que se estaacute trabajando hay que sustituir http por file e
indicar ademaacutes del directorio la unidad de disco en la que se estaacute trabajando Por ejemplo
fileC|midirectoriomificherohtm
Dentro de los ficheros HTML los URL se pueden especificar relativos al directorio raiacutez del servidor web
como dir1dir2mificherohtml o incluso de forma relativa al directorio que contiene el directorio actual sin
especificar la primera barra dir1dir2mificherohtml
Los servidores web es decir la maacutequina a la que hay que conectarse para recibir las paacuteginas web suelen
interpretar que el fichero principal de cada directorio se llama indexhtml por lo que no hace falta nombrarlo
expliacutecitamente en el URL Asiacute poner httpcybertroniccompy es lo mismo que poner
httpcybertroniccompy indexhtml
Por uacuteltimo hay que intentar poner siempre directorios relativos para facilitar el cambio de ubicacioacuten de los
ficheros dentro del servidor web y sobre todo no se puede uno olvidar de eliminar las referencias a las
unidades de disco locales cuando se van a publicar las paacuteginas en el servidor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 10
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
13 Lenguaje HTML
131 Queacute es HTML
HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto es decir
texto presentado de forma estructurada y agradable con enlaces (hyperlinks) que al pinchar en ellos
conducen a otros documentos o fuentes de informacioacuten relacionadas Ademaacutes en las uacuteltimas versiones de
HTML se pueden insertar ficheros multimedia (graacuteficos sonido etc)
La descripcioacuten se basa en especificar en el texto la estructura loacutegica del contenido (tiacutetulos paacuterrafos de texto
normal enumeraciones definiciones citas etc) asiacute como los diferentes efectos que se quieren dar
(especificar los lugares del documento donde se debe poner cursiva negrita o un graacutefico determinado) y dejar
que luego la presentacioacuten final de dicho hipertexto se realice por un programa especializado (como Netscape
o Explorer)
Un fichero con coacutedigo HTML es solamente un fichero de texto con extensioacuten htm o html El lenguaje HTML
estaacute en estos momentos en su versioacuten 4 aunque los dos navegadores maacutes conocidos los de Netscape y
Microsoft aporten cada uno extensiones al HTML 4 estaacutendar
132 Coacutemo Especificar Efectos del Texto
La mayoriacutea de los efectos se especifican de la misma forma rodeando el texto que se quiere marcar entre dos
etiquetas o directivas (tags en ingleacutes) que definen el efecto o unidad loacutegica que se desea Las etiquetas estaacuten
formadas por determinados coacutedigos metidos entre los signos lt y gt y con la barra cuando se trata de la
segunda etiqueta de un efecto (la de cierre) Por ejemplo ltefectogt para abrir y ltefectogt para cerrar Ciertas
directivas soacutelo se ponen una vez en el lugar del texto donde queramos que aparezca el efecto concreto Esto es
lo que ocurre por ejemplo cuando queremos poner un graacutefico caso en el que se usa algo parecido a
ltponer_graacutefico_aquiacutegt (maacutes adelante se veraacute la directiva concreta que se utiliza)
A veces es necesario ofrecer datos adicionales en una directiva Por ejemplo cuando se define un enlace hay
que especificar su destino Para ello se incluyen paraacutemetros en la directiva inicial (la de apertura) de la
siguiente forma ltefecto paraacutemetro1 paraacutemetro2 gt La directiva de cierre caso de ser necesaria queda como
antes ltefectogt
14 Navegadores
La versioacuten actual en estas fechas de los dos navegadores maacutes conocidos Netscape Navigator y Microsoft
Explorer es la 4 Aunque teoacutericamente cualquiera de los dos navegadores son capaces de interpretar el coacutedigo
HTML y visualizarlo la realidad es que cada uno lo hace de una forma ligeramente distinta lo que nos puede
llevar a problemas como disentildeadores Es muy habitual que los ajustes finos tanto de posicioacuten como de
alineamiento en los maacutergenes de tablas y frames los realicen de manera distinta obligando a comprobar cada
cambio en el coacutedigo en ambos navegadores para confirmar que los resultados son los esperados
Por otro lado es conveniente acceder regularmente a las paacuteginas web de Netscape y de Microsoft para
localizar la informacioacuten sobre las extensiones que cada una de las empresas aporta al estaacutendar HTML
teniendo en cuenta que casi con toda seguridad estas extensiones soacutelo funcionen en su propio navegador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 11
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
2 HTML Baacutesico
21 Estructura del documento HTML
Un documento HTML en su forma maacutes baacutesica se compone de 4 marcadores que son HTML
HEAD TITLE y BODY
211 HTML
El marcador HTML es el primero y el uacuteltimo de una paacutegina Web Identifica el documento como una
paacutegina web y se encarga de indicar el principio y el final de la paacutegina
Sintaxis ltHTMLgtltHTMLgt
Ejemplo
ltHTMLgt
ltBODYgt
Este es la paacutegina web miacutenima
ltBODYgt
ltHTMLgt
212 HEAD
El marcador HEAD define la cabecera del documento La cabecera contiene informacioacuten sobre el
propio documento No contiene informacioacuten que vaya a ser mostrada en pantalla por el navegador a
no ser el contenido del marcador TITLE Este marcador precede siempre al marcador BODY
Entre los marcadores HEAD y HEAD pueden ir los siguientes TITLE BASE META SCRIPT
STYLE y LINK
El maacutes utilizado es el marcador TITLE que especifica el texto que se coloca en la barra de tiacutetulo de
la ventana del navegador Su sintaxis es estaacutendar ltTITLEgt texto del tiacutetulo ltTITLEgt
Sintaxis ltHEADgtltHEADgt
Ejemplo
ltHEADgt
ltTITLEgt Primera paacutegina webltTITLEgt
ltBASE HREF=httpwwwmozillacomgt
ltHEADgt
Descripcioacuten de otros marcadores de la seccioacuten HEAD
BASE especifica el URL donde se deben buscar los enlaces relativos
META Informacioacuten sobre la paacutegina para navegadores y buscadores
SCRIPT sirve para incluir coacutedigo en javascript
STYLE seccioacuten de Hojas de Estilo en HTML dinaacutemico define estilos
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 12
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LINK seccioacuten de Hojas de Estilo en HTML dinaacutemico enlaza ficheros externos
213 BODY
EL marcador BODY especifica el contenido principal del documento Es decir todo lo que vaya a
aparecer en pantalla de la paacutegina web tiene que estar entre los marcadores ltBODYgt y ltBODYgt
Dentro del propio marcador ltBODYgt se especifican las caracteriacutesticas generales del documento
En cuanto al fondo de la paacutegina se pueden modificar el color de fondo y la imagen de fondo En
cuanto al texto se puede cambiar su color por defecto el de los enlaces activos el de los visitados y
el de los no visitados
Tambieacuten se pueden definir acciones en lenguaje Javascript para cuando la paacutegina se acabe de
cargar se recibe o pierde el foco y en general para un conjunto de eventos que se pueden producir
en una ventana de programa (clicks de ratoacuten pasar hacia delante hacia atraacutes etc)
Sintaxis
ltBODY
BACKGROUND=bgURL
BGCOLOR=color
TEXT=color
LINK=color
ALINK=color
VLINK=color
ONLOAD=loadJScode
ONUNLOAD=unloadJScode
ONBLUR=blurJScode
ONFOCUS=focusJScode
CLASS=styleClass
ID=namedPlaceOrStyle
LANG=ISO
STYLE=style
gt
contenido de la paacutegina web
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 13
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BACKGROUND=bgURL
Especifica una imagen que se visualiza como fondo de
la paacutegina La imagen es repetida tanto en horizontal
como envertical El URL puede ser tanto una direccioacuten
completa en otra maacutequina como indicar un fichero en
la maacutequina local
BGCOLOR=FFFFFF
Establece el color de fondo en hexadecimal en formato
RGB (Red Green Blue) Para ver un conjunto de
colores predefinidos puede consultar el fichero
colortabhtm
TEXT=color Establece el color en hexadecimal del texto normal
(que no forma parte de un enlace)
LINK=color Establece el color de un enlace que todaviacutea no ha sido
visitado (no se ha hecho un click en ese enlace)
ALINK=color
Especifica el color al que cambia brevemente un
enlace cuando se hace click en el A continuacioacuten el
enlace pasa del color LINK al color VLINK
VLINK=color Especifica el color de los enlaces que ya han sido
visitados
ONLOAD=loadJScode Coacutedigo Javasript que se ejecuta cuando se acaba de
cargar la paacutegina web
ONUNLOAD=unloadJScode Coacutedigo Javasript que se ejecuta cuando se aborta la
carga de la paacutegina
ONFOCUS=focusJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina adquiere el foco
ONBLUR=blurJScode Coacutedigo Javasript que se ejecuta cuando la ventana en
la que estaacute la paacutegina pierde el foco
Este ejemplo establece un color de fondo amarillo claro pone el texto normal en negro los
enlaces no visitados en azul los visitados en verde y los enlaces activados en rojo
ltBODY BGCOLOR=FFFFAA TEXT=black LINK=blue VLINK=green
ALINK=redgt
ltBODYgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 14
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
22 Definicioacuten de bloques de texto
221 Tiacutetulos de H1 a H6
Define tiacutetulos para secciones con caracteriacutesticas estaacutendar El tiacutetulo H1 es el maacutes visible y el
H6 el maacutes pequentildeo Normalmente se visualizan en negrita y con un tamantildeo de letra mayor
que el texto normal Empiezan en una nueva liacutenea y todos los navegadores antildeaden una liacutenea
en blanco antes de cada tiacutetulo
Sintaxis
ltH1 ALIGN=LEFT|CENTER|RIGHTgtltH1gt
ltH2 ALIGN=LEFT|CENTER|RIGHTgtltH2gt
ltH3 ALIGN=LEFT|CENTER|RIGHTgtltH3gt
ltH4 ALIGN=LEFT|CENTER|RIGHTgtltH4gt
ltH5 ALIGN=LEFT|CENTER|RIGHTgtltH5gt
ltH6 ALIGN=LEFT|CENTER|RIGHTgtltH6gt
ALIGN
Especifica el alineamiento horizontal y puede tomar los valores LEFT CENTER y RIGHT
222 BR
Inserta un final de liacutenea (Break Line) sin antildeadir liacutenea en blanco
Sintaxis ltBRgt
223 P
Define un nuevo paacuterrafo Esto quiere decir que el texto a continuacioacuten de P empieza en una
nueva liacutenea y se precede de una liacutenea en blanco No es necesario utilizar el marcador ltPgt
al final del paacuterrafo Si se utiliza se antildeade una liacutenea en blanco a continuacioacuten del paacuterrafo
Sintaxis
ltP ALIGN=LEFT|CENTER|RIGHTgt ltPgt
224 BLOCKQUOTE
Indenta un bloque de texto Es posible anidar marcadores para definir niveles de
indentacioacuten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 15
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis ltBLOCKQUOTEgt ltBLOCKQUOTEgt
225 CENTER
Centra todos los objetos ya sean texto graacuteficos tablasetc Contenidos entre los
marcadores ltCENTERgt ltCENTERgt evitando la necesidad de indicar en todos los
marcadores de los objetos el alineamiento CENTER La presencia de una propiedad
ALIGN prevalece sobre el marcador ltCENTERgt
Sintaxis ltCENTERgtltCENTERgt
226 HR
Visualiza un liacutenea horizontal que nos permite separar visualmente partes de la paacutegina Es
posible configurar la longitud y la anchura de la liacutenea Por defecto la liacutenea tiene un aspecto
de 3D
Sintaxis
ltHR
ALIGN=CENTER|LEFT|RIGHT
NOSHADE
SIZE=thickness
WIDTH=widthgt
NOSHADE
La liacutenea no muestra el aspecto 3D
SIZE=thickness
Indica el grosor de la liacutenea que por defecto es de 2
WIDTH=width
Define la anchura horizontal de la liacutenea en tanto por ciento siendo el 100 la anchura total
de la paacutegina
Ejemplo
ltHR NOSHADE ALIGN=CENTER WIDTH=50 SIZE=8gt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 16
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
227 MULTICOL
Permite mostrar el texto en varias columnas del mismo ancho en una determinada aacuterea de la paacutegina
Sintaxis
ltMULTICOL
COLS=columns
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Este atributo es obligatorio y especifica el nuacutemero de columnas de texto Netscape intenta repartir el texto
para que cada columna tenga la misma altura
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels Si no se especifica Netscape usa 10 pixels por defecto
WIDTH=colWidth
Especifica el ancho de las columnas en pixels Todas las columnas son de la misma anchura Si no se
especifica este paraacutemetro la anchura se ajusta para que se ocupe todo el ancho de la paacutegina
228 SPACER
Inserta espacio extra en el documento ya sea entre caracteres liacuteneas o rectaacutengulos de la paacutegina
Sintaxis
ltSPACER
TYPE=HORIZONTAL|VERTICAL|BLOCK
ALIGN=LEFT|RIGHT|TOP|ABSMIDDLE|ABSBOTTOM|
TEXTTOP|MIDDLE|BASELINE|BOTTOM
HEIGHT=height
WIDTH=width
SIZE=sizerdquogt
TYPE
Especifica sobre que se va a aplicar el espacio extra Los valores que puede tomar son
HORIZONTAL inserta espacio horizontal entre 2 caracteres
VERTICAL inserta espacio vertical entre 2 liacuteneas
BLOCK define un rectaacutengulo dentro del que se aplica el espaciado que se define en el marcador
ALIGN
Se aplica solo cuando el tipo es BLOCK Especifica el alineamiento del rectaacutengulo con respecto al texto
circundante Si no se especifica por defecto se usa BOTTOM
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 17
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Se aplica solo cuando el tipo es BLOCK y especifica la altura del rectaacutengulo en pixels
WIDTH=width
Se aplica solo cuando el tipo es BLOCK y especifica la anchura del rectaacutengulo en pixels
SIZE=size
Si el paraacutemetro TYPE es HORIZONTAL o VERTICAL este atributo especifica el espaciado en pixels que se
va a antildeadir En el caso que TYPE tenga el valor BLOCK el valor de este paraacutemetro se ignora
23 Modificadores del texto
En este epiacutegrafe se enumeran un conjunto de marcadores que hacen posible cambiar la
apariencia del texto de la paacutegina en el navegador
231 B
Visualiza el texto en negrita (boldface)
Sintaxis ltBgtltBgt
Ejemplo
Por fin es ltBgtViernesltBgt
232 BLINK
Texto con parpadeo en Netscape
Sintaxis ltBLINKgtltBLINKgt
233 EM
Texto enfatizado En Netscape se visualiza con Itaacutelica
Sintaxis ltEMgtltEMgt
234 FONT
Especifica la fuente el color y el tamantildeo del texto entre ltFONTgt y ltFONTgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 18
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFONT
COLOR=color
FACE=fontlist
POINT-SIZE=pointSize
SIZE=number
WEIGHT=boldnessgt
texto
ltFONTgt
FACE=fontlist
Especifica un conjunto de nombres de fuentes separadas por comas El navegador usa la primera fuente de la
lista disponible en ese ordenador Si no hay ninguna disponible no se aprecia cambio al utilizar el marcador
FONT
POINT-SIZE=pointSize
Indica el tamantildeo de la fuente en puntos mientras que SIZE lo indica en relacioacuten con el tamantildeo de fuente
estaacutendar
SIZE=number
Define el tamantildeo relativo de fuente en un rango de 1 (pequentildeo) a 7(grande) siendo el tamantildeo por defecto de
3 Tambieacuten se puede especificar variaciones de tamantildeo con un signo + o ndash y una cifra para la magnitud
SIZE=rdquo+2rdquo
WEIGHT=boldness
Indica el grado de negrita que se aplica al texto Los valores van de 100 (menos) a 900 (maacutes) en incrementos
de 100
Ejemplo
ltPgtAquiacute se ve el efecto de
ltFONT face=helveticaarialsans-serif color=green size=+2gt
usando el marcador FONT para cambiar la fuente a sans-serif verde
ltFONTgt
Ahora la fuente cambiaraacute a
ltFONT face=timesromanserif size=18 color=redgt
color rojo con un tamantildeo de 18 puntosltfontgt
235 I
Visualiza el texto en Itaacutelica
Sintaxis ltIgtltIgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 19
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
236 SUB
Visualiza el texto como subiacutendice Es decir un poco maacutes abajo y con un tamantildeo de letra menor
Sintaxis ltSUBgtltSUBgt
237 SUP
Visualiza el texto como superiacutendice Es decir un poco maacutes arriba y con un tamantildeo de letra menor
Sintaxis ltSUPgtltSUPgt
238 U
Visualiza el texto subrayado
Sintaxis ltUgtltUgt
239 Otros Modificadores menos utilizados
BASEFONT
define el tamantildeo base de la fuente por defecto ltBASEFONT SIZE=rdquo4rdquogt
BIG
Aumenta el valor de la fuente en 1
CITE
Define un tipo Cita en Netscape en Itaacutelica
CODE o TT (Typewriter Font)
Define un tipo para coacutedigo como fuente de tamantildeo fijo
PLAINTEXT
Suprime la interpretacioacuten de todos los modificadores a partir de el
SMALL
Reduce el tamantildeo de fuente en 1
STRIKE
Tacha el texto
STRONG
Visualiza el texto con eacutenfasis Netscape lo visualiza como en negrita
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 20
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
24 Listas
EN HTML se pueden definir dos tipos de listas las listas ordenadas OL (ordered list) que estaacuten indexadas con
nuacutemeros y las no ordenadas que se indexan con siacutembolos UL (un ordered list) Ambas constan de elementos
denominados LI (list items)
241 OL
Especifica una lista ordenada y numerada El estilo de numerado por defecto estaacute determinado por el
navegador pero se puede fijar usando la propiedad TYPE Los elementos de la lista se preceden del marcador
LI
Sintaxis
ltOL
START=value
TYPE=A|a|I|i|1gt
ltOLgt
START=value
Indica el nuacutemero de inicio de la lista Este nuacutemero tiene que ser un entero positivo
TYPE
Define el tipo de numeracioacuten que se usa para cada elemento de la lista Puede tomar los siguientes valores
A especifica una secuencia de letras en mayuacutescula
a especifica una secuencia de letras en minuacutescula
I especifica una secuencia de nuacutemeros romanos en mayuacutescula
i especifica una secuencia de nuacutemeros romanos en minuacutescula
1 especifica una secuencia de nuacutemeros
242 UL
Especifica una lista no ordenada Se puede usar la propiedad TYPE para cambiar el siacutembolo que inicia cada
elemento de la lista
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 21
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltUL TYPE=CIRCLE|DISC|SQUAREgt ltULgt
TYPE
Define el siacutembolo que aparece delante de cada elemento de la lista Los valores son los siguientes CIRCLE
DISC (por defecto en Netscape) o SQUARE
243 LI
Define un elemento de una lista que normalmente va precedido de un nuacutemero o un siacutembolo Este marcador se
usa dentro de los marcadores OL y UL Este marcador no necesita marcador de cierre
Sintaxis
ltLI
TYPE=DISC|CIRCLE|SQUARE|A|a|I|i|1
VALUE=numbergt
TYPE
Especifica el siacutembolo o nuacutemero que precede al item y se especifica igual que en los marcadores OL y UL
VALUE=number
Indica el valor de comienzo en una lista ordenada y solo es aplicable en este tipo de listas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 22
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
25 Enlaces y anclas
La parte fundamental de las paacuteginas HTML son los enlaces entre documentos
denominados links en ingleacutes Estos enlaces es lo que distingue a las paacuteginas web de lo que
es un libro tradicional
Haciendo un click de ratoacuten en uno de estos enlaces nuestro navegador visualizaraacute una hoja
distinta (enlace) o saltaraacute a otra seccioacuten de la misma paacutegina (ancla) Este comportamiento
es lo que ha hecho evolucionar el texto tradicional al denominado hipertexto de las paacuteginas
Web El marcador utilizado para definir los enlaces y las anclas es el A
251 A como enlace
Para definir un enlace se utiliza el marcador ltAgt junto al atributo HREF que indica la
localizacioacuten del documento destino y el marcador ltAgt para indicar el fin del enlace El
texto contenido entre ltAgt y ltAgt apareceraacute resaltado en la paacutegina web La mayoriacutea de los
navegadores y a no ser que se le indique otra cosa en la paacutegina muestran el texto de los
enlace de forma especial Netscape los muestra de color azul en modo subrayado y los
enlaces visitados de color puacuterpura Como ya se ha comentado esto se puede cambiar con los
atributos LINK VLINK y ALINK del marcador BODY
El valor que contiene el atributo HREF es un URL Este URL puede ser absoluto o relativo
y puede apuntar a ficheros de la misma maacutequina o de una maacutequina remota
Sintaxis ltA HREF=locationgt ltAgt
El atributo HREF se puede utilizar tambieacuten para enviar un mensaje
HREF=mailtocorreoudces para acceder a los ficheros de un servidor de FTP
HREF=ftpftpudces o para leer los grupos de un servidor de noticias
HREF=newsnewsudces
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 23
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
252 A como ancla
El marcador A funcionando como ancla define un lugar concreto dentro de la paacutegina web
de forma que se pueda acceder a esa posicioacuten directamente desde un enlace Para que A
funcione como un ancla hay que especificar el atributo NAME No es posible utilizar un
marcador A para definir a la vez un ancla y un enlace
Sintaxis ltA NAME=anchorNamegt ltAgt
Para acceder a una de estas anclas hay que insertar un marcador A con un HREF con el
nombre del ancla precedido del siacutembolo Tambieacuten se puede acceder a un documento de
una maacutequina remota especificando el ancla dentro de una paacutegina especificando la maacutequina
el directorio el nombre de la paacutegina y a continuacioacuten el nombre del ancla separado por un
siacutembolo Por ejemplo
HREF=ancla1
HREF=httpmimaquinadir1ficherohtmlancla1
26 Imaacutegenes
261 IMG
El marcador IMG apunta hacia una imagen que se va a visualizar en la paacutegina web Un marcador IMG puede
estar insertado en un enlace entre los marcadores ltAgt y ltAgt de forma que sea la imagen en la que se hace
click con el ratoacuten para acceder a otra paacutegina web
Para indicar que imagen se va a visualizar y donde estaacute se utiliza el atributo SRC Se puede especificar
tambieacuten una donde estaacute una versioacuten de baja resolucioacuten con el atributo LOWSRC La razoacuten de tener dos
versiones de la misma imagen es que la imagen de baja resolucioacuten como es maacutes pequentildea llega antes y el
usuario tiene algo que ver en pantalla mientras llega la versioacuten definitiva de alta resolucioacuten La versioacuten de
baja resolucioacuten deberiacutea ser mucho maacutes pequentildea que la otra Esta solucioacuten no es muy utilizada tendieacutendose
maacutes a usar imaacutegenes entrelazadas o progresivas que se van visualizando cada vez mejor seguacuten van llegando
los bytes
Los atributos HEIGHT y WIDTH indican las dimensiones que la imagen va a tener en la paacutegina web Si se
especifican los navegadores reservan un espacio en la paacutegina para cuando llegue la imagen y siguen cargando
el resto de elementos de la paacutegina Obviamente es posible variar los valores de estos atributos para adecuar el
tamantildeo de la imagen original
Actualmente los dos tipos maacutes conocidos de formato de imagen que visualizan los navegadores son GIF
(Graphics Interchange Format) y JPEG (Joint Photographic Experts Group)
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 24
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltIMG
SRC=location este atributo es imprescindible
LOWSRC=location
ALT=alterntiveText
ALIGN=alignment
BORDER=borderWidth
HEIGHT=height
WIDTH=width
HSPACE=horizMargin
VSPACE=verticalMargin
ISMAP
USEMAP=mapName
NAME=imageName
gt
SRC=location
Indica el URL de la imagen que se va a visualizar
LOWSRC=location
Indica el URL de la versioacuten de la imagen en baja resolucioacuten
ALT=alternativeText
Indica un texto que se visualizaraacute en vez de la imagen si el navegador que se utiliza no
soporta imaacutegenes o se tiene desactivada la opcioacuten de carga de imaacutegenes En las uacuteltimas
versiones de los navegadores este texto tambieacuten se visualiza cuando se detiene el ratoacuten
encima de la imagen dentro de un pequentildeo recuadro
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 25
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ALIGN
Especifica el alineamiento de la imagen en relacioacuten con el texto que la rodea puede tomar
los siguientes valores (el valor por defecto es BOTTON)
LEFT alienacioacuten al margen izquierdo
RIGHT alineacioacuten al margen derecho
TOP alinea la parte alta de la imagen con el objeto maacutes alto de la liacutenea
actual
ABSMIDDLE alinea la parte media de la imagen con la parte media del texto de la
liacutenea actual
ABSBOTTOM alinea la parte baja de la imagen con el objeto maacutes bajo de la liacutenea
actual
TEXTTOP lo mismo que TOP
MIDDLE alinea la parte media de la imagen con la liacutenea de base del texto de la
liacutenea actual
BASELINE alinea la parte baja de una imagen con la liacutenea de base del texto de la
liacutenea actual
BOTTOM lo mismo que BASELINE
BORDER=borderWidth
Especifica la anchura en pixels del borde alrededor de la imagen El valor ha de ser un
entero Si se pone a cero en una imagen que sea un enlace se suprimiraacute el borde azul
caracteriacutestico
HEIGHT=height
Indica la altura de la imagen Puede estar en pixels o en porcentaje de la altura de la
ventana el frame o el bloque de HTML que la contenga Para indicar un nuacutemero de pixels
se pone el valor ldquo100rdquo y para indicar un porcentaje se acompantildea el valor del signo
porcentaje ldquo100rdquo
WIDTH=width
Especifica la anchura de la imagen y tambieacuten se puede especificar en pixels y en porcentaje
de la misma forma que la altura
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 26
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HSPACE=horizMargin
Especifica un margen en pixels entre los bordes izquierdo y derecho de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
VSPACE=verticalMargin
Especifica un margen en pixels entre los bordes superior e inferior de la imagen con
respecto al texto y a las imaacutegenes que la rodeen
ISMAP
Indica que la imagen es un mapa servidor Para que tenga efecto este atributo la imagen
tiene que estar dentro de un marcador ltAgt ltAgt que apunte al fichero de mapeado Se veraacute
su funcionamiento en la siguiente seccioacuten
USEMAP=mapName
Indica que la imagen la imagen es un mapa sensible y el valor mapName indica el
marcador que contiene los valores de mapeado de la imagen Se veraacute su funcionamiento en
la siguiente seccioacuten
262 AREA
El marcador AREA define una zona dentro de una imagen Un mapa sensible puede
contener varias aacutereas ldquopinchablesrdquo y cada una de ellas puede tener asociadas un diferente
URL
El marcador AREA se usa siempre dentro del marcador MAP que se veraacute a continuacioacuten
Sintaxis
ltAREA
COORDS=coords este atributo es imprescindible
SHAPE=shape
HREF=location
NOHREF
TARGET=windowName
gt
Es necesario que se especifique el atributo HREF o el NOHREF
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 27
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COORDS=coords
Indica las coordenadas de la zona Las coordenadas se especifican desde la esquina superior izquierda de la
imagen El formato de este atributo depende de la forma que va a tener la zona que se define en el atributo
SHAPE Si SHAPE no se incluye en el marcador la forma por defecto es un rectaacutengulo y entonces los
valores tienen que ser de la forma x1y1x2y2 donde x1 y1 son las coordenadas de la esquina superior
izquierda y x2 y2 las coordenadas de la esquina inferior derecha Si en el atributo SHAPE se especifica un
ciacuterculo el formato es xyr donde xy son las coordenadas del centro del ciacuterculo y r es el radio El uacuteltimo
caso es que se especifique un poliacutegono que puede ser de hasta 100 lados El formato es x1y1x2y2xnyn
donde cada par xy representa un punto de uno de los lados del poliacutegono El uacuteltimo par xy se conecta con el
primero para cerrar el poliacutegono
SHAPE=shape
Especifica la forma de la zona Dependiendo de la forma que se escoja hay que definir de una cierta manera
los valores de definicioacuten de coordenadas en el atributo COORDS Las formas que se pueden escoger son
CIRCLE RECT y POLY o POLYGON Si no se especifica nada el valor por defecto es RECT
HREF=location
Especifica el URL al que se salta al hacer click en esa zona
NOHREF
Especifica que no se salta a ninguna nueva paacutegina al hacer click en esa zona
263 MAP
Este marcador contiene la informacioacuten de las zonas activas que existen dentro de una imagen Una zona
activa define una zona dentro de una imagen que tiene asignado un URL por lo que al hacer un click con el
ratoacuten se pasa a otra paacutegina web Este tipo de imaacutegenes con zonas activas se denominan mapas sensibles
Existen dos tipos de mapas sensibles servidores y clientes En los mapas servidores la informacioacuten de las
zonas estaacute almacenada en un fichero aparte que reside en el servidor de web En los mapas cliente la
informacioacuten estaacute dentro de un marcador MAP en el propio fichero HTML en el que se muestra la imagen
Este marcador MAP contiene uno o varios marcadores AREA para describir las diferentes zonas de la imagen
y los URLrsquos asociados a ellas
Para asociar un las zonas a una imagen dentro del marcador IMG se antildeade el atributo USEMAP Este
atributo toma como valor un nombre del mapa indicado en un marcador MAP precedido por un siacutembolo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 28
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltMAP NAME=mapNamegt este atributo es imprescindible
ltAREA gt
ltAREA gt
ltMAPgt
NAME=mapName
Indica el nombre del mapa Este nombre precedido de es el que se indica en el campo
USEMAP del marcador IMG
Ejemplo
ltIMG SRC=imagesshapesgif WIDTH=100 HEIGHT=100
ALT=shapes USEMAP=mainmap
ltMAP NAME=mainmapgt
ltAREA SHAPE=CIRCLE COORDS=505025
HREF=httphomenetscapecom gt
ltAREA SHAPE=RECT COORDS=5050100100
HREF=httpdevelopernetscapecom gt
ltAREA SHAPE=RECT COORDS=00100100
HREF=httpdevelopernetscapecomlibrary gt
ltMAPgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 29
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
264 MapThis
Este es uno de los varios programas que se pueden encontrar en Internet para el desarrollo de una forma faacutecil
de mapas sensibles en las imaacutegenes de las paacuteginas web Es programa es muy reducido ocupa apenas 1Mb de
espacio en disco (837Kb si no contamos los ejemplos) y su uso es muy sencillo Una vez descomprimido en
un directorio no es necesario instalarlo y como se puede ver solo consta de dos ficheros (el propio programa y
uno de ayuda) y un directorio de ejemplos
Una vez iniciado el programa lo primero que hay que hacer es crear un proyecto pulsando la opcioacuten New del
menuacute File Despueacutes de esto hay que escoger la imagen en formato GIF o JPEG que nos va a valer de base
para el mapa Entonces se nos muestra la imagen en pantalla A continuacioacuten podemos ya se pueden definir
las zonas con forma rectangular circular o poligonal Para esto hay que seleccionar uno de los botones que
tienen estas formas en azul en la barra de herramientas inferior Para dibujar una zona rectangular una vez
quede pulsado el botoacuten de este tipo de zonas hay que pinchar con el botoacuten izquierdo del ratoacuten en la esquina
superior izquierda y arrastrar hasta llegar a la esquina inferior derecha En el caso de un ciacuterculo donde se
pinche con el ratoacuten va a ser el centro del ciacuterculo y al arrastrar se decide el tamantildeo del radio Para dibujar un
aacuterea poligonal se va haciendo click con el ratoacuten para ir marcando los veacutertices del poliacutegono en el momento en
que se haga un doble click el programa cierra la figura Si se marca con el ratoacuten el botoacuten con el icono flecha
es posible mover y redimensionar las zonas que ya han sido dibujadas Haciendo doble click encima de una de
estas zonas se puede especificar el URL al que se quiere acceder desde ella
Una vez que tenemos perfectamente definidas las zonas que interesan de la imagen hay que salvar esta
informacioacuten a formato HTML Para ello se escoge la opcioacuten Save del menuacute File y en la ventana que aparece a
continuacioacuten hay que escoger la opcioacuten CSIM que genera un fichero HTML con la informacioacuten de las zonas
Despueacutes de escoger el tipo de formato se escoge el nombre del fichero y el directorio donde se guarda en el
disco En la siguiente imagen se muestra una ventana del block de notas de Windows con el fichro de salida
del programa MapIt para la imagen del X33
265 GIFrsquos animados
Dentro del punto en el que se comentaba el marcador IMG se indicaba que los uacutenicos formatos de imagen que
los navegadores pueden visualizar actualmente son el GIF y el JPEG La ventaja que plantea el formato GIF
frente al JPEG es la posibilidad del visualizacioacuten progresiva y la posibilidad de almacenar pequentildeas
animaciones dentro de un archivo con formato GIF
Para desarrollar animaciones basadas en el formato GIF tambieacuten existen distintos programas generalmente
gratuitos Aquiacute se va a explicar el funcionamiento baacutesico del programa Microsoft GIF Animator que como en
el caso del MapIt es un programa de tamantildeo muy reducido (560Kb instalado) y muy sencillo de usar La barra
de herramientas comienza con los tiacutepicos botones de Nuevo Abrir y Salvar necesarios en cualquier programa
A continuacioacuten hay un icono para insertar nuevas imaacutegenes y otro para hacer un Salvar como Despueacutes
tenemos el grupo de iconos para Copiar y Pegar y el que permite seleccionar todos las imaacutegenes de la
animacioacuten Por uacuteltimo hay dos flechas para cambiar el orden de las imaacutegenes dentro de la animacioacuten y el
botoacuten de Play para ver al animacioacuten funcionando
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 30
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
En la parte izquierda se pueden ver el conjunto de imaacutegenes de la animacioacuten y en la parte derecha hay tres
pestantildeas que indican las opciones generales sobre el programa (Options) de la animacioacuten (Animation) y de la
imagen en particular que esteacute seleccionada en un momento dado (Image)
En Animation se define la repeticioacuten de la animacioacuten Loop con el nuacutemero de veces que se va a repetir o si se
va a repetir siempre (Forever) Tambieacuten se define aquiacute el tamantildeo de la animacioacuten en pixels En Image se
define el tiempo que permanece la imagen visualizada hasta que se carga la siguiente y la posicioacuten de una
imagen con respecto al origen de coordenadas
3 HTML avanzado
Los marcadores que se comentan en este punto ya no forman parte de las definiciones
iniciales del HTML e incluso hoy diacutea no es muy comuacuten poder componerlos en los editores
de HTML Es decir si se quiere construir una paacutegina con Frames es necesario editar
ficheros ASCII a mano e incluir los marcadores necesarios lo mismo ocurre con los
marcadores para multimedia mientras que la construccioacuten de tablas y formularios ya estaacute
mucho maacutes automatizada
31 Tablas
311 Table
El marcador TABLE define una tabla Dentro de un marcador TABLE se usan los
marcadores TR para definir filas y el TD para definir columnas El marcador TABLE
tambieacuten puede llevar un marcador CAPTION para especificar el tiacutetulo de la tabla
Como propiedades de TABLE se pueden especificar la anchura del borde de la tabla y su
color de fondo Tambieacuten se puede especificar de forma individual el color de fondo de filas
y celdas en los marcadores TR y TD Es posible tambieacuten especificar la distancia entre
celdas y la distancia del contenido de la celda al borde Por uacuteltimo se puede establecer la
anchura y la altura de la tabla aunque el tipo de navegador tenga mucho que ver con el
resultado final de la tabla en pantalla
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 31
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltTABLE
ALIGN=LEFT|RIGHT
BGCOLOR=color
BORDER=value
CELLPADDING=value
CELLSPACING=value
HEIGHT=height
WIDTH=width
COLS=numOfCols
HSPACE=horizMargin
VSPACE=vertMargingt
ltTABLEgt
ALIGN
Indica la alineacioacuten horizontal de la tabla Como es habitual puede tomar los valores LEFT
RIGHT y CENTER
BGCOLOR=color
Establece el color de fondo de la tabla Este color tiene menos prioridad que el que se
establece de fondo en los marcadores TR o TD que prevalecen
BORDER=value
Indica el ancho del borde que se dibuja alrededor de la tabla en pixels El valor tiene que
ser un entero Si el valor es cero indica que la tabla no tiene borde Tambieacuten se puede
especificar la propiedad borde sin ninguacuten valor con lo que se consigue un borde con el
ancho predefinido en el navegador
CELLPADDING=value
Determina la cantidad de espacio en pixels entre el borde una celda y el contenido de esta
El valor por defecto es uno
CELLSPACING=value
Determina la cantidad de espacio en pixels entre las celdas de la tabla El valor por defecto
es 2
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 32
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HEIGHT=height
Especifica la altura de la tabla El valor por defecto se calcula para ajustar los contenidos de
cada celda El valor de la altura se puede especificar en pixels con un nuacutemero entero o con
un porcentaje sobre la altura de la paacutegina en la que estaacute contenida la celda con un nuacutemero
entero seguido del signo Cuando se especifican estos valores la tabla se escala para
ajustar su contenido a esa altura y anchura
WIDTH=width
Define la anchura de la tabla Igual que en el caso de la altura el valor por defecto de la
anchura se calcula para ajustar los contenidos La forma de especificar el valor es igual que
en la propiedad altura
COLS=numOfCols
Indica el nuacutemero de columnas de igual anchura de la tablas
HSPACE=horizMargin
Especifica la distancia entre el borde izquierdo y derecho de la tabla y los objetos que haya
alrededor de ella
VSPACE=vertMargin
Especifica la distancia entre el borde superior e inferior de la tabla y los objetos que haya
alrededor de ella
312 Caption
El marcador CAPTION define el tiacutetulo de la tabla Este marcador tiene que ir dentro de
ltTABLEgt ltTABLEgt
Sintaxis
ltCAPTION ALIGN=BOTTOM|TOPgtltCAPTIONgt
ALIGN
Especifica la posicioacuten del tiacutetulo con respecto a la tabla
BOTTOM en la parte inferior
TOP en la parte inferior Este es el valor por defecto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 33
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
313 TR
El marcador TR define una fila dentro de una tabla Se usa entre los marcadores ltTABLEgt
ltTABLEgt Dentro del marcador TR se incluyen los marcadores TD de las columnas
Sintaxis
ltTR
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color gt
ltTRgt
VALIGN
Especifica el emplazamiento vertical del contenido de la celda Puede tomar los valores
BASELINE BOTTOM MIDDLE (valor por defecto) y TOP
BGCOLOR=color
Establece el color por defecto de las celdas de esa fila El BGCOLOR que se especifica
para cada celda prevalece sobre el valor de la fila
314 TD
Sirve para indicar el contenido de una celda Se usa dentro del marcador TR Se puede
especificar el nuacutemero de columnas y filas que abarca una determinada celda asiacute como
especificar en concreto un cierto color de fondo
Sintaxis
ltTD
ALIGN=CENTER|LEFT|RIGHT
VALIGN=BASELINE|BOTTOM|MIDDLE|TOP
BGCOLOR=color
COLSPAN=value
ROWSPAN=value
HEIGHT=pixelHeight
WIDTH=pixelWidth
NOWRAP=value gt
ltTDgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 34
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
COLSPAN=value
Indica el nuacutemero de columnas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo
entero
ROWSPAN=value
Indica el nuacutemero de filas que ocuparaacute esa celda El nuacutemero tiene que ser de tipo entero
HEIGHT=pixelHeight
Especifica la altura de la celda en pixels
WIDTH=pixelWidth
Especifica el ancho de la celda en pixels
NOWRAP
Indica que las liacuteneas de la celda no pueden ser divididas en varias liacuteneas
32 Frames
En este punto se va a comentar la posibilidad de dividir la ventana del navegador en
documentos independientes en los que se pueden cargar distintas paacuteginas webs Para ello se
define una paacutegina que contiene la definicioacuten de las divisiones estas divisiones se conocen
como FRAMESETS y dentro de ellas cada divisioacuten se denomina FRAME y visualiza una
paacutegina web
321 Frame
El marcador FRAME crea una regioacuten individual dentro de la ventana del navegador que
dispone de una barra de desplazamiento propia Se puede pensar en esta aacuterea como una
ventana dentro de otra ventana El marcador FRAME se utiliza dentro del marcador
FRAMESET Cada FRAME visualiza un URL distinto que determina su contenido
Se puede especificar si una FRAME tiene borde maacutergenes si se puede modificar su
tamantildeo o si puede tener barras de desplazamiento
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 35
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAME
BORDERCOLOR=color
FRAMEBORDER=YES|NO
MARGINHEIGHT=marginHeight
MARGINWIDTH=marginWidth
NAME=frameName
NORESIZE
SCROLLING=YES|NO|AUTO
SRC=URL gt Esta propiedad es imprescindible
BORDERCOLOR=color
Especifica el color del borde de la Frame Como cada Frame puede tener su color de borde
es el navegador el que resuelve cualquier conflicto que se plantee
FRAMEBORDER
Determina si la Frame tiene o no bordes visibles Los valores posibles son YES o NO
Cuando la propiedad FRAMEBORDER aparece en un marcador FRAMESET afecta a
todos los Frames que pertenencen a ese FRAMESET Si alguacuten Frame en concreto dentro
del FRAMESET tiene especificada una propiedad FRAMEBORDER su valor sobreescribe
el del FRAMESET Un borde compartido por varias Frames solo es invisible si todas las
Frames que lo comparten tienen puesto la propiedad FRAMEBORDER a NO Si no se
especifica nada ni en Frame ni en FRAMESET el valor por defecto es que las Frames
tengan bordes
MARGINHEIGHT=marginHeight
Especifica la distancia de los maacutergenes superior e inferior en pixels a los contenidos de la
Frame
MARGINWIDTH=marginWidth
Especifica la distancia de los maacutergenes izquierdo y derecho en pixels a los contenidos de
la Frame
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 36
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
NAME=frameName
Especifica el nombre de la Frame Esta propiedad es importante en cuanto a carga de
contenidos de una Frame a otra Se explica a continuacioacuten en el punto A
NORESIZE
Especifica que el usuario no puede cambiar el tamantildeo de la Frame Con que solo una de las
Frames que comparten un determinado borde tenga especificada esta propiedad ese borde
ya no se podraacute mover y por tanto todas ellas tendraacuten un tamantildeo invariable
SCROLLING
Indica si van a estar disponibles las barras de desplazamiento en la Frame Los valores
posibles son YES NO y AUTO que indica que el navegador determina cuando hace falta y
cuando no visualizar las barras de desplazamiento dependiendo de las medidas de los
contenidos de la paacutegina que hay que visualizar El valor AUTO es el valor por defecto
SRC=URL
Especifica el URL del documento que se va a visualizar en ese Frame El URL no puede ser
el de un ancla dentro de un documento Si no se especifica un URL la Frame se visualizaraacute
vaciacutea
322 Frameset
El marcador FRAMESET organiza un conjunto de Frames que aparecen juntas en la
ventana de un navegador Un FRAMESET contiene normalmente maacutes de una Frame y a su
vez contiene una paacutegina web cargando un fichero html
Este marcador sirve para definir la estructura de la paacutegina que tiene las Frames por lo que
va a ser el uacutenico contenido de esa paacutegina web Ademaacutes este documento HTML no va a
contener parte BODY solo tendra marcadores HTML y HEAD junto con los FRAMESET
y FRAME
Un marcador FRAMESET sirve para especificar la organizacioacuten de las Frames en filas o en
columnas pero no en las dos a la vez Si se quiere desarrollar una paacutegina que mezcle filas y
columnas hay que anidar marcadores FRAMESET de forma que primero se divida en filas
y despueacutes en columnas o viceversa sin limitacioacuten en el nuacutemero de cualquiera de ellas
Se puede especificar la anchura del borde dentro del primer FRAMESET para que afecte a
todas las Frames Este valor asiacute como el color del borde pueden ser sobreescritos si se
definen estas propiedades en los marcadores FRAME internos al FRAMESET
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 37
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltFRAMESET
COLS=columnWidthList
ROWS=rowHeightList
BORDER=pixWidth
BORDERCOLOR=color
FRAMEBORDER=YES|NOgt
ltFRAMESETgt
Una de las dos propiedades filas o columnas tiene que ser definida en cada marcador
FRAMESET
COLS=columnWidthList
Contiene una lista de valores separada por comas con la anchura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la anchura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Ancho en Pixels
Ancho en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias
columnas con asterisco se reparte en partes iguales a cada columna el espacio que sobre de
las columnas que tienen indicacioacuten numeacuterica
ROWS=rowHeightList
Contiene una lista de valores separada por comas con la altura de cada Frame Si se
sustituye uno de los valores por un asterisco el navegador le asigna a esa Frame la altura
restante Si no se hace asiacute el navegador puede ajustar alguno de los valores para ajustar el
espacio disponible Los valores pueden ser cubiertos de la forma
Alto en Pixels
Alto en porcentaje de la ventana padre
Asterisco que quiere decir tanto como sea posible Si se especifica el espacio de varias filas
con asterisco se reparte en partes iguales a cada fila el espacio que sobre de las filas que
tienen indicacioacuten numeacuterica
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 38
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
BORDER=pixWidth
Especifica la anchura del borde en pixels de todas las Frames Solo se puede utilizar en el
marcador FRAMESET maacutes exterior Un valor de 0 indica que no tendraacuten borde Si no estaacute
presente la propiedad de BORDER el valor por defecto es 5
BORDERCOLOR=color
Especifica el color de los bordes de las Frames del FRAMESET Debido a que los bordes
estaacuten compartidos por varias Frames que los rodean los navegadores utilizan unas reglas de
prioridad para resolver los conflictos en las asignaciones de esta propiedad en distintas
Frames y FRAMESET La menor prioridad es lo que se especifica en el primer
FRAMESET (el maacutes exterior) tiene maacutes prioridad lo que se especifica en los FRAMESET
maacutes interiores y por uacuteltimo la mayor prioridad la tiene lo que se especifica en el marcador
FRAME Si existe un conflicto entre dos especificaciones de la misma prioridad el
resultado dependeraacute del tipo y versioacuten que se esteacute utilizando
FRAMEBORDER
Determina si se va a ver o no el borde de la Frame Los valores posibles son YES o NO
Esta propiedad se aplica a todos las Frames del FRAMESET Si esta propiedad se
especifica dentro de un marcador FRAME se aplica solo a esa Frame en particular sin hacer
caso de lo que se diga en el marcador FRAMESET Solo se quita el borde si todas las
Frames que lo rodean tienenla propiedad FRAMEBORDER a NO Si esta propiedad no se
especifica en ninguacuten marcador FRAME ni FRAMESET el valor por defecto es YES
323 A
El comportamiento normal de un enlace consiste en que cuando se hace en el un click con
el ratoacuten a continuacioacuten se carga en esa ventana la paacutegina del URL en el marcador A
Si tenemos varias Frames en la ventana del navegador y utilizamos el marcador A como
hasta ahora cuando se haga click en un enlace de una Frame el URL se cargaraacute en esa
misma Frame
Para conseguir que cambie el contenido de una Frame al hacer click en otra hay que
combinar la propiedad TARGET en el marcador A con la propiedad NAME del marcador
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 39
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
FRAME
La Frame que se quiera que sea objetivo es decir en la que se va a cargar una paacutegina tiene
que tener un nombre Por lo tanto en la definicioacuten de ese Frame hay que especificr un
nombre con NAME=rdquoframe-destinordquo Sabiendo ya el nombre de la Frame para que se
carge una paacutegina en ella en un enlace de otra paacutegina hay que poner la propiedad TARGET
a ese nombre Por ejemplo
ltA TARGET=rdquoframe-destinordquo URL=httpunoudcesunahtmlgt ltAgt
La propiedad TARGET tambieacuten puede tomar los valores
_blank que carga la paacutegina en una nueva ventana del navegador
_self carga la paacutegina en la misma ventana donde estaacute el enlace
_parent carga la paacutegina en el FRAMESET justo por encima del actual esto quiere decir que
si hay una paacutegina con frames pasariacutea a haber en la misma ventana solo la paacutegina nueva sin
frames
_top carga la paacutegina en la ventana completa obviando toda la jerarquiacutea de Frames y
Frameset
Para no especificar continuamente propiedades TARGET en todos los enlaces se puede
definir un marcador BASE para la propiedad TARGET Si se especifica
ltBASE TARGET=rdquouna-framerdquogt
Todos los marcadores A tomaraacuten por defecto el TARGET a la frame ldquouna-framerdquo y solo
habriacutea que especificar la propiedad TARGET para los enlaces que no apunten a esa Frame
324 Navegadores que no soportan frames
No todos los navegadores soportan Frames Las versiones antiguas de Netscape y Explorer
no las soportan ni tampoco los navegadores de modo texto como Lynx Por este motivo es
conveniente mantener una cierta informacioacuten en la paacutegina que puedan leer estos
navegadores aunque solo sea para indicar que es necesaria cierta versioacuten del navegador
para visualizar correctamente una paacutegina
Para conseguir esto a continuacioacuten de la seccioacuten de FRAMESETrsquos hay que situar un
marcador denominado ltNOFRAMESgt El coacutedigo HTML que se escriba despueacutes de este
marcador seraacute visualizado por los navegadores que no soporten Frames y no seraacute
visualizado por los que si que las soporten
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 40
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
33 Formularios
331 Form
El marcador FORM sirve para definir un formulario de entrada de datos Estos formularios
incluyen un amplio grupo de controles como campos de texto cajas de opciones (check box
y radio buttons) y listas de seleccioacuten Todos estos elementos se definen entre los
marcadores ltFORMgt y ltFORMgt mediante los marcadores INPUT SELECT y
TEXTAREA que se veraacuten a continuacioacuten Ademaacutes de los controles propios del formulario
dentro de el pueden ir marcadores para imaacutegenes tablas etc Hay que tener en cuenta que
los formularios no se pueden anidar y por tanto hay que terminar uno antes de empezar el
siguiente
Una vez que se visualiza el formulario el usuario puede rellenar campos escoger opciones
y por uacuteltimo enviar el formulario haciendo click en el botoacuten Submit Este botoacuten se define
con el marcador ltINPUT TYPE=SUBMITgt que se comentaraacute maacutes adelante La
informacioacuten sobre que se debe hacer para enviar el formulario y adonde se define en la
propiedad ACTION del marcador TAG El valor de esta propiedad es normalmente un
URL que apunta a un programa CGI que reside en un servidor de Web Este programa los
formularios y genera una salida a fichero a una paacutegina web o a una base de datos Los
datos que le llegan al CGI son una serie de pares Nombre de campoValor cubierto por el
usuario
Sintaxis
ltFORM
ACTION=serverURL
ENCTYPE=encodingType
METHOD=GET|POST
NAME=formName
TARGET=windowNamegt
ltFORMgt
ACTION=serverURL
Especifica el URL del programa que va a procesar el formulario Tambieacuten se puede utilizar
el tipo de URL mailto con una direccioacuten de E-mail para enviar el formulario por correo
electroacutenico
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 41
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ENCTYPE=encodingType
Especifica el tipo de codificacioacuten MIME con que el formulario va a ser enviado
ldquoapplicationx-www-form-urlencodedrdquo es la codificacioacuten por defecto
ldquomultipartform-datardquo se utiliza si el formulario contiene un fichero
ldquotextplainrdquo es la codificacioacuten maacutes simple y la idoacutenea si se va a enviar a una
direccioacuten de correo
METHOD
Especifica como se va a enviar el formulario al programa que recibe la informacioacuten Hay
dos opciones
GET es la opcioacuten por defecto sirve para enviar la informacioacuten hacia un URL
POST enviacutea la informacioacuten en un contenedor para datos y es la opcioacuten para enviar el
formulario por correo electroacutenico
NAME=formName
Especifica el nombre del formulario El nombre no se visualiza en la paacutegina pero es
necesario si hay que referenciar varios formularios en la misma paacutegina
332 Input
Es uno de los marcadores que permiten la entrada de datos del usuario dentro del
formulario El paraacutemetro TYPE indica que tipo de elemento de entrada se va a visualizar
El valor del paraacutemetro TYPE tiene que ser uno de los siguientes
BUTTON visualiza un botoacuten en el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
CHECKBOX visualiza un control que puede ser puesto ha seleccionadono seleccionado
Checked indica que inicialmente el Checkbox estaacute marcado
Name nombre del Checkbox
Value es el valor que se enviacutea al servidor si el Checkbox estaacute marcado
El valor por defecto es ON
FILE visualiza un control de texto en el que le usuario puede especificar el nombre de un
fichero Al enviarse el formulario el contenido del fichero se enviacutea con el
Name nombre del control
Value valor inicial del contenido del control
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 42
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
HIDDEN sirve para especificar un campo de texto no visible para el usuario y que pueda
ser enviado cuando se manda el formulario
Name nombre del control
Value valor inicial del contenido del control
IMAGE visualiza una imagen que sirve como alternativa al botoacuten de enviacuteo del formulario
Cuando se pulsa en la imagen se enviacutea el formulario
Align alineacioacuten de la imagen con respecto al texto (como en IMG)
Name nombre del control
SRC URL de la imagen
PASSWORD visualiza un campo de texto que al escribir en el no visualiza los caracteres
que se escriben sino solo siacutembolos que hacen imposible saber lo que se escribe en el
teclado mirando la pantalla
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
RADIO visualiza un control de selecciones exclusivas de forma que al agrupar varios solo
uno puede estar seleccionados a la vez
Checked indica que inicialmente estaacute marcado
Name nombre del control
Value es el valor que se enviacutea al servidor si el control estaacute marcado
El valor por defecto es ON
RESET visualiza un botoacuten que al pulsarlo vaciacutea todos los campos del formulario Si
alguno de los campos tiene valor por defecto lo restaura a ese valor
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
SUBMIT visualiza el botoacuten que al pulsar en el enviacutea el formulario
Name nombre del botoacuten
Value Texto que se visualiza en el botoacuten
TEXT visualiza un control con una uacutenica liacutenea de texto para que el usuario escriba
Maxlength maacuteximo nuacutemero de caracteres que acepta el campo
Name nombre del control
Size tamantildeo del control
Value el valor inicial del campo
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 43
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
333 Select
El marcador SELECT sirve para definir una lista en la que el usuario puede seleccionar una
o varias opciones dependiendo de la propiedad MULTIPLE
La propiedad SIZE especifica cuantas de las opciones se visualizaraacuten a la vez Para listas
con seleccioacuten de muacuteltiples opciones el navegador visualiza por defecto el mayor nuacutemero
posible con barras de desplazamiento si es necesario Sin embargo para listas de seleccioacuten
uacutenica se visualiza un control desplegable Al enviar el formulario las listas se traducen a
pares nombre de controlvalor que es lo que llega al servidor
Sintaxis
ltSELECT
NAME=selectName
MULTIPLE
SIZE=listLengthgt
ltOPTIONgt
ltOPTION gt
ltSELECTgt
MULTIPLE
Especifica que la lista es de seleccioacuten muacuteltiple Si omite esta propiedad la lista se considera
de seleccioacuten uacutenica
NAME=selectName
Especifica el nombre del control
SIZE=ListLength
Especifica el nuacutemero de opciones que se pueden ver a la vez Si la lista contiene maacutes
opciones que el valor de esta propiedad se visualiza automaacuteticamente una barra de
desplazamiento
334 Option
El marcador OPTION especifica una opcioacuten en una lista de seleccioacuten Cuando se enviacutea el
formulario al servidor de cada una de las opciones marcadas de la lista se mandan una
pareja nombre del controlvalor
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 44
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltOPTION
VALUE=optionValue
SELECTEDgt
ltOPTIONgt
VALUE=OptionValue
Especifica el valor que se enviacutea al servidor cuando se selecciona esta opcioacuten Si no se
especifica esta opcioacuten se enviacutea el texto de la opcioacuten
SELECTED
Especifica la opcioacuten que estaacute marcada por defecto en la lista
335 TextArea
El marcador TEXTAREA define un campo de entrada de texto de muacuteltiples liacuteneas Se
puede definir el nuacutemero de caracteres por liacutenea y de liacuteneas del control para definir el
tamantildeo en el que no haraacute falta visualizar las barras de desplazamiento Si se supera este
tamantildeo con el texto las barras aparecen automaacuteticamente
Sintaxis
ltTEXTAREA
COLS=columns
NAME=name
ROWS=rows
WRAP=OFF|HARD|SOFTgt
textToDisplay
ltTEXTAREAgt
COLS=columns
Define la anchura del control en caracteres
NAME=name
Especifica el nombre del aacuterea de texto
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 45
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
ROWS=rows
Define el nuacutemero inicial de filas
WRAP
Define si las palabras que superan el ancho del control pasan a la liacutenea siguiente o
continuacutean y se visualiza una barra de desplazamiento Los valores que puede tomar esta
variable son
OFF desactiva esta opcioacuten El texto que escribe el usuario se pone en la misma liacutenea hasta
que el usuario pulsa Enter El cambio de liacutenea se graba con el texto y si el usuario quiere
ver el texto que supera el borde tiene que utilizar las barras de desplazamiento
HARD ajusta automaacuteticamente el texto a la anchura del control Cuando se enviacutea el
formulario se enviacutean los cambios de liacutenea necesarios
SOFT igual que el anterior pero no enviacutea los cambios de liacutenea
34 Columnas
El marcador MULTICOLUM establece una zona del documento en la que el texto se
organiza en varias columnas
Sintaxis
ltMULTICOL
COLS=columns (este atributo es obligatorio)
GUTTER=gutterWidth
WIDTH=colWidthgt
ltMULTICOLgt
COLS=columns
Especifica el nuacutemero de columnas de texto a visualizar El navegador distribuye el texto
entre las distintas columnas para que tengan una altura similar A menos que se especifique
el atributo WIDTH la anchura de cada columna se ajusta para ocupar el ancho de la paacutegina
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 46
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
GUTTER=gutterWidth
Especifica la distancia entre columnas en pixels El valor por defecto de este atributo es 10
WIDTH=colWidth
Especifica la anchura de cada columna en pixels Todas las columnas van a tener la misma
anchura
35 Multimedia y applets
351 Sonido
Netscape Navigator incluye soporte para ficheros de sonido de varios formatos como
AIFF AU MIDI y WAV que van insertados en las paacuteginas HTML mediante la tecnologiacutea
LiveAudio Para trabajar con estos ficheros en la paacutegina se carga una consola que permite
la reproduccioacuten del fichero de audio asiacute como variar el volumen Dependiendo del nuacutemero
de controles de la consola existen 6 opciones
1Console ndash botones de Play Pause Stop y control de volumen
2SmallConsole ndash botones de Play Stop y control de volumen (en este tipo de consola
el sonido empezaraacute a sonar en cuanto se acabe de cargar el fichero - autostart) En esta
opcioacuten los botones seraacuten maacutes pequentildeos
3PlayButton ndash un solo botoacuten para iniciar la reproduccioacuten del fichero
4PauseButton ndash un solo botoacuten que sirve para hacer una pausa
5StopButton ndash un solo botoacuten que finaliza la reproduccioacuten y descarga el fichero
6VolumeLever ndash un solo control para seleccionar el volumen
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 47
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
Sintaxis
ltEMBED SRC= [URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE|INTEGER]
STARTTIME=[MINUTESSECONDS]
ENDTIME=[MINUTES|SECONDS]
VOLUME=[0-100]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT
|TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
HIDDEN=[TRUE]
MASTERSOUND
NAME=[name]gt
SRC=[URL] ndash El URL del fichero de sonido
AUTOSTART=[TRUE|FALSE] ndash El fichero de sonido empieza a sonar tan pronto se acaba
de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE|INTEGER] ndash Si el valor es TRUE el fichero se hacer sonar
continuamente hasta que el usuario pulsa el botoacuten de STOP en la consola o cambia de
paacutegina web Si se especifica un INTEGER el sonido se reproduce el nuacutemero de veces que
se especifica en ese valor
STARTTIME=[MINUTESSECONDS] ndash indica el tiempo que va a tardar en reproducirse
el fichero de audio desde que acaba de cargarse Si se quiere que empiece despueacutes de 30
segundos hay que poner el valor a 0030
ENDTIME=[MINUTESSECONDS] ndash indica el tiempo que tardaraacute en parar
automaacuteticamente el sonido Si se quiere que pare despueacutes de 15 minutos hay que poner el
valor a 0130
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 48
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
VOLUME=[0-100] ndash El valor se da en porcentaje Este atributo se aplica al sonido del
fichero especificado en el URL a menos que se use MASTERVOLUME en el atributo
NAME ya que entonces se aplica al nivel de sonido general del sistema El valor por
defecto es el valor actual del sonido del sistema
WIDTH=[ PIXELS] ndash Especifica la anchura de la consola Para los tipos CONSOLE y
SMALLCONSOLE el valor por defecto es 144 Para el tipo VOLUMELEVER el valor es
74 y para un solo botoacuten es 37
HEIGHT=[ PIXELS] ndash Especifica la altura de la consola Para los tipos CONSOLE el
valor por defecto es 60 para SMALLCONSOLE es 15 Para el tipo VOLUMELEVER el
valor es 20 y para un solo botoacuten es 22
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|
MIDDLE|ABSMIDDLE|ABSBOTTOM]
Este atributo le indica al navegador como va a fluir el texto alrededor de las consolas Es
similar al atributo del marcador IMG
CONTROLS=[CONSOLE|SMALLCONSOLE|PLAYBUTTON|
PAUSEBUTTON|STOPBUTTON|VOLUMELEVER]
Este atributo define la apariencia que va a tener la consola y por tanto que controles va a
contener El valor por defecto es consola
HIDDEN=[TRUE] - Si se incluye esta propiedad debe tener el valor TRUE Si se
especifica no se visualizaraacute el control y el sonido empezaraacute a sonar como una muacutesica de
fondo de la paacutegina
MASTERSOUND ndash Hay que usarlo cuando se quieren agrupar varios sonidos en un grupo
NAME Este atributo no contiene valores y sirve para que LiveAudio distinga entre los
marcadores que tienen un sonido de los que sirven para coordinar varios ficheros de sonido
NAME=[name] ndash establece un uacutenico nombre para un grupo de consolas que manejan el
mismo fichero de sonido Por ejemplo se pueden tener dos consolas independientes uno
con un botoacuten PLAY y otra con un botoacuten STOP para manejar el mismo fichero Uno de las
dos consolas tiene que llevar el atributo MASTERSOUND Esta seraacute la que realmente
almacene el fichero de audio
Tambieacuten se puede tener un control que maneje el volumen de muacuteltiples consolas Para ello
se crea una consola VOLUMELEVER y se asigna MASTERVOLUME a la propiedad
NAME
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 49
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
352 Viacutedeo
El navegador Netscape permite ver directamente viacutedeos en formato AVI incrustados en las
paacuteginas web sin necesidad de ninguacuten software o plug-in adicional Brevemente pulsando
con el ratoacuten izquierdo en el viacutedeo se puede detener y reanudar la visualizacioacuten Si se pulsa
con el derecho se despliega un completo menuacute que permite las opciones habituales de un
videoreproductor Es decir funciones hacia delante hacia atraacutes pausa avance y retroceso
raacutepido cuadros principio y fin
Sintaxis
ltEMBED SRC=[URL]
AUTOSTART=[TRUE|FALSE]
LOOP=[TRUE|FALSE]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|
TEXTTOP|MIDDLE|ABSMIDDLE|ABSBOTTOM]gt
SRC=[URL] ndash El URL del fichero AVI
AUTOSTART=[TRUE|FALSE] ndash El fichero AVI se empieza a reproducir tan pronto se
acaba de cargar El valor por defecto es FALSE
LOOP=[TRUE|FALSE] ndash Si el valor es TRUE el fichero reproduce continuamente el viacutedeo
hasta que el usuario pulsa con el ratoacuten en el viacutedeo o cambia de paacutegina web El valor por
defecto es FALSE
WIDTH=[ PIXELS] ndash Especifica la anchura del viacutedeo
HEIGHT=[ PIXELS] ndash Especifica la altura del viacutedeo Las medidas estaacutendar para los
viacutedeos son 90x120 120x160 180x240 y 240x320 todos ellos usando el ratio 43
ALIGN=[TOP|BOTTOM|CENTER|BASELINE|LEFT|RIGHT|TEXTTOP|MIDDLE|ABS
MIDDLE|ABSBOTTOM] ndash funciona igual que en el caso de las consolas de sonido
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 50
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
353 QuickTime
QuickTime es un formato de fichero multimedia desarrollado por Apple Computer cuyo
uso estaacute muy extendido en Internet debido a su versatilidad Un fichero QuickTime puede
incluir viacutedeo sonido muacutesica y texto Una de las uacuteltimas evoluciones del formato
QuickTime es el VR que viene de Virtual Reality o Realidad Virtual QuickTimeVR
permite navegar por escenas y observar objetos desde cualquier perspectiva El plug-in de
QuickTimeVR no viene incluido en los navegadores actuales por lo que hay que
descargarlo e instalarlo antes de poder visualizar este tipo de ficheros
Sintaxis
ltEMBED SRC=[URL]
WIDTH=[ PIXELS]
HEIGHT=[ PIXELS]
AUTOPLAY=[TRUE|FALSE]
CONTROLLER=[TRUE|FALSE]
LOOP=[TRUE|FALSE|PALINDROME]
PLAYEVERYFRAME=[TRUE|FALSE]
HREF=[URL]
TARGET=[FRAME]
PLUGINSPAGE=[URL]
PAN=[FIXED NUMBER]
TILT=[FIXED NUMBER]
FOV=[FIXED NUMBER]
NODE=[INTEGER]
CORRECTION=[NONE|PARTIAL|FULL]
HIDDENgt
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 51
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
SRC=[URL] ndash El URL del fichero QuickTime
PLUGINSPAGE=[URL] es un paraacutemetro opcional que permite especificar el URL donde
se puede conseguir el plug-in necesario para visualizar el fichero Este paraacutemetro es
aceptado solo por el Netscape Navigator El navegador cuando carga la paacutegina si no
encuentra el plug-in necesario para visualizar el fichero avisa al usuario y le permite
conectar con el sitio especificado en el URL desde donde se puede descargarse ese plug-in
En el caso de un fichero QuickTime la direccioacuten recomendada es
httpquicktimeapplecom
WIDTH=[ PIXELS] ndash Especifica la anchura del documento de viacutedeo en pixels Es
necesario especificar la anchura a no se que se use el atributo HIDDEN (explicado maacutes
abajo) No es aconsejable darle un valor inferior a dos ya que puede causar problemas en el
funcionamiento del navegador En caso de no saber el valor exacto se puede abrir el fichero
con el programa MoviePlayer que viene integrado en Windows (playerexe o player32exe)
y conseguir el valor exacto en la opcioacuten Get Info del menuacute Movie Si se indica un valor
menor que la anchura del viacutedeo eacuteste se recorta a la anchura especificada Si el valor es
mayor el viacutedeo se centra en el ancho indicado
HEIGHT=[ PIXELS] ndash Indica la altura del documento de viacutedeo en pixels Hay que tener
en cuenta que si se quiere visualizar una consola para controlar el viacutedeo hay que antildeadir 24
pixels a la altura del viacutedeo Como en el caso de la anchura no es conveniente indicar un
valor inferior a dos se puede utilizar el MoviePlayer para conseguir el valor exacto de la
altura y las consecuencias de indicar un valor menor o mayor son las mismas
HIDDEN ndash Es un paraacutemetro opcional que no lleva valores asociados Si estaacute presente el
viacutedeo seraacute invisible en la paacutegina Se puede utilizar por ejemplo para esconder el control en
un fichero QuickTime que solo contenga audio Este paraacutemetro no es vaacutelido para ficheros
QuickTime VR y Panoramas
AUTOPLAY=[TRUE|FALSE] ndash El fichero QuickTime se empieza a reproducir tan pronto
como el plug-in estima que no va a necesitar esperar por datos adicionales El valor por
defecto es FALSE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y Panoramas
CONTROLLER=[TRUE|FALSE] ndash Indica si la consola de control de viacutedeo es o no visible
El valor por defecto es TRUE Este paraacutemetro no es vaacutelido para ficheros QuickTime VR y
Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 52
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
LOOP=[TRUE|FALSE|PALINDROME] ndash Cuando toma el valor TRUE la reproduccioacuten
del viacutedeo entra en un bucle sin fin Si toma el valor PALINDROME el viacutedeo se reproduce
alternativamente hacia delante y hacia atraacutes El valor por defecto es FALSE Este paraacutemetro
no es vaacutelido para ficheros QuickTime VR y Panoramas
PLAYEVERYFRAME=[TRUE|FALSE] ndash Si se especifica este paraacutemetro a TRUE se
mostraraacuten en pantalla todas las frames del viacutedeo incluso aunque se tenga que reproducir a
una velocidad inferior a la normal El valor por defecto es FALSE Este paraacutemetro no es
vaacutelido para ficheros QuickTime VR y Panoramas Si se utiliza con viacutedeo que contenga
audio el sonido puede ser desabilitado por el navegador
HREF=[URL] ndash Convierte el control QuickTime en un enlace al URL especificado al que
se puede llegar al pulsar con el ratoacuten en el control Este paraacutemetro no es vaacutelido para
ficheros QuickTime VR y Panoramas
TARGET=[FRAME] ndash Funciona igual que en el marcador A y trabaja en combinacioacuten con
la propiedad HREF Este paraacutemetro es vaacutelido solo para ficheros QuickTime
PAN=[FIXED NUMBER] ndash Permite indicar el aacutengulo horizontal inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de 00
a 3600 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
TILT=[FIXED NUMBER] ndash Permite indicar el aacutengulo vertical inicial en grados para la
visualizacioacuten de un fichero QuickTime VR El rango de valores que puede tomar va de ndash
425 a 425 grados Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
FOV=[FIXED NUMBER] ndash Permite indicar el aacutengulo inicial del campo de visioacuten en
grados para la visualizacioacuten de un fichero QuickTime VR El rango de valores que puede
tomar va de 50 a 850 grados Este paraacutemetro no tiene significado para un viacutedeo
QuickTime estaacutendar
NODE=[INTEGER] ndash Permite especificar un nodo inicial para un viacutedeo QuickTime VR
multinodo Este paraacutemetro no tiene significado para un viacutedeo QuickTime estaacutendar
CORRECTION=[NONE|PARTIAL|FULL] ndash Solo aplicable a ficheros QuickTime VR con
objetos y Panoramas
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial
Instituto de Formacioacuten Profesional Curso de disentildeo Web 53
cybertronic-cursowebblogspotcom - Telef 504622 ndash 0973 550896
354 Modelos 3D
Mediante la tecnologiacutea Live3D ya es posible navegar a traveacutes de espacios virtuales en
Internet Esto es posible porque ahora los navegadores saben interpretar ficheros VRML
(Virtual Reality Modeling Language- Lenguaje de Modelado de Realidad Virtual) que
incluyen ademaacutes de la descripcioacuten del mundo virtual por el que navegamos texto
imaacutegenes animaciones sonidos muacutesica e incluso viacutedeo
La sintaxis es muy sencilla y consta solo de la propiedad URL que nos dice donde estaacute el
fichero VRML dentro de un marcador EMBED
Sintaxis
ltEMBED SRC=[URL] gt
DIRECCIOacuteN Y CONSULTAS Prof LIC Juan Areco
REDACCION Prof LIC Juan Areco
E_Mail Cybertroniccdegmailcom Direccion en Internet httpwwwsecretariadocdeblogspotcom
Bibliografiacutea
Weil Pierre G ldquoRelaciones Humanas en el Trabajo y en la Familiardquo Editorial Kapelusz
Chiavento Idalberto ldquoAdministracioacuten de Recursos Humanosrdquo Mc Graw ndashHill
Pueyo Antonio andres ldquo Manual de Psicologiacutea Diferencialrdquo Mc Graw ndashHill Espantildea 1997
Dorsch Friedrich ldquo Diccionario de Psicologiardquo Editorial Herder Barcelona 1994-
Galliano Luciano ldquo Diccionario de Psiquiatriardquo Siglo Veintiuno Ediciones Meacutexico 1995-
Davidoff Linda L ldquo Introduccion a la Psicologiardquo Tercera Edicioacuten Mc Graw ndashHill Meacutexico 1997-
Antildeo 2015 - Material didaacutectico de CYBERTRONIC
Departamento de Ensentildeanza de Informaacutetica registro nuacutemero OKO 1022195 C Y B E R T R O N I C reg
Queda prohibida la reproduccioacuten total o parcial