Apuntes de HTML 2

1

Unidad 1.2: Lenguaje HTML

HTMLContenido

Marquesinas

ImágenesListas ordenadasListas no ordenadasListas de definiciónTablasEnlaces(links)Elementos multimediaFrames(marcos)Formularios

2

3

MarquesinasLas marquesinas son una fracción de texto que se

desplaza a lo largo de la pantalla. No es conveniente abusar de su uso, ya que pueden resultar algo "pesadas". Se definen mediante la etiqueta

<MARQUEE> texto en movimiento </MARQUEE>

Las marquesinas poseen una serie de atributos que nos permiten modificar la marquesina predeterminada:

4

Marquesinas: AtributosBGCOLOR=#xxyyzz

Nos permite cambiar el color de fondo de la marquesina.

WIDTH: Nos permite determinar el ancho de pantalla que ocupará. Podemos expresarlo en puntos o en %.

< MARQUEE WIDTH=50% > ALIGN: Al igual que una imagen o una tabla, las

marquesinas se pueden alinear mediante: TOP, MIDDLE , BOTTOM, pero no con LEFT, RIGHT.

5

Marquesinas: AtributosDIRECTION: Dirección hacia la cual se mueve la

marquesina. Puede ser LEFT (por defecto ) o RIGHT. BEHAVIOR=ALTERNATE

Si introducimos este parámetro, la marquesina "rebotará" de un lado a otro de la pantalla.

SCROLLAMOUNT = XNos permite determinar la cantidad de puntos que se desplazará el texto en cada "salto". Cuanto más pequeña sea la cantidad, mayor será la sensación de "scroll".

SCROLLDELAY = XIndica el tiempo que transcurrirá entre cada salto del texto, expresado en milisegundos

6

Marquesinas : AtributosLOOP: Indica el nº de veces que se repetirá la acción de

la marquesina, que por defecto será infinito.

HSPACE: Permite definir la separación horizontal del texto que esté fuera de la marquesina, con respecto a ella.

VSPACE: Igual que hspace, pero en referencia a la separación vertical.

El tamaño, color, y tipo de fuente de la marquesina los determinaremos mediante las etiquetas tradicionales, como si fuese una parte del texto "común" del documento.

Marquesinas : Ejemplos< MARQUEE WIDTH=”60%” BGCOLOR=”#eeee00” SCROLLDELAY=”200”>

EJEMPLO DE MARQUESINA 1

< / MARQUEE >

________________

<MARQUEE BGCOLOR="PURPLE" WIDTH="50%" SCROLLDELAY="10"> Bienvenido a la página

</MARQUEE>

________________

<marquee bgcolor="#006699" behavior="alternate" direction="right">

<b><font color="#FFFFCC" size="5">Esto es una marquesina </font></b>

</marquee>

7

IMAGENES Para insertar una imagen en un documento HTML se utiliza el

elemento <IMG>, no necesita etiqueta de cierre. Este elemento puede ir acompañado de los atributos SRC, ALT, ISMAP, ALIGN, WIDTH, HEIGTH, BORDER, VSPACE, HSPACE.

Las imágenes utilizadas pueden estar en formato GIF, JPG o PNG.

Se puede usar cualquier otro formato como el MPG o el AVI (ambos de vídeo), pero entonces el visualizador llamará a un programa auxiliar, que previamente le habrás definido, para que sea éste el que visualice el fichero.

Ejemplo: Imagen alineada a la izquierda (por defecto)

<IMG SRC=“chistera.jpg"> texto texto texto texto Imagen con un texto alternativo:

<IMG SRC="sugeren.gif" ALT="AQUI VA UNA IMAGEN">

Imagen alineada a la izquierda. Texto alineado arriba <IMG SRC=“chistera.jpg" ALIGN=TOP> texto texto

texto texto texto

8

IMÁGENES: AtributosALIGN: Permite establecer la alineación de la imagen

y del texto alrededor de la imagen. Puede tomar los valores: LEFT, RIGHT, CENTER (en sentido horizontal), TOP, MIDDLE, BOTTOM (en sentido vertical).

BORDER: Permite establecer un borde o marco a la imagen. Se expresa en pixels y determinará el grosor del mismo. Por defecto tiene el valor 0, sin borde.

HEIGHT: Permite establecer la altura que debe tener la imagen. Se expresa en pixels o en porcentaje (%).

WIDTH: Permite establecer el ancho que debe tener la imagen. Se expresa en pixels o en porcentaje (%).

9

INSERTAR IMÁGENES: AtributosHSPACE: Permite establecer la separación horizontal

entre el texto y la imagen. Se expresa en pixels.

VSPACE: Permite establecer la separación vertical entre el texto y la imagen. Se expresa en pixels.

Cuando no se indica alguno o ninguno de los atributos WIDTH y HEIGHT, el navegador reserva un espacio para la imagen, y al finalizar la carga de la imagen, los elementos que rodean al recurso se desplazan “empujados” por el tamaño original de la imagen.

Los atributos ALIGN, BORDER, HSPACE, VSPACE están en desuso a favor de las hojas de estilo.

10

11

ListasEn HTML, es posible representar enumeraciones de

elementos en formas de listas. Dentro de éstas se podrá incluir cualquier elemento del lenguaje, incluida otra lista (listas anidadas).

Se podrán incluir estas enumeraciones dentro de otros elementos como formularios o tablas, lo que conlleva un gran número de posibilidades y combinaciones de uso.

Se pueden crear 3 tipos de listas: las ordenadas o numeradas, las no ordenadas y las de definiciones.

12

Listas ordenadasLista ordenada (numerada):

1. Primera línea

2. Segunda línea

Se escribe: <OL>

<LI>Primera línea <LI>Segunda línea

</OL>LI no necesita cierre, terminan cuando aparece

otro igual o se cierra la lista.

13

Listas ordenadasTambién se pueden utilizar letras y numeración romana tanto

en mayúsculas como minúsculas. Para esto se utiliza el atributo TYPE del elemento <OL

TYPE=VALOR> con los siguientes valores:

TYPE=1 (por defecto) para números, TYPE=A para letras mayúsculas, TYPE=a para letras minúsculas, TYPE=I para numeración romana en mayúsculas y TYPE=i para numeración romana en minúsculas.

14

Listas ordenadasLista ordenada con letras mayúsculas:

A. Primera línea B. Segunda línea C. Tercera línea D. Cuarta línea

Se escribe: <OL TYPE=A>

<LI>Primera línea <LI>Segunda línea <LI>Tercera línea <LI>Cuarta línea

</OL>

15

Listas ordenadasPara hacer que la lista no comience por el número 1 (por

ejemplo si es una lista que continúa en otra página). Se puede conseguir con el atributo START combinado con TYPE.

Lista ordenada con letras mayúsculas y que comienza por la E:

E. Primera línea

F. Segunda línea

G. Tercera línea

H. Cuarta línea

16

Listas ordenadasSe escribe:

<OL TYPE=A START=5>

<LI>Primera línea

<LI>Segunda línea

<LI>Tercera línea

<LI>Cuarta línea

</OL>

El número que pones en el atributo START indica en qué número o letra comenzará la lista, la E es la quinta letra.

17

Listas no ordenadasLista no ordenada (no numerada):

Primera línea Segunda línea

Se escribe: <UL>


</UL>

18

Listas no ordenadasEn este caso los números han sido

sustituidos por unos puntos gruesos. Esa es la apariencia por defecto; se puede cambiar usando el atributo TYPE con tres valores (el valor por defecto es DISC). Con el valor CIRCLE se verá:

o Primera línea o Segunda línea

Se escribe: <UL TYPE=CIRCLE><LI>Primera línea <LI>Segunda línea

</UL>

19

Listas no ordenadasTambién puede usarse el valor SQUARE. Así:

Primera línea Segunda línea

Se escribe: <UL TYPE=SQUARE>


</UL>

No todos los navegadores soportan el cambio del símbolo asociado a los elementos de la lista, por lo que se deberá comprobar si funciona o no.

20

EjemploRealizar el siguiente ejemplo de listas numeradas y listas no ordenadas.

21

Listas de definiciónEsto es una lista de definición:

Primera línea

Segunda línea

Se escribe:

<DL >

<DT>Primera línea

<DD>Segunda línea

</DL>Fíjate que ahora en lugar del elemento <LI> se utiliza <DT> y

<DD>, y como tipo <DL>. Estos tres nuevos elementos también se pueden usar con cualquiera de los anteriores tipos de lista, alterando por completo su apariencia. Por ejemplo:

22

Listas de definiciónDesordenada simple sin marcas. Comienzo en

margen izquierdo

Línea de texto 1

Línea de texto 2

Línea de texto 3 Se escribe: <DL>

<DT>Línea de texto 1



</DL>

23

Ejemplo con Listas de definiciónRealizar el siguiente ejemplo lista de

definición utilizando los atributos <dt> y <dd>:

Concepto1 Definicion1




23

24

Listas de definiciónEjemplo de imágenes en listas:

Se escribe: <DL>

<DT><IMG SRC="bolaroja.gif">Línea de texto



</DL>

24

25

TABLASLas tablas son uno de los elementos más

potentes en HTML, representan información organizada por filas y columnas.

En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links...

Tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Por defecto se autodimensionan, es decir, se adaptan en tamaño a su contenido, pero también es posible definirlo de forma fija.

25

26

TABLASLas etiquetas para definir tablas son <TABLE>

</TABLE>

En su interior se disponen los sub-elementos:<TR> </TR> para definir una fila (Row) <TH> </TH> para definir una cabecera

(Header) <TD> </TD> para definir una celda de datos

(Data)

Una cabecera <TH> es lo mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

26

27

TABLAS: ejemplosEjemplo de tabla sin bordes:

27

28

TABLASAtributos de las tablas:

BORDER Indica el ancho de los bordes de la tabla. Se mide en píxels. Si no se escribe el nº, es equivalente a BORDER=0 (por defecto).

BORDERCOLOR Su valor es el nombre del color (o su expresión hexadecimal precedida del signo #) que se utilizará como color del borde.

BACKGROUND Asigna una imagen de fondo para la tabla o la celda. Al igual que ocurre con el mismo atributo para el elemento <body>, esta imagen se repetirá tantas veces como sea necesario hasta completar el tamaño del fondo de la tabla.

BGCOLOR Su valor es el nombre del color (o su expresión hexadecimal precedida del signo #) que se utilizará como fondo de la tabla o de una celda.

28

29

TABLAS: ejemplosTabla básica de 3x2 con bordes :

29

30

TABLAS: Fondos de colores o gráficos en las tablas

El atributo BGCOLOR="color" puede utilizarse también para efectos globales. Por ejemplo, para hacer toda la tabla en rojo, sólo sería necesario escribir:

<TABLE BORDER BGCOLOR="red"> .... .... </TABLE>

30

•Una tabla de cuatro celdas. Cada una de un color.

31

TABLASCELLSPACING Indica el número de píxels que separan una

celda de otra. Aunque pueda parecerlo, no hace lo mismo que BORDER. Su valor por defecto es 2.

31

32

TABLASCELLPADDING Indica los píxels de separación entre el borde

de la celda y su contenido. Su valor por defecto es 1.

32

33

TABLASWIDTH Según donde se escriba, sirve para controlar el ancho

de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla.

HEIGHT: fija la altura de la tabla aceptando valores en pixels o en porcentajes relativos a la ventana del navegador.

ALIGN Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro).

VALIGN Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro).

33

34

TABLASROWSPAN Se utiliza en la definición de una celda (<TD>)

o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas.

COLSPAN Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.

NOWRAP Para impedir que las líneas de texto dentro de una celda se trunquen en los espacios en blanco.

34

35

TABLAS<TABLE FRAME="valor"> ... </TABLE> Este atributo

sirve para definir qué bordes del marco de la tabla serán visibles, donde valor puede ser:

void - Ningún lado (por defecto). above - Sólo el borde superior below - Sólo el borde inferior. hsides - Sólo los bordes superior e inferior. vsides - Sólo los lados derecho e izquierdo. lhs - Sólo el lado izquierdo. rhs - Sólo el lado derecho. box - Los cuatro lados. border - Los cuatro lados (no es lo mismo que el ya

conocido)

35

36

TABLAS <TABLE RULES="valor"> ... </TABLE>

este atributo sirve para definir qué bordes de la celda serán visibles, donde valor puede ser:

none - Ninguna línea de división (por defecto).

groups - Sólo aparecen líneas de división entre grupos de filas y grupos de columnas.

cols - Sólo aparecerán líneas de división entre columnas.

rows - Sólo aparece líneas de división entre filas.

36

37

TABLAS: ejemplosEjemplo de línea expandida <ROWSPAN>: para indicar que la

celda es equivalente a un nº determinado de filas.

37

38

TABLAS: ejemplosEjemplo de columna expandida <COLSPAN>: para

indicar que la celda es equivalente a un nº determinado de columnas.

38

39

TABLAS: ejemplosTabla con cabeceras <TH>

39

40

TABLAS: ejemplosCombinación de columna expandida y cabecera

40

41

TABLAS: ejemplosCombinación de cabeceras múltiples y columnas

expandidas

41

42

TABLAS: ejemplosCabeceras laterales

42

43

TABLAS: ejemplosCombinación de cabeceras laterales y líneas

expandidas

43

44

TABLAS: ejemplosEjemplo con todos los elementos y

parámetros

44

45

TABLAS: ejemplosAjustando márgenes y bordes

Tabla con borde = 10

45

46

TABLAS: ejemplosDimensionado de celdas CELLPADDING=10

CELLSPACING=0

Dimensionado de celdas CELLPADDING=0 CELLSPACING=10

46

47

TABLAS: ejemplosDimensionado de celdas CELLPADDING=10

CELLSPACING=10

47

48

TABLAS: Alineación, títulos y subtablasLíneas múltiples en una tabla:

48

49

TABLAS: Alineación, títulos y subtablas

49

• Alineado horizontal del contenido de las celdas. ALIGN=LEFT | RIGHT | CENTER: se puede aplicar individualmente a una celda o a toda la línea

50


50

• Alineado vertical del contenido de las celdas. VALIGN=TOP | BOTTOM | MIDDLE: se puede aplicar individualmente a una celda o a toda la columna

51


51

• Títulos en las tablas. CAPTION ALIGN=TOP /BOTTOM

52


52

• Anidando tablas. La tabla ABCD dentro de la tabla 123456

53

TABLAS: Longitud horizontal de las tablas

53

•Tabla que ocupa el 50 % de la pantalla, y cuyas celdas están dimensionadas al 50 % cada una respecto a la longitud total de la tabla

54

TABLAS: Longitud horizontal de las tablas

54

•Tabla dimensionada al 100 % y celda sin dimensionar

55

TABLAS: Longitud vertical de las tablas

55

•Tabla que ocupa el 50 % horizontal de la pantalla, y el 25 % vertical. HEIGHT=25%

56

TABLAS: Bordes y líneas de división

56

• Tabla que solamente muestra los cuatro bordes

• El atributo <TABLE FRAME="valor"> sirve para definir qué bordes del marco de la tabla serán visibles.• <TABLE RULES="valor"> sirve para definir qué bordes de la celda serán visibles.

57


57

•Tabla que solamente muestra los bordes superior e inferior

58


58

•Tabla que solamente muestra las líneas de división entre columnas

59

TABLASTabla-resumen de los elementos utilizados y los atributos

que admite cada uno:

59

ENLACES O HIPERVÍNCULOS (LINKS)Los enlaces nos permiten crear hipertexto para navegar de una

página a otra o de una parte de un documento a otra parte simplemente haciendo clic sobre dicho enlace.

Un enlace es un área de la pantalla, que puede contener una o varias palabras o una imagen.

Habitualmente por defecto los visualizadores señalan un área linkada subrayándola, si es texto, o poniéndole un borde si es una imagen, ambas cosas en color azul. Son sensibles al paso del ratón en la mayoría de los navegadores(el cursor cambia de aspecto, indicando que se trata de un elemento interactivo).

60

Se definen con la etiqueta <A> (por Anchor, en inglés = ancla o punto de anclaje). En lo sucesivo le llamaremos enlace o simplemente link (en inglés link=eslabón o enlace).

<A HREF= “URL”> texto del hiperenlace</A>Ejemplos:

<A HREF= “http://www.google.es”> ir a google</A>

Se verá así: ir a googlePor defecto aparecen en azul. Para cambiarlo se utilizan los

atributos de body: Link y Vlink

61

ENLACES O HIPERVÍNCULOS (LINKS)

El elemento <A> tiene dos atributos: HREF y NAME.

Enlaces en el mismo documento (estos puntos reciben el nombre de punto de ancla o marcador):

<A HREF= “#Nombredeancla”> Texto del enlace de ancla </A>Parte A del documento

<A NAME= “Nombredeancla”></A> Parte B del documento

62


Ejemplo en el mismo documento:

<A HREF= “#principio”> Ir a principio </A>

En el punto donde queremos ir:<A NAME= “principio”></A>.

63


Enlaces con otro documento:

En el documento activo:

<A HREF= “URL #nombreancla”> texto del enlace de ancla </A>

En el documento destino:

<A NAME= “nombreancla”></A>.

64


Enlace con imagen:

Para hacer un link que nos lleve al índice desde una bola roja, se escribe:

Ir al índice <A HREF="indice.htm">

<img src="bolaroja.gif"> </A>Este sería el resultado:

Ir al índiceAlrededor de la imagen aparece un borde, para quitarlo:

Ir al índice <A HREF="indice.htm">

<img src="bolaroja.gif" border=0> </A>

Ir al índice

65


Dentro de los parámetros pasados a HREF, está http://, esto es, el tipo de servicio al que el visualizador va a llamar, y hay varios :

66


ELEMENTOS MULTIMEDIAIntroducir sonido:

<bgsound src= “”URL”>

Atributo LOOP determina si el sonido se debe repetir 1 o más veces, si se le da el valor infinite el sonido se reproducirá indefinidamente.

Ejemplo:

<BGSOUND SRC=“hola.wav” LOOP=5>

67

ELEMENTOS MULTIMEDIAIntroducir video: deben ser declarados como imagen

dinámica

<IMG DYNSRC=“url">

Se pueden utilizar los atributos de imagen

Atributo LOOP determina cuántas veces se debe reproducirAtributo START indica si el fichero se reproduce al ser cargado

(fileopen) o cuando el usuario pase por encima (mouseover)

Estas etiquetas no forman parte del estándar y sólo se garantiza su funcionamiento con Internet Explorer

68

FRAMES (MARCOS)Los frames (en inglés frame = cuadro, bastidor o marco)

permiten dividir la pantalla en varias áreas independientes unas de otras, y por tanto con contenidos distintos, aunque puedan estar relacionados.

No hay límites para el contenido de cada una de estas áreas: tienen las mismas propiedades que la pantalla completa normal.

No hay que confundir los frames con las tablas. Su apariencia, a veces, puede ser similar, pero mientras el contenido de la celda de una tabla es fijo, en un área de pantalla creado por el elemento FRAME se dispone de todos los recursos del HTML. Es una zona viva.

La etiqueta que define un frame es <FRAMESET> </FRAMESET>, que van despues de la etiqueta <HEAD>.

Las páginas que contienen una definición de FRAME no pueden contener la etiqueta <BODY> </BODY>ni ninguno de las etiquetas que habitualmente aparecen en el BODY . Si esto no se cumple, el FRAME será ignorado.

69

FRAMES (MARCOS) Se puede estructurar la página de distintas formas, por ejemplo:

la parte superior para una cabecera la parte lateral izquierda para la barra de menús dejando el resto para la navegación en sí a través del sitio

web. Es posible definir cualquier combinación de áreas verticales y

horizontales. La clave está en combinar adecuadamente los anidamientos del elemento <FRAMESET> con sus atributos COLS o ROWS según interese.

Ventajas de esta estructura en frames: la navegación es más rápida, ya que parte de los contenidos de la página sólo deberán cargarse una vez (por ejemplo la cabecera y los menús) y existe la posibilidad de dejar el menú del sitio web a la vista.

Inconveniente: los marcos reducen el tamaño de visualización de la ventana principal.

70

FRAMES (MARCOS) Estructura básica de una página con frame .<HTML>

<HEAD><TITLE> ...... </TITLE>

</HEAD> <FRAMESET>

<FRAME > ………..

<FRAME > </FRAMESET>

</HTML>• La etiqueta <frameset> solo admite dos atributos COLS y ROWS

no son compatibles en la misma etiqueta. Con COLS indica divisiones verticales que habrá en el documento y con ROWS divisiones horizontales.

Formato: <frameset cols= nºpixel,nº%,*> <frameset rows= nºpixel,nº%,*>

71

FRAMES(MARCOS)Ejemplos:<frameset rows=100, 25%,*>Con esta instrucción el documento se divide en tres filas, la

1ª medirá 100 pixeles, la 2ª el 25% del tamaño del navegador y la 3ª el espacio restante ya que el * funciona como carácter comodín.

<frameset rows=25%,25%,50%><frameset cols=50%,50%>Para que el navegador sepa que página se va a representar

en cada uno de esos marcos se utiliza la etiqueta <frame> con el atributo src .

Formato: <frame src =“URL”>Ejemplos: <frame src=http://www.google.es> <frame src=“fichero.html”>

72

http://www.google.es/

FRAMES (MARCOS) Un frame de 3 áreas horizontales(ROWS) donde se cargarán las paginas de

renfe, google y terra:

<HTML><HEAD>

<TITLE> frames </TITLE></HEAD><FRAMESET ROWS=25%,25%,50%>

<FRAME SRC="http://www.renfe.com"> <FRAME SRC="http://www.google.es"> <FRAME SRC="http://www.terra.es">

</FRAMESET></HTML>

73

FRAMES (MARCOS) Un frame de 3 áreas VERTICALES (COLS):

<HTML>

<HEAD>

<TITLE>frames </TITLE>

</HEAD>

<FRAMESET COLS=25%,25%,50%>

<FRAME SRC="p1.html">


<FRAME SRC="http://www.terra.es">

</FRAMESET>

</HTML>

74

FRAMES (MARCOS) Un frame combinado de un área vertical y dos horizontales

<HTML>

<HEAD>

<TITLE> FRAMES </TITLE>

</HEAD>

<FRAMESET COLS=20%,*>


<FRAMESET ROWS=40%,*>


<FRAME SRC="http://www.terra.es">

</FRAMESET>

</FRAMESET>

</HTML>

75

FRAMES (MARCOS) Un frame combinado de dos áreas horizontales, la de abajo

dividida en dos verticales

<FRAMESET ROWS=50%,*>

<FRAME SRC="a.htm">

<FRAMESET COLS=50%,*>

<FRAME SRC="b.htm">

<FRAME SRC="c.htm">

</FRAMESET>

</FRAMESET>

76

FRAMES (MARCOS)Los parámetros que dimensionan los frames actúan al

presentar la página inicialmente. Después, si el usuario lo desea, puede redimensionarlos como quiera.

Atributos de la etiqueta <FRAME>: NORESIZE, SCROLLING,FRAMEBORDER,MARGINWIDTH,MARGINHEIGHT,

NAME, SRC.Si no se quiere permitir el redimensionado, se aplica el

atributo NORESIZE al elemento FRAME. Así: <FRAME NORESIZE SRC.....>

Algo parecido ocurre con las barras de scrolling. Están regidas por el atributo SCROLLING, que puede valer YES, NO o AUTO. Por defecto es AUTO. Con esta opción el visualizador decide, en función del contenido, si son necesarias las barras o no. Con YES las pondrá siempre, aunque no sean necesarias, y con NO no las pondrá nunca, aunque sean necesarias.

<FRAME SCROLLING=YES ....>77

FRAMES (MARCOS) FRAMEBORDER se utiliza como atributo de FRAMESET y FRAME y establece

si serán visibles los bordes del frame o no. Puede tener dos valores: YES (por defecto) y NO.

<FRAMESET FRAMEBORDER=NO COLS=30%,30%,40%>

<FRAME SRC="a.htm">

<FRAME SRC="b.htm">

<FRAME SRC="c.htm">

</FRAMESET>

BORDERCOLOR se utiliza como atributo de FRAMESET y FRAME y establece el color de los bordes visibles. Evidentemente, para que funcione, se tendrá que haber establecido FRAMEBORDER=yes

<FRAMESET COLS=30%,30%,40%>

<FRAME BORDERCOLOR="red" SRC="a.htm">

<FRAME BORDERCOLOR="blue" SRC="b.htm">

<FRAME SRC="c.htm">

</FRAMESET>

78

FRAMES (MARCOS)Salir de una pantalla con frames

Para salir de una pantalla compuesta de frames es necesario definir algún link. Por ejemplo si tenemos una ventana con dos frames, cualquier link invocado desde cualquiera de ellos, hace que la página llamada aparezca en ese mismo frame. Para abrir una nueva pantalla en distinto frame , se puede escribir un link con la sintaxis siguiente:

<A HREF="indice.htm" TARGET=“ventana_nueva“> </A>

Existen otros valores para TARGET: TARGET= "_parent" indica que presente la página llamada por el link en el

navegador que se esta ejecutando, sin marcos y sin abrir nuevas ocurrencias del navegador.

TARGET="_blank": Para que el enlace se muestre en una nueva ventana vacía. También puede darse un nombre cualquiera con el mismo efecto.

TARGET="_self": Para mostrar el enlace en la misma ventana o frame que lo referencia (valor por defecto).

TARGET="_top": El documento solicitado se cargará en la pantalla actual, ocupando toda la ventana y destruyendo la estructura de frames anterior, si existe.

79

81

Los frames flotantes permiten insertar una página web en otra en cualquier parte sin que el resultado sea una división total de la página. Se comportan más como una imagen que como un frame.

<iframe></iframe>. Los atributos que admite son los siguientes:name: (texto) Nombre del frame.Width y height: en píxeles.frameborder: idem.scrolling: idem.marginwidth y marginheight: idem.border: grosor en pixels del borde.bordercolor: color del bordeSrc: URL

Frames flotantes

FORMULARIOSLos formularios son la herramienta que se utiliza para

recoger información concreta introducida por el usuario para su posterior procesamiento.

Permiten capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas.

Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesará y devolverá una respuesta (o no). Pueden utilizarse también para enviar su contenido a una dirección de correo electrónico, o que simplemente abran otra página.

82

FORMULARIOSSi el formulario se diseña para abrir una página o

para ser enviado por e-mail, todo se reduce a escribir HTML, pero cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrónico). En este caso, en el servidor tiene que haber un programa especial, creado específicamente para ese formulario, que reciba los datos y sepa qué hacer con ellos, procesarlos y confeccionar la respuesta que remitirá al navegador.

A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface) y pueden estar escritos en Perl, C++, ASP (Active Server Pages), PHP (Hypertext Pre-processor) o JSP (Java Server Pages)

83

FORMULARIOS Con las etiquetas <FORM> </FORM> se define una zona de la

página como formulario dentro del body del documento html. La etiqueta <FORM> tiene los siguientes atributos: NAME,

METHOD, ACTION Y ENCTYPE. NAME: nombre que se le asigne al formulario. Si el formulario va a ser

utilizado en páginas ASP, PHP, o simplemente en VBScript o JavaScript, se necesitará un nombre, ya que el formulario será considerado como un objeto.

METHOD: se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos:

POST : el envío de datos se realiza de forma transparente, sin hacerla visible al usuario. Soporta más longitud. Los datos se envian con el cuerpo del formulario.

GET: se utiliza para llamar a otras páginas. Los datos son visibles en la barra del navegador.

ACTION indica dónde se debe enviar la información del formulario, puede ser una URL o mailto: dirección de correo. Además de enviar datos a un servidor, ACTION también puede realizar una acción en local, por ejemplo traer una página.ENCTYPE: determina la forma de codificación de la información ya sea texto plano (text/plain) o como fichero (multipart/form-data).

El formato mas genérico de la etiqueta <FORM> con los atributos anteriores seria:

<FORM METHOD="POST" ACTION=“URL” ENCTYPE= “text/plain” > </FORM>

84

FORMULARIOSEjemplo:

<FORM NAME="MI_FORMULARIO" METHOD="POST" ACTION="http://miserver.midominio.mipais/indice.htm">

</FORM>

Para enviar un correo:

<FORM METHOD="POST" ACTION="mailto:mi-usuario@miservidor-e-mail"> ......

</FORM>

85

FORMULARIOS

Dentro del formulario puede haber objetos de tres tipos:<INPUT>

Campos de entrada por teclado. Botones de selección. Casillas de marca. Botones de proceso. Botones de inicialización (reset). Imágenes sensibles al ratón.

<TEXTAREA> Ventanas de escritura libre.

<SELECT> Listas desplegables de valores. Listas fijas de valores.

86

FORMULARIOSElementos de un formulario: son cuadros de texto,

botones de selección…Se crean mediante la etiqueta <INPUT> y su atributo

TYPEBOTONES: pueden ser de envío (submit) o de

reinicialización (reset)<input type= “submit” value= “Aceptar”>

<html>

<head></head>

<body>

<H1> Prueba con formularios</H1>

<FORM METHOD="POST" ACTION="prueba">

<INPUT TYPE="SUBMIT" VALUE="Aceptar">

<INPUT TYPE="RESET" VALUE="Inicializar">

</FORM>

</body>

</html> 87

FORMULARIOSCASILLAS DE VERIFICACIÓN (Checkbox): Es un campo

tipo casilla cuadrangular de verificación que puede tomar dos estados: activada (ON) o desactivada (OFF). Los controles de tipo checkbox sólo son enviados cuando están activados. En ese caso el valor por defecto es "On", pero se puede modificar empleando el atributo value, asignándole el valor que queramos que se envíe al estar seleccionado.

Si añadimos checked después del valor aparece seleccionado

Pueden ser seleccionados o deseleccionados con un clic.

Ejemplo:<FORM>

Seleccione sus aficiones <br><INPUT name=“BM" type="checkbox" value="Sí” checked>Bicicleta de montaña <br><INPUT name="FO" type="checkbox" value="Sí">Fotografía

</FORM>

88

FORMULARIOSUn tipo especial de casillas de verificación son los

radiobotones (radiobutton). Sólo permiten seleccionar uno del grupo definido.

Ejemplo: Clase A <INPUT TYPE=“RADIO" NAME="clase"

VALUE="A">Clase B

<INPUT TYPE=“RADIO" NAME="clase" VALUE="B“>

Otro ejemplo: <FORM>

Indique su profesión:<INPUT name="profesion" type="radio" value="ES"

CHECKED>Estudiante<INPUT name="profesion" type="radio"

value="FU">Funcionario<INPUT name="profesion" type="radio"

value="DE">Desempleado</FORM>

89

FORMULARIOSCAMPOS DE TEXTO: por defecto tienen 20 caracteres de longitud. Es

el tipo por defecto del atributo TYPE.Formato: <input type= “TEXT”>

Atributos: Size: define la longitud del cuadro de texto mediante un número. Maxlength: define la longitud máxima de la cadena que se puede

escribir en el cuadro de texto. Si el número es mayor que el tamaño de la caja (especificado con SIZE), el texto se desplazará dentro del rectángulo.

Name: nombre del cuadro. Value: para poner un valor inicial. Readonly: solo de lectura. Especifica que el control no puede ser

modificado por el usuario. Disabled: Cuando se asigna a un control de un formulario deshabilita

el control para la entrada de datos por parte del usuario.

90

FORMULARIOSCAMPOS DE TEXTO:

Ejemplo:

<INPUT TYPE=“TEXT” SIZE=10 MAXLENGTH=10 NAME = “campo1”>

Ejemplo:

<FORM>Nombre: <INPUT name="nombre" type="text">Contraseña:<INPUT name="contraseña"

type="password"></FORM>Con type=“PASSWORD” aparecerán asteriscos en vez del

texto

91

FORMULARIOSAREAS DE TEXTO MULTILINEA: Para introducir en un

formulario un campo de texto multilínea, donde se podrán introducir textos largos, como descripciones o sugerencias, se utiliza la etiqueta

<TEXTAREA> .. </TEXTAREA>

Consiste en una caja de filas y columnas dentro de la cual se introduce el texto. Al no disponer de límite de caracteres, como sucede en los “input tipo text”, las barras de desplazamiento de la caja (scroll) se activan cuando es necesario para permitir visualizar todo el texto.

Se puede incluir un contenido inicial por defecto que se muestra inicialmente al cargar el documento. Éste se incluye entre las etiquetas de apertura y fin.

92

FORMULARIOSAREAS DE TEXTO MULTILINEA: Atributos

NAME: Especifica un nombre para hacer referencia al elemento tipo área de texto del formulario.

COLS: Permite definir el número de columnas visibles de la caja de texto multilínea.

ROWS: Permite definir el número de filas visibles de la caja de texto multilínea.

DISABLED: Permite desactivar la caja de texto.

READONLY: Permite impedir que el contenido de la caja sea modificado por el usuario.

93

FORMULARIOSAREAS DE TEXTO MULTILINEA: Ejemplo 1:introduce un comentario:<p><textarea name="comentario" cols="20" rows="10"></textarea>Ejemplo 2:<P>Nombre:<INPUT name="nombre" type="text"></P> <P>Contraseña:<INPUT name="contraseña" type="password"></P> <TEXTAREA name="consulta" rows="3" cols="30">--

Escriba aquí su consulta--</TEXTAREA> <P><INPUT type="submit" value="Enviar por e-

mail"></P>

94

FORMULARIOSLISTAS DESPLEGABLES(SELECT): son un conjunto de

opciones indicadas por la etiqueta <option> </option>Formato:

<select>

<option> Posibilidad 1 </option>

<option> Posibilidad 2 </option>

</select>

Ejemplo: <SELECT NAME="lista1">

<OPTION>Valor 1

<OPTION>Valor 2

<OPTION>Valor 3

</SELECT>

95

FORMULARIOSLISTAS DESPLEGABLES: Atributos de la etiqueta

SELECTNAME: Especifica un nombre para hacer

referencia al elemento tipo lista del formulario.SIZE: Especifica el número de opciones visibles

en la lista. Si ‘n’ es igual a 1, se mostrará como una lista desplegable. Si ‘n’ es igual a X, se mostrará como una caja de lista con barra de desplazamiento, especificando el número de opciones visibles. Determina el alto de la lista.

MULTIPLE: Si está presente este atributo booleano permite una selección múltiple de opciones. Si no está activado, sólo se permiten selecciones únicas. Para realizar selecciones múltiples se debe usar la tecla CONTROL.

DISABLED: Desactiva el elemento lista del formulario.

96

FORMULARIOSLISTAS DESPLEGABLES: Atributos de la etiqueta

OPTION

VALUE: Especifica el valor que será asociado al parámetro name del <SELECT> cuando se envíe el formulario. Este valor debe ser único para cada opción.

SELECTED: Permite especificar la opción que aparecerá seleccionada cuando se muestre el formulario. Si no se especifica se tomará la primera de ellas por defecto.

La anchura de la lista desplegable vendrá determinada por la opción que mayor número de caracteres tenga.

97

FORMULARIOSLISTAS DESPLEGABLES: Opcionalmente se puede usar

también <OPTGROUP> .. </OPTGROUP> que permite agrupar opciones. Esta etiqueta tiene un atributo LABEL que especificará el rótulo del grupo de opciones. Este rótulo no se puede seleccionar, no es una opción.

Ejemplo:

98

FORMULARIOS Solución:<FORM action=“URL" method="post" enctype="text/plain">

Cuadro de lista desplegable

<p><p><p>

<B>Indique su edad:</B>

<p><p>

<SELECT name="desplegable" size="1">

<OPTION value="<15"><15</OPTION>

<OPTION value="15a20">15-20</OPTION>

<OPTION value="21a30" SELECTED>21-30</OPTION>

<OPTION value="31a40" >31-40 </OPTION>

<OPTION value="41a50“ DISABLED>41-50</OPTION>




<OPTION value=">80">>80</OPTION>99

FORMULARIOS CONTINUACIÓN </SELECT>

<p><p><p>

Cuadro de lista desplazable <p><p>

<B>Indique sus aficiones:</B> <p><p>

<SELECT name="desplazable" size="5" MULTIPLE>

<OPTGROUP label="Naturaleza">

<OPTION value="Senderismo"> Senderismo</OPTION>

<OPTION value="Escalada“ DISABLED> Escalada</OPTION>

<OPTION value="Natación"> Natación</OPTION>

</OPTGROUP>

<OPTGROUP label="Tecnología">

<OPTION value="Fotografía"> Fotografía</OPTION>

<OPTION value="Informática“> Informática</OPTION>

<OPTION value="Imagen">Imagen</OPTION>

</OPTGROUP>

</SELECT>

<INPUT type="SUBMIT" value="Enviar">

</FORM>100

FORMULARIOSENVÍO DE FICHEROS: permite al usuario

seleccionar un fichero que será enviado al servidor junto con el resto del formulario. Su apariencia consiste en una caja de texto, igual a las de tipo text, y un botón con una leyenda (habitualmente "Examinar") que muestra un cuadro de diálogo para seleccionar el archivo local que se desea adjuntar. Para poder emplear este elemento, es preciso que el atributo enctype del formulario se defina con el valor "multipart/form-data".

Formato:<INPUT TYPE=”FILE”>

101

FORMULARIOSENVÍO DE FICHEROS: Ejemplo

<FORM enctype="multipart/form-data" ACTION="ftp://miservidor/" METHOD="POST">

Enviar el fichero: <INPUT NAME="mifichero" TYPE="FILE"><INPUT TYPE="SUBMIT" VALUE="Enviar

fichero"></FORM> </form>

102

FORMULARIOSTIPO OCULTO: Es un campo del formulario que no se

visualizará en el navegador, pero que sí se envía con los datos del mismo (el valor que se envía es el asignado en el atributo value, y será asociado al campo cuyo nombre se indique en el atributo name).

Este tipo de campo se utiliza cuando es preciso enviar información en los formularios sin que el usuario tenga que introducir dicha información.

Formato:<INPUT TYPE=”HIDDEN”>

<FORM><INPUT type="hidden" name="sesion" value="A154">

</FORM>

103

FORMULARIOSAgrupar controles y etiquetas que estén

relacionados: Con la etiqueta <FIELDSET> .. </FIELDSET> se mostrará un rectángulo alrededor de los controles que queramos agrupar.

Si además, le indicamos un título por medio de la etiqueta <LEGEND> .. </LEGEND>, conseguiremos que nuestros formularios sean más comprensibles para los usuarios desde un punto de vista visual y conceptual. Esta etiqueta posee un atributo align con los posibles valores top, bottom, left y right.<form> <fieldset> <legend>Rótulo primer grupo</legend> - controles - </fieldset> <fieldset> <legend>Rótulo segundo grupo</legend> - controles - </fieldset> ... /form>

104

Apuntes de HTML 2

Internet

Transcript of Apuntes de HTML 2