Manual HTML

HTML Básico

1

INDICE Lenguaje HTML ..................................................................................... 2

1.1 Tags Básicos .......................................................................................................................... 2 1.1.1 <HTML> </HTML> ......................................................................................................... 2 1.1.2 <HEAD> </HEAD> ......................................................................................................... 2

1.1.2.1 <TITLE> </TITLE> .................................................................................................... 2 1.1.3 <BODY> </BODY> ........................................................................................................ 3

1.1.3.1 BACKGROUND ........................................................................................................ 3 1.1.3.2 BGPROPERTIES ...................................................................................................... 4 1.1.3.3 BGCOLOR ................................................................................................................ 4 1.1.3.4 MARGINHEIGHT, MARGINWIDTH .......................................................................... 6 1.1.3.5 LINK, ALINK, VLINK ................................................................................................. 6 1.1.3.6 TEXT ......................................................................................................................... 7

1.1.4 Saltos de Línea ............................................................................................................. 8 1.1.5 Títulos .......................................................................................................................... 10 1.1.6 Línea Horizontal ........................................................................................................... 11 1.1.7 Formato del Texto ........................................................................................................ 12

1.1.7.1 Elementos Lógicos ................................................................................................ 12 1.1.7.2 Elementos Físicos ................................................................................................. 13

1.1.8 Caracteres Especiales ................................................................................................. 14 1.1.9 <Blockquote> ............................................................................................................... 17 1.1.10 <Pre> ........................................................................................................................... 18 1.1.11 Fuente del texto. FONT................................................................................................ 18 1.1.12 Hiperenlaces ................................................................................................................ 19 1.1.13 Listas ............................................................................................................................ 21

1.1.13.1 Listas Numeradas .................................................................................................. 21 1.1.13.2 Lista con viñetas .................................................................................................... 23 1.1.13.3 Listas de Definición ............................................................................................... 24

1.1.14 Gráficos ........................................................................................................................ 25 1.1.15 Mapas de Imágenes..................................................................................................... 29 1.1.16 Vídeos .......................................................................................................................... 31 1.1.17 Marcos ......................................................................................................................... 31 1.1.18 Marcos en Línea (IFRAME) ......................................................................................... 36 1.1.19 Comentarios ................................................................................................................. 37

1.2 Formularios ........................................................................................................................... 38 1.3 Objetos ................................................................................................................................. 47

HTML Básico

2

Lenguaje HTML

HTML significa HiperText Markup Language ( Lenguaje de marcas de hipertexto). HTML, es un sistema de marcadores (tags) dentro de un documento para que pueda ser publicado en el World Wide Web. Los documentos preparados en HTML (de ahora en adelante páginas) incluyen referencias a gráficos y marcadores de formato. Se usará un Web browser o navegador (como Microsoft Internet Explorer o Mozilla Firefox) para poder visualizar estas páginas.

1.1 TAGS BÁSICOS

1.1.1 <HTML> </HTML>

Un página simple para la Web comienza con un tag <HTML> . Al final de la página se incluye un tag de cierre </HTML> (el slash significa cierre en HTML). De forma general en HTML todo tag tiene si cierre.

1.1.2 <HEAD> </HEAD>

Dentro del ámbito del marcador <HTML> se incluyen otros marcadores. El marcador <HEAD> permite incluir información que no afecta a la forma de actuar de la página pero

que puede ser utilizada por el navegador, para por ejemplo ponerle título, indicar en que archivos se encuentra la información de estilos, información META para los navegadores etc.

1.1.2.1 <TITLE> </TITLE>

Contiene el título del documento. No da nombre a la página sino que define una cadena que es interpretada como el título de la página. Este título es mostrado en la barra de título de la ventana que muestra la página.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>

Primera página en HTML

</TITLE>

</HEAD>

</HTML>

Es visualizada en el navegador como:

HTML Básico

3

1.1.3 <BODY> </BODY>

Especifica el inicio y el fin del cuerpo de la página. El cuerpo contiene la descripción de la información que será visualizada. Se pueden incluir distintas opciones para controlar los márgenes, el color del fondo, etc.

Ejemplo.-

<HTML>

<HEAD>

<TITLE> Ejemplo de página con BODY </TITLE>

</HEAD>

<BODY>

Texto que es visualizado

</BODY>

</HTML>

1.1.3.1 BACKGROUND

Permite indicar la imagen que será mostrada como fondo de la página. Si la imagen que se muestra es menor que el área de visualización en el navegador, la imagen se mostrará como mosaico para llenar dicho área de visualización.

<BODY BACKGROUND = URL >

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Ejemplo de Imágen de fondo en página</TITLE>

</HEAD>

<BODY BACKGROUND = “imagenes/fondo.gif”>

Página con imagen de fondo

</BODY>

</HTML>

HTML Básico

4

1.1.3.2 BGPROPERTIES

Indica si la imagen de fondo se desplaza con la página cuando se hace scroll, o se queda fija aunque se haga scroll. Si se omite la cláusula se desplaza con la página si se hace scroll. <BODY BGPROPERTIES = “” | “fixed” >

1.1.3.3 BGCOLOR

Permite seleccionar el color de fondo en la página

<BODY BGCOLOR = sColor>

El color se indica como una constante numérica hexadecimal en formato RGB, por ejemplo #FF0000 se corresponde con el rojo; #00FF00 con el verde y #0000FF con el azul. También se puede indicar con el nombre de una constante de color, según la siguiente tabla:

aliceblue (#F0F8FF)

antiquewhite (#FAEBD7)

aqua (#00FFFF)

aquamarine (#7FFFD4)

azure (#F0FFFF)

beige (#F5F5DC)

bisque (#FFE4C4)

black (#000000)

blanchedalmond (#FFEBCD)

blue (#0000FF)

blueviolet (#8ª2BE2)

brown (#A52A2A)

burlywood (#DEB887)

cadetblue (#5F9EA0)

chartreuse (#7FFF00)

chocolate (#D2691E)

coral (#FF7F50)

cornflowerblue (#6495ED)

cornsilk (#FFF8DC)

crimson (#DC143C)

cyan (#00FFFF)

darkblue (#00008B)

darkcyan (#008B8B)

darkgoldenrod (#B8860B)

darkgray (#A9A9A9)

darkgreen (#006400)

darkkhaki (#BDB76B)

darkmagenta (#8B008B)

darkolivegreen (#556B2F)

darkorange (#FF8C00)

darkorchid (#9932CC)

darkred (#8B0000)

darksalmon (#E9967A)

darkseagreen (#8FBC8B)

darkslateblue (#483D8B)

darkslategray (#2F4F4F)

darkturquoise (#00CED1)

darkviolet (#9400D3)

deeppink (#FF1493)

deepskyblue (#00BFFF)

dimgray (#696969)

dodgerblue (#1E90FF)

firebrick (#B22222)

floralwhite (#FFFAF0)

forestgreen (#228B22)

fuchsia (#FF00FF)

gainsboro (#DCDCDC)

ghostwhite (#F8F8FF)

gold (#FFD700)

goldenrod (#DAA520)

gray (#808080)

green (#008000)

greenyellow (#ADFF2F)

honeydew (#F0FFF0)

hotpink (#FF69B4)

indianred (#CD5C5C)

indigo (#4B0082)

ivory (#FFFFF0)

khaki (#F0E68C)

lavender (#E6E6FA)

lavenderblush (#FFF0F5)

lawngreen (#7CFC00)

lemonchiffon (#FFFACD)

lightblue (#ADD8E6)

lightcoral (#F08080)

lightcyan (#E0FFFF)

lightgoldenrodyellow

(#FAFAD2)

lightgreen (#90EE90)

lightgray (#D3D3D3)

lightpink (#FFB6C1)

lightsalmon (#FFA07A)

lightseagreen (#20B2AA)

HTML Básico

5

lightskyblue (#87CEFA)

lightslategray (#778899)

lightsteelblue (#B0C4DE)

lightyellow (#FFFFE0)

lime (#00FF00)

limegreen (#32CD32)

linen (#FAF0E6)

magenta (#FF00FF)

maroon (#800000)

mediumaquamarine

(#66CDAA)

mediumblue (#0000CD)

mediumorchid (#BA55D3)

mediumpurple (#9370DB)

mediumseagreen (#3CB371)

mediumslateblue (#7B68EE)

mediumspringgreen

(#00FA9A)

mediumturquoise

(#48D1CC)

mediumvioletred (#C71585)

midnightblue (#191970)

mintcream (#F5FFFA)

mistyrose (#FFE4E1)

moccasin (#FFE4B5)

navajowhite (#FFDEAD)

navy (#000080)

oldlace (#FDF5E6)

olive (#808000)

olivedrab (#6B8E23)

orange (#FFA500)

orangered (#FF4500)

orchid (#DA70D6)

palegoldenrod (#EEE8AA)

palegreen (#98FB98)

paleturquoise (#AFEEEE)

palevioletred (#DB7093)

papayawhip (#FFEFD5)

peachpuff (#FFDAB9)

peru (#CD853F)

pink (#FFC0CB)

plum (#DDA0DD)

powderblue (#B0E0E6)

purple (#800080)

red (#FF0000)

rosybrown (#BC8F8F)

royalblue (#4169E1)

saddlebrown (#8B4513)

salmon (#FA8072)

sandybrown (#F4A460)

seagreen (#2E8B57)

seashell (#FFF5EE)

sienna (#A0522D)

silver (#C0C0C0)

skyblue (#87CEEB)

slateblue (#6ª5ACD)

slategray (#708090)

snow (#FFFAFA)

springgreen (#00FF7F)

steelblue (#4682B4)

tan (#D2B48C)

teal (#008080)

thistle (#D8BFD8)

tomato (#FF6347)

turquoise (#40E0D0)

violet (#EE82EE)

wheat (#F5DEB3)

white (#FFFFFF)

whitesmoke (#F5F5F5)

yellow (#FFFF00)

yellowgreen (#9ACD32)

Si la página tiene una imagen de fondo, es probable que el color de fondo no se aprecie. Si la imagen de fondo es de tipo GIF con color transparente sí se podrá apreciar el color de fondo que se indique.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Ejemplo de Color de fondo en página</TITLE>

</HEAD>

<BODY BGCOLOR=”#FF0000”>

Página con color de fondo rojo

</BODY>

</HTML>

Produce el mismo resultado que

<HTML>

<HEAD>

<TITLE>Ejemplo de Color de fondo en página</TITLE>

</HEAD>

HTML Básico

6

<BODY BGCOLOR=”red”>

Página con color de fondo rojo

</BODY>

</HTML>

1.1.3.4 MARGINHEIGHT, MARGINWIDTH

Permite indicar los márgenes superior, inferior, izquierdo y derecho en la página medidos en pixels

<BODY

[MARGINHEIGHT = Pixels1]

[MARGINWIDTH = Pixels2]

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Ejemplo de Márgenes en página</TITLE>

</HEAD>

<BODY BGCOLOR=”#FF0000” MARGINHEIGHT = “80px”

MARGINWIDTH = “80px”>

Página con márgenes de 80 pixels

</BODY>

</HTML>

1.1.3.5 LINK, ALINK, VLINK

Permiten indicar el color de los hiperenlaces, de los hiperenlaces activos y de los hiperenlaces ya visitados respectivamente. Solo válido para los hiperenlaces de texto. Un hiperenlace es una zona (de texto o imagen) de la página sensible que permite trasladarnos a otro lugar dentro de la misma página o en otra página distinta al hacer clic con el ratón sobre él. Es la base de la navegación en WWW. Los de texto aparecen normalmente subrayados mostrando diferentes colores según esté activo el hiperenlace, o ya haya sido visitado, o no haya sido visitado pero no esté activo. Un

HTML Básico

7

hiperenlace está activo cuando se ha hecho clic sobre él y se está intentando mostrar la página a la cual está enlazado. Para ver posibles valores del parámetro Color ver página 4. Para ver como se crean hiperenlaces véase más adelante Hiperenlaces página 19

<BODY [ALINK = sColor] [ LINK = nColor2] [ VLINK = nColor3>]>

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con Parámetros LINK de BODY</TITLE>

</HEAD>

<BODY ALINK = “#FFFF00” LINK =”#FF0000” VLINK =”#00FF00”>

<P>

<A HREF = “http://www.microsoft.com”>

Link ya visitado a Microsoft

</A>

</P>

<P>

<A HREF = “http://www.novell.com”> Link activo a Novell</A>

</P>

<P>

<A HREF = “http://www.oracle.com”> Link no visitado a Oracle </A>

</P>

</BODY>

</HTML>

1.1.3.6 TEXT

Indica el color del texto en la página

<BODY TEXT = Color >

Para ver posibles valores del parámetro Color ver página 4.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de prueba de parámetro TEXT en BODY</TITLE>

</HEAD>

<BODY TEXT = “#00FF00”>

Página con color de texto verde

HTML Básico

8

</BODY>

</HTML>

1.1.4 SALTOS DE LÍNEA

Hemos visto hasta ahora que si se incluye texto entre los marcadores de <BODY> ese texto aparece en la página. Si se incluyen varias líneas de texto veremos que al ser visualizadas aparecen en una misma línea:

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de prueba de texto en varias líneas</TITLE>

</HEAD>

<BODY>

Página con texto en una línea

y más texto en otra

</BODY>

</HTML>

Al contrario, texto que aparentemente va a aparecer en una sola línea puede aparecer en el

navegador en líneas distintas si la ventana de este no es capaz de mostrar toda la línea de una vez, produciéndose lo que técnicamente se denomina wordwrap que no es más que pasar de forma automática el texto que no cabe en una línea a la siguiente:

Para lograr que el texto aparezca en párrafos distintos se debe colocar el tag <P> al comienzo de

cada nuevo párrafo. El tag <P> además de hacer que el texto comience en una nueva línea deja un espacio en blanco entre ellas.

HTML Básico

9

<HTML>

<HEAD>

<TITLE>Página de prueba de texto en varias líneas tap P</TITLE>

</HEAD>

<BODY>

<P>Página con texto en una línea</P>

<P>y más texto en otra</P>

</BODY>

</HTML>

Si se incluyen varios tag <P> seguidos, los navegadores los ignorarán y entenderán que solo hay uno,

por lo tanto, no se utilizará este método para abrir espacio en blanco entre varias líneas. Si lo que se desea es comenzar una nueva línea pero no un párrafo distinto se utilizará el tag <BR>

que no tiene tag terminador ya que no es un tag contenedor.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de prueba de texto en varias líneas tag BR</TITLE>

</HEAD>

<BODY>

<P>Volverán las oscuras golondrinas <BR>

de tu balcón sus nidos a colgar <BR>

y jugando ...

</P>

<P>Esta es una poesía de G.A. Bécquer</P>

</BODY>

</HTML>

Se debe tener cuidado con el tag <BR> ya que si la ventana del navegador no es lo suficiente grande

pueden aparecer saltos de línea adicionales. Tenemos también el tag <NOBR> cuyo significado es el contrario: el texto que aparece entre el tag

<NOBR> y </NOBR> no se permite que se divida entre dos líneas evitando el efecto de wordwrap.

HTML Básico

10

El tag <P> admite un modificador para alinear el texto en su interior, es el atributo ALIGN y puede

tomar estos valores: LEFT, RIGHT,CENTER y JUSTIFY.

<HTML>

<HEAD>

<TITLE>Página de prueba de texto en varias líneas tag BR</TITLE>

</HEAD>

<BODY>

<P ALIGN="left">este texto está alineado a la izquierda en la ventana del navegador </P>

<P ALIGN="right">y este otro está alineado a la derecha</P>

<P ALIGN="center">Este sin embargo está centrado</P>

<P ALIGN="justify">El texto de este párrafo queda alineado tanto a la izquierda como

a la derecha excepto la última línea del mismo que queda alineado a la izquierda.

El efecto se ve completo cuando hay varias líneas en el párrafo</P>

</BODY>

</HTML>

1.1.5 TÍTULOS

Los títulos en HTML son texto generalmente en un tamaño superior o cuando menos diferente al del texto normal. Hay hasta seis tipos de títulos desde el <H1> hasta el <H6> que pueden servir para indicar capítulos y subcapítulos. El tipo de letra y el tamaño de la misma depende del navegador en que se muestre.

<Hn [ALIGN alineación] [TITLE tool_tip]>

En donde:

o ALIGN Sirve para indicar la alineación del encabezado respecto al ancho de la página en el navegador. Puede tomar los siguientes valores:

alineami

ento descripción

left Por defecto. Alinea al borde izquierdo

center Alinea al centro right Alinea al borde derecho

justify Justifica el título a izquierda y derecha

HTML Básico

11

o TITLE. Es el texto que se muestra en la banderita amarilla que aparece cuando el puntero del ratón se detiene en el título durante más de dos segundos.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de ejemplo de Títulos</TITLE>

</HEAD>

<BODY>

<H1>Esto es un título de tipo H1</H1>






Esto es texto normal

</BODY>

</HTML>

Como puede verse en la figura los tag de título insertan un salto de línea parecido al del tag <P>.

1.1.6 LÍNEA HORIZONTAL

Se puede utilizar una línea horizontal para dividir visualmente dos zonas de texto de la página. Ello se consigue con el tag <HR> que dibuja una línea horizontal con sombra a lo largo del área de visualización del navegador.

<HR [ALIGN=alineamiento] [COLOR=color] [NOSHADE=”true” | “false”] [SIZE=grosor]

[TITLE=tool_tip] [WIDTH=ancho]

o ALIGN Indica el tipo de alineamiento que se aplica a la línea horizontal dentro de la ventana o del contenedor en donde aparece. Para posibles valores ver Títulos – Align en pág 10

o COLOR Especifica el color con el que se muestra la línea horizontal. Para ver posibles valores del parámetro Color ver página 4.

o NOSHADE Indica si se muestra la línea con efecto 3D o no. o SIZE Indica el grosor de la línea en pixels.

HTML Básico

12

o TITLE Indica el contenido de la bandera amarilla que aparece cuando el puntero del ratón se detiene sobre la línea durante mas de dos segundos.

o WIDTH Especifica el ancho de la línea en pixels o en porcentaje del contenedor en el que se muestra.

No se requiere tag de terminación puesto que no es un contenedor. Pone un salto de párrafo implícito,

tanto antes como después de la línea horizontal.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de ejemplo de Línea Horizontal</TITLE>

</HEAD>

<BODY>


Esto es texto dentro de un párrafo

<HR>

Esto es texto dentro de otro párrafo

</BODY>

</HTML>

1.1.7 FORMATO DEL TEXTO

1.1.7.1 Elementos Lógicos

Son tags que modifican los atributos del texto que se visualiza, que hacen referencia a conceptos lógicos como ejemplo, cita, enfatizado etc. El resultado de estos tags al ser visualizados varía de un navegador a otro. Todos tienen tag finalizador para indicar donde termina la aplicación del formato. o <CITE> Sirve para indicar la mención de una cita de un artículo, de un libro

etc. Normalmente es visualizado con una fuente en cursiva. o <CODE> Sirve para indicar una pequeña cantidad de código de ordenador.

Normalmente en una fuente monoespaciada o de espaciado fijo. o <EM> Sirve para indicar que una sección del texto es significativa desde el

punto de vista del autor. Normalmente es mostrada con una fuente en cursiva. o <KBD> Se usa para indicar una petición de entrada tecleada del usuario. Su

muestra normalmente como una fuente monoespaciada. o <SAMP> Se usa para indicar caracteres de forma literal. Normalmente se

muestra con una fuente monoespaciada.

HTML Básico

13

o <STRONG> Se utiliza para enfatizar una porción de texto. Se muestra habitualmente en una fuente en negrita.

o <VAR> Se usa para indicar un nombre de variable ficticia. Se muestra normalmente en fuente pequeña monoespaciada

o <ADDRESS> Se utiliza cuando se quiere incluir en la página el nombre y dirección del autor del documento o cualquier información sobre los derechos de uso. Normalmente aparece en la parte superior o inferior de la página. Inserta un salto de línea antes de mostrar el texto.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con Formato de Texto con elementos lógicos</TITLE>

<HEAD>

<BODY>

En esta página aparecen diversos formatos de texto aplicados con tags de

elementos lógicos <BR>

En esta línea aparece texto con formato de <CITE>Cita de

autor</CITE><BR>

Aparece texto como <CODE>Código de ordenador</CODE> y texto

<EM>enfatizado</EM><BR>

También aparece <KBD>texto para teclear</KBD> y de

<SAMP>ejemplo</SAMP> <BR>

Texto en <STRONG>Strong</STRONG> y de <VAR>variable ficticia</VAR>

<HR>

<ADDRESS>

Realizado por: Casimir o Montes <BR>

cmontes@c asiopea.moy ano.z a <BR>

</ADDRESS>

</BODY>

</HTML>

1.1.7.2 Elementos Físicos

Son tags que hacen referencia a atributos físicos del texto como por ejemplo negrita, cursiva, etc. Todos necesitan de un tag terminador. o <B> Hace aparecer el texto en negrita o <I> Muestra el texto en cursiva o <TT> Aparece el texto en una fuente monoespaciada.

jesus

jesus

HTML Básico

14

o <U> El texto aparece subrayado o <S> o <STRIKE> Muestra el texto tachado. o <BIG> Muestra el texto en un tamaño de fuente grande o <SMALL> Muestra el texto en un tamaño de fuente pequeña. o <SUB> Muestra el texto como un subíndice o <SUP> Muestra el texto como superíndice

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con Formato de Texto con elementos físicos</TITLE>

<HEAD>

<BODY>

En esta página aparecen diversos formatos de texto aplicados con tags de

elementos físicos<BR>

En esta línea aparece texto en <B>negrita</B> y en <I>cursiva</I><BR>

Aparece texto como <TT>en fuente monoespaciada</TT> y texto

<U>subrayado</U> <BR>

También aparece <S>texto tachado</S><BR>

Texto en <BIG>GRANDE</BIG> y en <SMALL>pequeño</SMALL><BR>

Texto en <SUP>superíndica</SUP> y en <SUB>subíndice</SUB>

</BODY>

</HTML>

1.1.8 CARACTERES ESPECIALES

Hay una serie de caracteres que no aparecen en el conjunto de caracteres básicos ASCII, incluidos los caracteres específicos de determinados idiomas, algunos símbolos matemáticos, etc. La forma de incluir este tipo de caracteres es utilizar un ampersand (&) seguido del nombre del carácter. (En alguno de los ejemplos anteriores se han utilizado caracteres acentuados, tal y como han sido escritos solo se visualizarán correctamente cuando el navegador tenga configurado el idioma como español). En la siguiente tabla se enumeran los símbolos con sus nombres:

Carácter Código Decimal Nombre

“ " "

& & &

< < <

> > >

¡ ¡ ¡

¢ ¢ ¢

£ £ £

HTML Básico

15

¤ ¤ ¤

¥ ¥ ¥

¦ ¦ ¦&brkbar;

§ § §

¨ ¨ ¨ or &die;

© © ©

ª ª ª

« « «

¬ ¬ &not

® ® ®

¯ ¯ ¯ &hibar;

° ° °

± ± ±

² ² ²

³ ³ ³

´ ´ ´

µ µ µ

¶ ¶ ¶

· · ·

¸ ¸ ¸

¹ ¹ ¹

º º º

» » »

¼ ¼ ¼

½ ½ ½

¾ ¾ ¾

¿ ¿ ¿

À À À

Á Á Á

Â Â Â

Ã Ã Ã

Ä Ä Ä

Å Å Å

Æ Æ Æ

Ç Ç Ç

È È È

É É É

Ê Ê Ê

Ë Ë Ë

Ì Ì Ì

Í Í Í

Î Î Î

Ï Ï Ï

Ð Ð Ð

Ñ Ñ Ñ

Ò Ò Ò

Ó Ó Ó

Ô Ô Ô

Õ Õ Õ

Ö Ö Ö

× × ×

Ø Ø Ø

Ù Ù Ù

Ú Ú Ú

Û Û Û

Ü Ü Ü

Ý Ý Ý

Þ Þ Þ

ß ß ß

à à à

á á á

â â â

ã ã ã

HTML Básico

16

ä ä ä

å å å

æ æ æ

ç ç ç

è è è

é é é

ê ê ê

ë ë ë

ì ì ì

í í í

î î î

ï ï ï

ð ð ð

ñ ñ ñ

ò ò ò

ó ó ó

ô ô ô

õ õ õ

ö ö ö

÷ ÷ ÷

ø ø ø

ù ù ù

ú ú ú

û û û

ü ü ü

ý ý ý

þ þ þ

ÿ ÿ ÿ

En la siguiente se muestran las letras griegas y algún símbolo matemático:

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con símbolos</TITLE>

</HEAD>

<BODY>

Para asegurar la correcta visualización de caracteres específicos

de un idioma se deben incluir los

nombres de las letras precedidas de un &amp (ampersand)y terminado en ; (punto y

coma)<BR>

Por ejemplo para mostrar la Ñ se debe poner Ñ<BR>

<HR>

<ADDRESS>&copy Mateo González Manjarrés</ADRRESS>

</BODY>

</HTML>

HTML Básico

17

1.1.9 <BLOCKQUOTE>

Sirve para diferenciar un bloque de texto del resto. Funciona como un elemento <BODY> es decir como un contenedor pudiendo contener tags de formato. Normalmente este grupo de texto es mostrado en los navegadores con un sangrado en el margen izquierdo.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de ejemplo con BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

Este es un texto escrito como texto normal, y por tanto se mostrará sin

ningún tipo de sangría

<BLOCKQUOTE>

Este sin embargo está incluido dentro de un tag

<I><BLOCKQUOTE></I>

y por tanto es mostrado con una sangría

en su margen izquierdo respecto al texto normal

</BLOCKQUOTE>

Esto sin embargo ya está fuera del bloque.

</BODY>

</HTML>

HTML Básico

18

1.1.10 <PRE>

Es un contenedor, en cuyo interior los saltos de línea en el texto, si se traducen en nuevas líneas al ser visualizado. El texto en su interior es visualizado en una fuente monoespaciada por lo que es idóneo para mostrar datos en forma de tabla en donde los datos de las celdas ha de quedar alineado.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página de ejemplo con PRE</TITLE>

</HEAD>

<BODY>

Datos de Ventas por mes

<PRE>

Mes Importe

================

Ene 25.000

Feb 34.000

Mar 134.600

Abr 45.000

May 35.400

Jun 234.000

Jul 87.000

Ago 98.500

Sep 34.800

Oct 345.890

Nov 99.400

Dic 125.700

================

</PRE>

</BODY>

</HTML>

1.1.11 FUENTE DEL TEXTO. FONT

Permite indicar el tipo de letra, el color y el tamaño del texto que contenga, es decir del texto que aparezca entre el tag <FONT> y </FONT>. Hay elementos HTML que no modifican el texto que contienen

HTML Básico

19

si el elemento está dentro del ámbito de <FONT> por lo que habrá que repetir el tag <FONT> dentro de estos elelementos.

El uso del tag <FONT> se desaconseja por anticuado. En su lugar se deben utilizar las hojas de estilo.

<FONT COLOR=color FACE=tipo SIZE=tamaño>

En donde color hace referencia al color que tendrá el texto según la tabla de la página 4. El parámetro tipo hace referencia al nombre de la familia de fuente que se va a utilizar (Arial, Times, Courier New, etc.). Y el parámetro tamaño inidca el tamaño de la fuente, no en puntos, sino en un tamaño predeterminado por el navegador comprendido entre 1 y 7 el mayor.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con distintos tipos de letra</TITLE>

</HEAD>

<BODY>

<H1>

<FONT COLOR=blue FACE="Arial">

Encabezado en arial y color azul

</FONT>

</H1>

<P>Esto es texto sin tipo predefinido</P>

<P>

<FONT FACE="Courier New" SIZE=5>

Y esto en tipo courier y tamaño 5

</FONT>

</P>

</BODY>

</HTML>

1.1.12 HIPERENLACES

Un hiperenlace es una zona, de texto o imagen, sensible de la página desde la cual, haciendo clic con el ratón sobre ella, nos desplazamos a otra página, a otra zona de la misma página o se accede a otros servicios como correo electrónico, FTP etc.

HTML Básico

20

El tag que permite indicar un hiperenlace en una página es el tag <A> con su correspondiente terminador </A>.

<A HREF=URL | NAME=etiqueta>

Todo lo que se encuentra entre el tag <A> y el terminador, es sensible a la pulsación del ratón para desplazarse a otro lugar.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con hiperenlaces</TITLE>

</HEAD>

<BODY>

<H1>Enlaces varios</H1>

Enlace a otra página en otro servidor:

<A HREF=”http://www.elpais.es”>El País</A><BR>

Enlace a otra página en el mismo servidor:

<A HREF=”otra.htm”>Otra página</A><BR>

Enlace a otro lugar de esta misma página:

<A HREF=”#marcador”>Más abajo</A><BR>

<BR>

Enlace a una cuenta de correo electrónico:

<A HREF=”mailto:[email protected]”>Mail para Jaime Bueno</A><BR>

Enlace a un grupo de noticias:

<A HREF=”news:es.alt.chistes”>Chistes</A><BR>

Enlace a un servidor FTP:

<A HREF=”ftp://ftp.rediris.es/pub”>Rediris</A><BR>

Enlace telnet a un servidor:

<A HREF=”telnet://gugu.usal.es”>Gugu en USAL</A>

<BR>

<HR>

<A NAME=”marcador”>

<ADDRESS>

&copy Mateo González<BR>

I.E.S. Venancio Blanco<BR>

SALAMANCA

</ADDRESS>

</BODY>

</HTML>

HTML Básico

21

Nótese en el ejemplo anterior la forma en que se define un marcador en la misma página, y como se escribe un enlace a este marcador. Adviértase también la forma en la que se hacen enlaces a los distintos servicios Internet como FTP, NEWS, etc.

1.1.13 LISTAS

Se pueden definir distintos tipos de listas en HTML

1.1.13.1 Listas Numeradas

Los elementos de la lista aparecerán numerados desde 1 en adelante o desde el valor que se indique en el parámetro TYPE del tag <OL> definitorio de una lista ordenada. Los tags que se utilizan para definir una lista ordenada son: o <OL> Indica el inicio de la lista numerada. Su terminador </OL> indica el fin de

la misma.

<OL [TYPE=tipo][START=número]>

El parámetro TYPE indica el tipo de numeración que se muestra según la siguiente tabla de valores.:

tipo descripción

1 Valor por defecto. Asocia números a cada elemento de la lista

a Asocia letras minúsculas a cada elemento de la lista A Asocia letras mayúsculas con cada elemento de la lista

i Asocia números romanos en minúsculas a cada elemento de la lista

I Asocia números romanos en mayúsculas a cada elemento de la lista

El parámetro START indica el número a partir del cual comienza la numeración de la lista.

o <LH> Indica el encabezado de la lista.. No será numerado o <LI> Indica cada uno de los elementos de la lista.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con lista numerada</TITLE>

</HEAD>

<BODY>

<H1>Canciones del L.P. <I>Tranquilo Majete</I></H1>

<BR>

<OL>

<LH><B>Título</B></LH>

<LI>Tranquilo Majete</LI>

<LI>Lluvia en Soledad</LI>

<LI>La Mujer Barbuda</LI>

<LI>Madera de Colleja</LI>

<LI>Pasa el Tiempo</LI>

HTML Básico

22

<LI>Buena Onda</LI>

</OL>

</BODY>

</HTML>

El siguiente ejemplo muestra una lista numerada con sublistas.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con lista numerada y anidada</TITLE>

</HEAD>

<BODY>

<H1>Delegaciones <I>TEKA S.A.</I></H1>

<BR>

<OL>

<LI>Ávila</LI>

<OL TYPE=a>

<LI>Arévalo</LI>

<LI>Cebreros</LI>

</OL>

<LI>Salamanca</LI>

<OL TYPE=a>

<LI>Béjar</LI>

<LI>Alba de Tormes</LI>

<LI>Ciudad Rodrigo</LI>

</OL>

<LI>Zamora</LI>

<OL TYPE=a>

<LI>Benavente</LI>

<LI>Toro</LI>

</OL>

</OL>

</BODY>

</HTML>

HTML Básico

23

1.1.13.2 Lista con viñetas

Son listas de campos o líneas que no tienen definida una relación o estructura común, en resumen, sin ordenar. El funcionamiento es exactamente el mismo que el de las listas numeradas con la única diferencia de que se utiliza el tag <UL> en sustitución de <OL>

<UL [TYPE=tipo]>

Los posibles valores de tipo son:

Tipo Descripción

disc Asocia un círculo sólido a cada campo en la lista

circle Asocia un círculo hueco a cada campo en la lista

square Asocia un cuadrado lleno a cada campo en la lista

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con lista con viñetas y anidada</TITLE>

</HEAD>

<BODY>

<H1>Delegaciones <I>TEKA S.A.</I></H1>

<BR>

<UL>

<LI>Ávila

<UL TYPE=square>

<LI>Arévalo</LI>

<LI>Cebreros</LI>

</UL>

<LI>Salamanca</LI>

<UL TYPE=square>

<LI>Béjar</LI>

<LI>Alba de Tormes</LI>

<LI>Ciudad Rodrigo</LI>

</UL>

<LI>Zamora</LI>

<UL TYPE=square>

<LI>Benavente</LI>

HTML Básico

24

<LI>Toro</LI>

</UL>

</UL>

</BODY>

</HTML>

1.1.13.3 Listas de Definición

Ofrecen un formato semejante al de una entrada de diccionario, con una entrada de definición y un párrafo indentado. Se utiliza el tag <DL> y su terminador para indicar la descripción de una lista de definición; el tag <DT> para describir la entrada de definición; y el tag <DD> para describir la definición del término.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con Lista de Definición</TITLE>

</HEAD>

<BODY>

<H1>Diccionario: <I>de la A a la Z</I></H1>

<DL>

<DT><I><B>Adermar</B></I></DT>

<DD>Hacer mellas, roturas o hendeduras en el filo del destral, de resultas

de un golpe

</DD>

<DT><I><B>Bayal</B></I></DT>

<DD>Palanca compuesta por dos maderos, uno derecho y otro encorvado,

unidos con una abrazadera de hierro, que sirve en las tahonas para volver

las piedras de un lado a otro cuando es necesario picarlas

</DD>

</DL>

</BODY>

</HTML>

HTML Básico

25

NOTA: Dentro de las listas de un tipo, por ejemplo numeradas, se pueden incluir listas de otro tipo, por ejemplo con viñetas o de definición. La forma de hacerlo sería semejante a la forma en que se anidaron sublistas en los ejemplos anteriores.

1.1.14 GRÁFICOS

Hasta ahora solo sabemos incluir texto en las páginas WWW, y darle formato para que aparezca un poco atractivo a los ojos del internauta. Si se ha navegado por Internet se habrá observado que el principal atractivo de las páginas es la combinación adecuada del texto, que se ha de recordar que es la información útil de una página, junto con elementos gráficos. Se podría resumir en que lo bonito son los gráficos y lo útil el texto.

Antes de ver como se incluyen elementos gráficos en la página se debe discutir un poco sobre lo que

un gráfico representa. Un gráfico es una colección de muchísimos puntos que van a ser mostrados sobre la pantalla del navegante. Esto quiere decir que al mostrar elementos gráficos en nuestra página estamos obligando al visitante de nuestra página a descargar una gran cantidad de bytes, por lo tanto se debe cuidar de este hecho y minimizar el tamaño de nuestros gráficos disminuyendo el número de colores o la resolución a la que se muestra el gráfico, siempre, claro está, que la calidad de visualización del mismo no se vea afectada.

Los formatos de archivos gráficos más usados en la red son el formato .GIF y el formato .JPG,

seguidos del formato .PNG, cada uno con sus pros y sus contras. El formato .GIF usa para mostrar un punto hasta 256 colores diferentes, un poco insuficiente para

mostrar imágenes fotográficas con muchos colores y alta definición. Por el contrario, si nuestro gráfico no precisa de tantos colores, es el formato ideal ya que solo usa un byte por punto y para su almacenamiento utiliza técnicas de compresión con lo que ocupa muy poco espacio y por lo tanto su trasmisión es bastante rápida. Cuenta con otra característica que le hace aún más atractivo para determinados tipos de gráficos y es la posibilidad de definir uno de los colores como trasparente. Esto permite hacer zonas del mismo transparentes viéndose lo que hay tras la imagen. Otra posibilidad muy atractiva de este formato gráfico es la posibilidad de almacenar en un único archivo varias imágenes que son mostradas de forma secuencial, una tras otra dando la apariencia de movimiento, es lo que se denomina GIF animado.

El formato .JPG codifica cada color en 24 bit, lo que da un total de 16,7 millones de colores, lo que

permite reproducir de forma muy fidedigna una imagen con muchos colores y alta definición. Su gran ventaja es la capacidad de compresión del gráfico muy superior a la ofrecida por el formato .GIF

HTML Básico

26

El formato .PNG permite color verdadero, utiliza técnicas de compresión y definir un color como transparente.

De lo expresado se deduce que el formato del gráfico que vayamos a incluir en nuestra página vendrá

dado por el número de colores que contenga el mismo. Para incluir un gráfico en la página se utiliza el tag <IMG>

<IMG SRC= URL [HEIGHT= alto] [WIDTH=ancho]

[HSPACE=margen_horizontal] [VSPACE=margen_vertical]

[ALIGN= alineación] [ALT=texto] [BORDER= borde]

o ÙRL es la dirección Internet del archivo con el gráfico que se va a mostrar o HEIGHT, WIDTH hacen referencia al alto y ancho de la imagen en pixels. Se

puede indicar en tanto por ciento sobre el alto o ancho de la página o del contenedor de la imagen, por ejemplo, WIDTH=“20%” indica un ancho del 20% sobre el ancho de la página. Al modificar el ancho de la página en el navegador la imagen cambiará de tamaño.

o HSPACE y VSPACE indican los márgenes en sentido horizontal y vertical alrededor de la imagen.

o ALIGN Indica como se alinea la imagen respecto al texto que la rodea según la siguiente tabla.

alineación descripción

absbottom Alinea la parte de abajo de la imagen con la parte inferior absoluta del texto.

absmiddle Alinea el centro de la imagen con el centro del texto en vertical.

baseline Alinea la parte de debajo de la imagen con la línea de la parte inferior del texto (baseline)

bottom Alinea la parte inferior de la imagen con la parte inferior del texto

left Es el valor por defecto. Alinea la imagen a la izquierda el texto. Todo el texto precedente y posterior se alinea a la derecha de la imagen

middle Alinea el centro de la imagen con el centro del texto en vertical.

right Alinea la imagen a la derecha el texto. Todo el texto precedente y posterior se alinea a la izquierda de la imagen

texttop Alinea la parte superior de la imagen con el borde absoluto superior del texto.

top Alinea la parte superior de la imagen con la parte superior del texto

o ALT hace referencia al texto que se muestra en los navegadores que no

permiten mostrar gráficos y también es el texto de la bandera amarilla que aparece cuando se sitúa el ratón durante 2 segundos sobre la imagen.

o BORDER indica el ancho del borde que se muestra alrededor de la imagen en pixels.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con Imágenes</TITLE>

</HEAD>

<BODY>

<H1>Galería de Fotos</H1>

<P><IMG SRC="imagenes/tulipan.jpg" HEIGHT="75px" ALIGN="LEFT">

Imagen alineada a la izquierda aunque no se coloque al inicio de la línea

HTML Básico

27

quedará alineada allí y el texto fluirá a su alrededor.

</P>

<P><IMG SRC="imagenes\monte.jpg" HEIGHT="100px" ALIGN="RIGHT">

Imagen alineada a la derecha. Si la ventana del navegador se cambia,

la imagen siempre quedará alineada a la derecha. El texto tambien fluye

a su alrededor

</P>

</BODY>

</HTML>

Ejemplo.-

<HTML>

<HEAD>


</HEAD>

<BODY>

<H1>Galería de Fotos</H1>

<P><IMG SRC="imagenes\tulipan.jpg" HEIGHT="75px" ALIGN="TOP">

Imagen alineada en su parte superior con el texto.Solo respecto a la primera

línea.

</P>

<P><IMG SRC="imagenes\monte.jpg" HEIGHT="100px" ALIGN="CENTER">

Imagen alineada en su parte central con el texto. También

solo respecto a la primera línea.

</P>

<P><IMG SRC="imagenes\cirugia.jpg" HEIGHT="100px" ALIGN="BOTTOM">

Imagen alineada en su parte inferior con el texto

</P>

</BODY>

</HTML>

HTML Básico

28

En el siguiente ejemplo veremos gráficos de tipo .GIF con color transparente, texto alternativo e hiperenlaces.

Ejemplo.-

<HTML>

<HEAD>


</HEAD>

<BODY BGCOLOR="moccasin">

<H1>La Web del Moyano</H1>

<A HREF=”concursar.htm”>

<IMG SRC="imagenes\concurso.gif"

ALT= “Concursar en directo" HEIGHT="50px" BORDER="0">

</A>

<A HREF="http://www.elpais.es">

<IMG SRC="imagenes\cultura.gif"

ALT="Noticias Culturales" HEIGHT="50px" BORDER="0">

</A>

<A HREF="buscar.htm">

<IMG SRC="imagenes\saberMas.gif"

ALT="Saber más" HEIGHT="50px" BORDER="0">

</A>

</BODY>

</HTML>

HTML Básico

29

1.1.15 MAPAS DE IMÁGENES

Se trata de imágenes, con zonas o áreas bien definidas que permiten la navegación a destinos diferentes cuando se hace clic con el ratón sobre alguna de estas zonas.

Existe la posibilidad de indicar que el proceso de averiguar en qué zona de la imagen se hizo clic y

averiguar a que destino se debe ir, se realice en el lado del servidor o en el lado del cliente. La tendencia en la actualidad es que este proceso se realice del lado del cliente para descargar de proceso al servidor. Sólo vamos a ver esta última manera.

Las zonas sensibles de un mapa de imagen pueden ser de varios tipos: de forma rectangular, de

forma circular o de forma de polilínea. Aunque se puede realizar la descripción de las regiones de forma manual, como veremos más

adelante, para este proceso se recomienda la utilización de algún programa de diseño de páginas WWW como por ejemplo Microsoft Front Page, o Macromedia Dreamweaver.

Vamos a ver un ejemplo de definición de un mapa de imagen y posteriormente comentaremos el

formato de los tag HTML para realizarlo.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Universidades de España</TITLE>

</HEAD>

<BODY>

<H1>Universidades de España</h1>

<P>&nbsp</P>

<MAP name=”Mapa”>

<AREA HREF=”http://www.iesvb.com/baleares.htm”

COORDS=”404, 193, 66” ALT= “Baleares” SHAPE=”circle”>

<AREA HREF=”http://www.iesvb.com/castillaleon.htm” ALT=”Castilla y León”

SHAPE=”polygon” COORDS=”91, 41, 121, 39, 148, 33, 160, 41, 176,

48, 179, 39, 191, 32, 199, 32, 208, 40, 206, 48, 207, 60, 205,

72, 207, 82, 222, 82, 242, 82, 249, 94, 238, 110, 239, 125, 225,

128, 222, 118, 202, 114, 150, 164, 128, 168, 120, 160, 102, 158, 101,

152, 77, 157, 89, 112, 103, 99, 91, 92, 91, 81, 76, 81, 89, 37, 87,

40”>

<AREA HREF=”http://www.iesvb.com/canarias.htm” ALT=”Canarias”

SHAPE=”rect” COORDS=”284, 311, 491, 399”>

</MAP>

<P>

<IMG BORDER=”0” SRC=”images/Espana.gif” WIDTH=”492px”

HEIGHT=”400px” USEMAP=”#Mapa”>

</P>

</BODY>

</HTML>

HTML Básico

30

En el ejemplo se ha definido un mapa de imagen con tres zonas sensibles: una de tipo circular para las Islas Baleares, otra de forma rectangular para las Islas Canarias y finalmente otra de tipo polilínea para Castilla y León.

Nótese que para indicar que una imagen es un mapa de imagen con zonas sensibles se acompaña a

la definición de la imagen el parámetro USEMAP

<IMG BORDER=”0” SRC=”images/Espana.gif” WIDTH=”492px” HEIGHT=”400px”

USEMAP=”#Mapa”>

Tras el parámetro se incluye el nombre de la definición del mapa que se definirá con el tag <MAP>.

<MAP name=”Mapa”>

<AREA HREF=”http://www.moyano.za/baleares.htm” COORDS=”404, 193, 66”

ALT= “Baleares” SHAPE=”circle”>

<AREA HREF=”http://www.moyano.za/castillaleon.htm” ALT=”Castilla y León”

SHAPE=”polygon” COORDS=”91, 41, 121, 39, 148, 33, 160, 41, 176, 48, 179,

39, 191, 32, 199, 32, 208, 40, 206, 48, 207, 60, 205, 72, 207, 82, 222,

82, 242, 82, 249, 94, 238, 110, 239, 125, 225, 128, 222, 118, 202, 114,

150, 164, 128, 168, 120, 160, 102, 158, 101, 152, 77, 157, 89, 112, 103, 99,

91, 92, 91, 81, 76, 81, 89, 37, 87, 40”>

<AREA HREF=”http://www.moyano.za/canarias.htm” ALT=”Canarias”

SHAPE=”rect” COORDS=”284, 311, 491, 399”>

</MAP>

Como se ve, dentro del ámbito de influencia del tag <MAP> ... </MAP> se definen las zonas sensibles mediante el tag <AREA>

<AREA REF.=”URL” COORDS=”coordenadas” ALT=”texto” SHAPE=”circle” | “rect” |

“poly”>

o URL hace referencia al destino al que navegar si el usuario hace clic sobre la zona. Coordenadas es una lista de coordenadas separadas por comas y depende del tipo de región indicado por el parámetro SHAPE.

SHAPE COORDS

HTML Básico

31

circle “x1,y1,r” x1,y1 son las coordenadas del centro y r es el radio del círculo

poly “x1,y1,x2,y2...xn,yn” cada par xi,yi son las coordenadas de cada vértice de la polilínea

rect “x1,y1,x2,y2” x1,y1 hace referencia a la esquina superior izquierda del rectángulo, x2,y2 hace referencia a la esquina inferior derecha del rectángulo

o ALT indica el texto que es mostrado cuando el ratón se detiene sobre la zona

sensible durante 2 segundos. NOTA: La dirección de destino de las zonas sensibles y en general de cada hipervínculo se muestra

de forma automática en la línea de estado en la parte inferior de los navegadores

1.1.16 VÍDEOS

El tag <IMG> sirve también para mostrar un video en la página WWW. Se utiliza el parámetro DYNSRC en lugar del parámetro SRC.

<IMG DYNSRC= URL [HEIGHT= alto] [WIDTH=ancho] [ALIGN= alineación] [LOOP=veces]

[ALT=texto] [BORDER= borde]>

El parámetro LOOP indica las veces que se va a repetir la reproducción del video. Un valor de –1 indica reproducción continua, un valor de 0 ó 1 indica reproducción una sola vez y cualquier otro valor la cantidad que se indique.

Ejemplo.-

<IMG DYNSRC=”http://www.iesvb.com/videos/instituto.avi” WIDTH=”50px” LOOP=1

ALT=”Video del Instituto”>

1.1.17 MARCOS

Un marco define un área de la pantalla para contener una subpágina. Los marcos se pueden distribuir dividiendo la pantalla en bandas verticales u horizontales, y cada una de ellas se puede a su vez volver a subdividir. El tag definitorio de marcos es <FRAMESET> y es un contenedor de tags <FRAME> que define cada uno un marco. En cada marco se mostrará una página HTML distinta. Se debe incluir un tag terminador </FRAMESET>. El tag <FRAMESET> remplaza al tag <BODY> en la definición de la página.

<FRAMESET [BORDER=espacio_entre_marcos]

[COLS=marcos_verticales] [ROWS=marcos_horizontales]

[FRAMEBORDER=0 | 1] [TITLE=tool_tip]

o BORDER Especifica el tamaño del borde exterior alrededor de todos los marcos, especificado en pixels.

o COLS Especifica que la ventana actual será subdividida en subpáginas o marcos verticales. Los valores aparecerán separados por comas y representan la anchura horizontal de los marcos en que se subdividirá el marco actual. Los posibles valores pueden especificarse en pixels o en porcentaje relativo al marco padre, o también especificarse relativo a los otros submarcos en que se dividirá el marco padre haciendo uso del carácter *. Véase algún ejemplo más adelante.

o ROWS Especifica que la ventana actual será subdividida en subpáginas o marcos horizontales. Los valores aparecerán separados por comas y representan la altura vertical de los marcos en que se subdividirá el marco

HTML Básico

32

actual. Los posibles valores pueden especificarse en pixels o en porcentaje relativo al marco padre, o también especificarse relativo a los otros submarcos en que se dividirá el marco padre haciendo uso del carácter *. Véase algún ejemplo más adelante.

o FRAMEBORDER Indica si aparecerá borde alrededor de todos los marcos (valor 1), o no (valor 0).

o TITLE Indica el texto que es mostrado cuando el ratón se detiene en los marcos durante más de dos segundos.

Si aparece en la misma descripción las opciones ROWS y COLS las definiciones de los marcos se

distribuirán de izquierda a derecha y de arriba abajo. Cada uno de los marcos en que se subdivide un marco padre se define con el tag <FRAME> <FRAME [FRAMEBORDER=0 | 1] [HEIGHT=alto][WIDTH=ancho]

[NAME=nombre] [NORESIZE=”true” |”false”]

[MARGINHEIGHT=margen_vertical] [MARGINWIDTH=margen_horizontal]

[SCROLLING= “yes” | “no” | “auto”] [SRC=URL] [TITLE=tool_tip]

o FRAMEBORDER India si se dibuja el borde alrededor del marco (valor 1 o true) o no se muestra (valor 0 o false).

o HEIGHT Indica el alto del marco en pixels o en tanto por ciento de la ventana padre.

o WIDTH Indica el ancho del marco en pixels o en tanto por ciento de la ventana padre.

o NAME Sirve para indicar el nombre del marco para posteriores referencias desde un hiperenlace mediante la opción TARGET.

o NORESIZE Indica que el marco no se puede cambiar de tamaño por acción del usuario cuando arrastra el borde del marco con el ratón.

o MARGINHEIGHT Indica el tamaño del margen vertical (superior e inferior) alrededor del marco. Se mide en pixels.

o MARGINWIDTH Indica el tamaño del margen horizontal (izquierdo y dere-cho) alrededor del marco. Se mide en pixels.

o SCROLLING Indica si se muestran las barras de desplazamiento o no, o se muestran de forma automática si la ventana del explorador no es capaz de mostrar todo el contenido del marco.

o SRC Indica la dirección en Internet (dirección URL) de la página HTML que será mostrada en el marco.

o TITLE Contiene el texto que se muestra cuando el puntero del ratón se detiene sobre el marco durante más de dos segundos.

Existe el tag <NOFRAMES> sirve para incluir texto que será visualizado en aquellos navegadores que

no soportan el tag <FRAMESET>. Necesita de tag delimitador </NOFRAMES>. En los navegadores que si soportan la visualización de marcos el texto contenido en el tag <NOFRAMES> es descartado.

Vamos a ver algún ejemplo de páginas con marcos:

<HTML>

<HEAD>

<TITLE>Página con Marcos</TITLE>

</HEAD>

<FRAMESET ROWS=”*,*” COLS=”*,*”>

<FRAME SRC=”http://www.marca.es”>

<FRAME SRC=”http://www.abc.es”>

<FRAME SRC=”http://www.elpais.es”>

HTML Básico

33

<FRAME SRC=”http://www.diarioas.es”>

</FRAMESET>

<NOFRAMES>

Esta página contiene marcos <BR>

Y su navegador no los soporta

</NOFRAMES>

</HTML>

En el ejemplo anterior debe advertirse como se han utilizado las opciones COLS y ROWS para definir los cuatro marcos de idéntico tamaño: “*,*” significa dividir en dos el ancho del navegador si se está hablando de la opción COLS y y de igual alto si se está hablando de la opción ROWS. Nótese también que al utilizar ambas opciones lo que se está haciendo es una subdivisión de tipo tabla cartesiana. Por ejemplo si se hubiera deseado que el marco dedicado al Marca y al ABC tuvieran doble altura que el dedicado a El País y al Diario As la codificación de los marcos habría quedado:

<HTML>

<HEAD>


</HEAD>

<FRAMESET ROWS=”2*,*” COLS=”*,*”>





</FRAMESET>

<NOFRAMES>



</NOFRAMES>

</HTML>

HTML Básico

34

Se debe apreciar en el ejemplo la aparición de las barras de desplazamiento de forma automática dado que el contenido de las páginas que se muestran en cada marco no cabe en ellos.

En lugar del asterisco para definir el tamaño de los marcos se podría haber utilizado del mismo modo

el porcentaje. Por ejemplo la última página de marcos la habríamos conseguido también:

<HTML>

<HEAD>


</HEAD>

<FRAMESET ROWS=”67%,33%*” COLS=”50%,50%”>





</FRAMESET>

<NOFRAMES>



</NOFRAMES>

</HTML>

El uso más corriente para definir marcos es el de establecer un marco como índice o menú de

opciones del sitio web en la parte superior de la ventana o en la parte izquierda de la misma. Cuando el usuario pulsa en una opción en el índice se actualiza el o los otros marcos de la página. Con un ejemplo se verá mejor.

Supongamos que queremos diseñar una página que sirva de enlace a los principales periódicos a

nivel nacional. Para una muestra con los cuatro del ejemplo anterior basta. La idea es que en un marco izquierdo aparezcan los enlaces a estos cuatro periódicos y cuando seleccione el usuario uno de ellos en el marco de la derecha aparezca la página web de ese periódico. La página podría tener una apariencia como:

HTML Básico

35

Página de marcos:

<HTML>

<HEAD>

<TITLE>Periódicos de ámbito nacional</TITLE>

</HEAD>

<FRAMESET COLS=”125,*”>

<FRAME SRC=”indice.htm”>

<FRAME NAME=”Diario” >

</FRAMESET>

<NOFRAMES>



</NOFRAMES>

</HTML>

Página Indice.htm

<HTML>

<HEAD>

<TITLE>Indice de Periódicos</TITLE>

</HEAD>

<BODY BGCOLOR=bisque>

<H4>Periódicos</H4>

<HR>

<A TARGET=”Diario” HREF=”http://www.elpais.es”>El País</A><BR>

<A TARGET=”Diario” HREF=”http://www.abc.es”>ABC</A><BR>

<A TARGET=”Diario” HREF=”http://www.marca.es”>Marca</A><BR>

<A TARGET=”Diario” HREF=”http://www.diarioas.es”>Diario As</A>

</BODY>

</HTML>

En la página de marcos hay que destacar que se puso nombre al marco de la derecha (NAME=”Diario”) y que se dejó en blanco la dirección de destino de este marco con lo que aparecerá vacía la primera vez que se muestre.

En la página Indice.htm se debe resaltar la manera en que se hace que en el marco de la derecha

aparezca la página de un periódico u otra (TARGET=”Diario”) Como nombre que se incluye en la opción TARGET se pueden incluir nombres predeterminados con

un significado especial. Son los siguientes:

HTML Básico

36

Nombre Significado

_blank La página se cargará en una nueva ventana en blanco

_parent Carga el documento en la ventana anterior. Si no hay ventana anterior actúa lo mismo que _self

_self Valor por defecto. Carga la página en la ventana actual

_top Carga la página en la ventana primera o principal del navegador

1.1.18 MARCOS EN LÍNEA (IFRAME)

Como una extensión a los marcos <FRAME> en Microsoft Internet Explorer aparecen los marcos en línea (especificados dentro del propio código HTML de la página) definidos con el tag <IFRAME>. Definen al igual que el tag <FRAME> zonas rectangulares de la página en donde se pueden mostrar distintas páginas HTML deforma simultanea. En las últimas versiones del Internet Explorer se permite definir el fondo del marco como transparente y solapar varios marcos en la misma posición jugando con su posición z para crear efectos visuales..

<IFRAME [ALIGN=alineamiento] [FRAMEBORDER=0 | 1]

[HEIGHT=altura] [WIDTH=anchura]

[HSPACE=margen_exterior_horizontal] [VSPACE=margen_exterior_vertical]

[MARGINHEIGHT=margen_interior_vertical]

[MARGINWIDTH=margen_interior_horizontal]

[NAME=nombre_marco]

[SCROLLING= “auto” | “yes” | “no”] [SRC=dirección_URL] [TITLE=tool_tip]

o ALIGN es semejante a la ya vista para el tag <IMG> en la página 26. o Las propiedades FRAMEBORDER, HEIGHT, WIDTH, MARGINHEIGHT,

MARGINWIDTH, NAME ,SCROLLING y SRC son equivalentes a las vistas en el tag <FRAME> en la página 32.

o HSPACE y VSPACE Indican el margen exterior alrededor del marco en horizontal y vertical respectivamente.

o TITLE Sirve para indicar el texto que aparece en forma de bandera amarilla cuando el puntero del ratón se detiene sobre el marco durante más de dos segundos.

Ejemplo.-

<HTML>

<HEAD>

<TITLE>Página con IFRAME</TITLE>

</HEAD>

<BODY BGCOLOR=”beige”>

<H1 ALIGN=”center”>Prensa española</H1>

<H5>Periódicos</H5>

<TABLE BORDER=”0” HEIGHT=”75%” WIDHT=”800px”>

<TR>

<TD VALIGN=”top” WIDTH=”150px”>

<A HREF=”http://www.elpais.es” TARGET=”marco”>

El País</A><BR>

<A HREF=”http://www.abc.es” TARGET=”marco”>Diario ABC</A><BR>

HTML Básico

37

<A HREF=”http://www.elmundo.es” TARGET=”marco”>

El Mundo</A><BR>

<A HREF=”http://www.marca.es” TARGET=”marco”>Marca</A>

</TD>

<TD>

<IFRAME ALIGN=”right” WIDTH=”650px” HEIGHT=”100%”

NAME=”marco”>

</TD>

</TR>

</TABLE>

</BODY>

</HTML>

1.1.19 COMENTARIOS

Dentro del código HTML se pueden incluir comentarios con el tag . También se puede usar el tag <COMMENT> y su terminador </COMMENT> aunque se recomienda el primero por ser este último obsoleto.

HTML Básico

38

1.2 FORMULARIOS

Los formularios proveen un interface para adquirir, mostrar y devolver información desde y hacia un cliente. Mediante el uso de controles como cajas de texto, botones de opción, caja de opción, listas desplegables, etc. tan familiares en las aplicaciones de tipo windows, se implenta la posibilidad de intercambiar información entre un cliente y un servidor.

En una página HTML los controles antes mencionados han de aparecer dentro del contenedor

formulario <FORM>. Cuando los controles contenidos en el formulario son enviados (submitted) al servidor solo el nombre y el valor de dichos controles es enviado.

<FORM ACTION=URL [ID=identificador] [METHOD=”get | post”] [NAME=nombre]

o ACTION Indica la dirección URL del script en el servidor que procesará la información suministrada por el cliente

o ID Sirve para identificar de forma inequívoca al formulario. Es el que se utiliza generalmente para acceder a las propiedades del form en scripts de Javascript.

o NAME Identifica al formulario y es el dato que se pasa cuando el formulario es enviado (submitted).

o METHOD Indica la forma en que es enviada la información suminsitrada por el cliente en los controles del formulario. Si se esecifica get la información de los controles se añade a la URL indicada en ACTION¸ por pares nombre=valor con el siguiente formato:

URL?name=value&name=value&name=value

Tiene limitada la cantidad de información en 256 caracteres y su uso se está abandonando debido a visibilidad de la información enviada por el cliente como parte de la URL de la página a la que se llama. Con el método post la información tambien se compone en pares nombre=valor pero esta es enviada a través de variables de entorno en la transacción http, no siendo por lo tanto directamente visible.

Los controles se añaden a las páginas Web como elementos HTML. Los controles que permiten la introducción directa de texto por parte del usuario son: INPUT

type=text, INPUT type=password, y TEXTAREA

INPUT type=”text” [DISABLED= “true | false”] [ID= identificador]

[NAME= nombre] [MAXLENGHT= número_máximo_caracteres]

[READONLY=” true | false”] [SIZE= tamaño_en_caracteres]

[TABINDEX=lugar_tabulación] [TITLE= tool-tip] [VALUE= valor_texto]

[WIDTH= ancho]

o DISABLED Indica si la caja de texto está activa y puede coger el foco o desactivada y por lo tanto no puede coger el foco ni modificar su contenido.

o ID Sirve para identificar de forma unívoca al formulario. Es el que se utiliza generalmente para acceder a las propiedades del from en scripts.

o NAME Identifica al formulario y es el dato que se pasa cuando el formulario es enviado (submitted).

o MAXLENGTH Indica el número máximo de caracteres que el usuario puede introducir en el control.

HTML Básico

39

o READONLY Indica si el usuario podrá modificar el contenido de la caja de texto o no

o SIZE Indica el ancho del control en número de caracteres. Dependiendo de su relación con MAXLENGTH, serán visibles todos los caracteres que contiene la caja o no en cuyo caso el usuario puede hacer scroll para verlos.

o TABINDEX Indica la posición que ocupa el control en la rueda de paradas de tabulación para tomar el foco.

o TITLE Indica el texto que aparecerá en la bandera amarilla que se muestra al lado del control cuando el ratón se detiene dentro del mismo durante más de 2 segundos

o VALUE Indica el texto que contiene el control en cada momento. Es de uso frecuente en scripts.

INPUT type=”password” [DISABLED=” true | false”] [ID= identificador]

[NAME= nombre] [READONLY=” true | false”] [SIZE= tamaño_en_caracteres]


En cuanto a funcionamiento es similar a type=”text” con la salvedad de que los caracteres introducidos no son visibles para el usuario.

<HTML>

<HEAD>

<TITLE>Página de acceso</TITLE>

</HEAD>

<BODY>

<FORM ACTION =”http://www.iesv/uno. asp ”>

<LABEL FOR=”txtNombre” >

Usuario:

</LABEL>

<INPUT TYPE=”text” NAME=”Nombre” VALUE=””

SIZE=”25” TABINDEX=”1” ID=”txtNombre” /><br>

<LABEL FOR=”txtPassword” >

Contraseña:

</LABEL>

<INPUT TYPE=”password” NAME=”Password” VALUE=””

SIZE=”8” tabindex=”2” ID=”txtPassword” />

</FORM>

</BODY>

</HTML>

Tanto este como el anterior solo permiten la introducción de una línea de texto. El siguiente control permite la introducción de texto en varias líneas.

TEXTAREA [COLS=caracteres_ancho] [DISABLED=” true | false”]

[ID= identificador] [NAME= nombre]

http://www.iesvb.es/uno.asp

HTML Básico

40

[READONLY=” true | false”] [ROWS=filas]


Las propiedades del mismo nombre tienen el mismo significado que en los controles anteriores. Las demás propiedades tienen el siguiente significado:

o COLS Indica el número de caracteres de ancho del elemento. o ROWS Indica el número de filas del control, lo que define el alto del control.

<HTML>

<HEAD>

<TITLE>Página de acceso</TITLE>

</HEAD>

<BODY>

<FORM ACTION ="http://www.iesv/uno. asp">

<LABEL FOR="txtNombre" >

Usuario:

</LABEL>

<INPUT TYPE="text" NAME="Nombre" VALUE=""

SIZE="25" TABINDEX="1" ID="txtNombre" /><BR>

<LABEL FOR="txtPassword" >

Contraseña:

</LABEL>

<INPUT TYPE="password" NAME="Password" VALUE=""

SIZE="8" tabindex="2" ID="txtPassword" /><BR>

<LABEL FOR="txtComentario" >

Observaciones:

</LABEL>

<TEXTAREA COLS="25" ROWS="5" ID="txtComentario"

NAME="Comentario">

</TEXTAREA>

</FORM>

</BODY>

</HTML>

HTML Básico

41

Los controles que permiten la elección de opciones entre varias prefijadas son la caja de opción, el botón de opción y las listas desplegables.

INPUT type=”checkbox” [CHECKED][DISABLED=” true | false”] [ID= identificador]

[NAME= nombre] [READONLY=” true | false”] [SIZE= tamaño_en_caracteres]

[TABINDEX=lugar_tabulación] [TITLE= tool-tip] [VALUE= valor]

Las propiedades que coinciden en nombre con los controles anteriores tienen idéntico significado.

o CHECKED Indica que el control aparecerá seleccionado. o VALUE Indica el contenido del control. Solo es enviado si el usuario

seleccionó el control.

INPUT type=”radio” [CHECKED][DISABLED=” true | false”]

[ID= identificador][NAME= nombre] [READONLY=” true | false”]

[SIZE= tamaño_en_caracteres][TABINDEX=lugar_tabulación]

[TITLE= tool-tip] [VALUE= valor]

Es idéntico en sus propiedades a la caja de opción. Su utilización es apropiada cuando el usuario ha de realizar una opción entre varias de forma excluyente, por ejemplo, ha de escoger un estado civil, o está casado o soltero o divorciado etc. pero no puede tener dos estados de forma simultánea. Para indicar que varios botones de opción se refieren a la misma elección se les pondrá el mismo nombre (mismo valor en la propiedad NAME).

El tag FIELDSET permite agrupar controles poniéndoles un marco alrededor de ellos. Es un tag de

tipo bloque y debe incluir un tag terminador.Se puede incluir un tag LEGEND para incluir un texto en la parte superior del marco.

FIELDSET [ALIGN=alineamiento]

El parámetro ALIGN sirve para indicar como se alinea dentro de su contenedor el elemento pudiendo tomar los valores que también se muestran en la página 26

LEGEND

Es un tab d bloque y debe llevar tag terminador. Su función es incluir un texto en la parte superior de un bloque FIELDSET por que ha de ser el primer elemento que se incluya en este.

En el siguiente ejemplo se ve el uso de todos los controles vistos hasta ahora: <HTML>

<HEAD>

<TITLE>Pedido</TITLE>

</HEAD>

<BODY BGCOLOR="silver">

<FONT FACE="Arial">

<H1>Pedido</H1>

<FORM ACTION=”http://www.ies/pedido.asp” METHOD=”post”>

<TABLE>

<TBODY>

<TR>

<TD COLSPAN="2">

<FIELDSET >

<LEGEND><B>Datos</B></LEGEND>

<TABLE align="center">

HTML Básico

42

<TBODY>

<TR>

<TD ALIGN=”right”>nombre:</TD>

<TD ALIGN=”left”>

<INPUT TYPE="text" NAME="nombre" ID="nombre"

SIZE="25" MAXLENGHT="40" />

</TD>

</TR>

<TR>

<TD ALIGN="right">dirección:</TD>

<TD ALIGN="left">

<INPUT TYPE="text" NAME="direccion" ID="direccion"


</TD>

</TR>

<TR>

<TD ALIGN="right">teléfono:</TD>

<TD ALIGN="left">

<INPUT TYPE="text" NAME="telefono" ID="telefono"


</TD>

</TR>

</TBODY>

</TABLE>

</FIELDSET>

</TD>

</TR>

<TR VALIGN="top">

<TD>

<FIELDSET>

<LEGEND><B>Tamaño</B></LEGEND><BR>

<INPUT TYPE="radio" CHECKED NAME="tamanio" ID="tamanio"

VALUE="p" >pequeña<BR />

<INPUT TYPE="radio" NAME="tamanio" ID="tamanio"

VALUE="m" />mediana<BR />

<INPUT TYPE="radio" NAME="tamanio" ID="tamanio"

VALUE="f" />familiar<BR />

</FIELDSET>

</TD>

<TD>

<FIELDSET>

<LEGEND><B>Ingredientes</B></LEGEND><BR>

<INPUT TYPE="checkbox" checked NAME="queso" ID="queso"

VALUE="q" />queso<BR />

<INPUT TYPE="checkbox" NAME="bacon" ID="bacon"

VALUE="b" />bacon<BR />

<INPUT TYPE="checkbox" NAME="salami" ID="salami"

VALUE="s" />salami<BR />

<INPUT TYPE="checkbox" checked NAME="pimientos"

ID="pimientos" VALUE="i" accesskey="i">pimientos<BR />

<INPUT TYPE="checkbox" NAME="champinion"

ID="champinion" VALUE="c" />champiñón<BR />

</FIELDSET>

</TD>

</TR>

HTML Básico

43

</TBODY>

</TABLE>

</FORM>

</FONT>

</BODY>

</HTML>

Adviertase como se ha utilizado una tabla (se verá en el tema dedicado a maquetación) para situar la

infomación, como se han usado los tag FIELDSET. Por último vamos a ver el control de lista desplegable que se define con el tag SELECT. La función de

este control es permitir al usuario la elección de una de las diversas opciones (líneas) que aparecen en el mismo.

SELECT [ALIGN= alineamiento][DISABLED= true | false] [ID= identificador]

[MULTIPLE] [NAME= nombre] [SIZE= tamaño_en_filas]

[TABINDEX=lugar_tabulación] [TITLE= tool-tip]

[VALUE= valor_texto]

Los parámetros con igual nombre que los ya vistos en controles anteriores tienen idéntico significado.

o MULTIPLE Indica que es posible seleccionar varios elementos en la lista o SIZE Indica el número de filas que son visibles en la lista.

Mediante el tag OPTION se indica el contenido de la lista, cada tag OPTION hace referencia a una línea en la lista.

HTML Básico

44

OPTION [ID= identificador] [SELECTED] [VALUE= valor]

El valor contenido en el parámetro VALUE es el que se envía al servidor si la línea es la seleccionada. El parámetro SELECTED indica que la línea se mostrará seleccionada.

<HTML>

<HEAD>

<title>Reserva de vuelo</title>

</HEAD>

<BODY>

<H1>Reserva de pasaje</H1>

<HR />

<FORM ACTION=”http://www.iesvreserva.php” METHOD=”post”>

día:

<INPUT TYPE="text" SIZE="2" MAXLENGHT="2" VALUE="1" NAME="dia" ID="dia" />

mes:

<SELECT NAME="mes">

<OPTION SELECTED VALUE="1">Enero</OPTION>

<OPTION VALUE="2">Febrero</OPTION>

<OPTION VALUE="3">Marzo</OPTION>

<OPTION VALUE="4">Abril</OPTION>

<OPTION VALUE="5">Mayo</OPTION>

<OPTION VALUE="6">Junio</OPTION>

<OPTION VALUE="7">Julio</OPTION>

<OPTION VALUE="8">Agosto</OPTION>

<OPTION VALUE="9">Septiembre</OPTION>

<OPTION VALUE="10">Octubre</OPTION>

<OPTION VALUE="11">Noviembre</OPTION>

<OPTION VALUE="12">Diciembre</OPTION>

</SELECT>

año:

<SELECT NAME="anio">

<OPTION SELECTED VALUE="1">2001</OPTION>

<OPTION VALUE="2">2002</OPTION>

<OPTION VALUE="3">2003</OPTION>

</SELECT>

</FORM>

</BODY>

</HTML>

HTML Básico

45

Cuando el formulario es enviado al servidor se trasmite el par name=value en el caso de selección simple, y el par name=valor1,valor2,valor3... en el caso de selección múltiple.

Hemos visto hasta ahora como el usuario puede introducir información en un FORM. Vamos a ver

ahora como puede realizar el envío de esta información a una servidor para ser procesada. El envío de la información desde el cliente al servidor se puede realizar de una de las siguientes

formas:

Control INPUT type=”submit”

INPUT type=submit [DISABLED= true | false] [ID= identificador]

[NAME= nombre] [SIZE= tamaño_en_caracteres]


VALUE contiene el texto que aparecerá encima del botón. Cuando se pulsa el botón el contenido de los controles del formulario se envía al servidor para su proceso.

Control INPUT type=”image”

Muestra una imagen sobre la cual se puede hacer clic para proceder al envío de la información al servidor.

INPUT type=”image” [ALIGN=alineamiento]

[ALT=texto] [DYNSRC=URL_video] [DISABLED= “true | false”]

[ID= identificador] [LOOP=veces]

[NAME= nombre] [SIZE= tamaño_en_caracteres] [SRC=URL_imagen]

[TABINDEX=lugar_tabulación] [TITLE= tool-tip]

La imagen queda identificada por el parámetro SRC, siendo posible tambien visualizar un video si se incluye en su lugar el parámetro DYNSRC.

Control BUTTON type=”submit”

El control BUTTON es el control botón y su uso principal es a través de scripts enlazados con su evento onclick.

BUTTON type=”submit [DISABLED= “true | false”] [ID= identificador]

[NAME= nombre] [TABINDEX=lugar_tabulación] [TITLE= tool-tip]

[VALUE= valor]

Todos los parámetros ya han sido comentados con anterioridad.

Método submit dentro de un script

La última forma de enviar el contenido de los controles de un FORM es haciendo uso del método submit del objeto FORM.

Existe la posibilidad de limpiar todos los campos de un formulario a sus valores por defecto o bien utilizando un botón de reset o utilizando el método del objeto FORM llamado reset.

Control INPUT type=”reset”

HTML Básico

46

INPUT type=reset [DISABLED=” true | false”] [ID= identificador]

[NAME= nombre] [SIZE= tamaño_en_caracteres]


VALUE contiene el texto que aparecerá encima del botón.

Control BUTTON type=”reset”

BUTTON type=”reset” [DISABLED=” true | false”] [ID= identificador]

[NAME= nombre] [TABINDEX=lugar_tabulación] [TITLE= tool-tip]

[VALUE= valor][WIDTH= ancho]

En el siguiente ejemplo se ve un formulario completo con botones para enviar y reiniciar los datos. El envío de información se hace al pulsar sobre una imagen.

<HTML>

<HEAD>

<TITLE>Página con Submit</TITLE>

</HEAD>

<BODY BGCOLOR="#c0c0c0">

<FORM METHOD="post" ACTION="grabar.asp">

e-mail: <INPUT TYPE="text" NAME="email" SIZE="50" MAXLENGTH="255" />

<BR />

comentarios:<BR />

<TEXTAREA COLS="50" ROWS="15" NAME="comentarios" />

</TEXTAREA><BR />

<INPUT TYPE="image" src="imagenes/enviar.gif" NAME="enviar"

VALUE="Enviar" />

<INPUT TYPE="reset" NAME="cancelar" VALUE="cancelar" />

</FORM>

</BODY>

</HTML>

HTML Básico

47

1.3 OBJETOS

Mediante el tag <OBJECT> podemos incluir en una página elementos que el navegador no es capaz de interpretar por si mismo sino que precisa de programas externos (plugins o extensiones) para su correcta interpretación como por ejemplo applets de java o presentaciones flash.

<OBJECT [NAME=”nombre”][HEIGHT=”alto”][WIDTH=”ancho”]

[ARCHIVE=”url”][CODE=”url”][CODEBASE=”url”][DATA=”url”]

[CLASSID=”url”][STANDBY=”texto”][TYPE=”tipo”]

Los atributos no conocidos son:

o ARCHIVE. Url o lista de Url’s que se precisan ser precargadas por el componente o CODE. Url al archivo de clase Java para el elemento o CODEBASE. Url al código base del elemento o DATA. Url a los datos usados por el elemento o CLASSID. Identificador de clase para el objeto o STANDBY. Asigna un mensaje que el navegador puede mostrar mientras el objeto

se esté cargando. o TYPE. Designa el tipo de contenido del recurso definido en el atributo "data".

En el siguiente ejemplo se muestra una imagen como un objeto:

<OBJECT DATA="http://www.htmlquick.com/es/img/links/button.jpg"

TYPE="image/jpg">

</OBJECT>

En el siguiente se muestra una animación flash.

<OBJECT CLASSID= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

CODEBASE="http://download.macromedia.com/pub/shockwave/cabs/flash/

swflash.cab#version=4,0,0,0" ID="HTMLQuick"

WIDTH="88" HEIGHT="31">

<PARAM NAME="movie"

VALUE= "http://www.htmlquick.com/es/img/examples/htmlquick.swf" />

<PARAM NAME="quality" VALUE="high" />

<PARAM NAME="bgcolor" VALUE="#FFFFFF" />

<EMBED SRC="http://www.htmlquick.com/es/img/examples/htmlquick.swf"

QUALITY="high"

PLUGINSPAGE=”http://www.macromedia.com/go/getflashplayer “

TYPE="application/x-shockwave-flash"


</EMBED>

</OBJECT>

En el siguiente se muestra un objeto a un vídeo en Youtube:

<OBJECT WIDTH="425" HEIGHT="344">

<PARAM NAME="movie"

VALUE="http://www.youtube.com/v/HvNMY0Fk580&hl=en&fs=1">

</PARAM>

HTML Básico

48

<PARAM NAME="allowFullScreen" VALUE="true">

</PARAM>

<EMBED SRC="http://www.youtube.com/v/HvNMY0Fk580&hl=en&fs=1"

TYPE="application/x-shockwave-flash" ALLOWFULLSCREEN="true"


</EMBED>

</OBJECT>

En el siguiente se incluye un applet de java:

<OBJECT CODETYPE="application/java" CLASSID="AudioItem"


<PARAM NAME="snd" VALUE="Hola.au|Bienvenido.au">

</PARAM>

Applet Java que reproduce un sonido de bienvenida.

</OBJECT>

Y el siguiente a un archivo de sonido:

<OBJECT CLASSID="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"

WIDTH="150" HEIGHT="175" TYPE="audio/midi">

<PARAM NAME="FileName" VALUE="../sonidos/xfiles.mid"></PARAM>

<PARAM NAME="autostart" VALUE="true"></PARAM>

</OBJECT>

En casi todos ellos dentro del tab OBJECT se utilizan tags PARAM. El tag <PARAM> define un parámetro para ser usado en un tag HTML OBJECT. Estos valores pueden ser usados por el objeto contenedor en tiempo de ejecución, para definir valores iniciales. Deben estar ubicados justo después del tag de apertura del objeto.

<PARAM NAME=”nombre” VALUE=”valor” [VALUETYPE=”data | ref | object”]

[TYPE=”tipo-contenido”]

En alguno de los ejemplos anteriores tambien ha aparecido el tag EMBED que sirve para incrustar un archive multimedia en una página. Puede aparecer dentro de un tag OBJECT o el solo, en este caso el tipo de archivo arrancar el programa (plugin o extensión) asociado a ese tipo de contenido.

Así por ejemplo se lanzará la ejecución de un archivo de sonido de tipo mid:

<EMBED TYPE="audio/x-midi" SRC="BackInTheSaddle.mid" HIDDEN="true"

AUTOSTART=”true”>

En la dirección http://cit.ucsf.edu/embedmedia/step1.php encontrarás un generador de código html para poder reproducir distintos tipos de archivos multimedia.

http://cit.ucsf.edu/embedmedia/step1.php

Manual HTML

Documents

Transcript of Manual HTML