curso de diseño web

50
Instituto de Formación Profesional Curso de diseño Web 4 Instituto de Formación Profesional Esta es una publicación de CYBERTRONIC ® , Departamento de Enseñanza de Informática, Reconocido por el MEC (Ministerio de Educación y Culto) Res. No. 246 CYBERTRONIC ® ES UNA MARCA REGISTRADA. Edif. Plas 2| Piso Of. 8 y 9 Telef. 504622 E_mail cybertronic.cde@gmail.com Dirección en Internet www.cybertronic-cde.blogspot.com

Upload: cybertronic-instituto

Post on 09-Jul-2015

125 views

Category:

Education


2 download

DESCRIPTION

Curso de Diseño WEB Curso HTML Instituto cybertronic

TRANSCRIPT

Page 1: Curso de Diseño WEB

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

Page 2: Curso de Diseño WEB

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

Page 3: Curso de Diseño WEB

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

Page 4: Curso de Diseño WEB

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

Page 5: Curso de Diseño WEB

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

Page 6: Curso de Diseño WEB

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

Page 7: Curso de Diseño WEB

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

Page 8: Curso de Diseño WEB

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

Page 9: Curso de Diseño WEB

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

Page 10: Curso de Diseño WEB

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

Page 11: Curso de Diseño WEB

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

Page 12: Curso de Diseño WEB

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

Page 13: Curso de Diseño WEB

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

Page 14: Curso de Diseño WEB

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

Page 15: Curso de Diseño WEB

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

Page 16: Curso de Diseño WEB

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

Page 17: Curso de Diseño WEB

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

Page 18: Curso de Diseño WEB

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

Page 19: Curso de Diseño WEB

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

Page 20: Curso de Diseño WEB

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

Page 21: Curso de Diseño WEB

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

Page 22: Curso de Diseño WEB

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

Page 23: Curso de Diseño WEB

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

Page 24: Curso de Diseño WEB

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

Page 25: Curso de Diseño WEB

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

Page 26: Curso de Diseño WEB

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

Page 27: Curso de Diseño WEB

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

Page 28: Curso de Diseño WEB

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

Page 29: Curso de Diseño WEB

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

Page 30: Curso de Diseño WEB

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

Page 31: Curso de Diseño WEB

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

Page 32: Curso de Diseño WEB

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

Page 33: Curso de Diseño WEB

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

Page 34: Curso de Diseño WEB

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

Page 35: Curso de Diseño WEB

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

Page 36: Curso de Diseño WEB

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

Page 37: Curso de Diseño WEB

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

Page 38: Curso de Diseño WEB

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

Page 39: Curso de Diseño WEB

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

Page 40: Curso de Diseño WEB

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

Page 41: Curso de Diseño WEB

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

Page 42: Curso de Diseño WEB

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

Page 43: Curso de Diseño WEB

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

Page 44: Curso de Diseño WEB

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

Page 45: Curso de Diseño WEB

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

Page 46: Curso de Diseño WEB

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

Page 47: Curso de Diseño WEB

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

Page 48: Curso de Diseño WEB

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

Page 49: Curso de Diseño WEB

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

Page 50: Curso de Diseño WEB

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